mn-angular-lib 1.0.139 → 1.0.140

package/fesm2022/mn-angular-lib.mjs

@@ -3508,6 +3508,27 @@ class MnMultiSelect {
     triggerRef;
     /** The panel element currently moved into `document.body`, if any. */
     movedPanel = null;
+    /** The sheet backdrop element currently moved into `document.body`, if any. */
+    movedBackdrop = null;
+    /** Option count at which the search input auto-enables when `searchable` is unset. */
+    static DEFAULT_SEARCH_THRESHOLD = 8;
+    /** Tailwind's `sm` breakpoint — below this the panel renders as a bottom sheet.
+     *  Kept in step with the same constant in `MnModalShellComponent`. */
+    static SHEET_MAX_WIDTH = 639.98;
+    /** Whether the viewport is currently narrow enough for the sheet layout. */
+    isNarrowViewport = false;
+    /** Live breakpoint match, so rotating the device re-evaluates the layout. */
+    sheetMedia = null;
+    /** The listener registered on `sheetMedia`, retained for teardown. */
+    sheetMediaListener = null;
+    /** `document.body`'s inline `overflow` before the sheet locked it, restored on close. */
+    previousBodyOverflow = null;
+    /**
+     * The sheet's height (px) captured the moment it opened, before any search. Re-applied
+     * as a `min-height` floor so filtering the option list shorter cannot shrink the sheet
+     * mid-type. Null while anchored or closed, so the popover and desktop path are untouched.
+     */
+    sheetFloorPx = null;
     /**
      * Watches the trigger while the panel is open. The panel lives in `document.body`,
      * so it survives its own trigger being hidden by an ancestor — e.g. a wizard step
@@ -3530,7 +3551,22 @@ class MnMultiSelect {
      * broken on iOS). Cleanup is handled when the query clears on close/destroy.
      */
     set dropdownRef(ref) {
-        this.relocateDropdown(ref?.nativeElement ?? null);
+        const el = ref?.nativeElement ?? null;
+        this.movedPanel = this.portal(el, this.movedPanel);
+        if (el && this.isSheet) {
+            this.captureSheetFloor(el);
+        }
+        else if (!el) {
+            this.sheetFloorPx = null;
+        }
+    }
+    /**
+     * The dimming backdrop rendered behind the mobile sheet. Portalled alongside the
+     * panel for the same reason — a `position: fixed` backdrop left inside a transformed
+     * ancestor would cover that ancestor rather than the viewport.
+     */
+    set sheetBackdropRef(ref) {
+        this.movedBackdrop = this.portal(ref?.nativeElement ?? null, this.movedBackdrop);
     }
     /** Currently selected values */
     selectedValues = [];
@@ -3551,16 +3587,47 @@ class MnMultiSelect {
     }
     ngOnInit() {
         this.resolveConfig();
+        this.startWatchingViewport();
         const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
             this.resolveConfig();
         });
         this.destroyRef.onDestroy(() => {
             sub.unsubscribe();
             this.stopWatchingTrigger();
-            // Guarantee the portalled panel never outlives the component.
-            this.relocateDropdown(null);
+            this.stopWatchingViewport();
+            this.unlockBodyScroll();
+            // Guarantee the portalled elements never outlive the component.
+            this.movedPanel = this.portal(null, this.movedPanel);
+            this.movedBackdrop = this.portal(null, this.movedBackdrop);
         });
     }
