mn-angular-lib 1.0.106 → 1.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.106",
+  "version": "1.0.108",
   "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

@@ -20,9 +20,11 @@
   opacity: 0.8;
 }
 
-/* Swipe-to-dismiss: animate the spring-back, but follow the finger 1:1 while dragging. */
+/* Swipe-to-dismiss: animate the spring-back, but follow the finger 1:1 while dragging.
+   `min-height` is transitioned too so the mobile sheet grows/shrinks smoothly (not instantly)
+   when the soft keyboard opens/closes — see the `.mn-keyboard-open` growth rule below. */
 .modal-container {
-  transition: transform 0.35s var(--mn-sheet-ease);
+  transition: transform 0.35s var(--mn-sheet-ease), min-height 0.25s var(--mn-sheet-ease);
 }
 
 .modal-container.sheet-dragging {
@@ -122,6 +124,9 @@
   :host(.mobile-sheet) .modal-container {
     width: 100%;
     max-width: 100%;
+    /* Explicit resting min-height so the keyboard-open growth (min-height: 92vh) can transition
+       from a defined value (`auto` would jump instead of animate). */
+    min-height: 0;
     /* Cap the sheet at 92vh. The soft keyboard OVERLAYS the lower part of the sheet rather
        than lifting it (on iOS the WKWebView does not resize — Capacitor `resize: none` — so
        there is nothing to lift into): the sheet stays anchored at the bottom and its inner
@@ -144,12 +149,14 @@
      focused field into view — pinning the height to 92vh guarantees content above the keyboard
      for the inner scroll (with its `--keyboard-height` scroll-padding) to reveal the field.
      Read as a plain class/var, so the library keeps no dependency on Capacitor.
-     `!important` is required to beat the inline `[style.height]` the shell binds for FULL-size or
-     explicit `sizeHeight` sheets (an inline style otherwise always wins over a stylesheet rule,
-     leaving a short fixed-height sheet stuck behind the overlaying keyboard). A FULL (95vh) sheet
-     is capped to 92vh while the keyboard is open, which is fine. */
+     Uses `min-height` (not `height`) so it beats the inline `[style.height]` the shell binds for
+     FULL-size / explicit `sizeHeight` sheets WITHOUT `!important` — a larger `min-height` wins over
+     `height`, and `max-height: 92vh` caps a taller inline height back down — AND so the growth can
+     be smoothly transitioned (see the `.modal-container` transition above). The app only adds
+     `.mn-keyboard-open` when the focused field would actually be behind the keyboard, so a modal
+     whose field is already visible never grows. */
   :host-context(.mn-keyboard-open).mobile-sheet .modal-container {
-    height: 92vh !important;
+    min-height: 92vh;
   }
 
   /* Override whichever anim-* open animation was selected */

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

@@ -8,6 +8,8 @@ import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import * as mn_angular_lib from 'mn-angular-lib';
 import * as _angular_forms from '@angular/forms';
 import { ValidationErrors, NgControl, AbstractControl, ValidatorFn, AsyncValidatorFn, FormGroup } from '@angular/forms';
+import { LucideIconData } from '@lucide/angular';
+export { LucideIconData } from '@lucide/angular';
 import { SafeHtml } from '@angular/platform-browser';
 import { HttpStatusCode, HttpHeaders, HttpErrorResponse, HttpClient, HttpResponse, HttpParams } from '@angular/common/http';
 
@@ -2455,8 +2457,20 @@ declare class MnMultiSelect implements OnInit {
     private readonly elRef;
     private readonly lang;
     private readonly destroyRef;
+    private readonly renderer;
     /** Reference to the trigger element for positioning the dropdown */
     triggerRef: ElementRef<HTMLElement>;
+    /** The panel element currently moved into `document.body`, if any. */
+    private movedPanel;
+    /**
+     * The dropdown panel element, queried while it is rendered by the `@if` block.
+     * The setter relocates the panel to `document.body` so that its `position: fixed`
+     * coordinates resolve against the viewport rather than any transformed/filtered
+     * ancestor (which would otherwise become the containing block and push the panel
+     * to the middle of the screen — the root cause of the mis-positioning bug, also
+     * broken on iOS). Cleanup is handled when the query clears on close/destroy.
+     */
+    set dropdownRef(ref: ElementRef<HTMLElement> | undefined);
     /** Currently selected values */
     selectedValues: unknown[];
     isOpen: boolean;
@@ -2473,6 +2487,7 @@ declare class MnMultiSelect implements OnInit {
     private readonly builtInErrorMessages;
     constructor();
     ngOnInit(): void;
+    onDocumentClick(event: Event): void;
     private resolveConfig;
     writeValue(val: unknown): void;
     registerOnChange(fn: (val: unknown) => void): void;
@@ -2481,7 +2496,15 @@ declare class MnMultiSelect implements OnInit {
     toggle(): void;
     /** Calculates the fixed position for the dropdown based on the trigger element */
     private updateDropdownPosition;
-    onDocumentClick(event: Event): void;
+    /** Closes the dropdown on Escape for keyboard accessibility. */
+    onEscape(): void;
+    /**
+     * Move the dropdown panel to `document.body` when it appears, and detach it when
+     * the query clears. Appending to the body root makes the panel immune to ancestor
+     * `transform`/`filter`/`will-change`, so `position: fixed` anchors to the viewport
+     * and the panel stays under its trigger. Idempotent and safe to call with `null`.
+     */
+    private relocateDropdown;
     /** Closes the dropdown when the page or a scrollable parent is scrolled */
     onWindowScrollOrResize(): void;
     toggleOption(option: MnMultiSelectOption): void;
@@ -3951,11 +3974,23 @@ type ConfirmationActionConfig<TResult = unknown> = {
     label: string;
     style?: ActionStyle;
     handler?: ModalResultHandler<TResult>;
+    /**
+     * Overrides the default leading icon for this action button. Pass a Lucide icon's
+     * static data (e.g. `LucideTrash2.icon`). Only rendered when the modal's
+     * `showActionIcons` is not explicitly `false`.
+     */
+    icon?: LucideIconData;
 };
 type CancellationActionConfig = {
     label: string;
     style?: ActionStyle;
     reason?: ModalCloseReason;
+    /**
+     * Overrides the default leading icon for this action button. Pass a Lucide icon's
+     * static data (e.g. `LucideX.icon`). Only rendered when the modal's
+     * `showActionIcons` is not explicitly `false`.
+     */
+    icon?: LucideIconData;
 };
 type ModalFooterAction<TResult = unknown> = {
     label: string;
@@ -3970,6 +4005,12 @@ type ModalFooterAction<TResult = unknown> = {
     handler?: (modalRef: ModalRef<TResult>) => Promise<void> | void;
     /** Whether the button is disabled */
     disabled?: boolean;
+    /**
+     * Overrides the default leading icon for this action button. Pass a Lucide icon's
+     * static data (e.g. `LucideCheck.icon`). Defaults are derived from `style` when
+     * omitted. Only rendered when the modal's `showActionIcons` is not explicitly `false`.
+     */
+    icon?: LucideIconData;
 };
 type ModalPollingConfig<TResult = unknown> = {
     /** Polling interval in milliseconds */
@@ -4025,6 +4066,8 @@ type BaseModalConfig<TResult = unknown> = {
     resultType?: TResult;
     /** Custom footer actions (overrides default footer) */
     footerActions?: ModalFooterAction<TResult>[];
+    /** Whether modal action buttons render their icons. Defaults to true. */
+    showActionIcons?: boolean;
     /** Polling configuration for periodic async operations */
     polling?: ModalPollingConfig<TResult>;
     /** Handler called when the modal is cancelled or dismissed */
@@ -4096,6 +4139,39 @@ type CustomModalConfig<TResult = unknown> = {
 } & BaseModalConfig<TResult>;
 type ModalConfig<TResult = unknown, TModel = unknown> = WizardModalConfig<TResult> | FormModalConfig<TModel, TResult> | ConfirmationModalConfig<TResult> | CustomModalConfig<TResult>;
 
+/**
+ * Default leading-icon size (px) for modal action buttons, matching the standard
+ * (`md`) button. Small (`sm`) buttons use {@link MODAL_ACTION_ICON_SIZE_SM}.
+ */
+declare const MODAL_ACTION_ICON_SIZE = 18;
+/** Leading-icon size (px) for `sm`-sized modal action buttons. */
+declare const MODAL_ACTION_ICON_SIZE_SM = 16;
+/**
+ * The canonical Lucide icon data used as defaults across all modal action buttons.
+ * Each value is a Lucide icon's static `.icon` data, rendered via the dynamic
+ * `svg[lucideIcon]` directive so no icon has to be registered in `MN_ICON_MAP`.
+ */
+declare const MN_MODAL_ACTION_ICONS: {
+    /** Affirmative action (confirm / submit / complete). */
+    readonly confirm: LucideIconData;
+    /** Destructive action (danger style). */
+    readonly danger: LucideIconData;
+    /** Cancel / dismiss / close action. */
+    readonly cancel: LucideIconData;
+    /** Wizard forward navigation (rendered trailing). */
+    readonly next: LucideIconData;
+    /** Wizard backward navigation. */
+    readonly back: LucideIconData;
+};
+/**
+ * Resolves the default action-button icon from its {@link ActionStyle}. Used by
+ * generic footer actions and any confirm button that has no explicit icon:
+ * `DANGER` → trash, `PRIMARY` → check, everything else (`GHOST`/`SECONDARY`) → cross.
+ * @param style The action's style, if any.
+ * @returns The Lucide icon data to render.
+ */
+declare function defaultIconForStyle(style?: ActionStyle): LucideIconData;
+
 /**
  * Intensity of a haptic impact. Mirrors the three impact weights exposed by most
  * native haptic engines (e.g. Capacitor Haptics `ImpactStyle`) without binding the
@@ -4694,6 +4770,14 @@ declare class MnFormBodyComponent<TModel = unknown, TResult = TModel> implements
      * @param field The field whose existing image was cleared.
      */
     onFileCleared(field: FormFieldConfig<TModel>): void;
+    /** Icon size (px) for the footer action buttons. */
+    readonly actionIconSize = 18;
+    /** Whether action-button icons should render on this modal (defaults to true). */
+    get showActionIcons(): boolean;
+    /** The leading icon for the submit button, or null when icons are disabled. */
+    get submitIcon(): LucideIconData | null;
+    /** The leading icon for the cancel button, or null when icons are disabled. */
+    get cancelIcon(): LucideIconData | null;
     submit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnFormBodyComponent<any, any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MnFormBodyComponent<any, any>, "mn-form-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; "hideFooter": { "alias": "hideFooter"; "required": false; }; "hideCustomBody": { "alias": "hideCustomBody"; "required": false; }; }, { "formStatusChange": "formStatusChange"; }, never, never, true, never>;
@@ -4759,6 +4843,20 @@ declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy
     get canGoBack(): boolean;
     get canGoNext(): boolean;
     get isLastStep(): boolean;
+    /** Icon size (px) for the wizard action buttons. */
+    readonly actionIconSize = 18;
+    /** Whether action-button icons should render on this wizard (defaults to true). */
+    get showActionIcons(): boolean;
+    /**
+     * The leading icon for the back button, or null when icons are disabled.
+     * Shows a back arrow when navigation is possible, otherwise a cross (the
+     * button acts as "Close" on the first step).
+     */
+    get backIcon(): LucideIconData | null;
+    /** The trailing icon for the next button, or null when icons are disabled. */
+    get nextIcon(): LucideIconData | null;
+    /** The leading icon for the complete button, or null when icons are disabled. */
+    get completeIcon(): LucideIconData | null;
     /** Index of the current step for the progress line */
     get currentProgressIndex(): number;
     get isFreeFlow(): boolean;
@@ -4813,6 +4911,17 @@ declare class MnConfirmationBodyComponent<TResult = boolean> implements OnInit {
     getButtonColor(style: ActionStyle): 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
     getButtonVariant(style: ActionStyle): 'fill' | 'outline' | 'text';
     get isConfirmDisabled(): boolean;
+    /** Icon size (px) for the action buttons. */
+    readonly actionIconSize = 18;
+    /** Whether action-button icons should render on this modal (defaults to true). */
+    get showActionIcons(): boolean;
+    /**
+     * The leading icon for the confirm button, or null when icons are disabled.
+     * Uses the per-action override, else defaults by style (DANGER → trash, else check).
+     */
+    get confirmIcon(): LucideIconData | null;
+    /** The leading icon for the cancel button, or null when icons are disabled. */
+    get cancelIcon(): LucideIconData | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnConfirmationBodyComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MnConfirmationBodyComponent<any>, "mn-confirmation-body", never, { "config": { "alias": "config"; "required": false; }; "modalRef": { "alias": "modalRef"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -6308,5 +6417,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_HAPTICS, 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, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, 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, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+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_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, 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, defaultIconForStyle, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, 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, ColumnSkeleton, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, DayTile, FailureResult, FieldDataSource, FieldRequiredCondition, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, GridDataSource, GridLayout, GridSkeleton, HourRow, ListAppearance, ListDataSource, ListLabels, ListSkeleton, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnBadgeTypes, MnBadgeVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnCheckboxWrapperVariants, MnCollectionDataSource, MnCollectionLabels, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessageFn, MnErrorMessagesData, MnFileDisplayItem, MnFileInputDisplayMode, MnFileInputErrorMessageData, MnFileInputErrorMessagesData, MnFileInputProps, MnFileInputUIConfig, MnFileInputVariants, MnHapticStyle, MnHapticsHandler, 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, MnSelectableCollectionDataSource, 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, PaginationMode, 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 };