@sd-angular/core 0.0.941 → 0.0.945

package/fesm2015/sd-angular-core-grid-material.js

@@ -27,6 +27,7 @@ import '@sd-angular/core/typing';
 import { MatTableModule } from '@angular/material/table';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatButtonModule } from '@angular/material/button';
@@ -420,7 +421,7 @@ _filterOptionChanges = new WeakMap(), _subscription = new WeakMap(), _loadDefaul
 SdGridFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-filter',
-                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && (columns?.length || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 mb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && (columns?.length || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
                 styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];
@@ -730,6 +731,7 @@ class SdGridConfigurationService {
         this.settingService = settingService;
         this.gridMaterialConfiguration = gridMaterialConfiguration;
         _COLUMNS.set(this, {
+            EDITORVALIDATION: 'sdEditorValidation',
             EDITOR: 'sdEditor',
             SUBINFORMATION: 'sdSubInformationAction',
             COMMAND: 'sdCommand',
@@ -971,6 +973,10 @@ class SdGridConfigurationService {
                 multipleHeader: false
             };
             const { selection, commands, editor } = gridOption || {};
+            if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && (editor === null || editor === void 0 ? void 0 : editor.removable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (editor === null || editor === void 0 ? void 0 : editor.editable))) {
+                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).EDITORVALIDATION);
+                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).EDITORVALIDATION);
+            }
             if (selection === null || selection === void 0 ? void 0 : selection.visible) {
                 result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
                 result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
@@ -1350,7 +1356,10 @@ class SdGridMaterial {
             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
             this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
             // this.isHiddenPaginator = this.filterInfo.pageNumber === 0 && this.total <= this.filterInfo.pageSize;
-            this.items.forEach(item => item.originItem = Object.assign({}, item));
+            this.items.forEach((item) => {
+                item.originItem = Object.assign({}, item);
+                item.sdId = hash(item);
+            });
             yield ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items));
             this.isSelectAll = this.items.every(e => e.isSelected);
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
@@ -1877,7 +1886,7 @@ class SdGridMaterial {
             return false;
         }).map(item => {
             const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem"]);
-            return Object.assign(Object.assign({}, result), { editorErrorMessage: editorHandlerRow === null || editorHandlerRow === void 0 ? void 0 : editorHandlerRow.errorMessage });
+            return Object.assign(Object.assign({}, result), { editorErrorMessage: item.editorErrorMessage });
         });
     }
     get gridItems() {
@@ -1891,7 +1900,7 @@ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap
 SdGridMaterial.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-material',
-                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"c-table\" [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': 'gridOption?.minHeight'\r\n          }\">\r\n          <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  <ng-container *ngIf=\"item.isExpanded\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdSubInformation.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                  [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n                    items | selectionDisableSelectAll: gridOption?.selection\r\n                  \">\r\n                </mat-checkbox>\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                  (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                </mat-checkbox>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditor\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <button\r\n                  *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                  (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                  <mat-icon class=\"c-icon\">add</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                  <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                    <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">save</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                <div>\r\n                  <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"></ng-container>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                  [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"></ng-container>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                  [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n            </ng-container>\r\n            <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n          <ng-template #elseEmpty>\r\n            <table mat-table [dataSource]=\"[{}]\">\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEmpty\">\r\n                <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #sdEmptyDataNoRef>\r\n                    <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                  </ng-template>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n                  [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n            </table>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n            size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                <span> {{ \"Configure\" | sdTranslate }}</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n      #sdPopupExport>\r\n    </sd-popup-export>\r\n    <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n    </sd-popup-grid-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n  <ng-container *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-select>\r\n    <sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <sd-date-time *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-date-time>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" disabled> </sd-input>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n    selectedItems\r\n      | selectionActionFilter: gridOption?.selection?.actions as actions\r\n  \" [isOpened]=\"actions?.length\">\r\n  <div sdMessage>\r\n    <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n    {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n  </div>\r\n  <div class=\"d-flex align-items-center\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</sd-quick-action>",
+                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"c-table\" [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': 'gridOption?.minHeight'\r\n          }\">\r\n          <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  <ng-container *ngIf=\"item.isExpanded\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdSubInformation.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\">\r\n                  <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                  <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                </button>\r\n                <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                  <div></div>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSelection\" sticky>\r\n              <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                  [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n                    items | selectionDisableSelectAll: gridOption?.selection\r\n                  \">\r\n                </mat-checkbox>\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                  (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                </mat-checkbox>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditorValidation\">\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n              </th>\r\n              <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-editor-validation>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditor\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <button\r\n                  *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                  (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                  <mat-icon class=\"c-icon\">add</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                  <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                    <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">save</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                <div>\r\n                  <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"></ng-container>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"></ng-container>\r\n                  </div>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n            </ng-container>\r\n            <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n              [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n          <ng-template #elseEmpty>\r\n            <table mat-table [dataSource]=\"[{}]\">\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEmpty\">\r\n                <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #sdEmptyDataNoRef>\r\n                    <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                  </ng-template>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\"\r\n                  [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n            </table>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n            size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                <span> {{ \"Configure\" | sdTranslate }}</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n      #sdPopupExport>\r\n    </sd-popup-export>\r\n    <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n    </sd-popup-grid-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n<ng-template #inlineColumn let-column=\"column\">\r\n  <ng-container *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-select>\r\n    <sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <sd-date-time *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-date-time>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" disabled> </sd-input>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<sd-quick-action *ngIf=\"\r\n    selectedItems\r\n      | selectionActionFilter: gridOption?.selection?.actions as actions\r\n  \" [isOpened]=\"actions?.length\">\r\n  <div sdMessage>\r\n    <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n    {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n  </div>\r\n  <div class=\"d-flex align-items-center\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</sd-quick-action>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -2726,9 +2735,8 @@ class SdDesktopCell {
 SdDesktopCell.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-cell',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *sdLet=\"item[column.field] | sdEditorValidate:item:column:gridOption\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n            cellDef[column.field].templateRef;\r\n            context: { item: item, column: column, idx: idx, isEdited: true }\r\n          \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
+                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n            cellDef[column.field].templateRef;\r\n            context: { item: item, column: column, idx: idx, isEdited: true }\r\n          \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
+                changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
 SdDesktopCell.ctorParameters = () => [];
@@ -2806,13 +2814,10 @@ SdEditorHandlerRowPipe.decorators = [
             },] }
 ];
 