+    /**
+     * Tracks the sheet breakpoint through `matchMedia` rather than reading `innerWidth`
+     * once, so rotating the device switches layout instead of leaving a panel positioned
+     * for the previous orientation. An open panel is closed on the switch — its anchored
+     * coordinates and its sheet layout are not interchangeable.
+     */
+    startWatchingViewport() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        this.sheetMedia = window.matchMedia(`(max-width: ${MnMultiSelect.SHEET_MAX_WIDTH}px)`);
+        this.isNarrowViewport = this.sheetMedia.matches;
+        this.sheetMediaListener = (event) => {
+            this.isNarrowViewport = event.matches;
+            this.close();
+            // The listener fires outside Angular, so a zoneless app needs an explicit nudge.
+            this.cdr.markForCheck();
+        };
+        this.sheetMedia.addEventListener('change', this.sheetMediaListener);
+    }
+    /** Tears down the breakpoint listener. Idempotent. */
+    stopWatchingViewport() {
+        if (this.sheetMedia && this.sheetMediaListener) {
+            this.sheetMedia.removeEventListener('change', this.sheetMediaListener);
+        }
+        this.sheetMedia = null;
+        this.sheetMediaListener = null;
+    }
     onDocumentClick(event) {
         const target = event.target;
         // The panel lives at the body root once open, so it is not a descendant of the
@@ -3603,15 +3670,74 @@ class MnMultiSelect {
             return;
         }
         this.isOpen = true;
+        if (this.isSheet) {
+            // A sheet is anchored to the viewport, so it needs no trigger tracking — only a
+            // scroll lock so the page behind it stays put while the list is scrolled.
+            this.lockBodyScroll();
+            return;
+        }
         this.updateDropdownPosition();
         this.startWatchingTrigger();
     }
+    /** Whether the panel should currently render as a bottom sheet. */
+    get isSheet() {
+        return this.props.mobileSheet !== false && this.isNarrowViewport;
+    }
+    /**
+     * Whether the search input is shown: the explicit `searchable` prop when set,
+     * otherwise auto-enabled once the option count reaches the threshold.
+     */
+    get isSearchable() {
+        if (this.props.searchable !== undefined)
+            return this.props.searchable;
+        const threshold = this.props.searchThreshold ?? MnMultiSelect.DEFAULT_SEARCH_THRESHOLD;
+        return this.props.options.length >= threshold;
+    }
+    /** Layout classes for the panel — a bottom-anchored sheet, or the trigger-anchored popover. */
+    get panelClasses() {
+        // The sheet sizes to its content (capped at 80vh), so a short list gets a short
+        // sheet. To stop it collapsing upward as the search filters options away, the height
+        // it opens at is captured once and re-applied as a `min-height` floor (see
+        // `sheetFloorPx`): the `flex-1` list then keeps that frame and just shows fewer rows.
+        return this.isSheet
+            ? 'mn-ms-sheet fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg max-h-[80vh]'
+            : 'fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto';
+    }
+    /**
+     * Records the sheet's opened height as its `min-height` floor. Measured on the next
+     * frame so the read reflects the fully-rendered, unfiltered list (the search box is
+     * empty on open) and never forces a reflow mid change-detection. The floor equals the
+     * content height at that instant, so applying it triggers no resize — it only stops a
+     * later, shorter filtered list from pulling the sheet down.
+     */
+    captureSheetFloor(panel) {
+        if (typeof requestAnimationFrame !== 'function') {
+            this.sheetFloorPx = panel.offsetHeight;
+            return;
+        }
+        requestAnimationFrame(() => {
+            // The panel may have closed before the frame ran; don't strand a stale floor.
+            if (!this.isOpen || this.movedPanel !== panel)
+                return;
+            this.sheetFloorPx = panel.offsetHeight;
+            this.cdr.markForCheck();
+        });
+    }
     /** Closes the dropdown on Escape for keyboard accessibility. */
     onEscape() {
         this.close();
     }
