@lucca-front/ng 22.1.0-rc.1 → 22.1.0-rc.2

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

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, afterNextRender, DestroyRef, computed, afterRenderEffect, untracked, Injectable, ElementRef, signal, model, linkedSignal, output, contentChild, viewChild, ChangeDetectorRef, forwardRef, booleanAttribute, ViewEncapsulation, effect, EventEmitter, DOCUMENT, NgZone } from '@angular/core';
-import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, luBooleanAttribute, intlInputOptions, luOptionalNumberAttribute, isNil, PortalDirective, luNumberAttribute } from '@lucca-front/ng/core';
+import { input, Directive, InjectionToken, inject, ChangeDetectionStrategy, Component, TemplateRef, Pipe, ViewContainerRef, Injector, afterNextRender, DestroyRef, afterRenderEffect, untracked, computed, Injectable, ElementRef, signal, model, linkedSignal, output, contentChild, viewChild, ChangeDetectorRef, forwardRef, booleanAttribute, ViewEncapsulation, effect, EventEmitter, ApplicationRef, DOCUMENT, NgZone } from '@angular/core';
+import { syncInputSignal, ɵeffectWithDeps as _effectWithDeps, isNotNil, luBooleanAttribute, intlInputOptions, luOptionalNumberAttribute, isNil, PortalDirective, luNullableNumberAttribute, injectMediaMinBreakpoint, luNumberAttribute } from '@lucca-front/ng/core';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { toObservable, toSignal, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
-import { FILTER_PILL_INPUT_COMPONENT, FILTER_PILL_HOST_COMPONENT } from '@lucca-front/ng/filter-pills';
-import { BehaviorSubject, skip, take, map, startWith, switchMap, of, distinctUntilChanged, observeOn, asyncScheduler, filter, scan, timer, concatMap, catchError, tap, takeWhile, finalize, takeUntil, ReplaySubject, Subject, defer } from 'rxjs';
+import { FILTER_PILL_INPUT_COMPONENT, FILTER_PILL_HOST_COMPONENT } from '@lucca-front/ng/filter-pills/core';
+import { FORM_FIELD_INSTANCE } from '@lucca-front/ng/form-field';
+import { BehaviorSubject, skip, take, map, startWith, switchMap, of, distinctUntilChanged, observeOn, asyncScheduler, filter, EMPTY, timer, defer, catchError, defaultIfEmpty, tap, expand, scan, takeWhile, finalize, ReplaySubject, Subject } from 'rxjs';
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { Treeitem, OptionComponent } from '@lucca-front/ng/listbox';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
@@ -268,6 +269,53 @@ function getGroupTemplateLocation(hasGrouping, clue, options, searchable = true)
     }));
     return toSignal(location$, { initialValue: hasGrouping() ? 'group-header' : 'none' });
 }
