ngx-st-tables 18.0.23 → 18.0.24

package/README.md

@@ -144,6 +144,37 @@ The `ngx-st-material-table` component is a powerful Angular Material table with
   [extraCustomFilter]="customFilters"
   ```
 
+### `initFilterMethod`
+- **Type:** `(row: any) => boolean`
+- **Default:** `undefined`
+- **Description:** Custom filter function that is applied to every row in the table. The function receives a row object and should return `true` to include the row or `false` to exclude it. This filter is automatically applied whenever table data changes and works in combination with other filters (global search, column filters).
+- **Use Cases:**
+  - Filter rows based on complex business logic
+  - Show only rows matching specific conditions
+  - Dynamically filter based on external state changes
+- **Note:** Only works with local data (when `lazyLoading` is `false`). For server-side filtering, handle filtering in your backend.
+- **Examples:**
+  ```typescript
+  // Show only active users
+  [initFilterMethod]="(row) => row.status === 'active'"
+  
+  // Show users with quantity greater than 10
+  [initFilterMethod]="(row) => row.quantity > 10"
+  
+  // Complex filtering with multiple conditions
+  [initFilterMethod]="filterRows.bind(this)"
+  
+  filterRows(row: any): boolean {
+    return row.isActive && row.amount > 0 && row.department === this.selectedDepartment;
+  }
+  
+  // Dynamic filtering based on date range
+  [initFilterMethod]="(row) => {
+    const rowDate = new Date(row.createdAt);
+    return rowDate >= this.startDate && rowDate <= this.endDate;
+  }"
+  ```
+
 ---
 
 ## Data Management Inputs
@@ -550,10 +581,33 @@ Columns are configured via the `initColumns` input using the `StMaterialTableCol
 
 ##### `rowEditType`
 - **Type:** `StMaterialRowEditType`
-- **Options:** `'string'` | `'number'` | `'boolean'` | `'date'` | `'custom'` | `'custom-dynamic-select'`
+- **Options:** `'string'` | `'number'` | `'boolean'` | `'date'` | `'custom'` | `'custom-dynamic-select'` | `'number-qty-input'`
 - **Default:** Auto-detected from `type`
 - **Description:** Type of input to show when editing this column.
+  - `'string'`: Text input field
+  - `'number'`: Standard HTML number input
+  - `'boolean'`: Toggle/checkbox control
+  - `'date'`: Date picker
+  - `'custom'`: Dropdown with static options
+  - `'custom-dynamic-select'`: Dropdown with row-dependent options
+  - `'number-qty-input'`: Quantity input component with increment/decrement buttons
 - **Example:** `rowEditType: 'number'`
+- **Qty Input Example:**
+  ```typescript
+  {
+    field: 'quantity',
+    header: 'Quantity',
+    type: 'number',
+    allowEditColumn: true,
+    rowEditType: 'number-qty-input',
+    customEditRowValidator: (oldValue, newValue, row) => {
+      if (newValue < 0) {
+        return { isValid: false, errorMessage: 'Quantity cannot be negative' };
+      }
+      return { isValid: true, errorMessage: '' };
+    }
+  }
+  ```
 
 ##### `customRowEditOptions`
 - **Type:** `{ value: any; label: string }[]`