+var _visible;
 class SdEditorHandlerColumnPipe {
-    transform(value, item, column, gridOption) {
-        if (column.type === 'children' || column.type === 'children-col') {
-            return;
-        }
-        const { columns } = gridOption;
-        const visible = (col) => {
+    constructor() {
+        _visible.set(this, (col, item) => {
             if (col.type === 'children' || col.type === 'children-col') {
                 return false;
             }
@@ -2824,62 +2829,99 @@ class SdEditorHandlerColumnPipe {
                 }
             }
             return true;
-        };
+        });
+    }
+    transform(value, item, column, gridOption) {
+        console.log(value, column.field);
+        if (column.type === 'children' || column.type === 'children-col') {
+            return;
+        }
+        const { columns } = gridOption;
         item.editorHandlerColumn = item.editorHandlerColumn || {};
-        item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: visible(column) });
+        item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, column, item) });
         for (const col of columns.filter(e => { var _a, _b; return (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.relatedColumns) === null || _b === void 0 ? void 0 : _b.includes(e.field); })) {
-            item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: visible(col) });
+            item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, col, item) });
         }
         item.sdId = hash(item);
         return true;
     }
 }
+_visible = new WeakMap();
 SdEditorHandlerColumnPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'sdEditorHandlerColumn'
             },] }
 ];
 
+var _previous, _delay;
 class SdEditorValidatePipe {
     constructor() {
-        this.delay = 1000; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
+        _previous.set(this, void 0);
+        _delay.set(this, 1000); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
     }
-    transform(value, item, column, gridOption) {
-        var _a;
+    transform(sdId, item, gridOption) {
         return __awaiter(this, void 0, void 0, function* () {
             const { editor } = gridOption;
-            if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
-                return true;
-            }
             if (!editor.validate) {
-                item.editorHandlerRow.errorMessage = null;
-                return true;
-            }
-            this.previous = new Date();
-            yield new Promise(resolve => setTimeout(resolve, this.delay));
-            const now = new Date();
-            const dif = now.getTime() - this.previous.getTime();
-            if (dif < this.delay) {
-                return true;
+                item.editorErrorMessage = null;
+                return;
             }
+            // this.#previous = new Date();
+            // await new Promise(resolve => setTimeout(resolve, this.#delay));
+            // const now = new Date();
+            // const dif = now.getTime() - this.#previous.getTime();
+            // if (dif < this.#delay) {
+            //   return;
+            // }
             const result = editor.validate(item);
             if (result instanceof Promise) {
-                item.editorHandlerRow.errorMessage = yield result;
-                return true;
+                item.editorErrorMessage = yield result;
+                return;
             }
             else {
-                item.editorHandlerRow.errorMessage = result;
-                return true;
+                item.editorErrorMessage = result;
+                return;
             }
         });
     }
 }
+_previous = new WeakMap(), _delay = new WeakMap();
 SdEditorValidatePipe.decorators = [
     { type: Pipe, args: [{
                 name: 'sdEditorValidate'
             },] }
 ];
 
