mn-angular-lib 1.0.159 → 1.0.160

package/fesm2022/mn-angular-lib.mjs

@@ -3870,10 +3870,17 @@ const mnMultiSelectVariants = tv({
  * 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.
  */
 class MnBottomSheet {
     /** Tailwind's `sm` breakpoint — at or below this the swipe gesture is armed.
@@ -3945,6 +3952,71 @@ 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. */
     exitPromise = null;
+    /** The host node once moved to `document.body`, so it is only detached if we moved it. */
+    portalledHost = null;
+    /** Blocks scroll gestures aimed at anything behind the sheet, while it is open. */
+    scrollGuard = null;
+    /** Moves the host out to `document.body` and stops the page behind scrolling. */
+    ngOnInit() {
+        if (typeof document === 'undefined')
+            return;
+        const host = this.el.nativeElement;
+        document.body.appendChild(host);
+        this.portalledHost = host;
+        this.lockScroll();
+    }
+    /**
+     * 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.
+     */
+    lockScroll() {
+        const guard = (event) => {
+            const target = event.target;
+            const container = this.containerRef()?.nativeElement;
+            if (container && target && container.contains(target))
+                return;
+            // Only cancellable events can be stopped; a passive listener elsewhere in the
+            // chain would otherwise log a console error for a no-op preventDefault.
+            if (event.cancelable)
+                event.preventDefault();
+        };
+        // Capture phase, so the gesture is cancelled before any scroller sees it.
+        document.addEventListener('wheel', guard, { capture: true, passive: false });
+        document.addEventListener('touchmove', guard, { capture: true, passive: false });
+        this.scrollGuard = guard;
+    }
+    /** Releases the scroll guard. Idempotent. */
+    unlockScroll() {
+        if (!this.scrollGuard)
+            return;
+        document.removeEventListener('wheel', this.scrollGuard, { capture: true });
+        document.removeEventListener('touchmove', this.scrollGuard, { capture: true });
+        this.scrollGuard = null;
+    }
+    /**
+     * 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() {
+        this.unlockScroll();
+        this.portalledHost?.remove();
+        this.portalledHost = null;
+    }
     get hostClasses() {
         return `mn-bottom-sheet${this.isDismissing ? ' is-dismissing' : ''}`
             + `${this.growWithKeyboard ? ' grow-with-keyboard' : ''}`;
@@ -4093,11 +4165,11 @@ class MnBottomSheet {
             && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBottomSheet, isStandalone: true, selector: "mn-bottom-sheet", inputs: { showBackdrop: "showBackdrop", showGrabber: "showGrabber", dismissible: "dismissible", minHeightPx: "minHeightPx", maxHeightVh: "maxHeightVh", containerClass: "containerClass", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", growWithKeyboard: "growWithKeyboard", dismissGuard: "dismissGuard" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBottomSheet, isStandalone: true, selector: "mn-bottom-sheet", inputs: { showBackdrop: "showBackdrop", showGrabber: "showGrabber", dismissible: "dismissible", minHeightPx: "minHeightPx", maxHeightVh: "maxHeightVh", containerClass: "containerClass", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", growWithKeyboard: "growWithKeyboard", dismissGuard: "dismissGuard" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain;min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBottomSheet, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-bottom-sheet', standalone: true, imports: [NgClass], template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"] }]
+            args: [{ selector: 'mn-bottom-sheet', standalone: true, imports: [NgClass], template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain;min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { showBackdrop: [{
                 type: Input
             }], showGrabber: [{
@@ -4183,8 +4255,8 @@ class MnMultiSelect {
      * card) used to leave the portalled panel floating at its stale coordinates.
      */
     scrollCapture = null;
-    /** The bottom-sheet host currently moved into `document.body`, if any. */
-    movedSheet = null;
+    /** The bottom-sheet host, for outside-click tests. The sheet owns its own placement. */
+    sheetHost = null;
     /**
      * 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`
@@ -4221,14 +4293,13 @@ class MnMultiSelect {
             this.ngControl.valueAccessor = this;
     }
     /**
-     * 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) {
         const el = ref?.nativeElement ?? null;
-        this.movedSheet = this.portal(el, this.movedSheet);
+        this.sheetHost = el;
         if (el) {
             this.captureSheetFloor(el);
         }
@@ -4277,7 +4348,7 @@ class MnMultiSelect {
             // Guarantee the portalled elements never outlive the component.
             this.movedPanel = this.portal(null, this.movedPanel);
             this.movedShield = this.portal(null, this.movedShield);
-            this.movedSheet = this.portal(null, this.movedSheet);
+            this.sheetHost = null;
         });
     }
     resolveConfig() {
@@ -4356,7 +4427,7 @@ class MnMultiSelect {
         const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
         // In sheet mode the backdrop tap is handled by mn-bottom-sheet's own (dismiss); the
         // sheet host counts as "inside" here so this listener never double-fires the close.
-        const insideSheet = !!target && !!this.movedSheet && this.movedSheet.contains(target);
+        const insideSheet = !!target && !!this.sheetHost && this.sheetHost.contains(target);
         if (!insideHost && !insidePanel && !insideSheet) {
             this.close();
         }
@@ -4382,7 +4453,7 @@ class MnMultiSelect {
         }
         requestAnimationFrame(() => {
             // The sheet may have closed before the frame ran; don't strand a stale floor.
-            if (!this.isOpen || this.movedSheet !== hostEl)
+            if (!this.isOpen || this.sheetHost !== hostEl)
                 return;
             this.sheetFloorPx = measure();
             this.cdr.markForCheck();
@@ -4810,8 +4881,8 @@ class MnDropdown {
     static SHEET_MAX_WIDTH = 639.98;
     /** The anchored popover panel currently moved into `document.body`, if any. */
     movedPanel = null;
-    /** The bottom-sheet host currently moved into `document.body`, if any. */
-    movedSheet = null;
+    /** The bottom-sheet host, for outside-click tests. The sheet owns its own placement. */
+    sheetHost = null;
     /** Whether the viewport is currently narrow enough for the sheet layout. */
     isNarrowViewport = false;
     /** Live breakpoint match, so rotating the device re-evaluates the layout. */
@@ -4875,7 +4946,7 @@ class MnDropdown {
      */
     set sheetRef(ref) {
         const el = ref?.nativeElement ?? null;
-        this.movedSheet = this.portal(el, this.movedSheet);
+        this.sheetHost = el;
         if (el && this.isSearchable) {
             this.captureSheetFloor(el);
         }
@@ -4897,7 +4968,7 @@ class MnDropdown {
             this.unlockBodyScroll();
             // Guarantee the portalled elements never outlive the component.
             this.movedPanel = this.portal(null, this.movedPanel);
-            this.movedSheet = this.portal(null, this.movedSheet);
+            this.sheetHost = null;
         });
     }
     resolveConfig() {
@@ -5054,7 +5125,7 @@ class MnDropdown {
         const target = event.target;
         const insideHost = !!target && this.elRef.nativeElement.contains(target);
         const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
-        const insideSheet = !!target && !!this.movedSheet && this.movedSheet.contains(target);
+        const insideSheet = !!target && !!this.sheetHost && this.sheetHost.contains(target);
         if (!insideHost && !insidePanel && !insideSheet) {
             this.close();
         }
@@ -5131,7 +5202,7 @@ class MnDropdown {
             return;
         }
         requestAnimationFrame(() => {
-            if (!this.isOpen || this.movedSheet !== hostEl)
+            if (!this.isOpen || this.sheetHost !== hostEl)
                 return;
             this.sheetFloorPx = measure();
             this.cdr.markForCheck();