mn-angular-lib 1.0.159 → 1.0.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.159",
+  "version": "1.0.161",
   "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);
     /**
@@ -3347,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. */
@@ -3536,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;
@@ -3611,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();
@@ -5008,8 +5047,10 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
      * button and a stacked filter panel.
      */
     protected filtersCollapsed: boolean;
-    /** Whether the small-screen filter panel is currently expanded. */
+    /** Whether the small-screen filter bottom sheet is currently open. */
     protected filtersPanelOpen: boolean;
+    /** Small-screen filter sheet, held so the close button can play its exit. */
+    protected filtersSheet?: MnBottomSheet;
     protected readonly componentName = "MnTable";
     protected get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
     protected collectionBody?: ElementRef<HTMLElement>;
@@ -5068,12 +5109,16 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     get hasColumnFilters(): boolean;
     /** Label for the "clear all filters" action in the small-screen panel. */
     get clearFiltersButtonLabel(): string;
+    /** Accessible label for the filter sheet's close button. */
+    get filtersCloseLabel(): string;
     /** Heading for the selection summary, with the count filled in. */
     get selectionSummaryTitle(): string;
     /** Label for the summary's clear-everything action. */
     get selectionClearAllLabel(): string;
-    /** Opens/closes the stacked filter panel shown on small screens. */
-    toggleFiltersPanel(): void;
+    /** Opens the small-screen filter bottom sheet. */
+    openFiltersPanel(): void;
+    /** Plays the sheet's slide-down exit, then unmounts it. */
+    closeFiltersPanel(): Promise<void>;
     private readonly baseTableClasses;
     /**
      * Column widths measured from the automatic layout and pinned, keyed by column