mn-angular-lib 1.0.130 → 1.0.131

package/package.json

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

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

@@ -3354,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>;
 }
@@ -3456,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:
@@ -3702,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. */
@@ -3774,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
@@ -3796,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.
@@ -3821,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
@@ -3889,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">`