ngx-st-tables 17.0.111 → 17.0.113

package/fesm2022/ngx-st-tables.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, input, output, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { signal, Injectable, Optional, Inject, EventEmitter, Component, ViewChild, Input, Output, input, output, ChangeDetectionStrategy, computed, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i3$1 from '@angular/material/table';
@@ -13,7 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i3$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
 import { StSubscribeDestroyComponent, StBaseService, StBaseFunctionsModule } from 'ngx-st-base-functions';
 import { takeUntil, distinctUntilChanged, debounceTime, take, filter } from 'rxjs/operators';
 import * as i1 from '@angular/material/dialog';
@@ -23,7 +23,7 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i10 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i11 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i7 from '@angular/material/datepicker';
@@ -827,9 +827,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class MaterialTableRowCellComponent {
     set rowEditing(data) {
+        const wasNotEditing = !this._rowEditing;
         this._rowEditing = data;
         if (data) {
             this.getDynamicSelectData();
+            // Focus first editable field when entering edit mode
+            if (wasNotEditing && this.isFirstEditableColumn()) {
+                this.focusFirstEditableField();
+            }
         }
     }
     get rowEditing() {
@@ -844,6 +849,8 @@ class MaterialTableRowCellComponent {
         this.canEditRowValidator = input(() => true);
         this.canDeleteRowValidator = input(() => true);
         this.selectRowOnlyOne = input(false);
+        this.isFirstEditableColumn = input(false);
+        this.autoSaveOnChange = input(false);
         this._rowEditing = false;
         this.rowIsSelected = input(false);
         this.rowIsExpanded = input(false);
@@ -852,6 +859,7 @@ class MaterialTableRowCellComponent {
         this.editRowEmitter = output();
         this.deleteRowEmitter = output();
         this.selectRowChange = output();
+        this.fieldValueChanged = output();
         this.mobileView = false;
         this.actionIconColorDef = {
             edit: 'primary',
@@ -864,6 +872,25 @@ class MaterialTableRowCellComponent {
             this.checkWidthSize();
         });
     }
+    ngAfterViewInit() {
+        // If row is already in edit mode on init (e.g., newly added row), focus the field
+        if (this.rowEditing && this.isFirstEditableColumn()) {
+            this.focusFirstEditableField();
+        }
+    }
+    focusFirstEditableField() {
+        // Use setTimeout to ensure the view is fully rendered
+        setTimeout(() => {
+            if (this.matInput) {
+                // Focus MatInput
+                this.matInput.focus();
+            }
+            else if (this.matSelect) {
+                // Focus MatSelect
+                this.matSelect.focus();
+            }
+        }, 150);
+    }
     saveRow() {
         this.saveEditRowEmitter.emit();
     }
@@ -881,6 +908,11 @@ class MaterialTableRowCellComponent {
             this.selectRowChange.emit(event.checked);
         }
     }
+    onFieldChange(field, value) {
+        if (this.autoSaveOnChange()) {
+            this.fieldValueChanged.emit({ field, value });
+        }
+    }
     checkWidthSize() {
         this.mobileView = document.body.clientWidth <= 1100;
         this.changeDetectorRef.markForCheck();
@@ -894,30 +926,42 @@ class MaterialTableRowCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: false, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange" }, ngImport: i0, template: "@switch (column().type || 'string') {\r\n  @case ('custom-template') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"column().customTemplate!\"\r\n        [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n      ></ng-container>\r\n    }\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column().actions) {\r\n      @if (\r\n        (!column().actionsInMenu && !mobileView) ||\r\n        (mobileView && column().actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"\r\n                    $event.stopPropagation();\r\n                    action.action!(rowData(), rowIndex())\r\n                  \"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (\r\n        column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n      ) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      {{ rowData()[column().field] | stDateTimeFormatPipe }}\r\n    }\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n          [disabled]=\"\r\n            canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n          \"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"deleteRow()\"\r\n          [matTooltip]=\"'Delete row'\"\r\n          [disabled]=\"\r\n            canDeleteRowValidator()\r\n              ? !canDeleteRowValidator()(rowData())\r\n              : false\r\n          \"\r\n        >\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <!--    @if (selectRowOnlyOne()) {-->\r\n    <!--      <mat-radio-button-->\r\n    <!--        color=\"primary\"-->\r\n    <!--        (click)=\"$event.stopPropagation()\"-->\r\n    <!--        (change)=\"selectRow({ checked: true })\"-->\r\n    <!--        [checked]=\"rowIsSelected()\"-->\r\n    <!--      ></mat-radio-button>-->\r\n    <!--    } @else {-->\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected()\"\r\n    ></mat-checkbox>\r\n    <!--    }-->\r\n  }\r\n\r\n  @case ('actions-row-extending') {\r\n    @if (rowIsExpanded()) {\r\n      <mat-icon>keyboard_arrow_up</mat-icon>\r\n    } @else {\r\n      <mat-icon>keyboard_arrow_down</mat-icon>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if (rowEditing && column.allowEditColumn) {\r\n    @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          (keydown.enter)=\"saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'date') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          (keydown.enter)=\"saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matIconSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'boolean') {\r\n      <mat-checkbox [(ngModel)]=\"rowDataCopy()![column.field]\"></mat-checkbox>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          <mat-option value=\"\"></mat-option>\r\n          @for (option of column.customRowEditOptions; track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom-dynamic-select') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          @if (!column.editColumnRequired) {\r\n            <mat-option value=\"\"></mat-option>\r\n          }\r\n\r\n          @for (option of dynamicSelectOptions(); track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData()[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData()[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData()[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i14.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, rowDataCopy: { classPropertyName: "rowDataCopy", publicName: "rowDataCopy", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, isFirstEditableColumn: { classPropertyName: "isFirstEditableColumn", publicName: "isFirstEditableColumn", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: false, isRequired: false, transformFunction: null }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveEditRowEmitter: "saveEditRowEmitter", cancelEditRowEmitter: "cancelEditRowEmitter", editRowEmitter: "editRowEmitter", deleteRowEmitter: "deleteRowEmitter", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "matInput", first: true, predicate: MatInput, descendants: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], ngImport: i0, template: "@switch (column().type || 'string') {\r\n  @case ('custom-template') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"column().customTemplate!\"\r\n        [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n      ></ng-container>\r\n    }\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column().actions) {\r\n      @if (\r\n        (!column().actionsInMenu && !mobileView) ||\r\n        (mobileView && column().actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"\r\n                    $event.stopPropagation();\r\n                    action.action!(rowData(), rowIndex())\r\n                  \"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (\r\n        column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n      ) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      {{ rowData()[column().field] | stDateTimeFormatPipe }}\r\n    }\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n          [disabled]=\"\r\n            canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n          \"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"deleteRow()\"\r\n          [matTooltip]=\"'Delete row'\"\r\n          [disabled]=\"\r\n            canDeleteRowValidator()\r\n              ? !canDeleteRowValidator()(rowData())\r\n              : false\r\n          \"\r\n        >\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <!--    @if (selectRowOnlyOne()) {-->\r\n    <!--      <mat-radio-button-->\r\n    <!--        color=\"primary\"-->\r\n    <!--        (click)=\"$event.stopPropagation()\"-->\r\n    <!--        (change)=\"selectRow({ checked: true })\"-->\r\n    <!--        [checked]=\"rowIsSelected()\"-->\r\n    <!--      ></mat-radio-button>-->\r\n    <!--    } @else {-->\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected()\"\r\n    ></mat-checkbox>\r\n    <!--    }-->\r\n  }\r\n\r\n  @case ('actions-row-extending') {\r\n    @if (rowIsExpanded()) {\r\n      <mat-icon>keyboard_arrow_up</mat-icon>\r\n    } @else {\r\n      <mat-icon>keyboard_arrow_down</mat-icon>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if ((rowEditing || autoSaveOnChange()) && column.allowEditColumn) {\r\n    @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'date') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matIconSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'boolean') {\r\n      <mat-checkbox\r\n        [(ngModel)]=\"\r\n          autoSaveOnChange()\r\n            ? rowData()[column.field]\r\n            : rowDataCopy()![column.field]\r\n        \"\r\n        (ngModelChange)=\"\r\n          autoSaveOnChange() && onFieldChange(column.field, $event)\r\n        \"\r\n      ></mat-checkbox>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          <mat-option value=\"\"></mat-option>\r\n          @for (option of column.customRowEditOptions; track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom-dynamic-select') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          @if (!column.editColumnRequired) {\r\n            <mat-option value=\"\"></mat-option>\r\n          }\r\n\r\n          @for (option of dynamicSelectOptions(); track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData()[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData()[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData()[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i14.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column().type || 'string') {\r\n  @case ('custom-template') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"column().customTemplate!\"\r\n        [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n      ></ng-container>\r\n    }\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column().actions) {\r\n      @if (\r\n        (!column().actionsInMenu && !mobileView) ||\r\n        (mobileView && column().actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"\r\n                    $event.stopPropagation();\r\n                    action.action!(rowData(), rowIndex())\r\n                  \"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (\r\n        column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n      ) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      {{ rowData()[column().field] | stDateTimeFormatPipe }}\r\n    }\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n          [disabled]=\"\r\n            canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n          \"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"deleteRow()\"\r\n          [matTooltip]=\"'Delete row'\"\r\n          [disabled]=\"\r\n            canDeleteRowValidator()\r\n              ? !canDeleteRowValidator()(rowData())\r\n              : false\r\n          \"\r\n        >\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <!--    @if (selectRowOnlyOne()) {-->\r\n    <!--      <mat-radio-button-->\r\n    <!--        color=\"primary\"-->\r\n    <!--        (click)=\"$event.stopPropagation()\"-->\r\n    <!--        (change)=\"selectRow({ checked: true })\"-->\r\n    <!--        [checked]=\"rowIsSelected()\"-->\r\n    <!--      ></mat-radio-button>-->\r\n    <!--    } @else {-->\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected()\"\r\n    ></mat-checkbox>\r\n    <!--    }-->\r\n  }\r\n\r\n  @case ('actions-row-extending') {\r\n    @if (rowIsExpanded()) {\r\n      <mat-icon>keyboard_arrow_up</mat-icon>\r\n    } @else {\r\n      <mat-icon>keyboard_arrow_down</mat-icon>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if (rowEditing && column.allowEditColumn) {\r\n    @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          (keydown.enter)=\"saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'date') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          (keydown.enter)=\"saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matIconSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'boolean') {\r\n      <mat-checkbox [(ngModel)]=\"rowDataCopy()![column.field]\"></mat-checkbox>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          <mat-option value=\"\"></mat-option>\r\n          @for (option of column.customRowEditOptions; track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom-dynamic-select') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"rowDataCopy()![column.field]\"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          @if (!column.editColumnRequired) {\r\n            <mat-option value=\"\"></mat-option>\r\n          }\r\n\r\n          @for (option of dynamicSelectOptions(); track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData()[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData()[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData()[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { rowEditing: [{
+            args: [{ selector: 'st-material-table-row-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column().type || 'string') {\r\n  @case ('custom-template') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"column().customTemplate!\"\r\n        [ngTemplateOutletContext]=\"{ data: rowData() }\"\r\n      ></ng-container>\r\n    }\r\n  }\r\n\r\n  @case ('actions') {\r\n    @if (column().actions) {\r\n      @if (\r\n        (!column().actionsInMenu && !mobileView) ||\r\n        (mobileView && column().actions!.length <= 1)\r\n      ) {\r\n        <div [ngStyle]=\"{ float: column().flexRight ? 'right' : 'none' }\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  class=\"action-icon-button\"\r\n                  type=\"button\"\r\n                  mat-icon-button\r\n                  [color]=\"\r\n                    actionIconColorDef[action.iconName]\r\n                      ? actionIconColorDef[action.iconName]\r\n                      : action.iconColor\r\n                  \"\r\n                  [matTooltip]=\"action.tooltipName || ''\"\r\n                  [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  (click)=\"\r\n                    $event.stopPropagation();\r\n                    action.action!(rowData(), rowIndex())\r\n                  \"\r\n                >\r\n                  <mat-icon>{{ action.iconName }}</mat-icon>\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button\r\n                    class=\"action-icon-button\"\r\n                    type=\"button\"\r\n                    mat-icon-button\r\n                    [color]=\"\r\n                      actionIconColorDef[action.iconName]\r\n                        ? actionIconColorDef[action.iconName]\r\n                        : action.iconColor\r\n                    \"\r\n                    [matTooltip]=\"action.tooltipName || ''\"\r\n                    [matTooltipDisabled]=\"!action.tooltipName\"\r\n                  >\r\n                    <mat-icon>{{ action.iconName }}</mat-icon>\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n      @if (\r\n        column().actionsInMenu || (mobileView && column().actions!.length > 1)\r\n      ) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          @for (action of column().actions; track action) {\r\n            @if ((action.show && action.show(rowData())) || !action.show) {\r\n              @if (!action.url && action.action) {\r\n                <button\r\n                  type=\"button\"\r\n                  mat-menu-item\r\n                  (click)=\"$event.stopPropagation(); action.action!(rowData())\"\r\n                >\r\n                  {{ action.tooltipName }}\r\n                </button>\r\n              }\r\n              @if (action.url) {\r\n                <a [routerLink]=\"action.url\">\r\n                  <button type=\"button\" mat-menu-item>\r\n                    {{ action.tooltipName }}\r\n                  </button>\r\n                </a>\r\n              }\r\n            }\r\n          }\r\n        </mat-menu>\r\n      }\r\n    }\r\n  }\r\n\r\n  @case ('string') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('number') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('boolean') {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n    ></ng-container>\r\n  }\r\n\r\n  @case ('date') {\r\n    @if (rowEditing && column().allowEditColumn) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"baseFieldCell; context: { $implicit: column() }\"\r\n      ></ng-container>\r\n    } @else {\r\n      {{ rowData()[column().field] | stDateTimeFormatPipe }}\r\n    }\r\n  }\r\n\r\n  @case ('actions-row-editing') {\r\n    <div class=\"row justify-content-end\">\r\n      @if (rowEditing) {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"accent\"\r\n          (click)=\"saveRow()\"\r\n          [matTooltip]=\"'Save row'\"\r\n        >\r\n          <mat-icon>done</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"primary\"\r\n          (click)=\"editRow()\"\r\n          [matTooltip]=\"'Edit row'\"\r\n          [disabled]=\"\r\n            canEditRowValidator() ? !canEditRowValidator()(rowData()) : false\r\n          \"\r\n        >\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          (click)=\"deleteRow()\"\r\n          [matTooltip]=\"'Delete row'\"\r\n          [disabled]=\"\r\n            canDeleteRowValidator()\r\n              ? !canDeleteRowValidator()(rowData())\r\n              : false\r\n          \"\r\n        >\r\n          <mat-icon>delete</mat-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @case ('actions-row-selecting') {\r\n    <!--    @if (selectRowOnlyOne()) {-->\r\n    <!--      <mat-radio-button-->\r\n    <!--        color=\"primary\"-->\r\n    <!--        (click)=\"$event.stopPropagation()\"-->\r\n    <!--        (change)=\"selectRow({ checked: true })\"-->\r\n    <!--        [checked]=\"rowIsSelected()\"-->\r\n    <!--      ></mat-radio-button>-->\r\n    <!--    } @else {-->\r\n    <mat-checkbox\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (change)=\"selectRow($event)\"\r\n      [checked]=\"rowIsSelected()\"\r\n    ></mat-checkbox>\r\n    <!--    }-->\r\n  }\r\n\r\n  @case ('actions-row-extending') {\r\n    @if (rowIsExpanded()) {\r\n      <mat-icon>keyboard_arrow_up</mat-icon>\r\n    } @else {\r\n      <mat-icon>keyboard_arrow_down</mat-icon>\r\n    }\r\n  }\r\n}\r\n\r\n<ng-template #baseFieldCell let-column>\r\n  @if ((rowEditing || autoSaveOnChange()) && column.allowEditColumn) {\r\n    @if (column.rowEditType === 'string' || column.rowEditType === 'number') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [type]=\"column.rowEditType === 'string' ? 'text' : 'number'\"\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'date') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <input\r\n          matInput\r\n          [matDatepicker]=\"picker1\"\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n        />\r\n        <mat-datepicker-toggle\r\n          matIconSuffix\r\n          [for]=\"picker1\"\r\n        ></mat-datepicker-toggle>\r\n        <mat-datepicker #picker1></mat-datepicker>\r\n      </mat-form-field>\r\n    }\r\n    @if (column.rowEditType === 'boolean') {\r\n      <mat-checkbox\r\n        [(ngModel)]=\"\r\n          autoSaveOnChange()\r\n            ? rowData()[column.field]\r\n            : rowDataCopy()![column.field]\r\n        \"\r\n        (ngModelChange)=\"\r\n          autoSaveOnChange() && onFieldChange(column.field, $event)\r\n        \"\r\n      ></mat-checkbox>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          <mat-option value=\"\"></mat-option>\r\n          @for (option of column.customRowEditOptions; track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n\r\n    @if (column.rowEditType === 'custom-dynamic-select') {\r\n      <mat-form-field\r\n        appearance=\"outline\"\r\n        [ngStyle]=\"{ width: column.width || 'auto' }\"\r\n      >\r\n        <mat-select\r\n          [(ngModel)]=\"\r\n            autoSaveOnChange()\r\n              ? rowData()[column.field]\r\n              : rowDataCopy()![column.field]\r\n          \"\r\n          (ngModelChange)=\"\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n        >\r\n          @if (!column.editColumnRequired) {\r\n            <mat-option value=\"\"></mat-option>\r\n          }\r\n\r\n          @for (option of dynamicSelectOptions(); track option) {\r\n            <mat-option [value]=\"option.value\">\r\n              {{ option.label }}\r\n            </mat-option>\r\n          }\r\n        </mat-select>\r\n      </mat-form-field>\r\n    }\r\n  } @else {\r\n    <div>\r\n      @if (column.translateValue) {\r\n        {{ column.translateValue![rowData()[column.field]] || '' }}\r\n      }\r\n      @if (column.customValueDisplay) {\r\n        {{ column.customValueDisplay(rowData()[column.field]) }}\r\n      }\r\n      @if (!column.translateValue && !column.customValueDisplay) {\r\n        {{ rowData()[column.field] }}\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matInput: [{
+                type: ViewChild,
+                args: [MatInput]
+            }], matSelect: [{
+                type: ViewChild,
+                args: [MatSelect]
+            }], rowEditing: [{
                 type: Input
             }] } });
 
 class MaterialTableComponent extends StSubscribeDestroyComponent {
+    /**
+     * 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) {
+        // Create a deep copy to avoid mutating parent data
+        let clonedData = (data || []).map(row => ({ ...row }));
+        // Add IDs if needed (only on the copy)
         if (this.allowEditRow() || this.allowSelectRow()) {
-            if (data.length > 0 && !data[0].id) {
-                data = data.map(row => {
-                    return {
-                        ...row,
-                        id: StBaseService.generateGUID(),
-                    };
-                });
-            }
+            clonedData = clonedData.map(row => ({
+                ...row,
+                id: row.id || StBaseService.generateGUID(),
+            }));
         }
-        this._data = data || [];
+        this._data = clonedData;
         if (this.tableSource) {
-            this.tableSource.data = data;
+            this.tableSource.data = [...clonedData];
             if (!this.lazyLoading() && this.localStorageData) {
                 this.paginator.pageIndex = this.localStorageData.pageIndex;
                 //@ts-ignore
@@ -948,6 +992,11 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         this.rowClickAction = input();
         this.allowEditRow = input(false);
         this.showEditAllRows = input(false);
+        /**
+         * 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.
+         */
+        this.autoSaveOnChange = input(false);
         this.canEditRowValidator = input(() => true);
         this.canDeleteRowValidator = input(() => true);
         this.allowSelectRow = input(false);
@@ -967,10 +1016,15 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         this.saveNewCreatedRow = output();
         this.rowDeleted = output();
         this.selectRowChange = output();
+        /**
+         * Emitted when a field value changes and autoSaveOnChange is enabled.
+         * Parent should update their data immediately.
+         */
+        this.fieldValueChanged = output();
         this._data = [];
         this.initLocalColumns = signal([]);
         this.expandedRow = signal(null);
-        this.creatingRow = signal(false);
+        this.creatingRow = computed(() => Object.keys(this.activeRowsCreating).length > 0);
         this.columns = [];
         this.selectedColumns = [];
         this.selectedColumnsString = [];
@@ -978,9 +1032,12 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         this.initGlobalSearch = '';
         this.showTable = true;
         this.activeRowsEditing = {};
+        this.activeRowsCreating = {};
     }
     ngOnInit() {
-        this.selection = new SelectionModel(true, []);
+        // Initialize SelectionModel with compareWith to compare by ID
+        const multiple = !this.selectRowOnlyOne();
+        this.selection = new SelectionModel(multiple, [], true, (a, b) => (a?.id ?? a) === (b?.id ?? b));
         this.initLocalColumns.set([...this.initColumns()]);
         if (this.allowSelectRow()) {
             this.initLocalColumns().unshift({
@@ -999,7 +1056,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
         else {
             this.initLocalColumns.update(oldVal => oldVal.filter(column => column.field !== 'action-row-selecting'));
         }
-        if (this.allowEditRow()) {
+        if (this.allowEditRow() && !this.autoSaveOnChange()) {
             const editingColumn = {
                 field: 'actions-row-editing',
                 header: '',
@@ -1123,29 +1180,31 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
             this.changeDetectorRef.markForCheck();
         }, 100);
     }
+    /**
+     * 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() {
-        const allFields = this.columns.map(col => col.field);
-        const row = {
-            ...allFields,
+        // Create new row with generated ID and default values for each column
+        const newRow = {
             id: StBaseService.generateGUID(),
         };
-        this.tableSource.data = [...this.tableSource.data, row];
-        this.activeRowsEditing[row.id] = { ...row };
-        this.creatingRow.set(true);
+        // Initialize fields with null/default values
+        this.columns
+            .filter(col => col.allowEditColumn)
+            .forEach(col => {
+            newRow[col.field] = null;
+        });
+        // Add to local table copy only
+        this.tableSource.data = [...this.tableSource.data, newRow];
+        this.activeRowsCreating[newRow.id] = { ...newRow };
+        // Navigate to last page to show the new row
         setTimeout(() => {
             this.paginator.lastPage();
-            // Focus on the first input/select in the last row
-            setTimeout(() => {
-                const tableRows = document.querySelectorAll('.st-material-table table tbody tr.mat-mdc-row');
-                if (tableRows.length > 0) {
-                    const lastRow = tableRows[tableRows.length - 1];
-                    const firstInput = lastRow.querySelector('input, select, textarea');
-                    if (firstInput) {
-                        firstInput.focus();
-                    }
-                }
-            }, 100);
         }, 100);
+        this.changeDetectorRef.markForCheck();
     }
     editRow(row, column) {
         this.activeRowsEditing[row.id] = { ...row };
@@ -1160,45 +1219,97 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
             this.changeDetectorRef.markForCheck();
         });
     }
+    /**
+     * 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, column) {
         let allowSave = true;
+        // Check if this specific row is being created or edited
+        const isCreatingThisRow = !!this.activeRowsCreating[row.id];
+        const rowData = isCreatingThisRow
+            ? this.activeRowsCreating[row.id]
+            : this.activeRowsEditing[row.id];
         this.columns
             .filter(col => col.allowEditColumn)
             .forEach(col => {
             if (col.customEditRowValidator) {
-                const result = col.customEditRowValidator(this.activeRowsEditing[row.id][col.field], row[col.field], row);
+                const result = col.customEditRowValidator(rowData[col.field], row[col.field], row);
                 if (!result.isValid) {
                     allowSave = false;
                     this.snackbar.error(result.errorMessage);
                 }
             }
             if (col.editColumnRequired) {
-                if (this.activeRowsEditing[row.id][col.field] === undefined ||
-                    this.activeRowsEditing[row.id][col.field] === null ||
-                    this.activeRowsEditing[row.id][col.field] === '') {
+                if (rowData[col.field] === undefined ||
+                    rowData[col.field] === null ||
+                    rowData[col.field] === '') {
                     allowSave = false;
                     this.snackbar.error(`${col.header} is required`);
                 }
             }
         });
         if (allowSave) {
-            if (this.creatingRow()) {
-                this.saveNewCreatedRow.emit(this.activeRowsEditing[row.id]);
+            if (isCreatingThisRow) {
+                // Emit new row to parent for handling (API call, etc.)
+                this.saveNewCreatedRow.emit({ ...this.activeRowsCreating[row.id] });
+                delete this.activeRowsCreating[row.id];
             }
             else {
-                this.saveNewRow.emit(this.activeRowsEditing[row.id]);
+                // Emit edited row to parent for handling
+                this.saveNewRow.emit({ ...this.activeRowsEditing[row.id] });
+                delete this.activeRowsEditing[row.id];
+            }
+            // Update local table copy
+            const index = this.tableSource.data.findIndex(r => r.id === row.id);
+            if (index !== -1) {
+                const updatedRow = { ...row };
+                this.columns
+                    .filter(col => col.allowEditColumn)
+                    .forEach(col => {
+                    updatedRow[col.field] = rowData[col.field];
+                });
+                this.tableSource.data[index] = updatedRow;
+                this.tableSource.data = [...this.tableSource.data];
             }
-            this.columns
-                .filter(col => col.allowEditColumn)
-                .forEach(col => {
-                row[col.field] = this.activeRowsEditing[row.id][col.field];
-            });
             this.changeDetectorRef.markForCheck();
-            delete this.activeRowsEditing[row.id];
         }
     }
     cancelEditRow(row, column) {
-        delete this.activeRowsEditing[row.id];
+        // Check if this specific row is being created
+        const isCreatingThisRow = !!this.activeRowsCreating[row.id];
+        if (isCreatingThisRow) {
+            // Remove from local table copy
+            this.tableSource.data = this.tableSource.data.filter(data => data.id !== row.id);
+            delete this.activeRowsCreating[row.id];
+        }
+        else {
+            delete this.activeRowsEditing[row.id];
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    /**
+     * 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, column, value) {
+        // Emit to parent immediately
+        // The row object is already updated by ngModel binding
+        this.fieldValueChanged.emit({
+            row: { ...row },
+            field: column.field,
+            value: value,
+        });
     }
     isAllSelected() {
         const numSelected = this.selection.selected.length;
@@ -1529,8 +1640,14 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
             sortOrder: 'asc',
         };
     }
+    isFirstEditableColumn(column) {
+        // Get all editable columns in order
+        const editableColumns = this.selectedColumns.filter(col => col.allowEditColumn && col.visible);
+        // Return true if this is the first editable column
+        return (editableColumns.length > 0 && editableColumns[0].field === column.field);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.StSnackBarService }, { token: StTablesTranslationsService }, { token: i3$3.StDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonUseAddRow: { classPropertyName: "createButtonUseAddRow", publicName: "createButtonUseAddRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveNewRow: "saveNewRow", saveNewCreatedRow: "saveNewCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n  @if (isLoading()) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle()\"\r\n      [allowPickColumns]=\"allowPickColumns()\"\r\n      [showGlobalSearch]=\"showGlobalSearch()\"\r\n      [allowReorderColumns]=\"allowReorderColumns()\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      [showCreateButton]=\"showCreateButton()\"\r\n      [createButtonLabel]=\"createButtonLabel()\"\r\n      [createButtonAction]=\"createButtonAction()\"\r\n      [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n      [disableCreateButton]=\"disableCreateButton()\"\r\n      [extraCustomFilter]=\"extraCustomFilter()\"\r\n      [creatingRow]=\"creatingRow()\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n      (addNewRow)=\"addNewRow()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n    [multiTemplateDataRows]=\"allowExtendRow()\"\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else if (\r\n            column.type === 'actions-row-editing' && showEditAllRows()\r\n          ) {\r\n            <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n              <button\r\n                mat-icon-button\r\n                (click)=\"turnOnAllEditRows()\"\r\n                [matTooltip]=\"'Edit all rows'\"\r\n              >\r\n                <mat-icon>edit_arrow_down</mat-icon>\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element; let i = index\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowIndex]=\"i\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            [canEditRowValidator]=\"canEditRowValidator()\"\r\n            [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n            [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"selectedColumnsString.length\"\r\n      >\r\n        <div\r\n          class=\"expanded-element-detail-wrapper\"\r\n          [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n        >\r\n          <div class=\"expanded-element-detail\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n              [ngTemplateOutletContext]=\"{ data: element }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n      (click)=\"this.clickRowAction(row)\"\r\n    ></tr>\r\n    @if (allowExtendRow()) {\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n        class=\"extended-detail-row\"\r\n      ></tr>\r\n    }\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength()\"\r\n  ></mat-paginator>\r\n  @if (allowSelectRow()) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ stTableTranslations.getTranslations()().rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel()]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "createButtonUseAddRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataLength: { classPropertyName: "dataLength", publicName: "dataLength", isSignal: true, isRequired: false, transformFunction: null }, allowPickColumns: { classPropertyName: "allowPickColumns", publicName: "allowPickColumns", isSignal: true, isRequired: false, transformFunction: null }, allowReorderColumns: { classPropertyName: "allowReorderColumns", publicName: "allowReorderColumns", isSignal: true, isRequired: false, transformFunction: null }, localStorageName: { classPropertyName: "localStorageName", publicName: "localStorageName", isSignal: true, isRequired: false, transformFunction: null }, lazyLoading: { classPropertyName: "lazyLoading", publicName: "lazyLoading", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, initColumns: { classPropertyName: "initColumns", publicName: "initColumns", isSignal: true, isRequired: false, transformFunction: null }, rowClickAction: { classPropertyName: "rowClickAction", publicName: "rowClickAction", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, allowEditRow: { classPropertyName: "allowEditRow", publicName: "allowEditRow", isSignal: true, isRequired: false, transformFunction: null }, showEditAllRows: { classPropertyName: "showEditAllRows", publicName: "showEditAllRows", isSignal: true, isRequired: false, transformFunction: null }, autoSaveOnChange: { classPropertyName: "autoSaveOnChange", publicName: "autoSaveOnChange", isSignal: true, isRequired: false, transformFunction: null }, canEditRowValidator: { classPropertyName: "canEditRowValidator", publicName: "canEditRowValidator", isSignal: true, isRequired: false, transformFunction: null }, canDeleteRowValidator: { classPropertyName: "canDeleteRowValidator", publicName: "canDeleteRowValidator", isSignal: true, isRequired: false, transformFunction: null }, allowSelectRow: { classPropertyName: "allowSelectRow", publicName: "allowSelectRow", isSignal: true, isRequired: false, transformFunction: null }, selectionFieldLabel: { classPropertyName: "selectionFieldLabel", publicName: "selectionFieldLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowOnlyOne: { classPropertyName: "selectRowOnlyOne", publicName: "selectRowOnlyOne", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonAction: { classPropertyName: "createButtonAction", publicName: "createButtonAction", isSignal: true, isRequired: false, transformFunction: null }, disableCreateButton: { classPropertyName: "disableCreateButton", publicName: "disableCreateButton", isSignal: true, isRequired: false, transformFunction: null }, createButtonUseAddRow: { classPropertyName: "createButtonUseAddRow", publicName: "createButtonUseAddRow", isSignal: true, isRequired: false, transformFunction: null }, allowExtendRow: { classPropertyName: "allowExtendRow", publicName: "allowExtendRow", isSignal: true, isRequired: false, transformFunction: null }, extendedRowTemplate: { classPropertyName: "extendedRowTemplate", publicName: "extendedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, initSelectedRow: { classPropertyName: "initSelectedRow", publicName: "initSelectedRow", isSignal: true, isRequired: false, transformFunction: null }, extraCustomFilter: { classPropertyName: "extraCustomFilter", publicName: "extraCustomFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadData: "loadData", saveNewRow: "saveNewRow", saveNewCreatedRow: "saveNewCreatedRow", rowDeleted: "rowDeleted", selectRowChange: "selectRowChange", fieldValueChanged: "fieldValueChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\r\n  @if (isLoading()) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle()\"\r\n      [allowPickColumns]=\"allowPickColumns()\"\r\n      [showGlobalSearch]=\"showGlobalSearch()\"\r\n      [allowReorderColumns]=\"allowReorderColumns()\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      [showCreateButton]=\"showCreateButton()\"\r\n      [createButtonLabel]=\"createButtonLabel()\"\r\n      [createButtonAction]=\"createButtonAction()\"\r\n      [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n      [disableCreateButton]=\"disableCreateButton()\"\r\n      [extraCustomFilter]=\"extraCustomFilter()\"\r\n      [creatingRow]=\"creatingRow()\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n      (addNewRow)=\"addNewRow()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n    [multiTemplateDataRows]=\"allowExtendRow()\"\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else if (\r\n            column.type === 'actions-row-editing' && showEditAllRows()\r\n          ) {\r\n            <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n              <button\r\n                mat-icon-button\r\n                (click)=\"turnOnAllEditRows()\"\r\n                [matTooltip]=\"'Edit all rows'\"\r\n              >\r\n                <mat-icon>edit_arrow_down</mat-icon>\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element; let i = index\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowIndex]=\"i\"\r\n            [rowDataCopy]=\"\r\n              activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n            \"\r\n            [rowEditing]=\"\r\n              !!activeRowsEditing[element.id] ||\r\n              !!activeRowsCreating[element.id]\r\n            \"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            [canEditRowValidator]=\"canEditRowValidator()\"\r\n            [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n            [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n            [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n            [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n            (fieldValueChanged)=\"\r\n              onFieldValueChanged(element, column, $event.value)\r\n            \"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"selectedColumnsString.length\"\r\n      >\r\n        <div\r\n          class=\"expanded-element-detail-wrapper\"\r\n          [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n        >\r\n          <div class=\"expanded-element-detail\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n              [ngTemplateOutletContext]=\"{ data: element }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n      (click)=\"this.clickRowAction(row)\"\r\n    ></tr>\r\n    @if (allowExtendRow()) {\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n        class=\"extended-detail-row\"\r\n      ></tr>\r\n    }\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength()\"\r\n  ></mat-paginator>\r\n  @if (allowSelectRow()) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ stTableTranslations.getTranslations()().rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel()]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["showGlobalSearch", "tableTitle", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "showCreateButton", "createButtonLabel", "createButtonAction", "createButtonUseAddRow", "disableCreateButton", "creatingRow", "extraCustomFilter", "columns"], outputs: ["captionDataChanged", "resetTableSettings", "addNewRow"] }, { kind: "component", type: MaterialTableRowCellComponent, selector: "st-material-table-row-cell", inputs: ["column", "rowData", "rowIndex", "rowDataCopy", "canEditRowValidator", "canDeleteRowValidator", "selectRowOnlyOne", "isFirstEditableColumn", "autoSaveOnChange", "rowEditing", "rowIsSelected", "rowIsExpanded"], outputs: ["saveEditRowEmitter", "cancelEditRowEmitter", "editRowEmitter", "deleteRowEmitter", "selectRowChange", "fieldValueChanged"] }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -1546,7 +1663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"st-material-table\">\r\n  @if (isLoading()) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle()\"\r\n      [allowPickColumns]=\"allowPickColumns()\"\r\n      [showGlobalSearch]=\"showGlobalSearch()\"\r\n      [allowReorderColumns]=\"allowReorderColumns()\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      [showCreateButton]=\"showCreateButton()\"\r\n      [createButtonLabel]=\"createButtonLabel()\"\r\n      [createButtonAction]=\"createButtonAction()\"\r\n      [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n      [disableCreateButton]=\"disableCreateButton()\"\r\n      [extraCustomFilter]=\"extraCustomFilter()\"\r\n      [creatingRow]=\"creatingRow()\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n      (addNewRow)=\"addNewRow()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n    [multiTemplateDataRows]=\"allowExtendRow()\"\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else if (\r\n            column.type === 'actions-row-editing' && showEditAllRows()\r\n          ) {\r\n            <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n              <button\r\n                mat-icon-button\r\n                (click)=\"turnOnAllEditRows()\"\r\n                [matTooltip]=\"'Edit all rows'\"\r\n              >\r\n                <mat-icon>edit_arrow_down</mat-icon>\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element; let i = index\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowIndex]=\"i\"\r\n            [rowDataCopy]=\"activeRowsEditing[element.id]\"\r\n            [rowEditing]=\"!!activeRowsEditing[element.id]\"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            [canEditRowValidator]=\"canEditRowValidator()\"\r\n            [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n            [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"selectedColumnsString.length\"\r\n      >\r\n        <div\r\n          class=\"expanded-element-detail-wrapper\"\r\n          [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n        >\r\n          <div class=\"expanded-element-detail\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n              [ngTemplateOutletContext]=\"{ data: element }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n      (click)=\"this.clickRowAction(row)\"\r\n    ></tr>\r\n    @if (allowExtendRow()) {\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n        class=\"extended-detail-row\"\r\n      ></tr>\r\n    }\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength()\"\r\n  ></mat-paginator>\r\n  @if (allowSelectRow()) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ stTableTranslations.getTranslations()().rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel()]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
+                    ], template: "<div class=\"st-material-table\">\r\n  @if (isLoading()) {\r\n    <div class=\"loading-spinner\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n\r\n  @if (showTable) {\r\n    <st-material-table-caption\r\n      [tableTitle]=\"tableTitle()\"\r\n      [allowPickColumns]=\"allowPickColumns()\"\r\n      [showGlobalSearch]=\"showGlobalSearch()\"\r\n      [allowReorderColumns]=\"allowReorderColumns()\"\r\n      [columns]=\"columns\"\r\n      [initFilters]=\"initFilters\"\r\n      [initGlobalSearch]=\"initGlobalSearch\"\r\n      [showCreateButton]=\"showCreateButton()\"\r\n      [createButtonLabel]=\"createButtonLabel()\"\r\n      [createButtonAction]=\"createButtonAction()\"\r\n      [createButtonUseAddRow]=\"createButtonUseAddRow()\"\r\n      [disableCreateButton]=\"disableCreateButton()\"\r\n      [extraCustomFilter]=\"extraCustomFilter()\"\r\n      [creatingRow]=\"creatingRow()\"\r\n      (captionDataChanged)=\"captionDataChanged($event)\"\r\n      (resetTableSettings)=\"resetTableSettings()\"\r\n      (addNewRow)=\"addNewRow()\"\r\n    ></st-material-table-caption>\r\n  }\r\n\r\n  <table\r\n    [ngClass]=\"{ 'no-hover': !rowClickAction() }\"\r\n    mat-table\r\n    [dataSource]=\"tableSource\"\r\n    matSort\r\n    [multiTemplateDataRows]=\"allowExtendRow()\"\r\n  >\r\n    @for (column of selectedColumns; track column) {\r\n      <ng-container [matColumnDef]=\"column.field\">\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n          mat-sort-header\r\n          [disabled]=\"!column.sort\"\r\n        >\r\n          @if (column.type === 'actions-row-selecting' && !selectRowOnlyOne()) {\r\n            <mat-checkbox\r\n              color=\"primary\"\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\r\n            >\r\n            </mat-checkbox>\r\n          } @else if (\r\n            column.type === 'actions-row-editing' && showEditAllRows()\r\n          ) {\r\n            <div class=\"row justify-content-end\" style=\"width: 98px\">\r\n              <button\r\n                mat-icon-button\r\n                (click)=\"turnOnAllEditRows()\"\r\n                [matTooltip]=\"'Edit all rows'\"\r\n              >\r\n                <mat-icon>edit_arrow_down</mat-icon>\r\n              </button>\r\n            </div>\r\n          } @else {\r\n            {{ column.header }}\r\n          }\r\n        </th>\r\n        <td\r\n          mat-cell\r\n          *matCellDef=\"let element; let i = index\"\r\n          style=\"{{ column.width ? 'width:' + column.width : '' }}\"\r\n        >\r\n          <st-material-table-row-cell\r\n            [column]=\"column\"\r\n            [rowData]=\"element\"\r\n            [rowIndex]=\"i\"\r\n            [rowDataCopy]=\"\r\n              activeRowsEditing[element.id] || activeRowsCreating[element.id]\r\n            \"\r\n            [rowEditing]=\"\r\n              !!activeRowsEditing[element.id] ||\r\n              !!activeRowsCreating[element.id]\r\n            \"\r\n            [rowIsSelected]=\"selection.isSelected(element)\"\r\n            [rowIsExpanded]=\"element == expandedRow()\"\r\n            [canEditRowValidator]=\"canEditRowValidator()\"\r\n            [canDeleteRowValidator]=\"canDeleteRowValidator()\"\r\n            [selectRowOnlyOne]=\"selectRowOnlyOne()\"\r\n            [isFirstEditableColumn]=\"isFirstEditableColumn(column)\"\r\n            [autoSaveOnChange]=\"autoSaveOnChange()\"\r\n            (editRowEmitter)=\"editRow(element, column)\"\r\n            (deleteRowEmitter)=\"deleteRow(element, column, i)\"\r\n            (saveEditRowEmitter)=\"saveEditRow(element, column)\"\r\n            (cancelEditRowEmitter)=\"cancelEditRow(element, column)\"\r\n            (selectRowChange)=\"selectRowChanged($event, element)\"\r\n            (fieldValueChanged)=\"\r\n              onFieldValueChanged(element, column, $event.value)\r\n            \"\r\n          ></st-material-table-row-cell>\r\n        </td>\r\n      </ng-container>\r\n    }\r\n\r\n    <ng-container matColumnDef=\"expandedDetail\">\r\n      <td\r\n        mat-cell\r\n        *matCellDef=\"let element\"\r\n        [attr.colspan]=\"selectedColumnsString.length\"\r\n      >\r\n        <div\r\n          class=\"expanded-element-detail-wrapper\"\r\n          [@detailExpand]=\"element == expandedRow() ? 'expanded' : 'collapsed'\"\r\n        >\r\n          <div class=\"expanded-element-detail\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"extendedRowTemplate()!\"\r\n              [ngTemplateOutletContext]=\"{ data: element }\"\r\n            ></ng-container>\r\n          </div>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: selectedColumnsString\"\r\n      [class.expanded-expanded-row]=\"expandedRow() === row\"\r\n      (click)=\"this.clickRowAction(row)\"\r\n    ></tr>\r\n    @if (allowExtendRow()) {\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: ['expandedDetail']\"\r\n        class=\"extended-detail-row\"\r\n      ></tr>\r\n    }\r\n  </table>\r\n  <mat-paginator\r\n    [showFirstLastButtons]=\"true\"\r\n    [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n    [length]=\"dataLength()\"\r\n  ></mat-paginator>\r\n  @if (allowSelectRow()) {\r\n    <div class=\"st-material-table-selected-rows\">\r\n      <button type=\"button\" mat-stroked-button [matMenuTriggerFor]=\"menu\">\r\n        {{ selection.selected.length }}\r\n        {{ stTableTranslations.getTranslations()().rowSelected }}\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        @for (row of selection.selected; track row) {\r\n          <button type=\"button\" mat-menu-item (click)=\"removeSelectedRow(row)\">\r\n            <div class=\"d-flex\">\r\n              {{ row[selectionFieldLabel()]\r\n              }}<mat-icon style=\"margin-right: 0; margin-left: 10px\"\r\n                >delete</mat-icon\r\n              >\r\n            </div>\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}.st-material-table .st-material-table-selected-rows{position:absolute;bottom:12px;left:5px}\n", ".st-material-table .search-form button{height:40px}.st-material-table .search-form mat-form-field:first-child{padding-left:0}.st-material-table .search-form mat-form-field:last-child{padding-right:0}.st-material-table .search-form .clear{padding:0}.st-material-table .search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}.st-material-table table{background-color:transparent;width:100%;box-shadow:none}.st-material-table table th.mat-mdc-header-cell,.st-material-table table td.mat-mdc-cell,.st-material-table table td.mat-mdc-footer-cell{padding:0}.st-material-table table th.mat-mdc-header-cell:first-of-type,.st-material-table table td.mat-mdc-cell:first-of-type,.st-material-table table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}.st-material-table table th.mat-mdc-header-cell:last-of-type,.st-material-table table td.mat-mdc-cell:last-of-type,.st-material-table table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}.st-material-table table thead tr{background-color:#fff9c4;height:40px!important}.st-material-table table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}.st-material-table table tbody{background-color:transparent!important}.st-material-table table tbody>tr{cursor:pointer}.st-material-table table tbody>tr:hover{background-color:#f5f5f5}.st-material-table table tbody>tr.active{background-color:#a5d6a7}.st-material-table table tbody>tr.active td{border-bottom-color:#81c784!important}.st-material-table table tbody>tr.disabled{cursor:not-allowed}.st-material-table table tbody>tr.disabled:hover{background-color:inherit!important}.st-material-table table tbody>tr.detail-row{height:0;cursor:default}.st-material-table table tbody>tr.detail-row:hover{background-color:transparent}.st-material-table table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}.st-material-table table tbody>tr.extended-detail-row{height:0;cursor:default}.st-material-table table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}.st-material-table table tbody>tr.expanded-element-row td{border-bottom-width:0}.st-material-table table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}.st-material-table table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}.st-material-table table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}.st-material-table table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}.st-material-table table .mat-column-active{width:48px}.st-material-table table.no-hover tbody tr{cursor:default}.st-material-table table.no-hover tbody tr.active{background-color:transparent!important}.st-material-table table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}.st-material-table table.no-hover tbody tr:hover{background-color:transparent!important}.st-material-table table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}.st-material-table table.admin-table .actions-cell{width:100px}table.st-material-table{background-color:transparent;width:100%;box-shadow:none}table.st-material-table th.mat-mdc-header-cell,table.st-material-table td.mat-mdc-cell,table.st-material-table td.mat-mdc-footer-cell{padding:0}table.st-material-table th.mat-mdc-header-cell:first-of-type,table.st-material-table td.mat-mdc-cell:first-of-type,table.st-material-table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table.st-material-table th.mat-mdc-header-cell:last-of-type,table.st-material-table td.mat-mdc-cell:last-of-type,table.st-material-table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table.st-material-table thead tr{background-color:#fff9c4;height:40px!important}table.st-material-table thead tr th{border-color:#fdd835;font-size:.9rem;font-weight:500;color:#424242}table.st-material-table tbody{background-color:transparent!important}table.st-material-table tbody>tr{cursor:pointer}table.st-material-table tbody>tr:hover{background-color:#f5f5f5}table.st-material-table tbody>tr.active{background-color:#a5d6a7}table.st-material-table tbody>tr.active td{border-bottom-color:#81c784!important}table.st-material-table tbody>tr.disabled{cursor:not-allowed}table.st-material-table tbody>tr.disabled:hover{background-color:inherit!important}table.st-material-table tbody>tr.detail-row{height:0;cursor:default}table.st-material-table tbody>tr.detail-row:hover{background-color:transparent}table.st-material-table tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table.st-material-table tbody>tr.extended-detail-row{height:0;cursor:default}table.st-material-table tbody>tr.expanded-element-row:not(.expanded-expanded-row):hover{background-color:transparent}table.st-material-table tbody>tr.expanded-element-row td{border-bottom-width:0}table.st-material-table tbody>tr .expanded-element-detail{overflow:hidden;display:flex}table.st-material-table tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table.st-material-table tbody>tr td>div{max-height:300px;overflow:hidden;overflow-y:auto}table.st-material-table tbody>tr:last-child td{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}table.st-material-table .mat-column-active{width:48px}table.st-material-table.no-hover tbody tr{cursor:default}table.st-material-table.no-hover tbody tr.active{background-color:transparent!important}table.st-material-table.no-hover tbody tr.active td{border-bottom-color:#0000001f!important}table.st-material-table.no-hover tbody tr:hover{background-color:transparent!important}table.st-material-table.no-hover tbody tr:hover td{border-bottom-color:#0000001f!important}table.st-material-table.admin-table .actions-cell{width:100px}.dark-theme table.st-material-table thead tr{background-color:#5e4803!important}.dark-theme table.st-material-table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme table.st-material-table tbody tr:hover{background-color:#ffffff08!important}.dark-theme table.st-material-table tbody tr.active{background-color:#1121114d!important}.dark-theme table.st-material-table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table table thead tr{background-color:#5e4803!important}.dark-theme .st-material-table table thead tr th{border-color:#816204!important;color:#e0e0e0!important}.dark-theme .st-material-table table tbody tr:hover{background-color:#ffffff08!important}.dark-theme .st-material-table table tbody tr.active{background-color:#1121114d!important}.dark-theme .st-material-table table tbody tr.active td{border-bottom-color:#1121114d!important}.dark-theme .st-material-table mat-paginator{background-color:transparent!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element{background-color:#424242!important;color:#eee!important}.dark-theme .st-material-table .reorder-column-list .reorder-column-element p,.dark-theme .st-material-table .reorder-column-list .reorder-column-element mat-icon{color:#eee!important}.dark-theme .st-material-table .filter .filter-title{color:#eee!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.StSnackBarService }, { type: StTablesTranslationsService }, { type: i3$3.StDialogService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]