@sd-angular/core 0.0.916 → 0.0.920

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

@@ -1,4 +1,4 @@
-import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ViewContainerRef, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ChangeDetectionStrategy, ViewContainerRef, HostListener, NgModule } from '@angular/core';
 import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -729,9 +729,10 @@ class SdGridConfigurationService {
         this.settingService = settingService;
         this.gridMaterialConfiguration = gridMaterialConfiguration;
         _COLUMNS.set(this, {
+            EDITOR: 'sdEditor',
             SUBINFORMATION: 'sdSubInformationAction',
-            COMMAND: 'command',
-            SELECTION: 'selection'
+            COMMAND: 'sdCommand',
+            SELECTION: 'sdSelection'
         });
         _cache.set(this, {});
         this.init = (key, gridOption) => {
@@ -956,7 +957,7 @@ class SdGridConfigurationService {
         //   }
         // }
         this.generateConfigurationResult = (configuration, gridOption, sdSubInformation) => {
-            var _a, _b, _c;
+            var _a;
             const result = {
                 column: {},
                 fixedColumn: {},
@@ -968,15 +969,20 @@ class SdGridConfigurationService {
                 displayedFooters: [],
                 multipleHeader: false
             };
-            if ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.selection) === null || _a === void 0 ? void 0 : _a.visible) {
+            const { selection, commands, editor } = gridOption || {};
+            if (selection === null || selection === void 0 ? void 0 : selection.visible) {
                 result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
                 result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
             }
-            if ((_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.commands) === null || _b === void 0 ? void 0 : _b.length) {
+            if (commands === null || commands === void 0 ? void 0 : commands.length) {
                 result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
                 result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
             }
-            (_c = configuration === null || configuration === void 0 ? void 0 : configuration.columns) === null || _c === void 0 ? void 0 : _c.filter(col => !col.invisible).forEach(col => {
+            if (editor.addable || (editor.type === 'inline' && editor.removable) || (editor.type !== 'inline' && editor.editable)) {
+                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
+                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
+            }
+            (_a = configuration === null || configuration === void 0 ? void 0 : configuration.columns) === null || _a === void 0 ? void 0 : _a.filter(col => !col.invisible).forEach(col => {
                 var _a;
                 if (col.isGeneratedColumn) {
                     result.column[col.origin.field] = {
@@ -1111,7 +1117,7 @@ SdGridService.ctorParameters = () => [
     { type: SdUtilityService }
 ];
 
-var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
+var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems, _generateEditorHanlder;
 class SdGridMaterial {
     constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
         this.ref = ref;
@@ -1666,6 +1672,117 @@ class SdGridMaterial {
             var _a;
             (_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.setFilter(args);
         };
+        _generateEditorHanlder.set(this, (item) => {
+            // item.editorHandler = item.editorHandler || {};
+            // this.editorVisiblePipe.transform(null, item, this.gridOption);
+        });
+        this.onCreate = () => {
+            var _a;
+            const { type, editor, columns } = this.gridOption;
+            if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
+                return;
+            }
+            const item = {};
+            // Gán giá trị mặc định
+            columns.forEach(column => {
+                if (column.type === 'values') {
+                    item[column.field] = '';
+                }
+                else if (column.type === 'bool') {
+                    item[column.field] = true;
+                }
+                else if (column.type === 'number') {
+                    item[column.field] = null;
+                }
+            });
+            (_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item);
+            // Đưa item lên dòng đầu tiên nếu type khác popup
+            if (editor.type !== 'popup') {
+                if (type === 'local') {
+                    this.items.splice(0, 0, item);
+                }
+                // this.viewItems.splice(0, 0, item);
+            }
+            this.onUpdate(item, false);
+        };
+        this.onUpdate = (item, isModified) => {
+            const { editor, columns } = this.gridOption;
+            item.editorHandlerRow.status = isModified ? 'update' : 'create';
+            item.editorHandlerRow.temporary = Object.assign({}, item);
+            // this.generateEditorHanlder(item);
+            if (editor.type === 'popup') {
+                // Xử lý case popup
+                // this.sdGridPopupEditor.open(item, columns, isModified);
+            }
+            this.ref.detectChanges();
+        };
+        this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
+            const { editor } = this.gridOption;
+            try {
+                item.editorHandlerRow.saving = true;
+                if (editor.validate) {
+                    const result = editor.validate(item);
+                    if (result instanceof Promise) {
+                        const message = yield result;
+                        if (message) {
+                            throw message;
+                        }
+                    }
+                    else {
+                        if (result) {
+                            throw result;
+                        }
+                    }
+                }
+                if (editor.onSave) {
+                    const result = editor.onSave(item);
+                    if (result instanceof Promise) {
+                        yield result;
+                    }
+                }
+                if (item.editorHandlerRow.status === 'create' && editor.type === 'popup') {
+                    if (this.gridOption.type === 'local') {
+                        this.items.splice(0, 0, item);
+                    }
+                    // this.viewItems.splice(0, 0, item);
+                }
+                item.editorHandlerRow.status = undefined;
+                // this.generateEditorHanlder(item);
+            }
+            catch (err) {
+                this.notifyService.notify.warning(err);
+            }
+            finally {
+                item.editorHandlerRow.saving = false;
+                this.ref.detectChanges();
+            }
+        });
+        this.onCancel = (item) => {
+            const { editor } = this.gridOption;
+            if (editor.type === 'inline') {
+                if (this.gridOption.type === 'local') {
+                    const idx1 = this.items.indexOf(item);
+                    this.items.splice(idx1, 1);
+                }
+                // const idx2 = this.viewItems.indexOf(item);
+                // this.viewItems.splice(idx2, 1);
+                return;
+            }
+            if (item.editorHandlerRow.status === 'create') {
+                if (editor.type !== 'popup') {
+                    if (this.gridOption.type === 'local') {
+                        this.items.splice(0, 1);
+                    }
+                    // this.viewItems.splice(0, 1);
+                }
+            }
+            else {
+                Object.assign(item, item.editorHandlerRow.temporary);
+                item.editorHandlerRow.status = undefined;
+                // this.generateEditorHanlder(item);
+                this.ref.detectChanges();
+            }
+        };
     }
     set _gridFilter(gridFilter) {
         if (gridFilter && this.gridFilter !== gridFilter) {
@@ -1722,11 +1839,11 @@ class SdGridMaterial {
         moveItemInArray(columns, event.previousIndex, event.currentIndex);
     }
 }
-_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
+_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap(), _generateEditorHanlder = new WeakMap();
 SdGridMaterial.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-material',
-                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \"\r\n  >\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter\r\n        [filter]=\"gridOption?.filter\"\r\n        [columns]=\"configuration.firstColumns\"\r\n        [filterDefs]=\"filterDefs\"\r\n      >\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <div\r\n      class=\"c-container {{ gridOption?.style?.grid }}\"\r\n      [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\"\r\n    >\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\r\n          class=\"c-table\"\r\n          [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': 'gridOption?.minHeight'\r\n          }\"\r\n        >\r\n          <table\r\n            *ngIf=\"items?.length; else elseEmpty\"\r\n            mat-table\r\n            [dataSource]=\"items\"\r\n            matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\"\r\n            multiTemplateDataRows\r\n          >\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td\r\n                class=\"p-0\"\r\n                mat-cell\r\n                *matCellDef=\"let item\"\r\n                [attr.colspan]=\"configuration.displayedColumns.length\"\r\n              >\r\n                <div\r\n                  *ngIf=\"sdSubInformation?.templateRef\"\r\n                  [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\"\r\n                >\r\n                  <ng-container *ngIf=\"item.isExpanded\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        sdSubInformation.templateRef;\r\n                        context: { item: item }\r\n                      \"\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\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n              ></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (click)=\"onExpand(element)\"\r\n                >\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=\"selection\" sticky>\r\n              <th\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n              >\r\n                <mat-checkbox\r\n                  *ngIf=\"!gridOption.selection?.single\"\r\n                  class=\"c-selection\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"isSelectAll\"\r\n                  (change)=\"onSelectAll()\"\r\n                  [disabled]=\"\r\n                    items | selectionDisableSelectAll: gridOption?.selection\r\n                  \"\r\n                >\r\n                </mat-checkbox>\r\n              </th>\r\n              <td\r\n                class=\"text-center px-15\"\r\n                mat-cell\r\n                *matCellDef=\"let item\"\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n              >\r\n                <mat-checkbox\r\n                  class=\"c-selection\"\r\n                  color=\"primary\"\r\n                  [(ngModel)]=\"item.isSelected\"\r\n                  (change)=\"onSelect(item)\"\r\n                  [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \"\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=\"command\">\r\n              <th\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n              ></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command\r\n                  [commands]=\"gridOption.commands\"\r\n                  [item]=\"item\"\r\n                ></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\"\r\n            >\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                cdkDrag\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n                [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \"\r\n                [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \"\r\n              >\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"false\"\r\n                    role=\"presentation\"\r\n                    mat-sort-header\r\n                    [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"\r\n                  ></div>\r\n                  <div\r\n                    class=\"c-inline-column\"\r\n                    *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"\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                <ng-container *ngIf=\"cellDef[column.field]\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      cellDef[column.field].templateRef;\r\n                      context: { item: item, column: column, idx: i }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </ng-container>\r\n                <sd-desktop-cell-view\r\n                  *ngIf=\"!cellDef[column.field]\"\r\n                  [key]=\"key\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                >\r\n                </sd-desktop-cell-view>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\"\r\n            >\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                mat-sort-header\r\n                class=\"c-th px-8\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\"\r\n              >\r\n                <div>\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <div\r\n                    class=\"c-inline-column\"\r\n                    *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        inlineColumn;\r\n                        context: { column: column }\r\n                      \"\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                <ng-container *ngIf=\"cellDef[column.field]\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      cellDef[column.field].templateRef;\r\n                      context: { item: item, column: column, idx: i }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </ng-container>\r\n                <sd-desktop-cell-view\r\n                  *ngIf=\"!cellDef[column.field]\"\r\n                  [key]=\"key\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                >\r\n                </sd-desktop-cell-view>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \"\r\n                  >\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr\r\n              class=\"c-first-header\"\r\n              mat-header-row\r\n              *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n            ></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr\r\n                class=\"c-second-header\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"\r\n              ></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n            ></tr>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: ['sdSubInformation']\"\r\n              class=\"c-detail-row\"\r\n            ></tr>\r\n            <ng-container\r\n              *ngIf=\"hasFooter && configuration.displayedFooters?.length\"\r\n            >\r\n              <tr\r\n                mat-footer-row\r\n                *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"\r\n              ></tr>\r\n            </ng-container>\r\n          </table>\r\n          <ng-template #elseEmpty>\r\n            <table mat-table [dataSource]=\"[{}]\">\r\n              <ng-container matColumnDef=\"selection\" sticky>\r\n                <th\r\n                  class=\"px-15\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n                ></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"command\">\r\n                <th\r\n                  class=\"px-8\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n                ></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                <th\r\n                  class=\"p-0\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"\r\n                ></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEmpty\">\r\n                <td\r\n                  class=\"c-empty\"\r\n                  mat-cell\r\n                  *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"configuration.displayedColumns.length\"\r\n                >\r\n                  <ng-container\r\n                    *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \"\r\n                    >\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #sdEmptyDataNoRef>\r\n                    <mat-icon fontSet=\"material-icons-outlined\"\r\n                      >leaderboard</mat-icon\r\n                    >\r\n                  </ng-template>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.columns\"\r\n                [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\"\r\n              >\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  class=\"c-th px-8 py-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\"\r\n                >\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.firstColumns\"\r\n                [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\"\r\n              >\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  class=\"c-th px-8 py-8\"\r\n                  [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                  \"\r\n                  [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \"\r\n                >\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div\r\n                      class=\"c-inline-column\"\r\n                      *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                    >\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.secondColumns\"\r\n                [matColumnDef]=\"column.field\"\r\n              >\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  class=\"c-th px-8 py-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\"\r\n                >\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <div\r\n                      class=\"c-inline-column\"\r\n                      *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                    >\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"\r\n                          inlineColumn;\r\n                          context: { column: column }\r\n                        \"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <tr\r\n                class=\"c-first-header\"\r\n                mat-header-row\r\n                *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"\r\n              ></tr>\r\n              <tr\r\n                class=\"c-second-header\"\r\n                mat-header-row\r\n                *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\r\n            *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \"\r\n            class=\"mr-10\"\r\n            [title]=\"'Filter' | sdTranslate\"\r\n            icon=\"filter_alt\"\r\n            size=\"sm\"\r\n            (action)=\"gridFilter.open()\"\r\n            type=\"link\"\r\n          >\r\n          </sd-button>\r\n          <sd-button\r\n            *ngIf=\"gridOption.reload?.visible\"\r\n            class=\"mr-10\"\r\n            [title]=\"'Reload' | sdTranslate\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            type=\"link\"\r\n          >\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\r\n                class=\"mr-10\"\r\n                [loading]=\"isExporting\"\r\n                [title]=\"exportTitle | sdTranslate\"\r\n                icon=\"get_app\"\r\n                size=\"sm\"\r\n                type=\"link\"\r\n              >\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button\r\n                class=\"mr-10\"\r\n                [title]=\"exportTitle | sdTranslate\"\r\n                icon=\"get_app\"\r\n                size=\"sm\"\r\n                [matMenuTriggerFor]=\"menu\"\r\n                type=\"link\"\r\n              >\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button\r\n                *ngIf=\"gridOption.export?.visibleExcel !== false\"\r\n                mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault()\"\r\n                type=\"button\"\r\n              >\r\n                <mat-icon fontSet=\"material-icons-outlined\"\r\n                  >file_download</mat-icon\r\n                >\r\n                <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"gridOption.export?.visibleCSV !== false\"\r\n                mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault(true)\"\r\n                type=\"button\"\r\n              >\r\n                <mat-icon fontSet=\"material-icons-outlined\"\r\n                  >file_download</mat-icon\r\n                >\r\n                <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"gridOption.export?.key\"\r\n                mat-menu-item\r\n                (click)=\"sdPopupExport.open()\"\r\n                type=\"button\"\r\n              >\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\r\n            *ngIf=\"gridOption.config?.visible\"\r\n            class=\"mr-10\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupGridConfiguration.open()\"\r\n            type=\"link\"\r\n          >\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"gridOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export\r\n      *ngIf=\"gridOption.export?.visible\"\r\n      [gridOption]=\"gridOption\"\r\n      (export)=\"onExport($event)\"\r\n      #sdPopupExport\r\n    >\r\n    </sd-popup-export>\r\n    <sd-popup-grid-configuration\r\n      [gridOption]=\"gridOption\"\r\n      [key]=\"key\"\r\n      #popupGridConfiguration\r\n    >\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\r\n    *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  >\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n    >\r\n    </sd-input>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'number'\"\r\n      size=\"sm\"\r\n      type=\"number\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n    >\r\n    </sd-input>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n    >\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n    >\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n    >\r\n    </sd-autocomplete>\r\n    <sd-date-time\r\n      *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      [type]=\"column.type\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n    >\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\r\n  *ngIf=\"\r\n    selectedItems\r\n      | selectionActionFilter: gridOption?.selection?.actions as actions\r\n  \"\r\n  [isOpened]=\"actions?.length\"\r\n>\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\r\n        *ngIf=\"action.click\"\r\n        class=\"ml-5\"\r\n        [tooltip]=\"action.tooltip\"\r\n        [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\"\r\n        [type]=\"action.type || 'light'\"\r\n        [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\"\r\n        size=\"sm\"\r\n        (action)=\"action.click(selectedItems)\"\r\n      ></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button\r\n          class=\"ml-5\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\"\r\n          [type]=\"action.type || 'light'\"\r\n          [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\"\r\n          size=\"sm\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n        >\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button\r\n              *ngFor=\"let childAction of action.children\"\r\n              mat-menu-item\r\n              (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\"\r\n            >\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\"\r\n                >{{ 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>\r\n",
+                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 | sdEditorHandlerRow:gridOption as editorHandler\">\r\n                  <ng-container *ngIf=\"editorHandler.visible\">\r\n                    <ng-container *ngIf=\"editorHandler.isInline;else notInline\">\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                    </ng-container>\r\n                    <ng-template #notInline>\r\n                      <ng-container *ngIf=\"!editorHandler.status\">\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                      </ng-container>\r\n                      <ng-container *ngIf=\"editorHandler.status\">\r\n                        <button class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\" mat-icon-button>\r\n                          <mat-icon class=\"c-icon\">save</mat-icon>\r\n                        </button>\r\n                        <button class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\" mat-icon-button>\r\n                          <mat-icon class=\"c-icon\">close</mat-icon>\r\n                        </button>\r\n                      </ng-container>\r\n\r\n                    </ng-template>\r\n                  </ng-container>\r\n\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                <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: i }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n                <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\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                <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: i }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n                <sd-desktop-cell *ngIf=\"!cellDef[column.field]\" [key]=\"key\" [column]=\"column\" [item]=\"item\"\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>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -1934,7 +2051,8 @@ class SdDesktopCellView {
 SdDesktopCellView.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-cell-view',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n    <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n      [ngClass]=\"{'cursor-pointer':column.click}\"\r\n      [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #useDefaultView>\r\n    <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n      <ng-container *ngIf=\"column.type === 'string'\">\r\n        <ng-container *ngIf=\"!!badge\">\r\n          <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n            [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n            <span *ngIf=\"column.click\" class=\"pointer\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n              columnTransform:item:column}}</span>\r\n            <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n          </div>\r\n          <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n            class=\"c-badge-circle d-flex align-items-center\"\r\n            [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n            <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n              fiber_manual_record\r\n            </span>\r\n            <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n              fiber_manual_record\r\n            </span>\r\n            {{item[column.field] | columnTransform:item:column}}\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!badge\">\r\n          <div style=\"overflow-wrap: break-word;\" [matTooltip]=\"item[column.field] | columnTooltip:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n            <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <div *ngIf=\"column.type === 'number'\">\r\n        <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n          (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n        <ng-container *ngIf=\"!column.click\">\r\n          {{item[column.field] | columnTransform:item:column}}</ng-container>\r\n      </div>\r\n      <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n        [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n        {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n      </div>\r\n      <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n        [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n        {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n      </div>\r\n      <div *ngIf=\"column.type === 'time'\">\r\n        {{item[column.field] | date:'HH:mm'}}\r\n      </div>\r\n      <div *ngIf=\"column.type === 'bool'\" class=\"align-middle text-center\">\r\n        <ng-container *ngIf=\"!!badge\">\r\n          <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n            [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n            [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n            <span *ngIf=\"column.click\" class=\"pointer\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</span>\r\n            <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n          </div>\r\n          <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n            class=\"c-badge-circle d-flex align-items-center\"\r\n            [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n            <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n              fiber_manual_record\r\n            </span>\r\n            <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n              fiber_manual_record\r\n            </span>\r\n            {{item[column.field] | columnTransform:item:column}}\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!badge\">\r\n          <span *ngIf=\"item[column.field]\" class=\"font-weight-bold c-color-success\">{{item[column.field] | columnTransform:item:column}}</span>\r\n          <span *ngIf=\"!item[column.field]\" class=\"font-weight-bold c-color-danger\">{{item[column.field] | columnTransform:item:column}}</span>\r\n        </ng-container>\r\n      </div>\r\n      <div *ngIf=\"column.type === 'values'\">\r\n        <ng-container *ngIf=\"column.transform\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n        <ng-container *ngIf=\"!column.transform\">\r\n          <ng-container *ngIf=\"item[column.field] | columnValues:column:key | async; $implicit as valueData\">\r\n            <div\r\n              *ngIf=\"valueData[column.option?.colorField] || valueData[column.option?.backgroundColorField]; else elseNoStatus\"\r\n              class=\"c-badge\"\r\n              [ngStyle]=\"{'color':valueData[column.option?.colorField], 'background-color': valueData[column.option?.backgroundColorField]}\">\r\n              {{valueData[column.option?.displayField]}}\r\n            </div>\r\n            <ng-template #elseNoStatus>\r\n              <div class=\"text-left\">\r\n                {{valueData[column.option?.displayField]}}\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-container>\r\n        \r\n      </div>\r\n      <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n        <img *ngIf=\"item[column.field]\" [src]=\"item[column.field] | columnTransform:item:column\"\r\n          [width]=\"column.option?.width\" [height]=\"column.option?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n          (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'pointer':column.click}\">\r\n        <mat-icon *ngIf=\"!item[column.field]\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n          (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n      </div>\r\n    </ng-container>\r\n    <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n    </sd-desktop-cell-children-view>\r\n  </ng-template>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n  <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n    [ngClass]=\"{'cursor-pointer':column.click}\"\r\n    [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n  </div>\r\n</ng-container>\r\n<ng-template #useDefaultView>\r\n  <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n    <ng-container *ngIf=\"column.type === 'string'\">\r\n      <ng-container *ngIf=\"!!badge\">\r\n        <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n          [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n          <span *ngIf=\"column.click\" class=\"pointer\"\r\n            (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n            columnTransform:item:column}}</span>\r\n          <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n        </div>\r\n        <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n          class=\"c-badge-circle d-flex align-items-center\"\r\n          [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n          <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n            fiber_manual_record\r\n          </span>\r\n          <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n            fiber_manual_record\r\n          </span>\r\n          {{item[column.field] | columnTransform:item:column}}\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!badge\">\r\n        <div style=\"overflow-wrap: break-word;\" [matTooltip]=\"item[column.field] | columnTooltip:item:column\">\r\n          <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n            (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n          <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <div *ngIf=\"column.type === 'number'\">\r\n      <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{item[column.field]\r\n        | columnTransform:item:column}}</a>\r\n      <ng-container *ngIf=\"!column.click\">\r\n        {{item[column.field] | columnTransform:item:column}}</ng-container>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'time'\">\r\n      {{item[column.field] | date:'HH:mm'}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'bool'\" class=\"align-middle text-center\">\r\n      <ng-container *ngIf=\"!!badge\">\r\n        <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n          [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n          <span *ngIf=\"column.click\" class=\"pointer\"\r\n            (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</span>\r\n          <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n        </div>\r\n        <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n          class=\"c-badge-circle d-flex align-items-center\"\r\n          [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n          <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n            fiber_manual_record\r\n          </span>\r\n          <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n            fiber_manual_record\r\n          </span>\r\n          {{item[column.field] | columnTransform:item:column}}\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!badge\">\r\n        <span *ngIf=\"item[column.field]\" class=\"font-weight-bold c-color-success\">{{item[column.field] |\r\n          columnTransform:item:column}}</span>\r\n        <span *ngIf=\"!item[column.field]\" class=\"font-weight-bold c-color-danger\">{{item[column.field] |\r\n          columnTransform:item:column}}</span>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'values'\">\r\n      <ng-container *ngIf=\"column.transform\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n      <ng-container *ngIf=\"!column.transform\">\r\n        <ng-container *ngIf=\"item[column.field] | columnValues:column:key | async; $implicit as valueData\">\r\n          <div\r\n            *ngIf=\"valueData[column.option?.colorField] || valueData[column.option?.backgroundColorField]; else elseNoStatus\"\r\n            class=\"c-badge\"\r\n            [ngStyle]=\"{'color':valueData[column.option?.colorField], 'background-color': valueData[column.option?.backgroundColorField]}\">\r\n            {{valueData[column.option?.displayField]}}\r\n          </div>\r\n          <ng-template #elseNoStatus>\r\n            <div class=\"text-left\">\r\n              {{valueData[column.option?.displayField]}}\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n    <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n      <img *ngIf=\"item[column.field]\" [src]=\"item[column.field] | columnTransform:item:column\"\r\n        [width]=\"column.option?.width\" [height]=\"column.option?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'pointer':column.click}\">\r\n      <mat-icon *ngIf=\"!item[column.field]\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n    </div>\r\n  </ng-container>\r\n  <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n  </sd-desktop-cell-children-view>\r\n</ng-template>",
+                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}"]
             },] }
 ];
@@ -2551,6 +2669,166 @@ SdDynamicColumn.propDecorators = {
     gridOption: [{ type: Input }]
 };
 
+class SdDesktopCell {
+    constructor() { }
+}
+SdDesktopCell.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-desktop-cell',
+                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow?.visible;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        <sd-desktop-cell-editor [column]=\"column\" [item]=\"item\"></sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <sd-desktop-cell-view [key]=\"key\" [column]=\"column\" [item]=\"item\"></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}"]
+            },] }
+];
+SdDesktopCell.ctorParameters = () => [];
+SdDesktopCell.propDecorators = {
+    key: [{ type: Input }],
+    column: [{ type: Input }],
+    item: [{ type: Input }],
+    gridOption: [{ type: Input }]
+};
+
+class SdDesktopCellEditor {
+    constructor() {
+        this.onChange = () => {
+            var _a, _b, _c;
+            if (this.column.type === 'children' || this.column.type === 'children-col') {
+                return;
+            }
+            (_c = (_b = (_a = this.column) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.change) === null || _c === void 0 ? void 0 : _c.call(_b, this.item);
+        };
+    }
+}
+SdDesktopCellEditor.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-desktop-cell-editor',
+                template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\"\r\n  [disabled]=\"column.filter?.disabled\">\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n  (sdChange)=\"onChange()\" [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)]=\"item[column.field]\" (sdChange)=\"onChange()\"\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)]=\"item[column.field]\" (sdChange)=\"onChange()\"\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)]=\"item[column.field]\" (sdChange)=\"onChange()\"\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)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\"\r\n  [disabled]=\"column.filter?.disabled\">\r\n</sd-date-time>",
+                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}"]
+            },] }
+];
+SdDesktopCellEditor.ctorParameters = () => [];
+SdDesktopCellEditor.propDecorators = {
+    column: [{ type: Input }],
+    item: [{ type: Input }]
+};
+
+class SdEditorHandlerRowPipe {
+    transform(item, gridOption) {
+        const { editor } = gridOption;
+        if (!editor) {
+            return {
+                visible: false
+            };
+        }
+        let isDisabled = false;
+        if (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function') {
+            isDisabled = editor.disabled(item);
+        }
+        else {
+            isDisabled = editor === null || editor === void 0 ? void 0 : editor.disabled;
+        }
+        if (editor.type === 'inline') {
+            const removable = editor.removable;
+            if (typeof (removable) === 'function') {
+                item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, removable: removable(item), isInline: true });
+                return item.editorHandlerRow;
+            }
+            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, removable: removable, isInline: true });
+            return item.editorHandlerRow;
+        }
+        const editable = editor.editable;
+        if (typeof (editable) === 'function') {
+            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: editable(item), isInline: false });
+            return item.editorHandlerRow;
+        }
+        item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: editable, isInline: false });
+        return item.editorHandlerRow;
+    }
+}
+SdEditorHandlerRowPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'sdEditorHandlerRow'
+            },] }
+];
+
+class SdEditorHandlerColumnPipe {
+    transform(value, item, column, gridOption) {
+        if (column.type === 'children' || column.type === 'children-col') {
+            return true;
+        }
+        const { editor } = gridOption;
+        const visible = (col) => {
+            var _a;
+            if (col.type === 'children' || col.type === 'children-col') {
+                return false;
+            }
+            let isDisabled = false;
+            // Kiểm tra xem có bị disabled hay không?
+            if (col.editor) {
+                isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
+            }
+            // Nếu bị disabled return false
+            if (isDisabled) {
+                return false;
+            }
+            if (editor.type !== 'inline') {
+                return !!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.status);
+            }
+            return true;
+        };
+        item.editorHandlerColumn = item.editorHandlerColumn || {};
+        for (const col of gridOption.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) });
+        }
+        return true;
+    }
+}
+SdEditorHandlerColumnPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'sdEditorHandlerColumn'
+            },] }
+];
+
+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
+    }
+    transform(value, item, validate) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
+                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;
+            }
+            if (!validate) {
+                item.editorHandlerRow.errorMessage = null;
+                return true;
+            }
+            const result = validate(item);
+            if (result instanceof Promise) {
+                item.editorHandlerRow.errorMessage = yield result;
+                return true;
+            }
+            else {
+                item.editorHandlerRow.errorMessage = result;
+                return true;
+            }
+        });
+    }
+}
+SdEditorValidatePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'sdEditorValidate'
+            },] }
+];
+
 class MatPaginatorIntlCro extends MatPaginatorIntl {
     constructor() {
         super(...arguments);
@@ -2603,6 +2881,8 @@ SdGridMaterialModule.decorators = [
                     MatSliderModule
                 ],
                 declarations: [
+                    SdDesktopCell,
+                    SdDesktopCellEditor,
                     SdDesktopCellView,
                     SdDesktopCellChildrenView,
                     SdDesktopCommand,
@@ -2635,7 +2915,10 @@ SdGridMaterialModule.decorators = [
                     SdFilterExternalPipe,
                     SdSelectionActionFilterPipe,
                     SdSelectionDisablePipe,
-                    SdSelectionDisableSelectAllPipe
+                    SdSelectionDisableSelectAllPipe,
+                    SdEditorHandlerRowPipe,
+                    SdEditorHandlerColumnPipe,
+                    SdEditorValidatePipe
                 ],
                 exports: [
                     SdGridMaterial,
@@ -2668,5 +2951,5 @@ SdGridMaterialModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionDisablePipe as ɵbf, SdSelectionDisableSelectAllPipe as ɵbg, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCellView as ɵj, SdDesktopCellChildrenView as ɵk, SdDesktopCommand as ɵl, SdLetDirective as ɵm, SdPopupGridConfiguration as ɵn, SdDynamicColumn as ɵo, SdGeneratedColumnService as ɵp, SdGridConfigurationResultPipe as ɵq, SdColumnChildrenFilterPipe as ɵr, SdColumnTitlePipe as ɵs, SdCommandFilterPipe as ɵt, SdCommandDisablePipe as ɵu, SdCommandIconPipe as ɵv, SdCommandTitlePipe as ɵw, SdColumnValuesPipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
+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 };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map