npm - ngx-st-tables - Versions diffs - 17.0.113 → 17.0.114 - Mend

ngx-st-tables 17.0.113 → 17.0.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/esm2022/lib/components/material-table/material-table-row-cell/material-table-row-cell.component.mjs CHANGED Viewed

@@ -117,11 +117,11 @@ export 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 }, 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.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.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13.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: ["mat-form-field{padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i7.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.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13.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 || 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" }]
+            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", styles: ["mat-form-field{padding:0 2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matInput: [{
                 type: ViewChild,
                 args: [MatInput]

package/fesm2022/ngx-st-tables.mjs CHANGED Viewed

@@ -926,11 +926,11 @@ 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 }, 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 }); }
+    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: ["mat-form-field{padding:0 2px}\n"], 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 || 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" }]
+            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", styles: ["mat-form-field{padding:0 2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matInput: [{
                 type: ViewChild,
                 args: [MatInput]