mn-angular-lib 1.0.90 → 1.0.92

package/package.json

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

package/src/lib/features/mn-modal/components/mn-form-body/mn-form-body.component.css

@@ -3,3 +3,22 @@
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
 }
+
+.mn-form-row {
+  grid-template-columns: repeat(var(--mn-form-cols, 1), minmax(0, 1fr));
+}
+
+.mn-form-cell {
+  grid-column: span var(--mn-form-span, 1);
+}
+
+/* Collapse to a single column when the modal becomes a mobile bottom sheet */
+@media (max-width: 639.98px) {
+  .mn-form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .mn-form-cell {
+    grid-column: auto;
+  }
+}

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

@@ -3058,6 +3058,20 @@ type TableDataSource<T> = MnSelectableCollectionDataSource<T> & {
     toolbarLeftTemplate?: TemplateRef<unknown>;
     /** Template rendered on the right side of the toolbar (after the search field). */
     toolbarRightTemplate?: TemplateRef<unknown>;
+    /**
+     * Label for the toggle button that opens the stacked filter panel on small
+     * screens (below 640px). Defaults to "Filters".
+     */
+    filtersLabel?: string;
+    /** Translation key for {@link filtersLabel}. Resolved via MnLanguageService. */
+    filtersLabelKey?: string;
+    /**
+     * Label for the action that resets every column filter in the small-screen
+     * panel. Defaults to "Clear all".
+     */
+    clearFiltersLabel?: string;
+    /** Translation key for {@link clearFiltersLabel}. Resolved via MnLanguageService. */
+    clearFiltersLabelKey?: string;
 };
 /** @deprecated Use {@link MnCollectionLabels}. */
 type TableLabels = MnCollectionLabels;
@@ -3070,6 +3084,16 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     currentSort: SortState | null;
     /** Per-column filter values keyed by column key. */
     columnFilters: ColumnFilterState;
+    /** Viewport width (px) below which the inline filter row collapses into a panel. */
+    private static readonly FILTER_COLLAPSE_WIDTH;
+    /**
+     * True when the viewport is narrow enough that the per-column filter inputs no
+     * longer fit under their headers; the inline row is then replaced by a toggle
+     * button and a stacked filter panel.
+     */
+    protected filtersCollapsed: boolean;
+    /** Whether the small-screen filter panel is currently expanded. */
+    protected filtersPanelOpen: boolean;
     protected readonly componentName = "MnTable";
     protected get trackedToolbarTemplate(): TemplateRef<unknown> | undefined;
     protected collectionBody?: ElementRef<HTMLElement>;
@@ -3079,6 +3103,24 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
     getFilterSelectOptions(column: ColumnDefinition<T>): MnSelectOption<string>[];
     /** Whether any column has filtering enabled. */
     get hasColumnFilters(): boolean;
+    /** Whether at least one column filter is active. */
+    get hasActiveFilters(): boolean;
+    /** Label for the small-screen filters toggle button. */
+    get filtersButtonLabel(): string;
+    /** Label for the "clear all filters" action in the small-screen panel. */
+    get clearFiltersButtonLabel(): string;
+    /** Opens/closes the stacked filter panel shown on small screens. */
+    toggleFiltersPanel(): void;
+    /** Resets every column filter and re-applies filtering. */
+    clearAllFilters(): void;
+    /** True when the viewport is below the filter-collapse breakpoint. */
+    private isFilterViewport;
+    /**
+     * Recomputes whether the inline filter row should collapse into the panel.
+     * Closes the panel when returning to the wide layout so reopened state never
+     * leaks across the breakpoint. Marks for check only when the layout flips.
+     */
+    private updateFilterLayout;
     sort(column: ColumnDefinition<T>): void;
     onRowClick(row: T): void;
     /**
@@ -3102,7 +3144,7 @@ declare class MnTable<T = object> extends MnSelectableCollectionBase<T, TableDat
      * rendered rows update in every pagination mode (used at init and on window resize).
      */
     private applyResponsivePageSize;
-    /** Re-evaluate the responsive page size when the viewport crosses the breakpoint. */
+    /** Re-evaluate responsive page size and filter layout when the viewport changes. */
     protected onWindowResize(): void;
     /** Tracks the desktop page size when the user picks one (selector only shows at >= md). */
     onPageSizeChange(newSize: number): void;
@@ -4420,8 +4462,6 @@ declare class MnFormBodyComponent<TModel = unknown, TResult = TModel> implements
     private subscribeToValueChanges;
     private previousFormValue;
     private reloadDependentDataSources;
-    getGridColumns(row: FormRow<TModel>): string;
-    getGridSpan(rowField: FormRowField<TModel>): string;
     /**
      * Invokes a FILE field's `onClear` callback when its existing image is removed.
      * FILE fields render {@link MnFileInput}, which owns selection/validation and
@@ -5520,7 +5560,7 @@ declare const MN_ICON_MAP: Record<string, string>;
 
 declare class MnIconAttributes {
     static ɵfac: i0.ɵɵFactoryDeclaration<MnIconAttributes, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MnIconAttributes, "mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MnIconAttributes, "mn-icon[mnIconPistol], mn-icon[mnIconPending]", never, {}, {}, never, never, true, never>;
 }
 
 /**