mn-angular-lib 1.0.129 → 1.0.131

package/package.json

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

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

@@ -2621,10 +2621,24 @@ declare class MnMultiSelect implements OnInit {
     private readonly lang;
     private readonly destroyRef;
     private readonly renderer;
+    private readonly cdr;
     /** Reference to the trigger element for positioning the dropdown */
     triggerRef: ElementRef<HTMLElement>;
     /** The panel element currently moved into `document.body`, if any. */
     private movedPanel;
+    /**
+     * Watches the trigger while the panel is open. The panel lives in `document.body`,
+     * so it survives its own trigger being hidden by an ancestor — e.g. a wizard step
+     * or a tab that is switched away with `display: none` instead of being destroyed.
+     * When the trigger stops being visible the panel must go with it.
+     */
+    private visibilityObserver;
+    /**
+     * Capture-phase scroll listener installed while open. `window:scroll` only fires for
+     * the document scroller, so scrolling an inner container (a modal body, a scrollable
+     * card) used to leave the portalled panel floating at its stale coordinates.
+     */
+    private scrollCapture;
     /**
      * 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`
@@ -2657,10 +2671,25 @@ declare class MnMultiSelect implements OnInit {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     toggle(): void;
-    /** Calculates the fixed position for the dropdown based on the trigger element */
-    private updateDropdownPosition;
     /** Closes the dropdown on Escape for keyboard accessibility. */
     onEscape(): void;
+    /** Closes the dropdown when the page or a scrollable parent is scrolled */
+    onWindowScrollOrResize(): void;
+    /**
+     * The single close path. Every trigger (outside click, Escape, scroll, resize, the
+     * trigger being hidden) funnels through here so the open-only listeners are always
+     * torn down with the panel and never leak.
+     */
+    private close;
+    /** Calculates the fixed position for the dropdown based on the trigger element */
+    private updateDropdownPosition;
+    /**
+     * Starts the open-only watchers: an `IntersectionObserver` on the trigger (closes the
+     * panel as soon as the trigger stops being rendered/visible) and a capture-phase
+     * `scroll` listener (closes it when any ancestor scroller moves under it). Scrolls
+     * that originate inside the panel's own option list are ignored.
+     */
+    private startWatchingTrigger;
     /**
      * 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
@@ -2668,8 +2697,8 @@ declare class MnMultiSelect implements OnInit {
      * 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;
+    /** Tears down the watchers installed by `startWatchingTrigger`. Idempotent. */
+    private stopWatchingTrigger;
     toggleOption(option: MnMultiSelectOption): void;
     removeOption(option: MnMultiSelectOption, event: Event): void;
     isSelected(option: MnMultiSelectOption): boolean;
@@ -3325,7 +3354,24 @@ declare abstract class MnCollectionBase<T, DS extends MnCollectionDataSource<T>>
     /** Client-side search filtering shared by list and grid. */
     protected applySearchFilter(items: T[]): T[];
     protected processLoadedRows(rows: T[]): void;
-    protected validateDataSource(): void;
+    /**
+     * Reports every misconfigured pagination setting and repairs it in place.
+     *
+     * This deliberately does **not** throw. It runs first in {@link ngOnInit}, and a
+     * throw there aborts the rest of init — the data subscription is never made and
+     * {@link applyFilter} never runs, so the component renders a permanently empty
+     * body that only "heals" once some later interaction happens to call
+     * {@link applyFilter}. That failure mode reads as "the table is broken" rather
+     * than "the data source is misconfigured", and inside a modal the thrown error
+     * is easy to miss entirely. Logging loudly and degrading to the nearest working
+     * mode keeps the misconfiguration visible while still rendering the rows.
+     */
+    protected normalizeDataSource(): void;
+    /**
+     * Logs a data-source configuration problem, prefixed with the component name.
+     * @param message What is wrong and how it was compensated for.
+     */
+    private reportConfigError;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnCollectionBase<any, any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MnCollectionBase<any, any>, never, never, { "dataSource": { "alias": "dataSource"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -3427,6 +3473,23 @@ type TableAppearance = {
     hover?: boolean;
     compact?: boolean;
     bordered?: boolean;
+    /**
+     * How column widths are computed.
+     *
+     * - `auto` (default): the browser sizes each column to its widest cell, so the
+     *   columns shift every time the content changes — a new page, a filter, a
+     *   search. Fine for a static table.
+     * - `fixed`: widths come from the header row and each column's {@link ColumnBase.width}
+     *   only, never from the cell content, so they stay put across pages and
+     *   filters. Columns without a `width` split the remaining space evenly.
+     *   Overlong cell text is truncated with an ellipsis (and exposed as a
+     *   `title` tooltip) instead of widening the column.
+     *
+     * Prefer `fixed` for any table whose rows change under the user — server-side
+     * paginated, filtered or searched tables, and tables inside a modal, where a
+     * width change is most visible.
+     */
+    layout?: 'auto' | 'fixed';
 };
 /**
  * The control rendered for a column filter, and the shape of the value it produces:
@@ -3673,7 +3736,16 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     private readonly filterDebounce;
     /** The open filter popover, used to tell inside clicks from outside ones. */
     private filterPopover?;
-    constructor();
+    /**
+     * Most rows shown per page on mobile (< md). A **cap**, not an override: a data
+     * source asking for fewer rows keeps its own size. Raising a small page size on
+     * a phone is the opposite of what it is for — it pushes the paginator below the
+     * fold, which is most damaging inside a modal, where the sheet is already short
+     * and its footer is pinned over the bottom of the table.
+     */
+    private static readonly MOBILE_PAGE_SIZE;
+    /** The component's own element, measured for every responsive decision. */
+    private readonly host;
     /** Whether the consumer owns filtering (server-side), mirroring {@link isServerSearched}. */
     get isServerFiltered(): boolean;
     /** Every column filter that is actually set, in column order. */
@@ -3745,12 +3817,16 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     get clearFiltersButtonLabel(): string;
     /** Opens/closes the stacked filter panel shown on small screens. */
     toggleFiltersPanel(): void;
-    /** Re-evaluate responsive page size and filter layout when the viewport changes. */
-    protected onWindowResize(): void;
+    private readonly baseTableClasses;
+    constructor();
     /** Sets sort/filter state seeded from the data source before the first filter pass. */
     protected beforeInitialFilter(): void;
-    /** True when the viewport is below the filter-collapse breakpoint. */
-    private isFilterViewport;
+    /**
+     * Classes for the `<table>` element. `table-fixed` is added for the `fixed`
+     * layout so column widths come from the header row and the declared widths
+     * only, keeping them stable as the rows change.
+     */
+    get tableClasses(): string;
     /**
      * Recomputes whether the inline filter row should collapse into the panel.
      * Closes the panel when returning to the wide layout so reopened state never
@@ -3767,19 +3843,28 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     getColumnSkeletonData(column: ColumnDefinition<T>): Partial<MnSkeletonProps>;
     getSortIcon(column: ColumnDefinition<T>): string;
     isSortable(column: ColumnDefinition<T>): boolean;
-    /** Rows shown per page on mobile (< md). Forced regardless of any configured pageSize. */
-    private static readonly MOBILE_PAGE_SIZE;
+    /** Whether column widths are content-independent (see {@link TableAppearance.layout}). */
+    get isFixedLayout(): boolean;
     /** Page size to use at/above the `md` breakpoint (consumer's pageSize, or the user's selection). */
     private desktopPageSize;
-    /** True when the viewport is below the `md` (768px) breakpoint. */
-    private isMobileViewport;
     /**
-     * Applies the breakpoint-appropriate page size: {@link MOBILE_PAGE_SIZE} below `md`,
-     * the desktop size at/above it. When the size actually changes, client-side tables
-     * re-slice locally and server-side tables ask the consumer to refetch, so the
-     * rendered rows update in every pagination mode (used at init and on window resize).
+     * The `title` tooltip for a cell, so text truncated by the fixed layout stays
+     * readable. Only string cells have text to expose; template cells render their
+     * own markup and are left alone.
+     * @param column The column being rendered.
+     * @param row The row being rendered.
+     * @returns The full cell text, or `null` when there is nothing to expose.
      */
-    private applyResponsivePageSize;
+    cellTitle(column: ColumnDefinition<T>, row: T): string | null;
+    /**
+     * Re-evaluate on a window resize too. The ResizeObserver covers every change to
+     * the table's own box, but {@link isMobileViewport} reads the window, which can
+     * change without the table's width following it (a fixed-width table, a modal
+     * pinned to a max width).
+     */
+    protected onWindowResize(): void;
+    /** Re-evaluate responsive page size and filter layout when the table is resized. */
+    private onHostResize;
     /**
      * Resolves table-specific translation keys (column headers/filters) plus the
      * shared keys handled by the base.
@@ -3792,7 +3877,36 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     /** Returns the small-screen cell value for a column with cellSm defined. */
     getCellSmValue(column: ColumnDefinition<T>, row: T): string;
     trackByKey: (_index: number, column: ColumnDefinition<T>) => string;
-    readonly tableClasses = "w-full border-collapse overflow-y-hidden";
+    /** True when the table is narrower than the filter-collapse breakpoint. */
+    private isFilterViewport;
+    /**
+     * True when the **window** is below the `md` (768px) breakpoint.
+     *
+     * Deliberately viewport-based, unlike {@link isFilterViewport}: the forced
+     * mobile page size exists to keep a phone screen scrollable, and it is paired
+     * with the rows-per-page selector that mn-collection-pagination hides at the
+     * same viewport breakpoint. Measuring the table's own width instead would let
+     * the two disagree — a 700px table on a desktop would be pinned to the mobile
+     * row count while still offering the selector that overrides it.
+     */
+    private isMobileViewport;
+    /**
+     * The table's own rendered width, which every responsive decision is made
+     * against — the same width the `@container` queries in the template use, so
+     * the TS and CSS halves of the responsive layout can never disagree.
+     *
+     * Falls back to the window width before the host has been laid out (and in
+     * SSR), which is the closest available approximation at that point.
+     * @returns The width in CSS pixels.
+     */
+    private measuredWidth;
+    /**
+     * Applies the breakpoint-appropriate page size: capped at {@link MOBILE_PAGE_SIZE}
+     * below `md`, the desktop size at/above it. When the size actually changes, client-side tables
+     * re-slice locally and server-side tables ask the consumer to refetch, so the
+     * rendered rows update in every pagination mode (used at init and on window resize).
+     */
+    private applyResponsivePageSize;
     get totalColumnCount(): number;
     /**
      * Hands the active filters to the consumer. Locks the body height first so the
@@ -3860,6 +3974,11 @@ declare function matchesColumnFilter<T>(column: ColumnDefinition<T>, row: T, val
  * Attribute directive that applies responsive-hiding classes to table cells/headers.
  * Hides the element by default and shows it as `table-cell` at the specified breakpoint.
  *
+ * The breakpoints are **container** queries against the table's own width, not the
+ * viewport: a table inside a modal (or any narrow column) is far narrower than the
+ * window, so viewport breakpoints would reveal columns the table has no room for.
+ * mn-table marks its chrome `@container` for exactly this.
+ *
  * Uses a static class map so Tailwind CSS can detect the full class names at build time.
  *
  * Usage: `<td [mnHiddenBelow]="column.hiddenBelow">`
@@ -5306,6 +5425,13 @@ declare class MnWizardBodyComponent implements OnInit, AfterViewInit, OnDestroy
     modalRef: MnModalRef<WizardResult>;
     formBodies: QueryList<MnFormBodyComponent>;
     stepWrappers: QueryList<ElementRef<HTMLElement>>;
+    /**
+     * The step body's scroll container. Every step renders into this one element
+     * (inactive steps are hidden, not destroyed), so its scroll offset is shared —
+     * without an explicit reset, arriving on a new step lands you wherever the
+     * previous step was scrolled to. See {@link setCurrentStep}.
+     */
+    stepScroller?: ElementRef<HTMLElement>;
     currentStepId: ModalStepId;
     /**
      * Title of the currently active step, mirrored into a signal so the modal