mn-angular-lib 1.0.78 → 1.0.79

package/fesm2022/mn-angular-lib.mjs

@@ -6020,20 +6020,65 @@ class MnModalShellComponent {
         return config;
     }
     static SWIPE_DISMISS_THRESHOLD = 150;
+    /** Upper bound for the close wait if no animation/transition end event fires
+     *  (e.g. an animation was suppressed). Longer than the slowest close path
+     *  (mobile slide-down 0.25s, swipe glide 0.3s) so it never preempts. */
+    static CLOSE_FALLBACK_MS = 450;
     /** Whether this modal renders as a bottom sheet on small screens (default: true). */
     get isMobileSheet() {
         return this.config.mobileBottomSheet !== false;
     }
-    /** Triggers the closing animation. Deferred to avoid NG0100 when called during a CD cycle. */
+    /**
+     * Triggers the closing animation and resolves once it has actually finished.
+     *
+     * Deferred via setTimeout to avoid NG0100 when called during a CD cycle.
+     * Rather than guess a fixed duration (the old hardcoded 150ms truncated the
+     * mobile slide-down, which runs 250ms — and the swipe glide, 300ms), we wait
+     * for the container's `animationend`/`transitionend` and tear down then. A
+     * fallback timeout guarantees resolution if no such event fires, and we
+     * short-circuit entirely under reduced motion (the CSS collapses to instant).
+     */
     startClosing() {
         return new Promise(resolve => {
             setTimeout(() => {
                 this.isClosing = true;
                 this.cdr.detectChanges();
-                setTimeout(resolve, 150);
+                if (this.prefersReducedMotion()) {
+                    resolve();
+                    return;
+                }
+                const container = this.el.nativeElement.querySelector('.modal-container');
+                if (!container) {
+                    resolve();
+                    return;
+                }
+                let settled = false;
+                const done = (event) => {
+                    // Ignore end events bubbling up from descendant animations/transitions.
+                    if (event && event.target !== container)
+                        return;
+                    if (settled)
+                        return;
+                    settled = true;
+                    container.removeEventListener('animationend', done);
+                    container.removeEventListener('transitionend', done);
+                    clearTimeout(fallback);
+                    resolve();
+                };
+                // Normal close ends via a keyframe (animationend); the swipe-dismiss
+                // glide ends via the transform transition (transitionend).
+                container.addEventListener('animationend', done);
+                container.addEventListener('transitionend', done);
+                // `done` only runs asynchronously, after this assignment completes.
+                const fallback = setTimeout(done, MnModalShellComponent.CLOSE_FALLBACK_MS);
             });
         });
     }
+    prefersReducedMotion() {
+        return typeof window !== 'undefined'
+            && typeof window.matchMedia === 'function'
+            && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
     onEscapeKey(event) {
         if (this.config.keyboard === KeyboardMode.ENABLED) {
             this.handleClose(ModalCloseReason.ESCAPE);
@@ -6247,7 +6292,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .2s ease}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .25s ease-out}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .25s ease-out}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .2s ease-in forwards}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .25s var(--mn-sheet-ease) forwards}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -6258,7 +6303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnConfirmationBodyComponent,
                         MnCustomBodyHostComponent,
                         MnFooterActionsComponent,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .2s ease}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .25s ease-out}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .25s ease-out}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .2s ease-in forwards}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .35s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:slideUpOut .25s var(--mn-sheet-ease) forwards}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{