mn-angular-lib 1.0.104 → 1.0.105

package/fesm2022/mn-angular-lib.mjs

@@ -7286,7 +7286,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" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], 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        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</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      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\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)}}: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;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s 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 .45s 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:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    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" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], 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        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</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      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\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,padding-bottom .25s ease-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)}}: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;padding-bottom:var(--keyboard-height, 0px)}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:calc(92vh - var(--keyboard-height, 0px));padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s 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 .45s 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:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,: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"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -7299,7 +7299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnFooterActionsComponent,
                         MnButton,
                         LucideX,
-                    ], 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        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</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      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\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)}}: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;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s 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 .45s 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:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\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        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</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      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\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,padding-bottom .25s ease-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)}}: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;padding-bottom:var(--keyboard-height, 0px)}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;max-height:calc(92vh - var(--keyboard-height, 0px));padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s 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 .45s 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:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{