+class SdStyleRowCss {
+    transform(item, gridOption) {
+        var _a, _b;
+        return ((_b = (_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.style) === null || _a === void 0 ? void 0 : _a.rowCss) === null || _b === void 0 ? void 0 : _b.call(_a, item)) || {};
+    }
+}
+SdStyleRowCss.decorators = [
+    { type: Pipe, args: [{
+                name: 'sdStyleRowCss'
+            },] }
+];
+
+class SdDesktopEditorValidation {
+    constructor() { }
+}
+SdDesktopEditorValidation.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-desktop-editor-validation',
+                template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:gridOption\">\r\n  <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n    [matTooltip]=\"item.editorErrorMessage\">\r\n  </div>\r\n</ng-container>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:100%;left:0;position:absolute;top:0}:host .c-editor-validation{height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
+            },] }
+];
+SdDesktopEditorValidation.ctorParameters = () => [];
+SdDesktopEditorValidation.propDecorators = {
+    sdId: [{ type: Input }],
+    item: [{ type: Input }],
+    gridOption: [{ type: Input }]
+};
+
 class MatPaginatorIntlCro extends MatPaginatorIntl {
     constructor() {
         super(...arguments);
@@ -2929,11 +2971,13 @@ SdGridMaterialModule.decorators = [
                     DragDropModule,
                     SdFormModule,
                     SdServiceModule,
-                    MatSliderModule
+                    MatSliderModule,
+                    ScrollingModule
                 ],
                 declarations: [
                     SdDesktopCell,
                     SdDesktopCellEditor,
+                    SdDesktopEditorValidation,
                     SdDesktopCellView,
                     SdDesktopCellChildrenView,
                     SdDesktopCommand,
@@ -2969,7 +3013,8 @@ SdGridMaterialModule.decorators = [
                     SdSelectionDisableSelectAllPipe,
                     SdEditorHandlerRowPipe,
                     SdEditorHandlerColumnPipe,
-                    SdEditorValidatePipe
+                    SdEditorValidatePipe,
+                    SdStyleRowCss
                 ],
                 exports: [
                     SdGridMaterial,
@@ -3002,5 +3047,5 @@ SdGridMaterialModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnHtmlTemplatePipe as ɵba, SdColumnTransformPipe as ɵbb, SdColumnTooltipPipe as ɵbc, SdColumnBadgePipe as ɵbd, SdFilterColumnPipe as ɵbe, SdFilterExternalPipe as ɵbf, SdSelectionActionFilterPipe as ɵbg, SdSelectionDisablePipe as ɵbh, SdSelectionDisableSelectAllPipe as ɵbi, SdEditorHandlerRowPipe as ɵbj, SdEditorHandlerColumnPipe as ɵbk, SdEditorValidatePipe as ɵbl, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCell as ɵj, SdDesktopCellEditor as ɵk, SdDesktopCellView as ɵl, SdDesktopCellChildrenView as ɵm, SdDesktopCommand as ɵn, SdLetDirective as ɵo, SdPopupGridConfiguration as ɵp, SdDynamicColumn as ɵq, SdGeneratedColumnService as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdColumnTitlePipe as ɵu, SdCommandFilterPipe as ɵv, SdCommandDisablePipe as ɵw, SdCommandIconPipe as ɵx, SdCommandTitlePipe as ɵy, SdColumnValuesPipe as ɵz };
+export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnValuesPipe as ɵba, SdColumnHtmlTemplatePipe as ɵbb, SdColumnTransformPipe as ɵbc, SdColumnTooltipPipe as ɵbd, SdColumnBadgePipe as ɵbe, SdFilterColumnPipe as ɵbf, SdFilterExternalPipe as ɵbg, SdSelectionActionFilterPipe as ɵbh, SdSelectionDisablePipe as ɵbi, SdSelectionDisableSelectAllPipe as ɵbj, SdEditorHandlerRowPipe as ɵbk, SdEditorHandlerColumnPipe as ɵbl, SdEditorValidatePipe as ɵbm, SdStyleRowCss as ɵbn, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCell as ɵj, SdDesktopCellEditor as ɵk, SdDesktopEditorValidation as ɵl, SdDesktopCellView as ɵm, SdDesktopCellChildrenView as ɵn, SdDesktopCommand as ɵo, SdLetDirective as ɵp, SdPopupGridConfiguration as ɵq, SdDynamicColumn as ɵr, SdGeneratedColumnService as ɵs, SdGridConfigurationResultPipe as ɵt, SdColumnChildrenFilterPipe as ɵu, SdColumnTitlePipe as ɵv, SdCommandFilterPipe as ɵw, SdCommandDisablePipe as ɵx, SdCommandIconPipe as ɵy, SdCommandTitlePipe as ɵz };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map