mn-angular-lib 1.0.71 → 1.0.72

package/package.json

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

package/src/lib/features/mn-modal/components/mn-modal-shell/mn-modal-shell.component.css

@@ -45,6 +45,42 @@
   to { opacity: 0; transform: scale(0.95); }
 }
 
+@keyframes slideUpIn {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUpOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+/* Open animations — keyed by the same .anim-* host classes as the close animations
+   below, so mobile bottom-sheet overrides can target both in one place. */
+:host(.anim-slide) .modal-container {
+  animation: slideIn 0.2s ease-in-out;
+}
+
+:host(.anim-fade) .modal-container {
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+:host(.anim-zoom) .modal-container {
+  animation: zoomIn 0.2s ease-in-out;
+}
+
 :host(.closing) .modal-backdrop {
   animation: fadeOut 0.15s ease-in-out forwards;
 }
@@ -60,3 +96,36 @@
 :host(.closing).anim-zoom .modal-container {
   animation: zoomOut 0.15s ease-in-out forwards;
 }
+
+/* =========================
+   Mobile bottom sheet (< 640px), gated by the .mobile-sheet host class.
+   Anchors the modal to the bottom, makes it full-width with rounded top
+   corners, and overrides every open/close animation with a slide-up.
+   ========================= */
+@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 0.25s ease-out;
+  }
+
+  /* Override whichever anim-* open animation was selected */
+  :host(.mobile-sheet).anim-slide .modal-container,
+  :host(.mobile-sheet).anim-fade .modal-container,
+  :host(.mobile-sheet).anim-zoom .modal-container {
+    animation: slideUpIn 0.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 0.2s ease-in forwards;
+  }
+}

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

@@ -3027,6 +3027,11 @@ type BaseModalConfig<TResult = unknown> = {
     i18n?: ModalI18nLabels;
     /** Animation configuration */
     animation?: AnimationOptions | AnimationOptions['type'];
+    /**
+     * Whether the modal renders as a bottom sheet on small screens (< 640px).
+     * Defaults to true. Set to false to keep it a centered dialog on mobile.
+     */
+    mobileBottomSheet?: boolean;
     /** Custom component to render in the modal body */
     component?: Type<unknown>;
     /** Custom template to render in the modal body */
@@ -3255,6 +3260,11 @@ declare abstract class BaseModalBuilder<TConfig extends BaseModalConfig<TResult>
     template(template: TemplateRef<unknown>): this;
     inputs(inputs: ModalInputMap): this;
     animation(animation: AnimationOptions | AnimationOptions['type']): this;
+    /**
+     * Control whether the modal renders as a bottom sheet on small screens (< 640px).
+     * Enabled by default; pass `false` to keep a centered dialog on mobile.
+     */
+    mobileBottomSheet(enabled?: boolean): this;
     /**
      * Add a custom body/content to the modal.
      */
@@ -3398,6 +3408,8 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     asConfirmation(config: ModalConfig<TResult>): ConfirmationModalConfig;
     asCustom(config: ModalConfig<TResult>): CustomModalConfig;
     get hostClasses(): string;
+    /** Whether this modal renders as a bottom sheet on small screens (default: true). */
+    get isMobileSheet(): boolean;
     /** Triggers the closing animation. Deferred to avoid NG0100 when called during a CD cycle. */
     startClosing(): Promise<void>;
     onEscapeKey(event: Event): void;
@@ -3408,7 +3420,6 @@ declare class MnModalShellComponent<TResult = unknown> implements OnInit, AfterV
     get containerSizeClass(): string;
     get containerHeightStyle(): string | null;
     get showCloseButton(): boolean;
-    get animationClass(): string;
     get hasCustomFooterActions(): boolean;
     get leftFooterActions(): ModalFooterAction<TResult>[];
     get rightFooterActions(): ModalFooterAction<TResult>[];
@@ -3585,11 +3596,17 @@ declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy
     config: WizardModalConfig;
     modalRef: MnModalRef<WizardResult>;
     formBodies: QueryList<MnFormBodyComponent>;
+    stepWrappers: QueryList<ElementRef<HTMLElement>>;
     currentStepId: ModalStepId;
     visitedStepIds: ModalStepId[];
     isCurrentStepValid: boolean;
     isCompleting: boolean;
     wizardErrors: Record<string, string>;
+    /**
+     * Min-height (px) for the step container, sized to the tallest step so the
+     * modal does not jump when navigating between steps. Monotonic — only grows.
+     */
+    measuredMinHeight: number;
     private languageService;
     private static readonly DEFAULT_LABELS;
     private resolveLabel;
@@ -3607,8 +3624,15 @@ declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy
     private formBodiesSubscription?;
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     isTextBody(step: WizardStepConfig): boolean;
+    ngOnDestroy(): void;
+    /**
+     * Measures every step's natural height and records the tallest as
+     * {@link measuredMinHeight}. Monotonic: the value only ever grows, so a
+     * re-measure can never shrink the modal. Skipped when the modal has an
+     * explicit height or is full-size (those are already fixed-height).
+     */
+    private measureTallestStep;
     /** Get visible steps (filtered by visibility condition) */
     get visibleSteps(): WizardStepConfig[];
     isStepVisible(step: WizardStepConfig): boolean;