+/**
+ * Requests the next page for as long as the panel's scroll viewport can't scroll.
+ *
+ * Pagination is driven by the scroll event: reaching the bottom of the viewport asks the consumer
+ * for the next page. A page that doesn't overflow the viewport therefore never asks for anything —
+ * there is nothing to scroll. The popover panel caps its content at 20rem, which a page of options
+ * always overflows, so this never came up; the bottom sheet is only as tall as its content instead,
+ * so a first page of a few options leaves it short of a scrollbar and pagination stops right there.
+ *
+ * So the viewport is measured again after every render and, while it still can't scroll, the next
+ * page is requested. The option count is what guards against an endless loop: a page that brought
+ * no new option — the data source is exhausted — is never requested twice. A new search landing on
+ * exactly the same count as the last requested page is the one case left unfilled, which the next
+ * scroll — or the next keystroke — resolves on its own.
+ *
+ * The request itself is deferred by a microtask: the panel's first render happens inside the sheet's
+ * own `ApplicationRef.tick()`, which `openPanel` runs *before* subscribing the select input to the
+ * panel ref, so a page requested straight from that render would be emitted into the void. A
+ * microtask lands once `openPanel` has returned, still well ahead of anything the user could do.
+ *
+ * Must be called from an injection context.
+ */
+function fillScrollViewport({ viewport, optionCount, loading, nextPage, }) {
+    let lastRequestedCount = null;
+    let destroyed = false;
+    inject(DestroyRef).onDestroy(() => (destroyed = true));
+    afterRenderEffect({
+        read: () => {
+            const element = viewport();
+            const count = optionCount();
+            if (!element || loading() || count === 0 || count === lastRequestedCount) {
+                return;
+            }
+            // `scrollHeight` and `clientHeight` are both rounded, so a sub-pixel difference between
+            // them isn't a scrollbar: the same 1px tolerance as the panels' scroll handler applies.
+            if (element.scrollHeight - element.clientHeight > 1) {
+                return;
+            }
+            lastRequestedCount = count;
+            queueMicrotask(() => {
+                if (!destroyed) {
+                    untracked(nextPage);
+                }
+            });
+        },
+    });
+}
 
 class CoreSelectKeyManager {
     #destroyRef = inject(DestroyRef);
@@ -571,12 +619,12 @@ class LuOptionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: true, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, queries: [{ propertyName: "treeitemContent", first: true, predicate: Treeitem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionContext", first: true, predicate: LU_OPTION_CONTEXT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div>\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LuOptionComponent, isStandalone: true, selector: "lu-select-option", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, grouping: { classPropertyName: "grouping", publicName: "grouping", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, groupIndex: { classPropertyName: "groupIndex", publicName: "groupIndex", isSignal: true, isRequired: false, transformFunction: null }, optionIndex: { classPropertyName: "optionIndex", publicName: "optionIndex", isSignal: true, isRequired: true, transformFunction: null }, scrollIntoViewOptions: { classPropertyName: "scrollIntoViewOptions", publicName: "scrollIntoViewOptions", isSignal: true, isRequired: false, transformFunction: null }, groupTemplateLocation: { classPropertyName: "groupTemplateLocation", publicName: "groupTemplateLocation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onlyParent: "onlyParent", onlyChildren: "onlyChildren" }, queries: [{ propertyName: "treeitemContent", first: true, predicate: Treeitem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionContext", first: true, predicate: LU_OPTION_CONTEXT, descendants: true, isSignal: true }], ngImport: i0, template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div class=\"listboxOption-content-value\">\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: LuOptionOutletDirective, selector: "[luOptionOutlet]", inputs: ["luOptionOutlet", "luOptionOutletValue", "luOptionShowNull"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: LuTooltipTriggerDirective, selector: "[luTooltip],[prTooltip]", inputs: ["luTooltip", "prTooltip", "luTooltipEnterDelay", "prTooltipEnterDelay", "luTooltipLeaveDelay", "prTooltipLeaveDelay", "luTooltipDisabled", "prTooltipDisabled", "luTooltipOnlyForDisplay", "prTooltipOnlyForDisplay", "luTooltipPosition", "prTooltipPosition", "luTooltipWhenEllipsis", "prTooltipWhenEllipsis", "luTooltipAnchor", "prTooltipAnchor", "luTooltipTriggerAnchor", "prTooltipTriggerAnchor", "id"], exportAs: ["luTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OptionComponent, selector: "lu-listbox-option", inputs: ["elementId", "checked", "mixed", "disabled", "hovered", "add", "group", "groupId", "select", "selectAll", "treeitemLevel"] }, { kind: "pipe", type: LuOptionGroupPipe, name: "luOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 _a = LuOptionComponent;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LuOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective, NgTemplateOutlet, OptionComponent], template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div>\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"] }]
+            args: [{ selector: 'lu-select-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuOptionOutletDirective, PortalDirective, LuOptionGroupPipe, LuTooltipTriggerDirective, NgTemplateOutlet, OptionComponent], template: "<lu-listbox-option\n\t[checked]=\"selectableItem.isSelected()\"\n\t[hovered]=\"selectableItem.isHighlighted()\"\n\t[disabled]=\"selectableItem.disabled\"\n\t(click)=\"selectOption($event)\"\n\t[elementId]=\"selectableItem.idAttribute()\"\n\t[treeitemLevel]=\"treeitemContent() ? level : null\"\n>\n\t<ng-container [ngTemplateOutlet]=\"optionContent\" />\n\t<!-- Re-projected into the option's own wrapper, so the tree rows are stacked by the listbox\n\titself: the level has to be passed along because a content query stops at this ng-content -->\n\t<ng-content select=\"[treeitem]\" ngProjectAs=\"[treeitem]\" />\n</lu-listbox-option>\n\n<ng-template #optionContent>\n\t<div class=\"listboxOption-content-value\">\n\t\t<ng-container *luOptionOutlet=\"optionTpl(); value: selectableItem.option()\" />\n\n\t\t@if (groupTemplateLocation() === \"option\") {\n\t\t\t@if (grouping(); as grouping) {\n\t\t\t\t<div class=\"listboxOption-content-group\">\n\t\t\t\t\t<ng-container *luPortal=\"grouping.content; context: { $implicit: selectableItem.option() | luOptionGroup: grouping.selector }\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (hasChildren() && !selectableItem.disabled) {\n\t\t<div class=\"optionItem-icons\">\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon parentOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyParent.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyParent\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyParent }}</span>\n\t\t\t</span>\n\t\t\t<span\n\t\t\t\tclass=\"optionItem-icon childrenOnly\"\n\t\t\t\t(click)=\"$event.stopPropagation(); onlyChildren.emit()\"\n\t\t\t\t[luTooltip]=\"intl().onlyChildren\"\n\t\t\t\tluTooltipOnlyForDisplay\n\t\t\t>\n\t\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\topacity=\"0.2\"\n\t\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl().onlyChildren }}</span>\n\t\t\t</span>\n\t\t</div>\n\t}\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));display:block;scroll-margin:var(--pr-t-spacings-50)}.listboxOption[role=group] :host{scroll-margin-block-start:var(--pr-t-spacings-400)}}@layer mods{:host.withAddOption{scroll-margin-block-end:var(--pr-t-spacings-600)}}@layer components{.optionItem{position:relative}}@layer components{.optionItem-value{position:relative;border-radius:var(--pr-t-border-radius-default);display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);transition:background-color 50ms;cursor:pointer;overflow-wrap:anywhere}.optionItem-value ::ng-deep .avatar{margin-inline-end:var(--pr-t-spacings-75)}}@layer mods{.optionItem-value.is-selected,:host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-50, var(--palettes-product-50))}.optionItem-value.is-selected:before,:host-context([aria-selected=true]) .optionItem-value:before{content:\"\";position:absolute;inset-block:0;inset-inline-start:calc(var(--pr-t-spacings-50) * -1);inline-size:2px;background-color:var(--palettes-700, var(--palettes-product-700));border-start-end-radius:var(--pr-t-border-radius-default);border-end-end-radius:var(--pr-t-border-radius-default)}:host-context(.optionItem.is-highlighted) .optionItem-value.is-selected,:host-context(.optionItem.is-highlighted) :host-context([aria-selected=true]) .optionItem-value{background-color:var(--palettes-100, var(--palettes-product-100))}.optionItem-value.is-selected:active,:host-context([aria-selected=true]) .optionItem-value:active{background-color:var(--palettes-200, var(--palettes-product-200))}:host-context(.optionItem.is-highlighted) .optionItem-value{background-color:var(--palettes-neutral-50)}.optionItem-value:active{background-color:var(--palettes-neutral-100)}}@layer components{:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}}@layer mods{:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.optionItem.is-highlighted) :host-context(.lu-select-value) .optionItem-value{background-color:inherit}}@layer mods{:host-context(.mod-multiple) .optionItem-value,.formerEmployeeDisplayer .optionItem-value,.archivedLegalUnitsDisplayer .optionItem-value{position:relative;padding-inline-start:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:before{display:block;position:absolute;inset-inline-start:var(--pr-t-spacings-100);inset-block-start:var(--pr-t-spacings-75)}:host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value:before{content:\"\";background-color:var(--palettes-neutral-0);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);display:block;block-size:var(--components-options-checkbox-size);transition-property:background-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value:after{--icon-content: \"\\e97d\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:transparent;font-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--components-options-checkbox-size);position:absolute;text-align:center;transform:scale(0);transition:all .1s;inline-size:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:before,.formerEmployeeDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:before,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:before,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:before{background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value:after,.formerEmployeeDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value:after{color:var(--palettes-neutral-0);transform:scale(1)}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-color: var(--commons-disabled-background);background-color:transparent}:host-context(.mod-multiple) .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) :host-context(.mod-multiple) .optionItem-value.is-disabled:after,.formerEmployeeDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .formerEmployeeDisplayer .optionItem-value.is-disabled:after,.archivedLegalUnitsDisplayer .optionItem-value.is-selected.is-disabled:after,:host-context([aria-selected=true]) .archivedLegalUnitsDisplayer .optionItem-value.is-disabled:after{color:var(--palettes-neutral-500)}:host-context(.mod-multiple) .optionItem-value.is-disabled,.formerEmployeeDisplayer .optionItem-value.is-disabled,.archivedLegalUnitsDisplayer .optionItem-value.is-disabled{--components-options-checkbox-border-color: var(--palettes-neutral-500)}:host-context(.optionItem.is-highlighted) :host-context(.mod-multiple) .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .formerEmployeeDisplayer .optionItem-value:not(.is-disabled):before,:host-context(.optionItem.is-highlighted) .archivedLegalUnitsDisplayer .optionItem-value:not(.is-disabled):before{box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}}@layer components{:host-context(.mod-multiple).establishmentOption .optionItem-value,.formerEmployeeDisplayer.establishmentOption .optionItem-value,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value{position:relative;padding-inline-start:calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2)}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after,.formerEmployeeDisplayer.establishmentOption .optionItem-value:before,.formerEmployeeDisplayer.establishmentOption .optionItem-value:after,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:before,.archivedLegalUnitsDisplayer.establishmentOption .optionItem-value:after{inset-inline-start:var(--pr-t-spacings-100)}}@layer components{.optionItem:not(:last-child){margin-block-end:var(--pr-t-spacings-50)}.optionItem:hover .optionItem-value{background:var(--palettes-neutral-50)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal)}.optionItem-icons{position:absolute;inset-block-start:var(--pr-t-spacings-50);inset-inline-end:var(--pr-t-spacings-100);opacity:0;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-inline-start:var(--pr-t-spacings-100);transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);inline-size:1.4rem;block-size:1.4rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }], option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], grouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouping", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], onlyParent: [{ type: i0.Output, args: ["onlyParent"] }], onlyChildren: [{ type: i0.Output, args: ["onlyChildren"] }], groupIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupIndex", required: false }] }], optionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIndex", required: true }] }], scrollIntoViewOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollIntoViewOptions", required: false }] }], groupTemplateLocation: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplateLocation", required: false }] }], treeitemContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Treeitem), { isSignal: true }] }], optionContext: [{ type: i0.ViewChild, args: [i0.forwardRef(() => LU_OPTION_CONTEXT), { isSignal: true }] }] } });
 
 class LuOptionDirective {
@@ -599,8 +647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { select: [{ type: i0.Input, args: [{ isSignal: true, alias: "luOptionSelect", required: false }] }] } });
 
 function buildOptionsFromDataSource(ds, deps) {
-    const { nextPage$, clue$, isPanelOpen$, setLoading } = deps;
-    const page$ = nextPage$.pipe(scan((page) => page + 1, 0), startWith(0));
+    const { clue$, isPanelOpen$ } = deps;
+    // Resets and reloads from page 0 with the current clue. `paramsChange` carries params changes only:
+    // clue changes are already handled by `clue$`, whose emissions must not load a second time
+    const paramsChange$ = ds.paramsChange ?? EMPTY;
     const normalizedClue$ = clue$.pipe(map((clue) => clue ?? ''), distinctUntilChanged());
     // If a debounce is specified:
     // - empty clue ('') passes through immediately (initial state / clear)
@@ -610,30 +660,78 @@ function buildOptionsFromDataSource(ds, deps) {
         if (!isOpen) {
             return of([]);
         }
-        return debouncedClue$.pipe(switchMap((clue) => {
+        return debouncedClue$.pipe(switchMap((clue) => 
+        // A params change restarts the very same load as a clue change would, minus the debounce:
+        // it comes from a deliberate action (a panel header toggle, a filter) and not from typing
+        paramsChange$.pipe(startWith(null), switchMap(() => {
             ds.reset?.();
-            return page$.pipe(concatMap((page) => {
-                setLoading(true);
-                return ds.getOptions({ clue, page }).pipe(catchError(() => of([])), tap(() => setLoading(false)), startWith([]), map((items) => ({ items, page })));
-            }), scan((acc, { items, page }) => {
-                acc[page] = items;
-                return acc;
-            }, {}), 
-            // Stop calling pages when last two pages are empty
-            takeWhile((pages) => {
-                const indexes = Object.keys(pages)
-                    .map((p) => parseInt(p))
-                    .sort((a, b) => a - b);
-                const lastIndexes = indexes.slice(-2);
-                return lastIndexes.length < 2 || !lastIndexes.every((i) => pages[i]?.length === 0);
-            }), map((pages) => Object.values(pages).flat()), finalize(() => setLoading(false)));
-        }));
+            const options$ = ds.paginated === false ? wholeList(ds, clue) : accumulatedPages(ds, clue, deps);
+            return options$.pipe(
+            // Applied on the accumulated list so cross-page decorations (eg. homonyms) can be computed
+            // Falls back to the raw accumulated options so a failing decoration doesn't kill the whole stream
+            switchMap((options) => defer(() => ds.transformOptions?.(options) ?? of(options)).pipe(catchError(() => of(options)))));
+        }))));
     }));
 }
