mn-angular-lib 1.0.158 → 1.0.160

package/package.json

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

package/src/lib/features/mn-bottom-sheet/mn-bottom-sheet.component.css

@@ -13,6 +13,11 @@
      so this is a no-op outside the native shell. */
   padding-bottom: env(safe-area-inset-bottom);
 
+  /* Scrolling the sheet's own content to either end must not hand the remaining delta
+     to whatever is behind it. The component's guard blocks gestures that start outside
+     the sheet; this stops the ones that start inside it from chaining out. */
+  overscroll-behavior: contain;
+
   /* Defined resting floor so the keyboard-grow (min-height -> max) animates from a set
      value instead of jumping from `auto`. A consumer-supplied `minHeightPx` (inline
      style) overrides this without disturbing the transition. */

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, TemplateRef, OnInit, EventEmitter, OnChanges, ElementRef, PipeTransform, OnDestroy, DoCheck, ChangeDetectorRef, Type, ComponentRef, AfterViewInit, QueryList, ViewContainerRef, SimpleChanges, Signal } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef, OnInit, EventEmitter, OnChanges, ElementRef, OnDestroy, PipeTransform, DoCheck, ChangeDetectorRef, Type, ComponentRef, AfterViewInit, QueryList, ViewContainerRef, SimpleChanges, Signal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
@@ -2886,8 +2886,8 @@ declare class MnMultiSelect implements OnInit {
      * card) used to leave the portalled panel floating at its stale coordinates.
      */
     private scrollCapture;
-    /** The bottom-sheet host currently moved into `document.body`, if any. */
-    private movedSheet;
+    /** The bottom-sheet host, for outside-click tests. The sheet owns its own placement. */
+    private sheetHost;
     /**
      * The dropdown panel element, queried while it is rendered by the `@if` block.
      * The setter relocates the panel to `document.body` so that its `position: fixed`
@@ -2918,10 +2918,9 @@ declare class MnMultiSelect implements OnInit {
     private readonly builtInErrorMessages;
     constructor();
     /**
-     * The bottom-sheet host, read as an `ElementRef` so it can be relocated to
-     * `document.body` — its `position: fixed` children (backdrop + container) must anchor
-     * to the viewport, not to any transformed/filtered ancestor of this component. On open
-     * its container height is captured as the sheet's `min-height` floor.
+     * The bottom-sheet host, kept as a reference for outside-click tests. The sheet
+     * relocates itself to `document.body`, so nothing is moved here. On open its
+     * container height is captured as the sheet's `min-height` floor.
      */
     set sheetRef(ref: ElementRef<HTMLElement> | undefined);
     /**
@@ -3165,6 +3164,15 @@ type MnDropdownAction = {
     run: () => void;
     /** When true the item is shown dimmed and cannot be chosen. */
     disabled?: boolean;
+    /**
+     * Marks this item as the current choice — e.g. the active language in a language
+     * picker. Display-only: the item still {@link run}s and closes on choice like any
+     * other, but it renders highlighted with a trailing check so the user can see which
+     * one is selected without reading. The caller owns the flag (there is no single
+     * source of truth inside this command menu, which holds no value); typically at most
+     * one action carries it, though the component does not enforce that.
+     */
+    active?: boolean;
     /**
      * Tints the item's label and icon. When omitted the item uses the default foreground
      * ({@link danger} still forces the destructive red). Lets a host carry a per-item
@@ -3311,6 +3319,8 @@ declare const MN_DROPDOWN_CONFIG: InjectionToken<MnDropdownUIConfig>;
 declare class MnDropdown implements OnInit {
     datasource: MnDropdownProps;
     protected uiConfig: MnDropdownUIConfig;
+    /** Lucide data for the trailing check shown on the {@link MnDropdownAction.active} row. */
+    protected readonly checkIcon: LucideIconData;
     private readonly configService;
     private readonly sectionPath;
     private readonly explicitInstanceId;