@@ -996,7 +1050,93 @@ onFieldChanged(event: { row: any; field: string; value: any; index: number }): v
 </ngx-st-material-table>
 ```
 
-### Example 5: Selection Table
+### Example 5: Quantity Input in Table (Auto-Save)
+
+```typescript
+// Component - Using the dedicated qty-input component for quantity columns
+columns: StMaterialTableColumnModel[] = [
+  { field: 'product', header: 'Product', width: '200px' },
+  { 
+    field: 'quantity', 
+    header: 'Quantity', 
+    type: 'number',
+    width: '120px',
+    allowEditColumn: true,
+    rowEditType: 'number-qty-input',  // Uses qty-input component
+    customEditRowValidator: (oldValue, newValue, row) => {
+      if (newValue < 0) {
+        return { isValid: false, errorMessage: 'Quantity cannot be negative' };
+      }
+      if (newValue > row.maxStock) {
+        return { isValid: false, errorMessage: `Maximum available: ${row.maxStock}` };
+      }
+      return { isValid: true, errorMessage: '' };
+    }
+  },
+  { 
+    field: 'price', 
+    header: 'Unit Price', 
+    type: 'number',
+    customValueDisplay: (row) => `$${row.price.toFixed(2)}`
+  },
+  { 
+    field: 'total', 
+    header: 'Total', 
+    type: 'number',
+    sort: false,
+    filter: false,
+    customValueDisplay: (row) => `$${(row.quantity * row.price).toFixed(2)}`
+  }
+];
+
+items = [
+  { id: 1, product: 'Widget A', quantity: 5, price: 10.00, maxStock: 100 },
+  { id: 2, product: 'Widget B', quantity: 3, price: 15.50, maxStock: 50 },
+  { id: 3, product: 'Widget C', quantity: 2, price: 25.00, maxStock: 75 }
+];
+
+onFieldChanged(event: { row: any; field: string; value: any; index: number }): void {
+  // Update local data immediately
+  this.items[event.index][event.field] = event.value;
+  
+  // Persist to server if needed
+  this.itemService.updateItem(event.row).subscribe(
+    (updatedItem) => {
+      this.items[event.index] = updatedItem;
+    },
+    (error) => {
+      console.error('Failed to update item', error);
+      // You might want to rollback the change
+    }
+  );
+}
+```
+
+```html
+<!-- Template -->
+<ngx-st-material-table
+  tableTitle="Order Items"
+  [pageSize]="25"
+  [data]="items"
+  [initColumns]="columns"
+  [allowEditRow]="true"
+  [autoSaveOnChange]="true"
+  [setNewDataWithoutRefresh]="true"
+  [showGlobalSearch]="true"
+  localStorageName="order-items-table"
+  (fieldValueChanged)="onFieldChanged($event)">
+</ngx-st-material-table>
+```
+
+**Benefits of using `number-qty-input` rowEditType:**
+- Dedicated increment/decrement buttons for easy quantity adjustments
+- Cleaner UI compared to standard number inputs (hidden spinner arrows)
+- Customizable input width to fit your layout
+- Integrated validation support
+- Immediate auto-save when used with `autoSaveOnChange`
+- Better user experience for quantity-centric tables
+
+### Example 6: Selection Table
 
 ```typescript
 // Component
