@meshmakers/shared-ui 3.4.360 → 3.4.380

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshmakers/shared-ui",
-  "version": "3.4.360",
+  "version": "3.4.380",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/meshmakers-shared-ui.d.ts

@@ -69,6 +69,23 @@ interface TableColumn {
      * Column width in pixels. If not set, the column will auto-size.
      */
     width?: number;
+    /**
+     * Minimum width in pixels for auto-sized columns (columns without `width`).
+     * Without it, fixed-width siblings can squeeze an auto column to zero on narrow
+     * viewports. When the available space per auto column drops below this value, the
+     * column is pinned to `minWidth` and the grid overflows into a horizontal scrollbar
+     * instead of collapsing the column. Also applied as the Kendo `minResizableWidth`,
+     * so user resizing cannot shrink the column below it either.
+     */
+    minWidth?: number;
+    /**
+     * Hides the column while the list view is narrower than this many pixels.
+     * Measured against the component's own width (not the browser viewport), so the
+     * column set also adapts when surrounding layout (drawer, split panes) takes space.
+     * Use it to declare column priority: give low-value detail columns a breakpoint so
+     * the identifying columns keep their room on small screens.
+     */
+    hideBelow?: number;
     /**
      * Status mapping for single-field statusIcons columns.
      * Use this when the column displays icons for a single field.
@@ -112,6 +129,13 @@ interface TableColumn {
      * have to handle every possible enum value explicitly.
      */
     badgeMapping?: BadgeMappingTable;
+    /**
+     * When true, values without a `badgeMapping` entry render an empty cell instead of the
+     * neutral raw-value pill (only consulted for `dataType: 'badge'`). Use for flag-style
+     * columns where only some values carry a badge — e.g. a boolean marker column that shows
+     * a pill for `true` and nothing (rather than a "false" pill) for `false`.
+     */
+    badgeHideUnmapped?: boolean;
     /**
      * Optional callback that produces the cell's display string.
      * When set, this overrides the default rendering selected by `dataType`.
@@ -225,6 +249,15 @@ declare class ListViewComponent extends CommandBaseService implements OnDestroy,
     protected _showRowFilter: boolean;
     /** Indicates if the data source is currently loading data */
     protected isLoading: i0.WritableSignal<boolean>;
+    /**
+     * The component's own width in pixels, kept current via ResizeObserver.
+     * `null` until the first measurement (before that, all columns render visible
+     * and auto-sized). Drives `hideBelow` column hiding and `minWidth` pinning.
+     */
+    protected readonly containerWidth: i0.WritableSignal<number | null>;
+    private readonly hostElement;
+    private readonly ngZone;
+    private resizeObserver?;
     private gridComponent?;
     private dataBindingDirective?;
     gridContextMenu?: ContextMenuComponent;
@@ -247,6 +280,26 @@ declare class ListViewComponent extends CommandBaseService implements OnDestroy,
     sortable: boolean;
     rowFilterEnabled: boolean;
     searchTextBoxEnabled: boolean;
+    /** Whether users can resize columns by dragging the header edges. */
+    resizable: boolean;
+    /**
+     * Width in pixels of the trailing actions command column. The default fits the
+     * historical five-button layouts; lists with only an edit button plus the
+     * context-menu trigger should pass something around 100.
+     */
+    actionsColumnWidth: number;
+    /**
+     * Hides the row-checkbox column while the list view is narrower than this many
+     * pixels — on phone-sized layouts multi-select via checkboxes is impractical and
+     * the 40px are better spent on the data columns. Pass `null` to always show them.
+     */
+    hideCheckboxesBelow: number | null;
+    /**
+     * Compact-toolbar breakpoint: below this component width the host gets the
+     * `mm-list-view-narrow` class, which wraps the grid toolbar and stretches the
+     * search input to a full row instead of stacking every control vertically.
+     */
+    protected get isNarrow(): boolean;
     /**
      * Callback for applying CSS classes to grid rows based on row data.
      * Passed through to Kendo Grid's [rowClass] input.
@@ -262,6 +315,20 @@ declare class ListViewComponent extends CommandBaseService implements OnDestroy,
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** Whether the column is hidden at the current component width (`hideBelow`). */
+    protected isColumnHidden(column: TableColumn): boolean;
+    /** Whether the row-checkbox column is rendered (selection enabled AND above `hideCheckboxesBelow`). */
+    protected showCheckboxColumn(): boolean;
+    /**
+     * Resolves the width passed to the Kendo column. Fixed-width columns keep their
+     * configured width. Auto columns normally stay auto (undefined) so they stretch into
+     * the remaining space — but once the space left over per auto column drops below the
+     * column's `minWidth`, the column is pinned to `minWidth`. The grid's total width then
+     * exceeds the container and Kendo shows a horizontal scrollbar instead of silently
+     * collapsing the auto columns to zero.
+     */
+    protected getEffectiveWidth(column: TableColumn): number | undefined;
+    protected readonly checkboxColumnWidth = 40;
     protected getDisplayName(column: TableColumn): string;
     protected getIsDisabled(commandItem: CommandItem, dataItem?: unknown): boolean;
     protected getValue(element: Record<string, unknown>, column: TableColumn): unknown;
@@ -337,7 +404,7 @@ declare class ListViewComponent extends CommandBaseService implements OnDestroy,
     protected getPdfPageText(pageNum: number, totalPages: number): string;
     protected readonly moreVerticalIcon: SVGIcon$1;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListViewComponent, "mm-list-view", never, { "pageSize": { "alias": "pageSize"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "rowIsClickable": { "alias": "rowIsClickable"; "required": false; }; "showRowCheckBoxes": { "alias": "showRowCheckBoxes"; "required": false; }; "showRowSelectAllCheckBox": { "alias": "showRowSelectAllCheckBox"; "required": false; }; "contextMenuType": { "alias": "contextMenuType"; "required": false; }; "leftToolbarActions": { "alias": "leftToolbarActions"; "required": false; }; "rightToolbarActions": { "alias": "rightToolbarActions"; "required": false; }; "actionCommandItems": { "alias": "actionCommandItems"; "required": false; }; "contextMenuCommandItems": { "alias": "contextMenuCommandItems"; "required": false; }; "excelExportFileName": { "alias": "excelExportFileName"; "required": false; }; "pdfExportFileName": { "alias": "pdfExportFileName"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "rowFilterEnabled": { "alias": "rowFilterEnabled"; "required": false; }; "searchTextBoxEnabled": { "alias": "searchTextBoxEnabled"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; }, { "rowClicked": "rowClicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListViewComponent, "mm-list-view", never, { "pageSize": { "alias": "pageSize"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "rowIsClickable": { "alias": "rowIsClickable"; "required": false; }; "showRowCheckBoxes": { "alias": "showRowCheckBoxes"; "required": false; }; "showRowSelectAllCheckBox": { "alias": "showRowSelectAllCheckBox"; "required": false; }; "contextMenuType": { "alias": "contextMenuType"; "required": false; }; "leftToolbarActions": { "alias": "leftToolbarActions"; "required": false; }; "rightToolbarActions": { "alias": "rightToolbarActions"; "required": false; }; "actionCommandItems": { "alias": "actionCommandItems"; "required": false; }; "contextMenuCommandItems": { "alias": "contextMenuCommandItems"; "required": false; }; "excelExportFileName": { "alias": "excelExportFileName"; "required": false; }; "pdfExportFileName": { "alias": "pdfExportFileName"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "rowFilterEnabled": { "alias": "rowFilterEnabled"; "required": false; }; "searchTextBoxEnabled": { "alias": "searchTextBoxEnabled"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "actionsColumnWidth": { "alias": "actionsColumnWidth"; "required": false; }; "hideCheckboxesBelow": { "alias": "hideCheckboxesBelow"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "messages": { "alias": "messages"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; }, { "rowClicked": "rowClicked"; }, never, never, true, never>;
 }
 
 declare class UploadFileDialogComponent extends DialogContentBase {