@@ -3336,8 +3346,8 @@ declare class MnDropdown implements OnInit {
     private static readonly SHEET_MAX_WIDTH;
     /** The anchored popover panel currently moved into `document.body`, if any. */
     private movedPanel;
-    /** The bottom-sheet host currently moved into `document.body`, if any. */
-    private movedSheet;
+    /** The bottom-sheet host, for outside-click tests. The sheet owns its own placement. */
+    private sheetHost;
     /** Whether the viewport is currently narrow enough for the sheet layout. */
     private isNarrowViewport;
     /** Live breakpoint match, so rotating the device re-evaluates the layout. */
@@ -3525,12 +3535,19 @@ declare class MnDropdown implements OnInit {
  * dismissal is reported through {@link dismiss} for the host to act on (run a close
  * guard, tear down its overlay, …) rather than being handled here.
  *
- * Positioning is `position: fixed` against the viewport, so a consumer whose sheet
- * lives inside a `transform`/`filter` ancestor (which would otherwise become the
- * containing block) must relocate this host to `document.body` — as the
- * multi-select does with its portal helper.
+ * Positioning is `position: fixed` against the viewport, so the host relocates itself
+ * to `document.body` on init and blocks scrolling behind it while open. Both are
+ * unconditional: rendering viewport-fixed chrome in place made correctness depend on
+ * where a consumer happened to write the tag. A `transform`/`filter`/`contain`
+ * ancestor becomes the containing block and pushes the sheet to the middle of the
+ * screen — which a *stacked* modal did to its own sheet — and, because `position:
+ * fixed` moves where an element paints but not where it sits in the DOM, a gesture on
+ * the backdrop still scrolled whichever ancestor was the scroll container.
+ *
+ * The multi-select and dropdown used to do the relocating themselves; that is why the
+ * behaviour reads as new here but is not new to them.
  */
-declare class MnBottomSheet {
+declare class MnBottomSheet implements OnInit, OnDestroy {
     /** Tailwind's `sm` breakpoint — at or below this the swipe gesture is armed.
      *  Kept in step with the same constant in the modal shell and multi-select. */
     private static readonly SHEET_MAX_WIDTH;
@@ -3600,6 +3617,39 @@ declare class MnBottomSheet {
     /** In-flight exit animation, so a swipe-dismiss and a follow-up programmatic
      *  {@link startClosing} share one glide instead of re-triggering it. */
     private exitPromise;
+    /** The host node once moved to `document.body`, so it is only detached if we moved it. */
+    private portalledHost;
+    /** Blocks scroll gestures aimed at anything behind the sheet, while it is open. */
+    private scrollGuard;
+    /** Moves the host out to `document.body` and stops the page behind scrolling. */
+    ngOnInit(): void;
+    /**
+     * Stops pointer scrolling behind the sheet for as long as it is open.
+     *
+     * Cancels the gesture rather than setting `overflow: hidden` on `document.body`: an
+     * app whose scroll container is a layout element (a `<main>`, a drawer body) leaves
+     * `body` unscrollable, so locking it there is a no-op and the page still slides about
+     * under the sheet. Cancelling `wheel` and `touchmove` before anything acts on them
+     * holds regardless of which element does the scrolling.
+     *
+     * Gestures that begin inside the sheet are let through so its own content still
+     * scrolls; `overscroll-behavior: contain` keeps those from chaining out at the ends.
+     *
+     * Pointer input only. Page Down and the arrows still reach the page behind when focus
+     * is left there — closing that needs either a key filter or moving focus into the
+     * sheet, and neither belongs in this change.
+     */
+    private lockScroll;
+    /** Releases the scroll guard. Idempotent. */
+    private unlockScroll;
+    /**
+     * Detaches the relocated host.
+     *
+     * Angular tears a view down by removing the nodes it created from their parent; a
+     * host we moved to `body` is no longer among the parent's children, so without
+     * this the sheet would outlive the view that declared it.
+     */
+    ngOnDestroy(): void;
     get hostClasses(): string;
     /** Whether the viewport is currently narrow enough for the sheet to accept a swipe. */
     private get isNarrow();
@@ -4810,7 +4860,7 @@ type MnTableRowAction<T> = {
     /** Predicate deciding whether the action is disabled (shown but non-interactive) for a row. */
     disabled?: (row: T) => boolean;
     /**
-     * Tints the action's button and its ⋯-menu item. Defaults to `'secondary'` (or
+     * Tints the action's button and its ⋯-menu item. Defaults to `'primary'` (or
      * `'danger'` when {@link danger} is set), matching the built-in look. Whatever colour
      * an action shows inline is carried into the collapsed bottom-sheet item too.
      */
@@ -5227,7 +5277,7 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     /**
      * The effective colour for an action, used identically by the inline button and the
      * collapsed ⋯-menu item so the two never diverge: an explicit `color`, else `'danger'`
-     * for a destructive action, else the default `'secondary'`.
+     * for a destructive action, else the default `'primary'`.
      */
     rowActionColor(action: MnTableRowAction<T>, row: T): MnDropdownActionColor;
     /** Invokes an action for a row. */