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

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

@@ -1,9 +1,10 @@
 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 { 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';
@@ -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);
@@ -675,6 +723,15 @@ function accumulatedPages(ds, clue, { nextPage$, setLoading }) {
 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() {
@@ -751,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);
@@ -779,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 */
@@ -854,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;
@@ -865,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) => {
@@ -894,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();
@@ -976,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();
@@ -1011,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;
@@ -1070,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,
@@ -1082,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() {
@@ -1252,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.
  *
@@ -1353,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