@@ -1029,7 +1169,7 @@ formatSelectedUser(row: any): string {
 </ngx-st-material-table>
 ```
 
-### Example 6: Expandable Rows
+### Example 7: Expandable Rows
 
 ```html
 <!-- Template -->
@@ -1050,7 +1190,7 @@ formatSelectedUser(row: any): string {
 </ngx-st-material-table>
 ```
 
-### Example 7: Custom Column Template
+### Example 8: Custom Column Template
 
 ```html
 <!-- Template -->
@@ -1082,7 +1222,7 @@ ngAfterViewInit() {
 }
 ```
 
-### Example 8: Actions Column
+### Example 9: Actions Column
 
 ```typescript
 // Component
@@ -1133,7 +1273,7 @@ deleteUser(row: any, index: number): void {
 }
 ```
 
-### Example 9: Dynamic Select Options Based on Row
+### Example 10: Dynamic Select Options Based on Row
 
 ```typescript
 // Component
@@ -1207,6 +1347,38 @@ Combine `allowEditRow`, `allowCreateRow`, and action handlers for full CRUD oper
 ### Pattern 5: Filtered Report
 Use `showGlobalSearch`, column filters, and `localStorageName` for a searchable report with saved preferences.
 
+### Pattern 6: Dynamic Custom Filtering
+Use `initFilterMethod` for programmatic filtering based on external state or complex business logic.
+
+```typescript
+export class MyComponent {
+  minAmount = 100;
+  selectedDepartment = 'Sales';
+  
+  filterMethod = (row: any): boolean => {
+    return row.amount >= this.minAmount && 
+           row.department === this.selectedDepartment;
+  };
+  
+  // When minAmount or selectedDepartment changes, 
+  // update the filter method to trigger refiltering
+  updateFilters() {
+    this.filterMethod = (row: any): boolean => {
+      return row.amount >= this.minAmount && 
+             row.department === this.selectedDepartment;
+    };
+  }
+}
+```
+
+```html
+<ngx-st-material-table
+  [data]="salesData"
+  [initColumns]="columns"
+  [initFilterMethod]="filterMethod">
+</ngx-st-material-table>
+```
+
 ---
 
 ## Troubleshooting

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

@@ -161,7 +161,7 @@ export class MaterialTableRowCellComponent {
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialTableRowCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", 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(), rowIndex: rowIndex() }\"\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] | stDateFormatPipe }}\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)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n\r\n        @if (allowEditInEditRow()) {\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"primary\"\r\n            (click)=\"$event.stopPropagation(); 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        }\r\n\r\n        @if (allowDeleteInEditRow()) {\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            (click)=\"$event.stopPropagation(); 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      }\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') {\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=\"text\"\r\n          [ngModel]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (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=\"number\"\r\n          [ngModel]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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]=\"getFieldValue(column.field)\"\r\n        (ngModelChange)=\"\r\n          setFieldValue(column.field, $event);\r\n          autoSaveOnChange() && onFieldChange(column.field, $event)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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 === 'number-qty-input') {\r\n      <ngx-st-qty-input\r\n        appearance=\"outline\"\r\n        [qtyModel]=\"getFieldValue(column.field)\"\r\n        (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n      ></ngx-st-qty-input>\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.QtyInputComponent, selector: "ngx-st-qty-input", inputs: ["qtyModel", "allowNegative", "disabled", "showError", "appearance"], outputs: ["qtyModelChange", "newValueEmitter"] }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, rowIsSelected: { classPropertyName: "rowIsSelected", publicName: "rowIsSelected", isSignal: true, isRequired: false, transformFunction: null }, rowIsExpanded: { classPropertyName: "rowIsExpanded", publicName: "rowIsExpanded", isSignal: true, isRequired: false, transformFunction: null }, rowEditing: { classPropertyName: "rowEditing", publicName: "rowEditing", isSignal: true, isRequired: false, transformFunction: null }, allowDeleteInEditRow: { classPropertyName: "allowDeleteInEditRow", publicName: "allowDeleteInEditRow", isSignal: true, isRequired: false, transformFunction: null }, allowEditInEditRow: { classPropertyName: "allowEditInEditRow", publicName: "allowEditInEditRow", 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(), rowIndex: rowIndex() }\"\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] | stDateFormatPipe }}\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)=\"$event.stopPropagation(); 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)=\"$event.stopPropagation(); cancelRow()\"\r\n          [matTooltip]=\"'Cancel row'\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      } @else {\r\n\r\n        @if (allowEditInEditRow()) {\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"primary\"\r\n            (click)=\"$event.stopPropagation(); 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        }\r\n\r\n        @if (allowDeleteInEditRow()) {\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            color=\"warn\"\r\n            (click)=\"$event.stopPropagation(); 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      }\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') {\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=\"text\"\r\n          [ngModel]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\r\n          (click)=\"$event.stopPropagation()\"\r\n        />\r\n      </mat-form-field>\r\n    }\r\n    @if (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=\"number\"\r\n          [ngModel]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"onNumberFieldChange(column.field, $event)\"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          (keydown.enter)=\"!autoSaveOnChange() && saveRow()\"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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]=\"getFieldValue(column.field)\"\r\n        (ngModelChange)=\"\r\n          setFieldValue(column.field, $event);\r\n          autoSaveOnChange() && onFieldChange(column.field, $event)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        [disabled]=\"column.disableEdit ? column.disableEdit(rowData()) : false\"\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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 === 'number-qty-input') {\r\n      <ngx-st-qty-input\r\n        appearance=\"outline\"\r\n        [qtyModel]=\"getFieldValue(column.field)\"\r\n        (newValueEmitter)=\"setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\"\r\n      ></ngx-st-qty-input>\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]=\"getFieldValue(column.field)\"\r\n          (ngModelChange)=\"\r\n            setFieldValue(column.field, $event);\r\n            autoSaveOnChange() && onFieldChange(column.field, $event)\r\n          \"\r\n          [required]=\"column.editColumnRequired\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          [disabled]=\"\r\n            column.disableEdit ? column.disableEdit(rowData()) : false\r\n          \"\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13.QtyInputComponent, selector: "ngx-st-qty-input", inputs: ["qtyModel", "allowNegative", "disabled", "showError", "appearance", "inputWidth"], outputs: ["qtyModelChange", "newValueEmitter"] }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "stDateFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialTableRowCellComponent, decorators: [{
             type: Component,