-    /** Closes the dropdown when the page or a scrollable parent is scrolled */
+    /**
+     * Closes the dropdown when the page or a scrollable parent is scrolled.
+     *
+     * Skipped for a sheet: it is anchored to the viewport, not to the trigger, so it has
+     * no stale position to escape. Crucially, opening the soft keyboard fires a `resize`
+     * on Android — closing on that would dismiss the sheet the instant search is focused.
+     * A genuine layout switch is handled by the `matchMedia` listener instead.
+     */
     onWindowScrollOrResize() {
+        if (this.isSheet)
+            return;
         this.close();
     }
     /**
@@ -3625,6 +3751,29 @@ class MnMultiSelect {
         this.isOpen = false;
         this.searchTerm = '';
         this.stopWatchingTrigger();
+        this.unlockBodyScroll();
+    }
+    /**
+     * Freezes the page behind an open sheet. The previous inline value is captured and
+     * restored verbatim so a surrounding modal that set its own lock is left intact.
+     */
+    lockBodyScroll() {
+        if (this.previousBodyOverflow !== null)
+            return;
+        this.previousBodyOverflow = document.body.style.overflow;
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    /** Restores the pre-lock `overflow`. Idempotent. */
+    unlockBodyScroll() {
+        if (this.previousBodyOverflow === null)
+            return;
+        if (this.previousBodyOverflow) {
+            this.renderer.setStyle(document.body, 'overflow', this.previousBodyOverflow);
+        }
+        else {
+            this.renderer.removeStyle(document.body, 'overflow');
+        }
+        this.previousBodyOverflow = null;
     }
     /** Calculates the fixed position for the dropdown based on the trigger element */
     updateDropdownPosition() {
@@ -3667,27 +3816,29 @@ class MnMultiSelect {
         document.addEventListener('scroll', this.scrollCapture, true);
     }
     /**
-     * Move the dropdown panel to `document.body` when it appears, and detach it when
-     * the query clears. Appending to the body root makes the panel immune to ancestor
-     * `transform`/`filter`/`will-change`, so `position: fixed` anchors to the viewport
-     * and the panel stays under its trigger. Idempotent and safe to call with `null`.
+     * Move an overlay element to `document.body` when it appears, and detach it when the
+     * query clears. Appending to the body root makes the element immune to ancestor
+     * `transform`/`filter`/`will-change`, so `position: fixed` anchors to the viewport —
+     * without this the panel lands mid-screen (and breaks outright on iOS).
+     *
+     * Returns the element now portalled, so the caller can store it. Idempotent and safe
+     * to call with `null`.
      */
-    relocateDropdown(el) {
+    portal(el, current) {
         if (el) {
-            if (this.movedPanel === el)
-                return;
+            if (current === el)
+                return current;
             this.renderer.appendChild(document.body, el);
-            this.movedPanel = el;
-            return;
+            return el;
         }
-        if (this.movedPanel) {
+        if (current) {
             // Angular's view teardown may already have removed it; only detach if still attached.
-            const parent = this.movedPanel.parentNode;
+            const parent = current.parentNode;
             if (parent) {
-                this.renderer.removeChild(parent, this.movedPanel);
+                this.renderer.removeChild(parent, current);
             }
-            this.movedPanel = null;
         }
+        return null;
     }
     /** Tears down the watchers installed by `startWatchingTrigger`. Idempotent. */
     stopWatchingTrigger() {
@@ -3843,11 +3994,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-primary-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-primary pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetBackdropRef", first: true, predicate: ["sheetBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- Dims the page behind the sheet. Deliberately has no click handler: the host's\n         `document:click` listener already treats anything outside the panel as a\n         dismissal, so a second handler would only duplicate that path. -->\n    @if (isSheet) {\n      <div #sheetBackdrop class=\"mn-ms-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n    }\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      [ngClass]=\"panelClasses\"\n      [style.top]=\"isSheet ? null : dropdownStyle.top\"\n      [style.left]=\"isSheet ? null : dropdownStyle.left\"\n      [style.width]=\"isSheet ? null : dropdownStyle.width\"\n      [style.min-height.px]=\"isSheet ? sheetFloorPx : null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        <!-- The sheet covers its own trigger, so it needs a header to name the field and\n             an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n        @if (isSheet) {\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-4 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n        }\n        @if (isSearchable) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"border-b border-base-300 shrink-0\"\n            [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <mn-lib-input-field\n              [ngModel]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onSearch($event)\"\n              [props]=\"{\n                id: resolvedId + '-search',\n                type: 'search',\n                placeholder: props.searchPlaceholder || 'Search...',\n                ariaLabel: props.searchPlaceholder || 'Search...',\n                fullWidth: true,\n                size: 'sm'\n              }\"\n            ></mn-lib-input-field>\n          </div>\n        }\n        <!-- In sheet mode the panel is the flex column and this list is the scroller;\n             anchored, the panel itself scrolls and this is a passthrough wrapper. -->\n        <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n          @for (opt of filteredOptions; track opt.value) {\n            <div\n              (keyup.enter)=\"toggleOption(opt)\"\n              (keyup.space)=\"toggleOption(opt)\"\n              [attr.aria-selected]=\"isSelected(opt)\"\n              class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n              [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n              [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n              [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n              (click)=\"toggleOption(opt); $event.stopPropagation()\"\n              role=\"option\"\n              tabindex=\"0\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n                [checked]=\"isSelected(opt)\"\n                [disabled]=\"opt.disabled || isMaxReached(opt)\"\n                tabindex=\"-1\"\n              />\n              <span>{{ opt.label }}</span>\n            </div>\n          }\n          @if (filteredOptions.length === 0) {\n            <div class=\"text-base-content/50\" [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\">\n              {{ uiConfig.noOptionsFound || 'No options found' }}\n            </div>\n          }\n        </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-ms-sheet{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);padding-bottom:env(safe-area-inset-bottom);animation:mn-ms-sheet-in .3s var(--mn-sheet-ease)}.mn-ms-sheet-backdrop{animation:mn-ms-backdrop-in .2s ease-out}@keyframes mn-ms-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-ms-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-ms-sheet,.mn-ms-sheet-backdrop{animation-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage, MnButton, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-primary-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-primary pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, FormsModule, MnErrorMessage, MnButton, MnInputField, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- Dims the page behind the sheet. Deliberately has no click handler: the host's\n         `document:click` listener already treats anything outside the panel as a\n         dismissal, so a second handler would only duplicate that path. -->\n    @if (isSheet) {\n      <div #sheetBackdrop class=\"mn-ms-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n    }\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      [ngClass]=\"panelClasses\"\n      [style.top]=\"isSheet ? null : dropdownStyle.top\"\n      [style.left]=\"isSheet ? null : dropdownStyle.left\"\n      [style.width]=\"isSheet ? null : dropdownStyle.width\"\n      [style.min-height.px]=\"isSheet ? sheetFloorPx : null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        <!-- The sheet covers its own trigger, so it needs a header to name the field and\n             an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n        @if (isSheet) {\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-4 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n        }\n        @if (isSearchable) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"border-b border-base-300 shrink-0\"\n            [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <mn-lib-input-field\n              [ngModel]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onSearch($event)\"\n              [props]=\"{\n                id: resolvedId + '-search',\n                type: 'search',\n                placeholder: props.searchPlaceholder || 'Search...',\n                ariaLabel: props.searchPlaceholder || 'Search...',\n                fullWidth: true,\n                size: 'sm'\n              }\"\n            ></mn-lib-input-field>\n          </div>\n        }\n        <!-- In sheet mode the panel is the flex column and this list is the scroller;\n             anchored, the panel itself scrolls and this is a passthrough wrapper. -->\n        <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n          @for (opt of filteredOptions; track opt.value) {\n            <div\n              (keyup.enter)=\"toggleOption(opt)\"\n              (keyup.space)=\"toggleOption(opt)\"\n              [attr.aria-selected]=\"isSelected(opt)\"\n              class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n              [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n              [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n              [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n              (click)=\"toggleOption(opt); $event.stopPropagation()\"\n              role=\"option\"\n              tabindex=\"0\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n                [checked]=\"isSelected(opt)\"\n                [disabled]=\"opt.disabled || isMaxReached(opt)\"\n                tabindex=\"-1\"\n              />\n              <span>{{ opt.label }}</span>\n            </div>\n          }\n          @if (filteredOptions.length === 0) {\n            <div class=\"text-base-content/50\" [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\">\n              {{ uiConfig.noOptionsFound || 'No options found' }}\n            </div>\n          }\n        </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-ms-sheet{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);padding-bottom:env(safe-area-inset-bottom);animation:mn-ms-sheet-in .3s var(--mn-sheet-ease)}.mn-ms-sheet-backdrop{animation:mn-ms-backdrop-in .2s ease-out}@keyframes mn-ms-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-ms-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-ms-sheet,.mn-ms-sheet-backdrop{animation-duration:.01ms!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3857,6 +4008,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdown', { static: false }]
+            }], sheetBackdropRef: [{
+                type: ViewChild,
+                args: ['sheetBackdrop', { static: false }]
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]