mn-angular-lib 1.0.71 → 1.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.71",
+  "version": "1.0.73",
   "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/src/lib/features/mn-skeleton/mn-skeleton.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+}
+
+@keyframes mn-skeleton-shimmer {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(150%);
+  }
+}
+
+.mn-skeleton-shimmer-bar {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.15) 50%,
+    transparent 100%
+  );
+  animation: mn-skeleton-shimmer 1.5s ease-in-out infinite;
+}

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;
@@ -4639,6 +4663,45 @@ declare class MnIconAttributes {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MnIconAttributes, "mn-icon[mnIconPistol], mn-icon[mnIconPending]", never, {}, {}, never, never, true, never>;
 }
 
+type MnSkeletonShape = 'rectangle' | 'circle' | 'text';
+type MnSkeletonProps = {
+    shape?: MnSkeletonShape;
+    animated?: boolean;
+    width?: string;
+    height?: string;
+};
+
+declare class MnSkeleton {
+    data: Partial<MnSkeletonProps>;
+    get hostClasses(): string;
+    get width(): string | null;
+    get height(): string | null;
+    get isAnimated(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MnSkeleton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MnSkeleton, "mn-skeleton", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare const mnSkeletonVariants: tailwind_variants.TVReturnType<{
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, "bg-base-300 relative overflow-hidden", {
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    shape: {
+        rectangle: string;
+        circle: string;
+        text: string;
+    };
+}, undefined, "bg-base-300 relative overflow-hidden", unknown, unknown, undefined>>;
+type MnSkeletonVariantProps = VariantProps<typeof mnSkeletonVariants>;
+
 /**
  * Types for mn-lib configuration.
  */
@@ -5267,5 +5330,5 @@ type MnPreviewMessage = {
  */
 declare function enableMnPreviewMode(configService: MnConfigService, langService: MnLanguageService, allowedOrigins?: string[]): void;
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnShowAboveDirective, MnShowBelowDirective, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
-export type { AnimationOptions, ApiError, BaseModalConfig, CalendarButton, CalendarConfig, CalendarDateFormatter, CalendarEvent, CalendarEventData, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColorPreset, ColumnDay, ColumnDefinition, ColumnFilterOption, ColumnFilterState, ColumnFilterType, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldRequiredCondition, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, HourRow, ListAppearance, ListDataSource, ListLabels, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnBadgeTypes, MnBadgeVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnCheckboxWrapperVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessageFn, MnErrorMessagesData, MnIconTypes, MnIconVariants, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnQueryParams, MnSelectErrorMessageData, MnSelectErrorMessagesData, MnSelectOption, MnSelectProps, MnSelectUIConfig, MnSelectVariants, MnShowInput, MnTabDataSource, MnTabItem, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, MnValidationErrorArgs, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MonthItem, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableLabels, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export type { AnimationOptions, ApiError, BaseModalConfig, CalendarButton, CalendarConfig, CalendarDateFormatter, CalendarEvent, CalendarEventData, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColorPreset, ColumnDay, ColumnDefinition, ColumnFilterOption, ColumnFilterState, ColumnFilterType, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldRequiredCondition, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, HourRow, ListAppearance, ListDataSource, ListLabels, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnBadgeTypes, MnBadgeVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnCheckboxWrapperVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessageFn, MnErrorMessagesData, MnIconTypes, MnIconVariants, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnQueryParams, MnSelectErrorMessageData, MnSelectErrorMessagesData, MnSelectOption, MnSelectProps, MnSelectUIConfig, MnSelectVariants, MnShowInput, MnSkeletonProps, MnSkeletonShape, MnSkeletonVariantProps, MnTabDataSource, MnTabItem, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, MnValidationErrorArgs, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MonthItem, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableLabels, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };