mn-angular-lib 1.0.131 → 1.0.132

package/package.json

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

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

@@ -3474,22 +3474,30 @@ type TableAppearance = {
     compact?: boolean;
     bordered?: boolean;
     /**
-     * How column widths are computed.
+     * How column widths are computed. Defaults to `stable`.
      *
-     * - `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';
+     * - `stable` (default): the best of both. The first render with rows on screen
+     *   uses the browser's automatic layout, so each column is sized in proportion to
+     *   its real content; those measured widths are then pinned and the table switches
+     *   to a fixed layout. Columns therefore keep sensible, content-derived
+     *   proportions **and** stop moving when the rows change underneath — a new page,
+     *   a filter or a search cannot resize them. Widths are re-measured only when the
+     *   table itself is resized (or a {@link ColumnBase.hiddenBelow} column appears or
+     *   disappears), never when the rows change. Content that no longer fits is
+     *   truncated with an ellipsis and exposed as a `title` tooltip.
+     * - `auto`: the plain browser layout. Every column is re-sized to its widest cell
+     *   on every change, so the columns shift on each new page, filter and search.
+     *   Use it for a static table, or when a cell must never be truncated.
+     * - `fixed`: widths are **data-independent**. Nothing is measured — not the cell
+     *   content, and not the header text either. Each column is either its declared
+     *   {@link ColumnBase.width} or an even share of whatever is left over:
+     *   `(table width − Σ declared widths) ÷ number of undeclared visible columns`.
+     *   Only worth choosing over `stable` when every column declares a `width`, or
+     *   when a deliberate even split is what you want: with widths undeclared, a
+     *   two-character status column is handed exactly as much room as a long
+     *   description.
+     */
+    layout?: 'auto' | 'fixed' | 'stable';
 };
 /**
  * The control rendered for a column filter, and the shape of the value it produces:
@@ -3744,7 +3752,11 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
      * 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. */
+    /**
+     * The component's own element, measured for every responsive decision. Typed via
+     * the annotation, not `inject(ElementRef<HTMLElement>)` — that form is a generic
+     * call on the token and leaves `nativeElement` untyped.
+     */
     private readonly host;
     /** Whether the consumer owns filtering (server-side), mirroring {@link isServerSearched}. */
     get isServerFiltered(): boolean;
@@ -3818,15 +3830,20 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     /** Opens/closes the stacked filter panel shown on small screens. */
     toggleFiltersPanel(): void;
     private readonly baseTableClasses;
-    constructor();
+    /**
+     * Column widths measured from the automatic layout and pinned, keyed by column
+     * key, for `stable`. Empty until the first render that has real rows on screen,
+     * and cleared whenever the table is resized so the next render re-measures.
+     */
+    private pinnedWidths;
     /** Sets sort/filter state seeded from the data source before the first filter pass. */
     protected beforeInitialFilter(): void;
     /**
-     * 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.
+     * Whether {@link pinColumnWidths} has run. Tracked separately from
+     * {@link pinnedWidths} being non-empty, because the widest column is deliberately
+     * left unpinned and a table with a single flexible column therefore pins nothing.
      */
-    get tableClasses(): string;
+    private widthsPinned;
     /**
      * Recomputes whether the inline filter row should collapse into the panel.
      * Closes the panel when returning to the wide layout so reopened state never
@@ -3843,12 +3860,33 @@ 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;
-    /** Whether column widths are content-independent (see {@link TableAppearance.layout}). */
-    get isFixedLayout(): boolean;
+    constructor();
+    /**
+     * Classes for the `<table>` element. `table-fixed` is added once column widths
+     * are no longer allowed to follow the content: always for the `fixed` layout, and
+     * for `stable` from the moment its widths have been measured and pinned.
+     */
+    get tableClasses(): string;
     /** Page size to use at/above the `md` breakpoint (consumer's pageSize, or the user's selection). */
     private desktopPageSize;
+    /** The effective column-width strategy, defaulting to `stable`. */
+    get layoutMode(): 'auto' | 'fixed' | 'stable';
+    /**
+     * Whether column widths have stopped following the cell content — `fixed` always,
+     * `stable` once {@link pinColumnWidths} has captured them. Drives `table-fixed`
+     * and the cell truncation together, so a cell is never clipped while the column
+     * it sits in could still have grown to fit it.
+     */
+    get widthsArePinned(): boolean;
     /**
-     * The `title` tooltip for a cell, so text truncated by the fixed layout stays
+     * The width to render for a column: the consumer's own declared width always
+     * wins, then a width pinned by the `stable` layout, otherwise none.
+     * @param column The column being rendered.
+     * @returns A CSS width, or `null` to leave it to the layout algorithm.
+     */
+    columnWidth(column: ColumnDefinition<T>): string | null;
+    /**
+     * The `title` tooltip for a cell, so text truncated by a pinned column 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.
@@ -3856,6 +3894,31 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
      * @returns The full cell text, or `null` when there is nothing to expose.
      */
     cellTitle(column: ColumnDefinition<T>, row: T): string | null;
+    /**
+     * Captures the current, automatically-derived width of every visible column and
+     * pins it, which flips the table to `table-fixed` on the next render.
+     *
+     * Runs only with real rows on screen: measuring the loading skeletons would pin
+     * the placeholder bars' widths rather than the data's. Hidden columns
+     * ({@link ColumnBase.hiddenBelow}) measure 0 and are skipped, so they are free to
+     * size themselves if a resize later reveals them.
+     *
+     * The **widest** column is measured but deliberately left unpinned, so it absorbs
+     * whatever space the pinned ones leave over. Pinning every column instead makes the
+     * widths sum to slightly more than the container — `border-collapse` shares borders
+     * between neighbours, so rounding each cell's measured width over-counts them — and
+     * the table then overflows into a spurious horizontal scrollbar. Leaving one column
+     * elastic also means a later resize squeezes the widest column first instead of
+     * clipping every column equally.
+     */
+    private pinColumnWidths;
+    /**
+     * Drops the pinned widths so the next render with rows re-measures them. Called
+     * when the table is resized: the old pixel widths were shares of a box that no
+     * longer exists, and a resize is also what makes `hiddenBelow` columns come and
+     * go, changing which columns need a share at all.
+     */
+    private unpinColumnWidths;
     /**
      * 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
@@ -3979,6 +4042,9 @@ declare function matchesColumnFilter<T>(column: ColumnDefinition<T>, row: T, val
  * window, so viewport breakpoints would reveal columns the table has no room for.
  * mn-table marks its chrome `@container` for exactly this.
  *
+ * Because of that, `sm`/`md`/`lg` mean "the table is at least this wide", and the
+ * thresholds are **not** the viewport values of the same names — see {@link classMap}.
+ *
  * Uses a static class map so Tailwind CSS can detect the full class names at build time.
  *
  * Usage: `<td [mnHiddenBelow]="column.hiddenBelow">`
@@ -3989,7 +4055,18 @@ declare class MnHiddenBelowDirective implements OnChanges {
     private readonly el;
     private readonly renderer;
     private appliedClasses;
-    /** Static mapping of breakpoints to their full Tailwind class names. */
+    /**
+     * Static mapping of breakpoints to their full Tailwind class names, so Tailwind
+     * can detect them at build time.
+     *
+     * These are **container** widths, deliberately lower than the viewport
+     * breakpoints they are named after. A table almost never gets the whole window:
+     * a page table sits inside a docked sidebar plus page padding, which on a
+     * 1280px screen leaves it under 900px. Reusing 1024px for `lg` would demand a
+     * ~1400px window before an `lg` column ever appeared — hiding columns on the
+     * most ordinary laptop. These values instead express how much room the column
+     * itself needs, which is what a container query should measure.
+     */
     private readonly classMap;
     ngOnChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MnHiddenBelowDirective, never>;