+/**
+ * Data source owning the whole list (`[options]` + `(nextPage)`): every emission is the complete list,
+ * so there is nothing to accumulate, no page to guard against, and no loading state to infer — the
+ * consumer owns the fetching, hence the loading row too, through the `loading` input.
+ */
+function wholeList(ds, clue) {
+    const params = { clue, page: 0 };
+    return ds.getOptions(params).pipe(catchError(() => of([])));
+}
+/**
+ * Paginated data source: one request per page, accumulated in order until two consecutive pages come
+ * back empty.
+ *
+ * `expand` asks for the next page from the result of the previous one, so `nextPage$` is only listened
+ * to between two pages: a page can't be asked for while one is in flight, and the extra scroll events
+ * Firefox emits at the bottom of the panel fall on no subscriber instead of queueing pages. Pages also
+ * only ever enter the accumulator once they answered, so the guard below can't take one that is still
+ * loading for an empty one.
+ */
+function accumulatedPages(ds, clue, { nextPage$, setLoading }) {
+    const loadPage = (page) => ds.getOptions({ clue, page }).pipe(catchError(() => of([])), 
+    // A request completing without emitting still answers its page, rather than locking pagination
+    defaultIfEmpty([]), 
+    // A long lived data source keeps refreshing its page: those later emissions update the
+    // accumulated list, but only the first one answers the page — it alone arms the request for
+    // the next page and clears the loading row, which a refresh must leave up while a page is in flight
+    map((items, index) => ({ page, items, isFirstAnswer: index === 0 })), tap({
+        subscribe: () => setLoading(true),
+        next: ({ isFirstAnswer }) => {
+            if (isFirstAnswer) {
+                setLoading(false);
+            }
+        },
+    }));
+    return loadPage(0).pipe(expand(({ page, isFirstAnswer }) => isFirstAnswer
+        ? nextPage$.pipe(take(1), switchMap(() => loadPage(page + 1)))
+        : EMPTY), scan((acc, { page, items }) => {
+        acc[page] = items;
+        return acc;
+    }, {}), 
+    // Stop calling pages when the last two pages came back empty
+    takeWhile((pages) => {
+        const lastPages = Object.values(pages).slice(-2);
+        return lastPages.length < 2 || !lastPages.every((items) => items.length === 0);
+    }), map((pages) => Object.values(pages).flat()), finalize(() => setLoading(false)));
+}
 
 const coreSelectDefaultOptionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
 const coreSelectDefaultOptionKey = (option) => option;
 class ALuSelectInputComponent {
+    // Signal-backed because a filter pill takes the select over *after* it has rendered, and
+    // `bottomSheetMode` — which gates the trigger element itself — is computed from it.
+    #filterPillMode;
+    get filterPillMode() {
+        return this.#filterPillMode();
+    }
+    set filterPillMode(filterPillMode) {
+        this.#filterPillMode.set(filterPillMode);
+    }
     #defaultFilterPillClearable;
     #defaultClearable;
     get searchable() {
@@ -669,6 +767,9 @@ class ALuSelectInputComponent {
     set grouping(grouping) {
         this.groupingSignal.set(grouping);
     }
+    // searchable is derived from clueChange$.observed, so internal consumers must use this stream instead:
+    // subscribing to clueChange$ would make every select look searchable.
+    #internalClueChange$;
     get value() {
         return this._value;
     }
@@ -688,19 +789,14 @@ class ALuSelectInputComponent {
         }
         else if (this.lastEmittedClue !== clue) {
             this.clueChange$.next(clue);
+            this.#internalClueChange$.next(clue);
             this.lastEmittedClue = clue;
         }
     }
     getDefaultDataSource() {
-        let emittedKeys = new Set();
         return {
-            getOptions: (_params) => {
-                let lastEmittedThisPage = [];
-                return this.manualOptions$.pipe(tap((options) => (lastEmittedThisPage = options)), takeUntil(this.nextPage$), finalize(() => (emittedKeys = new Set(lastEmittedThisPage.map((p) => this.optionKey()(p))))), map((options) => options.filter((c) => !emittedKeys.has(this.optionKey()(c)))));
-            },
-            reset() {
-                emittedKeys.clear();
-            },
+            getOptions: () => this.manualOptions$,
+            paginated: false,
         };
     }
     get panelRef() {
@@ -712,12 +808,24 @@ class ALuSelectInputComponent {
         this.overlayContainerRef = inject(OverlayContainer).getContainerElement();
         this.labelElement = inject(SELECT_LABEL);
         this.labelId = inject(SELECT_LABEL_ID);
+        this.formField = inject(FORM_FIELD_INSTANCE, { optional: true });
         this.filterPillHost = inject(FILTER_PILL_HOST_COMPONENT, { optional: true });
-        this.filterPillMode = false;
+        // Signal-backed because a filter pill takes the select over *after* it has rendered, and
+        // `bottomSheetMode` — which gates the trigger element itself — is computed from it.
+        this.#filterPillMode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#filterPillMode" }] : /* istanbul ignore next */ []));
         this.ignorePresentation = input(false, { ...(ngDevMode ? { debugName: "ignorePresentation" } : /* istanbul ignore next */ {}), transform: luBooleanAttribute });
+        /**
+         * Width of the select itself, using the same scale as the form field width
+         */
+        this.width = input(null, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (luNullableNumberAttribute) });
+        this.widthClass = computed(() => (this.width() ? `mod-width${this.width()}` : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthClass" }] : /* istanbul ignore next */ []));
         this.panelClosed = output();
         this.panelOpened = output();
         this.highlightedOption = output();
+        // Below the `S` breakpoint the trigger is a `<button>` rather than the text input, so this is only
+        // ever focused, never read as an input.
         this.inputElementRef = viewChild('inputElement', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
         this.disabled$ = new BehaviorSubject(false);
@@ -740,6 +848,29 @@ class ALuSelectInputComponent {
         this.isPanelOpen$ = new BehaviorSubject(false);
         // TODO Might be temporary, check after merging signalize PR
         this.panelOpenSignal = toSignal(this.isPanelOpen$);
+        this.belowSmallBreakpoint = injectMediaMinBreakpoint('S', true);
+        /**
+         * Below the `S` breakpoint (800px) the panel opens as a dialog in `sheet` mode that embeds its own
+         * search input, instead of a popover anchored to the field — mirroring how filter pills move the input
+         * inside their overlay. Filter pills already provide their own overlay, so they keep their behavior.
+         */
+        this.bottomSheetMode = computed(() => (this.belowSmallBreakpoint() ?? false) && !this.filterPillMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bottomSheetMode" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the currently open panel is a sheet, snapshotted when it opens rather than tracking
+         * `bottomSheetMode()` live: the panel's own ref (`SelectPanelSheetRef` vs `SelectPanelRef`) is
+         * chosen once at open time too, so resizing across the breakpoint while the panel stays open must
+         * not flip which surface its template renders — that surface was never actually attached as a
+         * dialog, so switching to it crashes with a missing `LuDialogRef` provider.
+         */
+        this.panelBottomSheetMode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelBottomSheetMode" }] : /* istanbul ignore next */ []));
+        /** Field label echoed as the bottom sheet's title, snapshotted when the sheet opens. */
+        this.panelTitle = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelTitle" }] : /* istanbul ignore next */ []));
+        /** Whether that field label carries the required marker, so the sheet's title can echo it too. */
+        this.panelTitleRequired = computed(() => this.formField?.isInputRequired() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelTitleRequired" }] : /* istanbul ignore next */ []));
         this.activeDescendant$ = new BehaviorSubject('');
         this.manualOptions$ = new ReplaySubject(1);
         this.overlayConfig = input({ hasBackdrop: true, backdropClass: 'cdk-overlay-transparent-backdrop' }, /* @ts-ignore */
@@ -776,6 +907,9 @@ class ALuSelectInputComponent {
         ...(ngDevMode ? [{ debugName: "groupingSignal" }] : /* istanbul ignore next */ []));
         this.clueChange$ = new Subject();
         this.clueChange = outputFromObservable(this.clueChange$);
+        // searchable is derived from clueChange$.observed, so internal consumers must use this stream instead:
+        // subscribing to clueChange$ would make every select look searchable.
+        this.#internalClueChange$ = new Subject();
         this.nextPage$ = new Subject();
         this.nextPage = outputFromObservable(this.nextPage$);
         this.addOption = output();
@@ -797,7 +931,7 @@ class ALuSelectInputComponent {
         this.clue = null;
         // This is the clue stored after we selected an option to know if we should emit an empty clue on open or not
         this.lastEmittedClue = '';
-        this.clue$ = defer(() => this.clueChange$.pipe(startWith(this.clue)));
+        this.clue$ = defer(() => this.#internalClueChange$.pipe(startWith(this.clue)));
         this.shouldDisplayAddOption = toSignal(toObservable(this.addOptionStrategy).pipe(switchMap((strategy) => {
             switch (strategy) {
                 case 'always':
@@ -812,6 +946,7 @@ class ALuSelectInputComponent {
         })));
         this.destroyed$ = new Subject();
         this.injector = inject(Injector);
+        this.hostElementRef = inject(ElementRef);
         // Re-entrancy guard: opening the panel (focus, clueChanged, overlay creation) can synchronously
         // trigger openPanel again, which used to cause a double tap.
         this.#isOpeningPanel = false;
@@ -823,6 +958,13 @@ class ALuSelectInputComponent {
                 this.manualOptions$.next(options);
             }
         });
+        // Rather than leaving an open panel stuck in a stale sheet/overlay style once `bottomSheetMode()`
+        // no longer matches it, close it outright — the next open picks the right style for the new breakpoint.
+        _effectWithDeps([this.bottomSheetMode], (bottomSheetMode) => {
+            if (this.isPanelOpen && bottomSheetMode !== this.panelBottomSheetMode()) {
+                this.closePanel();
+            }
+        });
         // When options arrive asynchronously via a dataSource, dataSourceOptions changes but options doesn't.
         // We need to reposition the panel after the DOM updates in both cases.
         _effectWithDeps([this.dataSourceOptions], (_options, onCleanup) => {
@@ -852,6 +994,11 @@ class ALuSelectInputComponent {
                 this.panelRef?.close();
                 break;
             case 'Tab':
+                // A bottom sheet is modal: its focus trap cycles Tab between the sheet's own controls, so
+                // tabbing must not close it the way leaving the field does on desktop.
+                if (this.bottomSheetMode()) {
+                    break;
+                }
                 // If we are in a filterpill, this will close it on tab press, but we want it to not lose any
                 // displayed stuff and properly close on focus exit
                 this.panelRef?.close();
@@ -934,7 +1081,17 @@ class ALuSelectInputComponent {
         }
         this.#isOpeningPanel = true;
         try {
-            this.focusInput();
+            const isSheet = this.bottomSheetMode();
+            this.panelBottomSheetMode.set(isSheet);
+            if (isSheet) {
+                // The sheet shows the field label as its title and embeds its own search input (auto-focused by
+                // `openSelectPanelSheet`); focusing the covered host input would pop the mobile keyboard on a
+                // hidden field.
+                this.panelTitle.set(this.resolvePanelTitle());
+            }
+            else {
+                this.focusInput();
+            }
             const isSearchable = this.searchable;
             this.isPanelOpen$.next(true);
             this.panelOpened.emit();
@@ -969,6 +1126,31 @@ class ALuSelectInputComponent {
             this.inputElementRef()?.nativeElement.focus();
         }
     }
+    // The bottom sheet echoes the field label as its title. Standalone selects may be wrapped in a <label>,
+    // but inside a form-field the label is a separate element referenced through the control's aria-labelledby.
+    resolvePanelTitle() {
+        if (this.labelElement) {
+            return this.getLabelText(this.labelElement);
+        }
+        // The field points its own `aria-labelledby` at its value displayer, so only an actual `<label>`
+        // counts here — otherwise a select without any label would echo its selected value as the title.
+        // `aria-labelledby` can list several ids (label, hint, …), and some can be stale — e.g. leftover
+        // from before the trigger was torn down and rebuilt as the breakpoint flipped between the button
+        // and input variants — so every id is checked instead of trusting the first one to be the label.
+        const host = this.hostElementRef.nativeElement;
+        const labelledByIds = host.querySelector('[aria-labelledby]')?.getAttribute('aria-labelledby')?.split(' ') ?? [];
+        const label = labelledByIds.map((id) => host.ownerDocument.getElementById(id)).find((element) => element?.tagName === 'LABEL');
+        return label ? this.getLabelText(label) : '';
+    }
+    // Read the label text without its adornments (help tooltip, required marker, screen-reader-only copy)
+    // nor, when the label wraps the select, the field's own rendered content — its selected value or the
+    // placeholder standing in for it — so the title stays the plain field label.
+    getLabelText(label) {
+        const clone = label.cloneNode(true);
+        const selectTag = this.hostElementRef.nativeElement.tagName.toLowerCase();
+        clone.querySelectorAll(`${selectTag}, [role="button"], .pr-u-mask, .formLabel-required`).forEach((node) => node.remove());
+        return (clone.textContent ?? '').trim();
+    }
     emptyClue() {
         if (this.clue) {
             this.clue = null;
@@ -1028,7 +1210,7 @@ class ALuSelectInputComponent {
         this.isPanelOpen$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ALuSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.4", type: ALuSelectInputComponent, isStandalone: true, inputs: { ignorePresentation: { classPropertyName: "ignorePresentation", publicName: "ignorePresentation", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearableInput: { classPropertyName: "clearableInput", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, addOptionLabelInput: { classPropertyName: "addOptionLabelInput", publicName: "addOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionComparerInput: { classPropertyName: "optionComparerInput", publicName: "optionComparer", isSignal: true, isRequired: false, transformFunction: null }, optionKeyInput: { classPropertyName: "optionKeyInput", publicName: "optionKey", isSignal: true, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", addOption: "addOption", dataSource: "dataSourceChange" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "isClearable()", "class.is-selected": "isSelectedClass", "class.is-searchFilled": "isSearchFilledClass", "class.mod-noClueIcon": "isNoClueIconClass" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.4", type: ALuSelectInputComponent, isStandalone: true, inputs: { ignorePresentation: { classPropertyName: "ignorePresentation", publicName: "ignorePresentation", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearableInput: { classPropertyName: "clearableInput", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, addOptionLabelInput: { classPropertyName: "addOptionLabelInput", publicName: "addOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, addOptionStrategy: { classPropertyName: "addOptionStrategy", publicName: "addOptionStrategy", isSignal: true, isRequired: false, transformFunction: null }, overlayConfig: { classPropertyName: "overlayConfig", publicName: "overlayConfig", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionComparerInput: { classPropertyName: "optionComparerInput", publicName: "optionComparer", isSignal: true, isRequired: false, transformFunction: null }, optionKeyInput: { classPropertyName: "optionKeyInput", publicName: "optionKey", isSignal: true, isRequired: false, transformFunction: null }, noClueIcon: { classPropertyName: "noClueIcon", publicName: "noClueIcon", isSignal: true, isRequired: false, transformFunction: null }, inputTabindex: { classPropertyName: "inputTabindex", publicName: "inputTabindex", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, colorPicker: { classPropertyName: "colorPicker", publicName: "colorPicker", isSignal: true, isRequired: false, transformFunction: null }, optionTpl: { classPropertyName: "optionTpl", publicName: "optionTpl", isSignal: true, isRequired: false, transformFunction: null }, valueTpl: { classPropertyName: "valueTpl", publicName: "valueTpl", isSignal: true, isRequired: false, transformFunction: null }, panelHeaderTpl: { classPropertyName: "panelHeaderTpl", publicName: "panelHeaderTpl", isSignal: true, isRequired: false, transformFunction: null }, panelFooterTpl: { classPropertyName: "panelFooterTpl", publicName: "panelFooterTpl", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClosed: "panelClosed", panelOpened: "panelOpened", highlightedOption: "highlightedOption", optionTpl: "optionTplChange", valueTpl: "valueTplChange", panelHeaderTpl: "panelHeaderTplChange", panelFooterTpl: "panelFooterTplChange", clueChange: "clueChange", nextPage: "nextPage", addOption: "addOption", dataSource: "dataSourceChange" }, host: { listeners: { "click": "onClickOpenPanel($event)", "keydown": "onKeyDownNavigation($event)" }, properties: { "class.colorPicker": "colorPicker()", "class.mod-compact": "compact()", "class.is-clearable": "isClearable()", "class.is-selected": "isSelectedClass", "class.is-searchFilled": "isSearchFilledClass", "class.mod-noClueIcon": "isNoClueIconClass", "class": "widthClass()" } }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ALuSelectInputComponent, decorators: [{
             type: Directive,
@@ -1040,11 +1222,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.is-selected]': 'isSelectedClass',
                         '[class.is-searchFilled]': 'isSearchFilledClass',
                         '[class.mod-noClueIcon]': 'isNoClueIconClass',
+                        '[class]': 'widthClass()',
                         '(click)': 'onClickOpenPanel($event)',
                         '(keydown)': 'onKeyDownNavigation($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addOptionLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionLabel", required: false }] }], addOptionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionStrategy", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionComparerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionComparer", required: false }] }], optionKeyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionKey", required: false }] }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], addOption: [{ type: i0.Output, args: ["addOption"] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { ignorePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignorePresentation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], panelClosed: [{ type: i0.Output, args: ["panelClosed"] }], panelOpened: [{ type: i0.Output, args: ["panelOpened"] }], highlightedOption: [{ type: i0.Output, args: ["highlightedOption"] }], inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearableInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], addOptionLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionLabel", required: false }] }], addOptionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionStrategy", required: false }] }], overlayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayConfig", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], optionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionComparerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionComparer", required: false }] }], optionKeyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionKey", required: false }] }], noClueIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "noClueIcon", required: false }] }], inputTabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputTabindex", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], colorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPicker", required: false }] }], optionTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTpl", required: false }] }, { type: i0.Output, args: ["optionTplChange"] }], valueTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTpl", required: false }] }, { type: i0.Output, args: ["valueTplChange"] }], panelHeaderTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelHeaderTpl", required: false }] }, { type: i0.Output, args: ["panelHeaderTplChange"] }], panelFooterTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelFooterTpl", required: false }] }, { type: i0.Output, args: ["panelFooterTplChange"] }], clueChange: [{ type: i0.Output, args: ["clueChange"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }], addOption: [{ type: i0.Output, args: ["addOption"] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }, { type: i0.Output, args: ["dataSourceChange"] }] } });
 
 let selectId = 0;
 function selectIdFactory() {
@@ -1210,6 +1393,93 @@ class LuSelectPanelRef {
     }
 }
 
+/**
+ * Opens a select panel as a bottom sheet.
+ *
+ * Below the `S` breakpoint the panel stops being a popover anchored to the field and becomes a modal
+ * surface pinned to the bottom of the viewport. That surface already exists as the dialog's `sheet`
+ * mode — backdrop, blocked page scroll, focus trap, focus restoration and close button all come with
+ * it — so the panel is opened as a dialog instead of as a bespoke overlay.
+ *
+ * The opening animation is disabled (`mod-select`, styled by the select packages themselves — see their
+ * `sheet` mixin) and the search input is focused by hand instead of through CDK's `autoFocus`. iOS
+ * Safari only raises the virtual keyboard for a `focus()` call made synchronously inside the tap that
+ * triggered it; CDK's own autofocus defers the actual `focus()` through `afterNextRender`, which always
+ * lands after that window has closed, so the keyboard silently never opens. Forcing a render with
+ * `ApplicationRef.tick()` right here — still inside the same synchronous call stack as the tap — makes
+ * the search input exist in the DOM in time to focus it for real, and skipping the animation keeps the
+ * sheet from visibly jumping once the keyboard's own viewport resize kicks in immediately after.
+ *
+ * @param dialogService the dialog service provided alongside the select input
+ * @param panel the panel component to render inside the sheet
+ * @param injector the injector carrying the panel ref and the select input for the panel
+ * @param ariaLabel names the sheet, so it stays named even before its header has rendered
+ */
+function openSelectPanelSheet(dialogService, panel, injector, ariaLabel) {
+    const config = {
+        content: panel,
+        mode: 'sheet',
+        size: 'maxContent',
+        ariaLabel: ariaLabel || undefined,
+        // `mod-select` lets the select packages scope their own dialog header tweaks (centered title,
+        // close button pulled out of flow, no opening animation) without reaching into the generic
+        // dialog styles.
+        panelClasses: ['mod-select'],
+        // The panel ref and the select input reach the panel through this injector: the dialog's own
+        // `providers` hook is reserved by the service for `LuDialogRef`. `autoFocus: false` disables
+        // CDK's own deferred autofocus — the search input is focused by hand right below instead.
+        cdkConfigOverride: { injector, autoFocus: false },
+    };
+    const dialogRef = dialogService.open(config);
+    injector.get(ApplicationRef).tick();
+    const searchInput = dialogRef.cdkRef.overlayRef.overlayElement.querySelector('.textField-input-value');
+    searchInput?.focus();
+    trackVisibleViewport(dialogRef);
+    return dialogRef;
+}
+/**
+ * Keeps `--components-dialog-visibleViewportBlockSize` and `--components-dialog-insetBlockEnd`
+ * in sync with the visual viewport for as long as the sheet stays open.
+ *
+ * iOS doesn't shrink the layout viewport when the on-screen keyboard opens — only the visual one — so
+ * a sheet pinned with a plain `bottom: 0` stays anchored to the bottom of the full, keyboard-unaware
+ * layout viewport, which is now hidden behind the keyboard: most of the sheet renders underneath it,
+ * clamped height or not. Nudging `bottom` up by the amount the keyboard currently obscures — on top of
+ * clamping the max height — keeps the sheet entirely above the keyboard, using all the space that's
+ * actually visible, instead of a second, outer page scroll on top of the listbox's own.
+ *
+ * Set on the sheet's own overlay element rather than `document.documentElement`: these custom properties
+ * are also read by any other dialog in `mode: 'sheet'` (e.g. approbation-inbox's), and a document-wide
+ * value would leak this select's keyboard tracking onto an unrelated sheet stacked underneath it.
+ */
+function trackVisibleViewport(dialogRef) {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+        return;
+    }
+    const style = dialogRef.cdkRef.overlayRef.overlayElement.style;
+    const update = () => {
+        style.setProperty('--components-dialog-visibleViewportBlockSize', `${viewport.height}px`);
+        style.setProperty('--components-dialog-insetBlockEnd', `${window.innerHeight - viewport.height - viewport.offsetTop}px`);
+        // The initially-selected option scrolls into view as soon as it's rendered (see
+        // `scrollIntoViewOnceReady`), which — with the opening animation disabled — happens before the
+        // keyboard has finished opening and before the resize above has clamped the sheet down to its
+        // final size. That earlier scroll position is stale once the sheet's own geometry has changed
+        // size underneath it, so it's redone here on every viewport update, landing correctly once the
+        // keyboard settles.
+        dialogRef.cdkRef.overlayRef.overlayElement.querySelector('.is-highlighted')?.scrollIntoView({ block: 'nearest' });
+    };
+    update();
+    viewport.addEventListener('resize', update);
+    viewport.addEventListener('scroll', update);
+    dialogRef.closed$.pipe(take(1)).subscribe(() => {
+        viewport.removeEventListener('resize', update);
+        viewport.removeEventListener('scroll', update);
+        style.removeProperty('--components-dialog-visibleViewportBlockSize');
+        style.removeProperty('--components-dialog-insetBlockEnd');
+    });
+}
+
 /**
  * Tracks whether the user is currently navigating with the pointer or with the keyboard.
  *
@@ -1311,5 +1581,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALuSelectInputComponent, CORE_SELECT_API_TOTAL_COUNT_PROVIDER, CoreSelectKeyManager, LU_CORE_SELECT_TRANSLATIONS, LU_OPTION_CONTEXT, LuCoreSelectNoClueDirective, LuCoreSelectPanelHeaderDirective, LuCoreSelectTotalCountDirective, LuDisabledOptionDirective, LuDisplayerDirective, LuIsOptionSelectedPipe, LuOptionDirective, LuOptionGroupDirective, LuSelectPanelLayoutComponent, LuSelectPanelRef, LuSimpleSelectDefaultOptionComponent, SELECT_ID, SELECT_LABEL, SELECT_LABEL_ID, SELECT_PANEL_INSTANCE, TreeDisplayPipe, addAttributesOnCdkContainer, applySearchDelimiter, coreSelectDefaultOptionComparer, coreSelectDefaultOptionKey, luCoreSelectTranslations, provideLuSelectLabelsAndIds, provideOptionContext, CoreSelectPanelElement as ɵCoreSelectPanelElement, ɵIsSelectedStrategy, LuOptionComponent as ɵLuOptionComponent, LuOptionGroupPipe as ɵLuOptionGroupPipe, LuOptionOutletDirective as ɵLuOptionOutletDirective, generateGroups as ɵgenerateGroups, getGroupTemplateLocation as ɵgetGroupTemplateLocation, injectPointerNavigation as ɵinjectPointerNavigation, scrollIntoViewOnceReady as ɵscrollIntoViewOnceReady };
+export { ALuSelectInputComponent, CORE_SELECT_API_TOTAL_COUNT_PROVIDER, CoreSelectKeyManager, LU_CORE_SELECT_TRANSLATIONS, LU_OPTION_CONTEXT, LuCoreSelectNoClueDirective, LuCoreSelectPanelHeaderDirective, LuCoreSelectTotalCountDirective, LuDisabledOptionDirective, LuDisplayerDirective, LuIsOptionSelectedPipe, LuOptionDirective, LuOptionGroupDirective, LuSelectPanelLayoutComponent, LuSelectPanelRef, LuSimpleSelectDefaultOptionComponent, SELECT_ID, SELECT_LABEL, SELECT_LABEL_ID, SELECT_PANEL_INSTANCE, TreeDisplayPipe, addAttributesOnCdkContainer, applySearchDelimiter, coreSelectDefaultOptionComparer, coreSelectDefaultOptionKey, luCoreSelectTranslations, provideLuSelectLabelsAndIds, provideOptionContext, CoreSelectPanelElement as ɵCoreSelectPanelElement, ɵIsSelectedStrategy, LuOptionComponent as ɵLuOptionComponent, LuOptionGroupPipe as ɵLuOptionGroupPipe, LuOptionOutletDirective as ɵLuOptionOutletDirective, fillScrollViewport as ɵfillScrollViewport, generateGroups as ɵgenerateGroups, getGroupTemplateLocation as ɵgetGroupTemplateLocation, injectPointerNavigation as ɵinjectPointerNavigation, openSelectPanelSheet as ɵopenSelectPanelSheet, scrollIntoViewOnceReady as ɵscrollIntoViewOnceReady };
 //# sourceMappingURL=lucca-front-ng-core-select.mjs.map