mn-angular-lib 1.0.139 → 1.0.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.139",
+  "version": "1.0.140",
   "peerDependencies": {
     "@angular/common": "^21.1.3",
     "@angular/core": "^21.1.3",

package/src/lib/features/mn-multi-select/mn-multi-select.css

@@ -0,0 +1,56 @@
+/*
+  Mobile bottom-sheet chrome for the dropdown panel.
+
+  These rules are keyed off plain classes rather than `:host` because both the panel
+  and its backdrop are portalled out to `document.body` while open. Angular's emulated
+  encapsulation attribute is stamped on the elements themselves and travels with them
+  when they are relocated, so the scoping still holds — but `:host` would no longer
+  match, since neither element is the host any more.
+
+  Layout (position, size, colour) lives in the template's Tailwind classes; only the
+  things Tailwind cannot express — keyframes and the safe-area inset — are here.
+*/
+
+.mn-ms-sheet {
+  /* Same iOS-style decelerate curve the modal sheet uses, so the two read as one
+     motion language when a multi-select opens from inside a modal. */
+  --mn-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* Keeps the last option clear of the iOS home indicator. The sheet background
+     extends into the inset so it still reads as one continuous surface. env() is 0
+     on the web, so this is a no-op outside the native shell. */
+  padding-bottom: env(safe-area-inset-bottom);
+
+  animation: mn-ms-sheet-in 0.3s var(--mn-sheet-ease);
+}
+
+.mn-ms-sheet-backdrop {
+  animation: mn-ms-backdrop-in 0.2s ease-out;
+}
+
+@keyframes mn-ms-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mn-ms-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Collapse the entrance animations to ~instant rather than removing them, matching
+   the modal shell's approach so anything listening for animationend still fires. */
+@media (prefers-reduced-motion: reduce) {
+  .mn-ms-sheet,
+  .mn-ms-sheet-backdrop {
+    animation-duration: 0.01ms !important;
+  }
+}

package/types/mn-angular-lib.d.ts

@@ -2561,10 +2561,28 @@ type MnMultiSelectProps<TValue = unknown> = {
     placeholder?: string;
     /** Available options to select from */
     options: MnMultiSelectOption<TValue>[];
-    /** Whether to show a search/filter input (default: false) */
+    /**
+     * Whether to show a search/filter input. When omitted, search auto-enables once the
+     * number of options reaches `searchThreshold`, so long lists stay filterable without
+     * every call site having to opt in. Set explicitly to force it on or off.
+     */
     searchable?: boolean;
+    /**
+     * Number of options at which the search input auto-enables (default: 8).
+     * Ignored when `searchable` is set explicitly.
+     */
+    searchThreshold?: number;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
+    /**
+     * Whether the dropdown renders as a bottom sheet on small screens (< 640px).
+     * Defaults to true. Set to false to keep the trigger-anchored panel on mobile.
+     *
+     * The anchored panel sits at the trigger's bottom edge, which puts it directly in
+     * the path of the soft keyboard as soon as the search input takes focus. The sheet
+     * is anchored to the viewport instead, so the list stays reachable.
+     */
+    mobileSheet?: boolean;
     /** Maximum number of items that can be selected (undefined = unlimited) */
     maxSelections?: number;
     /**
@@ -2614,6 +2632,8 @@ type MnMultiSelectUIConfig = {
     errorMessages?: Record<string, string>;
     /** Text shown when no options match the search filter */
     noOptionsFound?: string;
+    /** Accessible label for the mobile sheet's close button (falls back to 'Close') */
+    closeLabel?: string;
 };
 
 declare const MN_MULTI_SELECT_CONFIG: InjectionToken<MnMultiSelectUIConfig>;
@@ -2633,6 +2653,27 @@ declare class MnMultiSelect implements OnInit {
     triggerRef: ElementRef<HTMLElement>;
     /** The panel element currently moved into `document.body`, if any. */
     private movedPanel;
+    /** The sheet backdrop element currently moved into `document.body`, if any. */
+    private movedBackdrop;
+    /** Option count at which the search input auto-enables when `searchable` is unset. */
+    private static readonly DEFAULT_SEARCH_THRESHOLD;
+    /** Tailwind's `sm` breakpoint — below this the panel renders as a bottom sheet.
+     *  Kept in step with the same constant in `MnModalShellComponent`. */
+    private static readonly SHEET_MAX_WIDTH;
+    /** Whether the viewport is currently narrow enough for the sheet layout. */
+    private isNarrowViewport;
+    /** Live breakpoint match, so rotating the device re-evaluates the layout. */
+    private sheetMedia;
+    /** The listener registered on `sheetMedia`, retained for teardown. */
+    private sheetMediaListener;
+    /** `document.body`'s inline `overflow` before the sheet locked it, restored on close. */
+    private previousBodyOverflow;
+    /**
+     * 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: number | 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
@@ -2655,6 +2696,12 @@ declare class MnMultiSelect implements OnInit {
      * broken on iOS). Cleanup is handled when the query clears on close/destroy.
      */
     set dropdownRef(ref: ElementRef<HTMLElement> | undefined);
+    /**
+     * 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: ElementRef<HTMLElement> | undefined);
     /** Currently selected values */
     selectedValues: unknown[];
     isOpen: boolean;
@@ -2671,6 +2718,15 @@ declare class MnMultiSelect implements OnInit {
     private readonly builtInErrorMessages;
     constructor();
     ngOnInit(): void;
+    /**
+     * 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.
+     */
+    private startWatchingViewport;
+    /** Tears down the breakpoint listener. Idempotent. */
+    private stopWatchingViewport;
     onDocumentClick(event: Event): void;
     private resolveConfig;
     writeValue(val: unknown): void;
@@ -2678,16 +2734,47 @@ declare class MnMultiSelect implements OnInit {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     toggle(): void;
+    /** Whether the panel should currently render as a bottom sheet. */
+    get isSheet(): boolean;
+    /**
+     * Whether the search input is shown: the explicit `searchable` prop when set,
+     * otherwise auto-enabled once the option count reaches the threshold.
+     */
+    get isSearchable(): boolean;
+    /** Layout classes for the panel — a bottom-anchored sheet, or the trigger-anchored popover. */
+    get panelClasses(): string;
+    /**
+     * 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.
+     */
+    private captureSheetFloor;
     /** Closes the dropdown on Escape for keyboard accessibility. */
     onEscape(): void;
-    /** 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(): void;
     /**
      * The single close path. Every trigger (outside click, Escape, scroll, resize, the
      * trigger being hidden) funnels through here so the open-only listeners are always
      * torn down with the panel and never leak.
      */
-    private close;
+    close(): void;
+    /**
+     * 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.
+     */
+    private lockBodyScroll;
+    /** Restores the pre-lock `overflow`. Idempotent. */
+    private unlockBodyScroll;
     /** Calculates the fixed position for the dropdown based on the trigger element */
     private updateDropdownPosition;
     /**
@@ -2698,12 +2785,15 @@ declare class MnMultiSelect implements OnInit {
      */
     private startWatchingTrigger;
     /**
-     * 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`.
      */
-    private relocateDropdown;
+    private portal;
     /** Tears down the watchers installed by `startWatchingTrigger`. Idempotent. */
     private stopWatchingTrigger;
     toggleOption(option: MnMultiSelectOption): void;