ngx-st-tables 17.0.111 → 17.0.113

package/lib/components/material-table/material-table-row-cell/material-table-row-cell.component.d.ts

@@ -1,8 +1,12 @@
-import { ChangeDetectorRef, OnInit } from '@angular/core';
+import { ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
 import { StMaterialTableColumnModel } from '../../../models/st-material-table-column.model';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
 import * as i0 from "@angular/core";
-export declare class MaterialTableRowCellComponent implements OnInit {
+export declare class MaterialTableRowCellComponent implements OnInit, AfterViewInit {
     private changeDetectorRef;
+    matInput?: MatInput;
+    matSelect?: MatSelect;
     column: import("@angular/core").InputSignal<StMaterialTableColumnModel>;
     rowData: import("@angular/core").InputSignal<{
         [prop: string]: any;
@@ -14,6 +18,8 @@ export declare class MaterialTableRowCellComponent implements OnInit {
     canEditRowValidator: import("@angular/core").InputSignal<(row: any) => boolean>;
     canDeleteRowValidator: import("@angular/core").InputSignal<(row: any) => boolean>;
     selectRowOnlyOne: import("@angular/core").InputSignal<boolean>;
+    isFirstEditableColumn: import("@angular/core").InputSignal<boolean>;
+    autoSaveOnChange: import("@angular/core").InputSignal<boolean>;
     set rowEditing(data: boolean);
     get rowEditing(): boolean;
     private _rowEditing;
@@ -24,6 +30,10 @@ export declare class MaterialTableRowCellComponent implements OnInit {
     editRowEmitter: import("@angular/core").OutputEmitterRef<void>;
     deleteRowEmitter: import("@angular/core").OutputEmitterRef<void>;
     selectRowChange: import("@angular/core").OutputEmitterRef<boolean>;
+    fieldValueChanged: import("@angular/core").OutputEmitterRef<{
+        field: string;
+        value: any;
+    }>;
     mobileView: boolean;
     actionIconColorDef: {
         [key: string]: 'primary' | 'warn';
@@ -34,6 +44,8 @@ export declare class MaterialTableRowCellComponent implements OnInit {
     }[]>;
     constructor(changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    private focusFirstEditableField;
     saveRow(): void;
     cancelRow(): void;
     editRow(): void;
@@ -41,8 +53,9 @@ export declare class MaterialTableRowCellComponent implements OnInit {
     selectRow(event: {
         checked: boolean;
     }): void;
+    onFieldChange(field: string, value: any): void;
     private checkWidthSize;
     private getDynamicSelectData;
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialTableRowCellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialTableRowCellComponent, "st-material-table-row-cell", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "rowData": { "alias": "rowData"; "required": true; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": true; "isSignal": true; }; "rowDataCopy": { "alias": "rowDataCopy"; "required": false; "isSignal": true; }; "canEditRowValidator": { "alias": "canEditRowValidator"; "required": false; "isSignal": true; }; "canDeleteRowValidator": { "alias": "canDeleteRowValidator"; "required": false; "isSignal": true; }; "selectRowOnlyOne": { "alias": "selectRowOnlyOne"; "required": false; "isSignal": true; }; "rowEditing": { "alias": "rowEditing"; "required": false; }; "rowIsSelected": { "alias": "rowIsSelected"; "required": false; "isSignal": true; }; "rowIsExpanded": { "alias": "rowIsExpanded"; "required": false; "isSignal": true; }; }, { "saveEditRowEmitter": "saveEditRowEmitter"; "cancelEditRowEmitter": "cancelEditRowEmitter"; "editRowEmitter": "editRowEmitter"; "deleteRowEmitter": "deleteRowEmitter"; "selectRowChange": "selectRowChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialTableRowCellComponent, "st-material-table-row-cell", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "rowData": { "alias": "rowData"; "required": true; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": true; "isSignal": true; }; "rowDataCopy": { "alias": "rowDataCopy"; "required": false; "isSignal": true; }; "canEditRowValidator": { "alias": "canEditRowValidator"; "required": false; "isSignal": true; }; "canDeleteRowValidator": { "alias": "canDeleteRowValidator"; "required": false; "isSignal": true; }; "selectRowOnlyOne": { "alias": "selectRowOnlyOne"; "required": false; "isSignal": true; }; "isFirstEditableColumn": { "alias": "isFirstEditableColumn"; "required": false; "isSignal": true; }; "autoSaveOnChange": { "alias": "autoSaveOnChange"; "required": false; "isSignal": true; }; "rowEditing": { "alias": "rowEditing"; "required": false; }; "rowIsSelected": { "alias": "rowIsSelected"; "required": false; "isSignal": true; }; "rowIsExpanded": { "alias": "rowIsExpanded"; "required": false; "isSignal": true; }; }, { "saveEditRowEmitter": "saveEditRowEmitter"; "cancelEditRowEmitter": "cancelEditRowEmitter"; "editRowEmitter": "editRowEmitter"; "deleteRowEmitter": "deleteRowEmitter"; "selectRowChange": "selectRowChange"; "fieldValueChanged": "fieldValueChanged"; }, never, never, false, never>;
 }

package/lib/components/material-table/material-table.component.d.ts

@@ -29,10 +29,22 @@ export declare class MaterialTableComponent extends StSubscribeDestroyComponent
     isLoading: import("@angular/core").InputSignal<boolean>;
     initColumns: import("@angular/core").InputSignal<StMaterialTableColumnModel[]>;
     rowClickAction: import("@angular/core").InputSignal<((row: any) => void) | undefined>;
+    /**
+     * Immutable Data Pattern:
+     * Creates a deep copy of incoming data to prevent mutations of parent data.
+     * IDs are generated on the copy, not on the original parent data.
+     * This ensures the parent maintains control of their data while the library
+     * manages its own working copy for UI operations.
+     */
     set data(data: any[]);
     get data(): any[];
     allowEditRow: import("@angular/core").InputSignal<boolean>;
     showEditAllRows: import("@angular/core").InputSignal<boolean>;
+    /**
+     * When true, field changes are saved immediately without requiring save/cancel buttons.
+     * Perfect for quantity inputs, toggles, or selection tables where instant updates are needed.
+     */
+    autoSaveOnChange: import("@angular/core").InputSignal<boolean>;
     canEditRowValidator: import("@angular/core").InputSignal<(row: any) => boolean>;
     canDeleteRowValidator: import("@angular/core").InputSignal<(row: any) => boolean>;
     allowSelectRow: import("@angular/core").InputSignal<boolean>;
@@ -57,10 +69,19 @@ export declare class MaterialTableComponent extends StSubscribeDestroyComponent
         index: number;
     }>;
     selectRowChange: import("@angular/core").OutputEmitterRef<any[]>;
+    /**
+     * Emitted when a field value changes and autoSaveOnChange is enabled.
+     * Parent should update their data immediately.
+     */
+    fieldValueChanged: import("@angular/core").OutputEmitterRef<{
+        row: any;
+        field: string;
+        value: any;
+    }>;
     private _data;
     initLocalColumns: import("@angular/core").WritableSignal<StMaterialTableColumnModel[]>;
     expandedRow: import("@angular/core").WritableSignal<any>;
-    creatingRow: import("@angular/core").WritableSignal<boolean>;
+    creatingRow: import("@angular/core").Signal<boolean>;
     columns: ViewStMaterialTableColumnModel[];
     selectedColumns: ViewStMaterialTableColumnModel[];
     selectedColumnsString: string[];
@@ -75,6 +96,11 @@ export declare class MaterialTableComponent extends StSubscribeDestroyComponent
             [prop: string]: any;
         };
     };
+    activeRowsCreating: {
+        [rowId: string]: {
+            [prop: string]: any;
+        };
+    };
     selection: SelectionModel<any>;
     private localStorageData;
     constructor(changeDetectorRef: ChangeDetectorRef, snackbar: StSnackBarService, stTableTranslations: StTablesTranslationsService, stDialogService: StDialogService);
@@ -83,11 +109,36 @@ export declare class MaterialTableComponent extends StSubscribeDestroyComponent
     turnOnAllEditRows(): void;
     captionDataChanged(event: ICaptionDataChanged): void;
     resetTableSettings(): void;
+    /**
+     * Adds a new row to the local table copy only.
+     * The row is tracked in activeRowsCreating until saved.
+     * When saved, the parent receives the event through saveNewCreatedRow output.
+     * The parent decides whether to accept and add to their data array.
+     */
     addNewRow(): void;
     editRow(row: any, column: ViewStMaterialTableColumnModel): void;
     deleteRow(row: any, column: ViewStMaterialTableColumnModel, index: number): void;
+    /**
+     * Validates and saves a row (either new or edited).
+     * Emits the validated row to the parent through either:
+     * - saveNewCreatedRow: for newly created rows
+     * - saveNewRow: for edited existing rows
+     *
+     * The parent is responsible for:
+     * - Persisting the change (e.g., API call)
+     * - Updating their data array
+     * - Handling errors/rejections
+     *
+     * The library updates its local copy optimistically.
+     */
     saveEditRow(row: any, column: ViewStMaterialTableColumnModel): void;
     cancelEditRow(row: any, column: ViewStMaterialTableColumnModel): void;
+    /**
+     * Handles immediate field value changes for auto-save mode.
+     * In auto-save mode, ngModel is bound directly to rowData, so we don't need to update it.
+     * We only emit to parent so they can update their data copy.
+     */
+    onFieldValueChanged(row: any, column: ViewStMaterialTableColumnModel, value: any): void;
     isAllSelected(): boolean;
     toggleAllRows(): void;
     removeSelectedRow(row: any): void;
@@ -106,8 +157,9 @@ export declare class MaterialTableComponent extends StSubscribeDestroyComponent
     private loadLocalStorageData;
     private validOldFiltersToNewFormat;
     private setNewEmptyLocalStorageData;
+    isFirstEditableColumn(column: ViewStMaterialTableColumnModel): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialTableComponent, "ngx-st-material-table", never, { "showGlobalSearch": { "alias": "showGlobalSearch"; "required": false; "isSignal": true; }; "tableTitle": { "alias": "tableTitle"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "dataLength": { "alias": "dataLength"; "required": false; "isSignal": true; }; "allowPickColumns": { "alias": "allowPickColumns"; "required": false; "isSignal": true; }; "allowReorderColumns": { "alias": "allowReorderColumns"; "required": false; "isSignal": true; }; "localStorageName": { "alias": "localStorageName"; "required": false; "isSignal": true; }; "lazyLoading": { "alias": "lazyLoading"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "initColumns": { "alias": "initColumns"; "required": false; "isSignal": true; }; "rowClickAction": { "alias": "rowClickAction"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; "allowEditRow": { "alias": "allowEditRow"; "required": false; "isSignal": true; }; "showEditAllRows": { "alias": "showEditAllRows"; "required": false; "isSignal": true; }; "canEditRowValidator": { "alias": "canEditRowValidator"; "required": false; "isSignal": true; }; "canDeleteRowValidator": { "alias": "canDeleteRowValidator"; "required": false; "isSignal": true; }; "allowSelectRow": { "alias": "allowSelectRow"; "required": false; "isSignal": true; }; "selectionFieldLabel": { "alias": "selectionFieldLabel"; "required": false; "isSignal": true; }; "selectRowOnlyOne": { "alias": "selectRowOnlyOne"; "required": false; "isSignal": true; }; "showCreateButton": { "alias": "showCreateButton"; "required": false; "isSignal": true; }; "createButtonLabel": { "alias": "createButtonLabel"; "required": false; "isSignal": true; }; "createButtonAction": { "alias": "createButtonAction"; "required": false; "isSignal": true; }; "disableCreateButton": { "alias": "disableCreateButton"; "required": false; "isSignal": true; }; "createButtonUseAddRow": { "alias": "createButtonUseAddRow"; "required": false; "isSignal": true; }; "allowExtendRow": { "alias": "allowExtendRow"; "required": false; "isSignal": true; }; "extendedRowTemplate": { "alias": "extendedRowTemplate"; "required": false; "isSignal": true; }; "initSelectedRow": { "alias": "initSelectedRow"; "required": false; "isSignal": true; }; "extraCustomFilter": { "alias": "extraCustomFilter"; "required": false; "isSignal": true; }; }, { "loadData": "loadData"; "saveNewRow": "saveNewRow"; "saveNewCreatedRow": "saveNewCreatedRow"; "rowDeleted": "rowDeleted"; "selectRowChange": "selectRowChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialTableComponent, "ngx-st-material-table", never, { "showGlobalSearch": { "alias": "showGlobalSearch"; "required": false; "isSignal": true; }; "tableTitle": { "alias": "tableTitle"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "dataLength": { "alias": "dataLength"; "required": false; "isSignal": true; }; "allowPickColumns": { "alias": "allowPickColumns"; "required": false; "isSignal": true; }; "allowReorderColumns": { "alias": "allowReorderColumns"; "required": false; "isSignal": true; }; "localStorageName": { "alias": "localStorageName"; "required": false; "isSignal": true; }; "lazyLoading": { "alias": "lazyLoading"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "initColumns": { "alias": "initColumns"; "required": false; "isSignal": true; }; "rowClickAction": { "alias": "rowClickAction"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; }; "allowEditRow": { "alias": "allowEditRow"; "required": false; "isSignal": true; }; "showEditAllRows": { "alias": "showEditAllRows"; "required": false; "isSignal": true; }; "autoSaveOnChange": { "alias": "autoSaveOnChange"; "required": false; "isSignal": true; }; "canEditRowValidator": { "alias": "canEditRowValidator"; "required": false; "isSignal": true; }; "canDeleteRowValidator": { "alias": "canDeleteRowValidator"; "required": false; "isSignal": true; }; "allowSelectRow": { "alias": "allowSelectRow"; "required": false; "isSignal": true; }; "selectionFieldLabel": { "alias": "selectionFieldLabel"; "required": false; "isSignal": true; }; "selectRowOnlyOne": { "alias": "selectRowOnlyOne"; "required": false; "isSignal": true; }; "showCreateButton": { "alias": "showCreateButton"; "required": false; "isSignal": true; }; "createButtonLabel": { "alias": "createButtonLabel"; "required": false; "isSignal": true; }; "createButtonAction": { "alias": "createButtonAction"; "required": false; "isSignal": true; }; "disableCreateButton": { "alias": "disableCreateButton"; "required": false; "isSignal": true; }; "createButtonUseAddRow": { "alias": "createButtonUseAddRow"; "required": false; "isSignal": true; }; "allowExtendRow": { "alias": "allowExtendRow"; "required": false; "isSignal": true; }; "extendedRowTemplate": { "alias": "extendedRowTemplate"; "required": false; "isSignal": true; }; "initSelectedRow": { "alias": "initSelectedRow"; "required": false; "isSignal": true; }; "extraCustomFilter": { "alias": "extraCustomFilter"; "required": false; "isSignal": true; }; }, { "loadData": "loadData"; "saveNewRow": "saveNewRow"; "saveNewCreatedRow": "saveNewCreatedRow"; "rowDeleted": "rowDeleted"; "selectRowChange": "selectRowChange"; "fieldValueChanged": "fieldValueChanged"; }, never, never, false, never>;
 }
 export interface StMaterialTableLoadData {
     first: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-st-tables",
-  "version": "17.0.111",
+  "version": "17.0.113",
   "peerDependencies": {
     "@angular/common": "^17.3.12",
     "@angular/core": "^17.3.12",