@sd-angular/core 1.3.103 → 1.3.104

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

@@ -8,7 +8,7 @@ import { v4 } from 'uuid';
 import { Subscription, BehaviorSubject, Subject, isObservable, combineLatest } from 'rxjs';
 import { SdNotifyService } from '@sd-angular/core/notify';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { debounceTime, map, switchMap, startWith } from 'rxjs/operators';
+import { map, debounceTime, switchMap, startWith } from 'rxjs/operators';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { SdLoadingService } from '@sd-angular/core/loading';
 import { SdTranslateService } from '@sd-angular/core/translate';
@@ -1132,8 +1132,8 @@ var _filterConfiguration, _filterValue, _cache$2, _loadDefaultConfiguration, _lo
 class SdGridFilterService {
     constructor(settingService) {
         this.settingService = settingService;
-        _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
-        _filterValue.set(this, 'GRID-FILTER-VALUE');
+        _filterConfiguration.set(this, "GRID-FILTER-CONFIGURATION");
+        _filterValue.set(this, "GRID-FILTER-VALUE");
         _cache$2.set(this, {});
         this.register = (key, args) => {
             let cacheSession = false;
@@ -1141,37 +1141,106 @@ class SdGridFilterService {
                 const { columns, externalFilters } = args;
                 key = hash({
                     columns,
-                    externalFilters
+                    externalFilters,
                 });
                 cacheSession = true; // Nếu không có key thì chỉ lưu theo session
             }
             if (!__classPrivateFieldGet(this, _cache$2)[key]) {
+                const t1 = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterConfiguration),
+                    key,
+                }, {
+                    type: cacheSession ? "session" : undefined,
+                });
+                const defaultConfiguration = __classPrivateFieldGet(this, _loadDefaultConfiguration).call(this, args, t1.get());
+                const t2 = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterValue),
+                    key,
+                }, {
+                    type: cacheSession ? "session" : undefined,
+                });
+                const defaultValue = __classPrivateFieldGet(this, _loadDefaultValue).call(this, args, t2.get());
                 const filterConfiguration = this.settingService.create({
                     prefix: __classPrivateFieldGet(this, _filterConfiguration),
-                    key
+                    key,
                 }, {
-                    default: __classPrivateFieldGet(this, _loadDefaultConfiguration).call(this, args),
-                    type: cacheSession ? 'session' : undefined
+                    default: defaultConfiguration,
+                    type: cacheSession ? "session" : undefined,
                 });
                 const filterValue = this.settingService.create({
                     prefix: __classPrivateFieldGet(this, _filterValue),
-                    key
+                    key,
                 }, {
-                    default: __classPrivateFieldGet(this, _loadDefaultValue).call(this, args),
-                    type: cacheSession ? 'session' : undefined
+                    default: defaultValue,
+                    type: cacheSession ? "session" : undefined,
                 });
+                const configurationGet = (configuration) => {
+                    var _a, _b, _c;
+                    const { columns, externalFilters, filterDefs } = args;
+                    const inlineColumn = {};
+                    const inlineExternal = {};
+                    const inlineFilterDef = {};
+                    // Filter column
+                    for (const item of columns || []) {
+                        inlineColumn[item.field] = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field];
+                    }
+                    // Filter external
+                    for (const item of externalFilters || []) {
+                        inlineExternal[item.field] = (_b = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _b === void 0 ? void 0 : _b[item.field];
+                    }
+                    // Filter def
+                    for (const item of filterDefs || []) {
+                        inlineFilterDef[item.sdMaterialFilterDef] = (_c = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _c === void 0 ? void 0 : _c[item.sdMaterialFilterDef];
+                    }
+                    return {
+                        // Filter column
+                        inlineColumn,
+                        // Filter external
+                        inlineExternal,
+                        // Filter def
+                        inlineFilterDef,
+                    };
+                };
+                const valueGet = (value) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    const columnFilter = {};
+                    const externalFilter = {};
+                    const filterDef = {};
+                    const { columns, externalFilters, filterDefs } = args;
+                    // Filter column
+                    for (const item of columns || []) {
+                        columnFilter[item.field] = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field];
+                    }
+                    // Filter external
+                    for (const item of externalFilters || []) {
+                        if (item.type === "daterange") {
+                            externalFilter[item.field] = {
+                                from: (_c = (_b = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _b === void 0 ? void 0 : _b[item.field]) === null || _c === void 0 ? void 0 : _c.from,
+                                to: (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.to,
+                            };
+                        }
+                        else {
+                            externalFilter[item.field] = (_f = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _f === void 0 ? void 0 : _f[item.field];
+                        }
+                    }
+                    // Filter def
+                    for (const item of filterDefs || []) {
+                        filterDef[item.sdMaterialFilterDef] = (_g = value === null || value === void 0 ? void 0 : value.filterDef) === null || _g === void 0 ? void 0 : _g[item.sdMaterialFilterDef];
+                    }
+                    return {
+                        // Filter column
+                        columnFilter,
+                        // Filter external
+                        externalFilter,
+                        // Filter def
+                        filterDef,
+                    };
+                };
                 __classPrivateFieldGet(this, _cache$2)[key] = {
                     configuration: {
                         get: () => {
                             const configuration = filterConfiguration.get();
-                            return {
-                                // Filter column
-                                inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
-                                // Filter external
-                                inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
-                                // Filter def
-                                inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
-                            };
+                            return configurationGet(configuration);
                         },
                         set: (configuration) => {
                             const keys = Object.keys(configuration || {});
@@ -1179,11 +1248,17 @@ class SdGridFilterService {
                             const { inlineColumn, inlineExternal, inlineFilterDef } = current;
                             const updatedConfiguration = {
                                 // Filter column
-                                inlineColumn: keys.includes('inlineColumn') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {}) : inlineColumn,
+                                inlineColumn: keys.includes("inlineColumn")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {}
+                                    : inlineColumn,
                                 // Filter external
-                                inlineExternal: keys.includes('inlineExternal') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {}) : inlineExternal,
+                                inlineExternal: keys.includes("inlineExternal")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {}
+                                    : inlineExternal,
                                 // Filter def
-                                inlineFilterDef: keys.includes('inlineFilterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {}) : inlineFilterDef,
+                                inlineFilterDef: keys.includes("inlineFilterDef")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {}
+                                    : inlineFilterDef,
                             };
                             filterConfiguration.set(updatedConfiguration);
                             return updatedConfiguration;
@@ -1191,19 +1266,12 @@ class SdGridFilterService {
                         remove: () => {
                             filterConfiguration.remove();
                         },
-                        observer: filterConfiguration.observer
+                        observer: filterConfiguration.observer.pipe(map(configurationGet)),
                     },
                     value: {
                         get: () => {
                             const configuration = filterValue.get();
-                            return {
-                                // Filter column
-                                columnFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {},
-                                // Filter external
-                                externalFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {},
-                                // Filter def
-                                filterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}
-                            };
+                            return valueGet(configuration);
                         },
                         set: (configuration) => {
                             const keys = Object.keys(configuration || {});
@@ -1211,11 +1279,17 @@ class SdGridFilterService {
                             const { columnFilter, externalFilter, filterDef } = current;
                             const updatedConfiguration = {
                                 // Filter column
-                                columnFilter: keys.includes('columnFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {}) : columnFilter,
+                                columnFilter: keys.includes("columnFilter")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {}
+                                    : columnFilter,
                                 // Filter external
-                                externalFilter: keys.includes('externalFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {}) : externalFilter,
+                                externalFilter: keys.includes("externalFilter")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {}
+                                    : externalFilter,
                                 // Filter def
-                                filterDef: keys.includes('filterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}) : filterDef,
+                                filterDef: keys.includes("filterDef")
+                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}
+                                    : filterDef,
                             };
                             filterValue.set(updatedConfiguration);
                             return updatedConfiguration;
@@ -1223,62 +1297,71 @@ class SdGridFilterService {
                         remove: () => {
                             filterValue.remove();
                         },
-                        observer: filterValue.observer
-                    }
+                        observer: filterValue.observer.pipe(map(valueGet)),
+                    },
                 };
             }
             return __classPrivateFieldGet(this, _cache$2)[key];
         };
-        _loadDefaultConfiguration.set(this, (args) => {
-            var _a, _b, _c, _d;
+        _loadDefaultConfiguration.set(this, (args, configuration) => {
+            var _a, _b, _c, _d, _e, _f, _g;
             const { columns, externalFilters, filterDefs } = args;
             const inlineColumn = {};
             const inlineExternal = {};
             const inlineFilterDef = {};
             // Filter column
-            for (const item of (columns || [])) {
-                inlineColumn[item.field] = (_a = inlineColumn[item.field]) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.filter) === null || _b === void 0 ? void 0 : _b.defaultShowing;
+            for (const item of columns || []) {
+                inlineColumn[item.field] = (_b = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.defaultShowing;
             }
             // Filter external
-            for (const item of (externalFilters || [])) {
-                inlineExternal[item.field] = (_c = inlineExternal[item.field]) !== null && _c !== void 0 ? _c : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            for (const item of externalFilters || []) {
+                inlineExternal[item.field] = (_e = (_d = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _d === void 0 ? void 0 : _d[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
             }
             // Filter def
-            for (const item of (filterDefs || [])) {
-                inlineFilterDef[item.sdMaterialFilterDef] = (_d = inlineFilterDef[item.sdMaterialFilterDef]) !== null && _d !== void 0 ? _d : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            for (const item of filterDefs || []) {
+                inlineFilterDef[item.sdMaterialFilterDef] = (_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _f === void 0 ? void 0 : _f[item.sdMaterialFilterDef]) !== null && _g !== void 0 ? _g : item === null || item === void 0 ? void 0 : item.defaultShowing;
             }
             return {
+                // Filter column
                 inlineColumn,
+                // Filter external
                 inlineExternal,
+                // Filter def
                 inlineFilterDef,
             };
         });
-        _loadDefaultValue.set(this, (args) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            const { columns, externalFilters, filterDefs } = args;
+        _loadDefaultValue.set(this, (args, value) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             const columnFilter = {};
             const externalFilter = {};
             const filterDef = {};
+            const { columns, externalFilters, filterDefs } = args;
             // Filter column
-            for (const item of (columns || [])) {
-                columnFilter[item.field] = (_a = columnFilter[item.field]) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.filter) === null || _b === void 0 ? void 0 : _b.default;
+            for (const item of columns || []) {
+                columnFilter[item.field] = (_b = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.default;
             }
             // Filter external
-            for (const item of (externalFilters || [])) {
-                if (item.type === 'daterange') {
+            for (const item of externalFilters || []) {
+                if (item.type === "daterange") {
                     externalFilter[item.field] = {
-                        from: (_f = (_d = (_c = externalFilter[item.field]) === null || _c === void 0 ? void 0 : _c.from) !== null && _d !== void 0 ? _d : (_e = item.default) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : undefined,
-                        to: (_k = (_h = (_g = externalFilter[item.field]) === null || _g === void 0 ? void 0 : _g.to) !== null && _h !== void 0 ? _h : (_j = item.default) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : undefined
+                        from: (_f = (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : (_g = item.default) === null || _g === void 0 ? void 0 : _g.from,
+                        to: (_k = (_j = (_h = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _h === void 0 ? void 0 : _h[item.field]) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : (_l = item.default) === null || _l === void 0 ? void 0 : _l.to,
                     };
                 }
                 else {
-                    externalFilter[item.field] = (_l = externalFilter[item.field]) !== null && _l !== void 0 ? _l : item.default;
+                    externalFilter[item.field] = (_o = (_m = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _m === void 0 ? void 0 : _m[item.field]) !== null && _o !== void 0 ? _o : item === null || item === void 0 ? void 0 : item.default;
                 }
             }
             // Filter def
+            for (const item of filterDefs || []) {
+                filterDef[item.sdMaterialFilterDef] = (_q = (_p = value === null || value === void 0 ? void 0 : value.filterDef) === null || _p === void 0 ? void 0 : _p[item.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : undefined;
+            }
             return {
+                // Filter column
                 columnFilter,
+                // Filter external
                 externalFilter,
+                // Filter def
                 filterDef,
             };
         });
@@ -1332,7 +1415,7 @@ class SdGridMaterial {
         _reload.set(this, new Subject());
         this.isExporting = false;
         this.isSelectAll = false;
-        this.exportTitle = 'Export';
+        this.exportTitle = "Export";
         _loadCompleted.set(this, false);
         _initCellDef.set(this, () => {
             this.cellDef = {};
@@ -1368,11 +1451,11 @@ class SdGridMaterial {
                 rawColumnFilter: columnFilter || {},
                 rawExternalFilter: externalFilter || {},
                 rawFilterDef: filterDef || {},
-                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
-                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || "",
+                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || "",
                 pageNumber,
                 pageSize,
-                isExported: true
+                isExported: true,
             };
         });
         _initConfiguration.set(this, (option) => {
@@ -1382,7 +1465,7 @@ class SdGridMaterial {
                 hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
                 pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = this.configuration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
                 pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
-                showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false
+                showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
             };
             return option;
         });
@@ -1394,59 +1477,79 @@ class SdGridMaterial {
                 this.filterRegister = this.gridFilterService.register((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.key, {
                     columns: (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.columns,
                     externalFilters: (_e = (_d = this.gridOption) === null || _d === void 0 ? void 0 : _d.filter) === null || _e === void 0 ? void 0 : _e.externalFilters,
-                    filterDefs: this.filterDefs
+                    filterDefs: this.filterDefs,
                 });
                 if (!hasRegister) {
-                    __classPrivateFieldGet(this, _subscription$2).add(this.filterRegister.value.observer.pipe(debounceTime(500), map((filterValue) => {
+                    __classPrivateFieldGet(this, _subscription$2).add(this.filterRegister.value.observer
+                        .pipe(debounceTime(500), map((filterValue) => {
                         this.columnFilter = filterValue.columnFilter;
                         __classPrivateFieldGet(this, _paginator).pageIndex = 0;
                         __classPrivateFieldGet(this, _reload).next({
                             force: false,
                         });
-                    })).subscribe());
+                    }))
+                        .subscribe());
+                }
+                else {
+                    __classPrivateFieldGet(this, _reload).next({
+                        force: true,
+                    });
                 }
             }
         });
         _filterLocal.set(this, (localItems, filterInfo) => {
             const { columns } = this.gridOption;
             const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
-            const items = localItems.filter(item => {
+            const items = localItems.filter((item) => {
                 var _a, _b, _c, _d;
                 for (const column of columns) {
                     const { field, type } = column;
-                    const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
-                    const columnValue = (item[field] || '').toString().trim().toLowerCase();
+                    const filterValue = (rawColumnFilter[field] || "")
+                        .toString()
+                        .trim()
+                        .toLowerCase();
+                    const columnValue = (item[field] || "")
+                        .toString()
+                        .trim()
+                        .toLowerCase();
                     if (filterValue) {
-                        if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
+                        if (!columnValue &&
+                            type !== "datetime" &&
+                            type !== "date" &&
+                            type !== "time") {
                             return false;
                         }
-                        if (type === 'string') {
+                        if (type === "string") {
                             if (columnValue.indexOf(filterValue) === -1) {
                                 return false;
                             }
                         }
-                        else if (type === 'values') {
+                        else if (type === "values") {
                             if (columnValue !== filterValue) {
                                 return false;
                             }
                         }
-                        else if (type === 'number') {
-                            const fValue = +filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '');
+                        else if (type === "number") {
+                            const fValue = +filterValue
+                                .replace(">=", "")
+                                .replace("<=", "")
+                                .replace(">", "")
+                                .replace("<", "");
                             const cValue = +columnValue;
                             if (fValue || fValue === 0) {
                                 if (!cValue && cValue !== 0) {
                                     return false;
                                 }
-                                if (filterValue.indexOf('>=') > -1 && cValue < fValue) {
+                                if (filterValue.indexOf(">=") > -1 && cValue < fValue) {
                                     return false;
                                 }
-                                else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
+                                else if (filterValue.indexOf("<=") > -1 && cValue > fValue) {
                                     return false;
                                 }
-                                else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
+                                else if (filterValue.indexOf("<") > -1 && cValue >= fValue) {
                                     return false;
                                 }
-                                else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
+                                else if (filterValue.indexOf(">") > -1 && cValue <= fValue) {
                                     return false;
                                 }
                                 else if (cValue !== fValue) {
@@ -1454,15 +1557,21 @@ class SdGridMaterial {
                                 }
                             }
                         }
-                        else if (type === 'bool') {
-                            if (filterValue === '1' && columnValue !== '1' && columnValue !== 'true') {
+                        else if (type === "bool") {
+                            if (filterValue === "1" &&
+                                columnValue !== "1" &&
+                                columnValue !== "true") {
                                 return false;
                             }
-                            else if (filterValue === '0' && columnValue !== '0' && columnValue !== 'false') {
+                            else if (filterValue === "0" &&
+                                columnValue !== "0" &&
+                                columnValue !== "false") {
                                 return false;
                             }
                         }
-                        else if (type === 'datetime' || type === 'date' || type === 'time') {
+                        else if (type === "datetime" ||
+                            type === "date" ||
+                            type === "time") {
                             const from = (_b = (_a = rawColumnFilter[field]) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : rawColumnFilter[field];
                             const to = (_d = (_c = rawColumnFilter[field]) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : rawColumnFilter[field];
                             const fromDate = Date.begin(from);
@@ -1488,20 +1597,20 @@ class SdGridMaterial {
             });
             // Sort
             if (orderBy && orderDirection) {
-                const column = columns.find(e => e.field === orderBy);
+                const column = columns.find((e) => e.field === orderBy);
                 if (column) {
                     const { type, field } = column;
                     items.sort((current, next) => {
-                        if (type === 'number') {
+                        if (type === "number") {
                             return (current[field] || 0) - (next[field] || 0);
                         }
-                        if (type === 'date' || type === 'datetime' || type === 'time') {
-                            const d1 = new Date(current[field] || '').getTime();
-                            const d2 = new Date(current[field] || '').getTime();
+                        if (type === "date" || type === "datetime" || type === "time") {
+                            const d1 = new Date(current[field] || "").getTime();
+                            const d2 = new Date(current[field] || "").getTime();
                             return d1 - d2;
                         }
-                        const s1 = (current[field] || '').toString();
-                        const s2 = (next[field] || '').toString();
+                        const s1 = (current[field] || "").toString();
+                        const s2 = (next[field] || "").toString();
                         if (s1 > s2) {
                             return 1;
                         }
@@ -1510,17 +1619,16 @@ class SdGridMaterial {
                         }
                         return 0;
                     });
-                    if (orderDirection === 'desc') {
+                    if (orderDirection === "desc") {
                         items.reverse();
                     }
                 }
             }
             return {
                 items: items.filter((item, index) => {
-                    return index >= pageNumber * pageSize
-                        && index < (pageNumber + 1) * pageSize;
+                    return (index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize);
                 }),
-                total: items.length
+                total: items.length,
             };
         });
         _getFilter.set(this, () => {
@@ -1530,15 +1638,15 @@ class SdGridMaterial {
                 rawColumnFilter: columnFilter || {},
                 rawExternalFilter: externalFilter || {},
                 rawFilterDef: filterDef || {},
-                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
-                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || "",
+                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || "",
                 pageNumber: ((_c = __classPrivateFieldGet(this, _paginator)) === null || _c === void 0 ? void 0 : _c.pageIndex) || 0,
-                pageSize: ((_d = __classPrivateFieldGet(this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50
+                pageSize: ((_d = __classPrivateFieldGet(this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50,
             };
         });
         _load$1.set(this, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
             this.isLoading = true;
-            if (this.gridOption.type === 'server') {
+            if (this.gridOption.type === "server") {
                 try {
                     let result = this.gridOption.items(filterReq);
                     if (isObservable(result)) {
@@ -1547,15 +1655,15 @@ class SdGridMaterial {
                     const data = yield result;
                     return {
                         items: (data === null || data === void 0 ? void 0 : data.items) || [],
-                        total: (data === null || data === void 0 ? void 0 : data.total) || 0
+                        total: (data === null || data === void 0 ? void 0 : data.total) || 0,
                     };
                 }
                 catch (error) {
                     console.error(error);
-                    this.notifyService.notify.warning('Có lỗi xảy ra');
+                    this.notifyService.notify.warning("Có lỗi xảy ra");
                     return {
                         items: [],
-                        total: 0
+                        total: 0,
                     };
                 }
                 finally {
@@ -1574,13 +1682,13 @@ class SdGridMaterial {
                             __classPrivateFieldSet(this, _localItems, results || []);
                         }
                         if (!Array.isArray(__classPrivateFieldGet(this, _localItems))) {
-                            this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
+                            this.notifyService.notify.warning("Dữ liệu không phải là một mảng");
                             __classPrivateFieldSet(this, _localItems, []);
                         }
                     }
                     catch (error) {
                         console.error(error);
-                        this.notifyService.notify.warning('Có lỗi xảy ra');
+                        this.notifyService.notify.warning("Có lỗi xảy ra");
                         __classPrivateFieldSet(this, _localItems, []);
                     }
                     finally {
@@ -1603,7 +1711,7 @@ class SdGridMaterial {
                 item.originItem = Object.assign({}, item);
             });
             yield ((_d = (_c = (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.reload) === null || _c === void 0 ? void 0 : _c.onReload) === null || _d === void 0 ? void 0 : _d.call(_c, this.items));
-            this.isSelectAll = this.items.every(e => e.isSelected);
+            this.isSelectAll = this.items.every((e) => e.isSelected);
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
         }));
         this.reload = (force = true) => __awaiter(this, void 0, void 0, function* () {
@@ -1628,7 +1736,7 @@ class SdGridMaterial {
             }
             else {
                 const filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
-                if (this.gridOption.type === 'server') {
+                if (this.gridOption.type === "server") {
                     let result = this.gridOption.items(filterInfo);
                     if (isObservable(result)) {
                         result = result.toPromise();
@@ -1637,7 +1745,7 @@ class SdGridMaterial {
                 }
                 else {
                     let exportedItems = [];
-                    if (typeof (this.gridOption.items) === 'function') {
+                    if (typeof this.gridOption.items === "function") {
                         const results = this.gridOption.items();
                         if (results instanceof Promise) {
                             exportedItems = yield results;
@@ -1655,23 +1763,25 @@ class SdGridMaterial {
         }));
         _allColumns.set(this, () => {
             const columns = [];
-            this.gridOption.columns.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(column => {
+            this.gridOption.columns
+                .filter((e) => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
+                .forEach((column) => {
                 var _a, _b;
-                if (column.type === 'image') {
+                if (column.type === "image") {
                     return;
                 }
-                if (column.type === 'children') {
-                    (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                        if (childColumn.type === 'image') {
+                if (column.type === "children") {
+                    (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter((e) => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach((childColumn) => {
+                        if (childColumn.type === "image") {
                             return;
                         }
                         columns.push(childColumn);
                     });
                     return;
                 }
-                if (column.type === 'children-col') {
-                    (_b = column.children) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                        if (childColumn.type === 'image') {
+                if (column.type === "children-col") {
+                    (_b = column.children) === null || _b === void 0 ? void 0 : _b.filter((e) => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach((childColumn) => {
+                        if (childColumn.type === "image") {
                             return;
                         }
                         columns.push(childColumn);
@@ -1684,7 +1794,7 @@ class SdGridMaterial {
         });
         _allExportedColumns.set(this, () => {
             var _a, _b;
-            return ((_b = (_a = this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
+            return (((_b = (_a = this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter((e) => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []);
         });
         _onExport.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
             var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -1705,7 +1815,7 @@ class SdGridMaterial {
                     promises = [];
                     exportItems = [];
                     for (const result of results) {
-                        if ('items' in result) {
+                        if ("items" in result) {
                             exportItems = [...exportItems, ...result.items];
                             total = result.total;
                         }
@@ -1723,7 +1833,7 @@ class SdGridMaterial {
                         }
                     }
                     const totalPage = total / pageSize;
-                    const percent = Math.round((pageNumber - 1) * 100.0 / totalPage);
+                    const percent = Math.round(((pageNumber - 1) * 100.0) / totalPage);
                     this.exportTitle = `Exporting...${percent}%`;
                     const allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
                     const allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
@@ -1732,8 +1842,8 @@ class SdGridMaterial {
                         const handle = (exportColumn) => __awaiter(this, void 0, void 0, function* () {
                             var _t, _u, _v;
                             obj[exportColumn.field] = item[exportColumn.field];
-                            const column = allColumns.find(e => e.field === exportColumn.field);
-                            const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
+                            const column = allColumns.find((e) => e.field === exportColumn.field);
+                            const exportedColumn = allExportedColumns.find((e) => e.field === exportColumn.field);
                             if (exportedColumn === null || exportedColumn === void 0 ? void 0 : exportedColumn.transform) {
                                 obj[exportedColumn.field] = exportedColumn.transform(item[exportedColumn.field], item);
                                 return;
@@ -1741,16 +1851,16 @@ class SdGridMaterial {
                             if (!column) {
                                 return;
                             }
-                            if (column.type === 'children' || column.type === 'children-col') {
-                                column === null || column === void 0 ? void 0 : column.children.forEach(childColumn => handle(childColumn));
+                            if (column.type === "children" || column.type === "children-col") {
+                                column === null || column === void 0 ? void 0 : column.children.forEach((childColumn) => handle(childColumn));
                                 return;
                             }
-                            if (!columns.some(e => e.field === column.field)) {
+                            if (!columns.some((e) => e.field === column.field)) {
                                 return;
                             }
                             if (column.transform) {
                                 const transform = column.transform(item[column.field], item, {
-                                    isExport: true
+                                    isExport: true,
                                 });
                                 if (transform instanceof Promise) {
                                     obj[column.field] = yield transform;
@@ -1758,52 +1868,55 @@ class SdGridMaterial {
                                 else {
                                     obj[column.field] = transform;
                                 }
-                                obj[column.field] = (_t = obj[column.field]) !== null && _t !== void 0 ? _t : '';
+                                obj[column.field] = (_t = obj[column.field]) !== null && _t !== void 0 ? _t : "";
                             }
-                            else if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
-                                obj[column.field] = '';
+                            else if (item[column.field] === undefined ||
+                                item[column.field] === null ||
+                                item[column.field] === "") {
+                                obj[column.field] = "";
                             }
-                            else if (column.type === 'string' || column.type === 'number') {
+                            else if (column.type === "string" || column.type === "number") {
                                 // Nếu cell là string hoặc number thì gán bằng chính nó
                                 obj[column.field] = item[column.field];
                             }
-                            else if (column.type === 'bool') {
+                            else if (column.type === "bool") {
                                 // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
                                 if (item[column.field]) {
-                                    obj[column.field] = ((_u = column.option) === null || _u === void 0 ? void 0 : _u.displayOnTrue) || 'True';
+                                    obj[column.field] = ((_u = column.option) === null || _u === void 0 ? void 0 : _u.displayOnTrue) || "True";
                                 }
-                                else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                    obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnFalse) || 'False';
+                                else if (obj[column.field] !== undefined &&
+                                    obj[column.field] !== null) {
+                                    obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnFalse) || "False";
                                 }
                             }
-                            else if (column.type === 'date') {
+                            else if (column.type === "date") {
                                 let date = item[column.field];
                                 const { transformDate } = column;
                                 if (transformDate) {
                                     date = transformDate(date, item);
                                 }
                                 // Nếu là date thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
+                                obj[column.field] = Date.toFormat(date, "dd/MM/yyyy");
                             }
-                            else if (column.type === 'datetime') {
+                            else if (column.type === "datetime") {
                                 let date = item[column.field];
                                 const { transformDate } = column;
                                 if (transformDate) {
                                     date = transformDate(date, item);
                                 }
                                 // Nếu là datetime thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
+                                obj[column.field] = Date.toFormat(date, "dd/MM/yyyy HH:mm");
                             }
-                            else if (column.type === 'time') {
+                            else if (column.type === "time") {
                                 let date = item[column.field];
                                 const { transformDate } = column;
                                 if (transformDate) {
                                     date = transformDate(date, item);
                                 }
                                 // Nếu là time thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'HH:mm');
+                                obj[column.field] = Date.toFormat(date, "HH:mm");
                             }
-                            else if (column.type === 'values') {
+                            else if (column.type === "values") {
                                 // Nếu là values thì lấy giá trị của value được chọn
                                 obj[column.field] = yield this.columnValuesPipe.transform(item[column.field], column);
                             }
@@ -1834,7 +1947,7 @@ class SdGridMaterial {
                         yield this.exportService.exportCSV({
                             columns,
                             items,
-                            fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName
+                            fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName,
                         });
                         return;
                     }
@@ -1846,14 +1959,14 @@ class SdGridMaterial {
                                     sheets.push({
                                         name: sheet.name,
                                         items: sheet.items,
-                                        fields: sheet.fields
+                                        fields: sheet.fields,
                                     });
                                 }
                                 else {
                                     sheets.push({
                                         name: sheet.name,
                                         items: yield sheet.items(),
-                                        fields: sheet.fields
+                                        fields: sheet.fields,
                                     });
                                 }
                             }
@@ -1863,7 +1976,7 @@ class SdGridMaterial {
                         columns,
                         items,
                         fileName: (_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.fileName,
-                        sheets
+                        sheets,
                     });
                     return;
                 }
@@ -1871,7 +1984,7 @@ class SdGridMaterial {
                     filePath: file.filePath,
                     fileName: file.fileName,
                     columns,
-                    items
+                    items,
                 });
             }
             finally {
@@ -1901,14 +2014,16 @@ class SdGridMaterial {
             }
             const data = (_z = (_y = (_x = this.gridOption) === null || _x === void 0 ? void 0 : _x.subInformation) === null || _y === void 0 ? void 0 : _y.onExpand) === null || _z === void 0 ? void 0 : _z.call(_y, rowData);
             if (!((_0 = this.gridOption.subInformation) === null || _0 === void 0 ? void 0 : _0.multiple)) {
-                this.items.forEach(item => item.isExpanding = item.isExpanded = false);
+                this.items.forEach((item) => (item.isExpanding = item.isExpanded = false));
             }
             if (data instanceof Promise) {
                 rowData.isExpanding = true;
-                data.then(res => {
+                data
+                    .then((res) => {
                     rowData.expandDetail = res;
                     rowData.isExpanded = true;
-                }).finally(() => rowData.isExpanding = false);
+                })
+                    .finally(() => (rowData.isExpanding = false));
             }
             else {
                 rowData.expandDetail = data;
@@ -1918,42 +2033,46 @@ class SdGridMaterial {
         this.onSelect = (rowData) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if ((_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) {
-                (_c = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _c === void 0 ? void 0 : _c.items.forEach(e => e.isSelected = rowData.isSelected);
-                (_e = (_d = this.gridOption.selection) === null || _d === void 0 ? void 0 : _d.onSelect) === null || _e === void 0 ? void 0 : _e.call(_d, rowData, this.items.filter(e => e.isSelected));
-                this.isSelectAll = this.items.every(e => e.isSelected);
+                (_c = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _c === void 0 ? void 0 : _c.items.forEach((e) => (e.isSelected = rowData.isSelected));
+                (_e = (_d = this.gridOption.selection) === null || _d === void 0 ? void 0 : _d.onSelect) === null || _e === void 0 ? void 0 : _e.call(_d, rowData, this.items.filter((e) => e.isSelected));
+                this.isSelectAll = this.items.every((e) => e.isSelected);
                 __classPrivateFieldGet(this, _updateSelectedItems).call(this);
             }
             else {
                 if ((_f = this.gridOption.selection) === null || _f === void 0 ? void 0 : _f.single) {
-                    this.items.filter(e => e !== rowData).forEach(e => e.isSelected = false);
+                    this.items
+                        .filter((e) => e !== rowData)
+                        .forEach((e) => (e.isSelected = false));
                     __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                     return;
                 }
-                (_h = (_g = this.gridOption.selection) === null || _g === void 0 ? void 0 : _g.onSelect) === null || _h === void 0 ? void 0 : _h.call(_g, rowData, this.items.filter(e => e.isSelected));
-                this.isSelectAll = this.items.every(e => e.isSelected);
+                (_h = (_g = this.gridOption.selection) === null || _g === void 0 ? void 0 : _g.onSelect) === null || _h === void 0 ? void 0 : _h.call(_g, rowData, this.items.filter((e) => e.isSelected));
+                this.isSelectAll = this.items.every((e) => e.isSelected);
                 __classPrivateFieldGet(this, _updateSelectedItems).call(this);
             }
         };
         this.onSelectAll = () => {
             var _a, _b, _c;
-            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach(e => {
+            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((e) => {
                 var _a, _b, _c, _d;
-                if (e.selectable && (!((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.actions) === null || _d === void 0 ? void 0 : _d.length))) {
+                if (e.selectable &&
+                    (!((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.actions) === null || _d === void 0 ? void 0 : _d.length))) {
                     e.isSelected = this.isSelectAll;
                 }
             });
-            (_c = (_b = this.gridOption.selection) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, this.items.filter(e => e.isSelected));
+            (_c = (_b = this.gridOption.selection) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, this.items.filter((e) => e.isSelected));
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
         };
         this.onClearSelection = (items) => {
             items = items || this.items;
             this.isSelectAll = false;
-            items === null || items === void 0 ? void 0 : items.forEach(e => e.isSelected = false);
+            items === null || items === void 0 ? void 0 : items.forEach((e) => (e.isSelected = false));
             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
         };
         _updateSelectedItems.set(this, () => {
-            this.selectedItems = this.items.filter(item => item.isSelected)
-                .map(item => {
+            this.selectedItems = this.items
+                .filter((item) => item.isSelected)
+                .map((item) => {
                 const { isSelected, isExpanded, isExpanding, expandDetail, editorErrorMessage, editorHandlerColumn, editorHandlerRow, editorStatus, originItem, sdId, sdVersion } = item, 
                 // Giữ lại các trường thông tin cho selectable (action, groupedAction, sdGroup, selectable)
                 result = __rest(item, ["isSelected", "isExpanded", "isExpanding", "expandDetail", "editorErrorMessage", "editorHandlerColumn", "editorHandlerRow", "editorStatus", "originItem", "sdId", "sdVersion"]);
@@ -1969,7 +2088,7 @@ class SdGridMaterial {
             this.filterRegister.value.set({
                 columnFilter,
                 externalFilter,
-                filterDef
+                filterDef,
             });
             // if (this.gridOption?.filter?.inlineColumn && args?.columnFilter) {
             //   this.columnFilter = args.columnFilter;
@@ -1984,49 +2103,49 @@ class SdGridMaterial {
             }
             const item = {};
             // Gán giá trị mặc định
-            columns.forEach(column => {
-                if (column.type === 'values') {
-                    item[column.field] = '';
+            columns.forEach((column) => {
+                if (column.type === "values") {
+                    item[column.field] = "";
                 }
-                else if (column.type === 'bool') {
+                else if (column.type === "bool") {
                     item[column.field] = true;
                 }
-                else if (column.type === 'number') {
+                else if (column.type === "number") {
                     item[column.field] = null;
                 }
             });
-            if (type === 'local') {
+            if (type === "local") {
                 (_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item, __classPrivateFieldGet(this, _localItems));
             }
             else {
                 (_b = editor.onAdd) === null || _b === void 0 ? void 0 : _b.call(editor, item, this.items);
             }
             // Đưa item lên dòng đầu tiên nếu type khác popup
-            if (editor.type !== 'popup') {
+            if (editor.type !== "popup") {
                 if (editor.addToLast) {
-                    if (type === 'local') {
+                    if (type === "local") {
                         __classPrivateFieldSet(this, _localItems, [...__classPrivateFieldGet(this, _localItems), item]);
                     }
                     this.items = [...this.items, item];
                 }
                 else {
-                    if (type === 'local') {
+                    if (type === "local") {
                         __classPrivateFieldSet(this, _localItems, [item, ...__classPrivateFieldGet(this, _localItems)]);
                     }
                     this.items = [item, ...this.items];
                 }
             }
-            item.editorStatus = 'create';
+            item.editorStatus = "create";
             item.editorHandlerRow = {
-                temporary: Object.assign({}, item)
+                temporary: Object.assign({}, item),
             };
         };
         this.onUpdate = (item) => {
             const { editor } = this.gridOption;
-            item.editorStatus = 'update';
+            item.editorStatus = "update";
             item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { temporary: Object.assign({}, item) });
             // this.generateEditorHanlder(item);
-            if (editor.type === 'popup') {
+            if (editor.type === "popup") {
                 // Xử lý case popup
                 // this.sdGridPopupEditor.open(item, columns, isModified);
             }
@@ -2059,8 +2178,8 @@ class SdGridMaterial {
                         yield result;
                     }
                 }
-                if (item.editorStatus === 'create' && editor.type === 'popup') {
-                    if (this.gridOption.type === 'local') {
+                if (item.editorStatus === "create" && editor.type === "popup") {
+                    if (this.gridOption.type === "local") {
                         this.items.splice(0, 0, item);
                     }
                     // this.viewItems.splice(0, 0, item);
@@ -2079,8 +2198,8 @@ class SdGridMaterial {
         this.onCancel = (item) => {
             var _a, _b;
             const { editor } = this.gridOption;
-            if (editor.type === 'inline') {
-                if (this.gridOption.type === 'local') {
+            if (editor.type === "inline") {
+                if (this.gridOption.type === "local") {
                     const idx2 = __classPrivateFieldGet(this, _localItems).indexOf(item);
                     __classPrivateFieldGet(this, _localItems).splice(idx2, 1);
                     __classPrivateFieldSet(this, _localItems, [...__classPrivateFieldGet(this, _localItems)]);
@@ -2088,7 +2207,7 @@ class SdGridMaterial {
                 const idx1 = this.items.indexOf(item);
                 this.items.splice(idx1, 1);
                 this.items = [...this.items];
-                if (this.gridOption.type === 'local') {
+                if (this.gridOption.type === "local") {
                     (_a = editor === null || editor === void 0 ? void 0 : editor.onCancel) === null || _a === void 0 ? void 0 : _a.call(editor, item, __classPrivateFieldGet(this, _localItems));
                 }
                 else {
@@ -2097,9 +2216,9 @@ class SdGridMaterial {
                 this.ref.detectChanges();
                 return;
             }
-            if (editor.type === 'focus') {
-                if (item.editorStatus === 'create') {
-                    if (this.gridOption.type === 'local') {
+            if (editor.type === "focus") {
+                if (item.editorStatus === "create") {
+                    if (this.gridOption.type === "local") {
                         const idx2 = __classPrivateFieldGet(this, _localItems).indexOf(item);
                         __classPrivateFieldGet(this, _localItems).splice(idx2, 1);
                         __classPrivateFieldSet(this, _localItems, [...__classPrivateFieldGet(this, _localItems)]);
@@ -2132,8 +2251,8 @@ class SdGridMaterial {
                     }
                 }
             }
-            if (editor.type === 'inline') {
-                if (this.gridOption.type === 'local') {
+            if (editor.type === "inline") {
+                if (this.gridOption.type === "local") {
                     const idx2 = __classPrivateFieldGet(this, _localItems).indexOf(item);
                     __classPrivateFieldGet(this, _localItems).splice(idx2, 1);
                     __classPrivateFieldSet(this, _localItems, [...__classPrivateFieldGet(this, _localItems)]);
@@ -2141,7 +2260,7 @@ class SdGridMaterial {
                 const idx1 = this.items.indexOf(item);
                 this.items.splice(idx1, 1);
                 this.items = [...this.items];
-                if (this.gridOption.type === 'local') {
+                if (this.gridOption.type === "local") {
                     (_1 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _1 === void 0 ? void 0 : _1.call(editor, item, __classPrivateFieldGet(this, _localItems));
                 }
                 else {
@@ -2212,21 +2331,25 @@ class SdGridMaterial {
     set paginator(paginator) {
         if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
             __classPrivateFieldSet(this, _paginator, paginator);
-            __classPrivateFieldGet(this, _subscription$2).add(paginator.page.pipe(map(() => {
+            __classPrivateFieldGet(this, _subscription$2).add(paginator.page
+                .pipe(map(() => {
                 __classPrivateFieldGet(this, _reload).next({
-                    force: false
+                    force: false,
                 });
-            })).subscribe());
+            }))
+                .subscribe());
         }
     }
     set sort(sort) {
         if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
             __classPrivateFieldSet(this, _sort, sort);
-            __classPrivateFieldGet(this, _subscription$2).add(sort.sortChange.pipe(map(() => {
+            __classPrivateFieldGet(this, _subscription$2).add(sort.sortChange
+                .pipe(map(() => {
                 __classPrivateFieldGet(this, _reload).next({
-                    force: false
+                    force: false,
                 });
-            })).subscribe());
+            }))
+                .subscribe());
         }
     }
     ngOnInit() {
@@ -2238,13 +2361,18 @@ class SdGridMaterial {
             const result = yield __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force);
             __classPrivateFieldSet(this, _loadCompleted, true);
             return result;
-        }))).subscribe(__classPrivateFieldGet(this, _render)));
+        })))
+            .subscribe(__classPrivateFieldGet(this, _render)));
         __classPrivateFieldGet(this, _subscription$2).add(this.sdCellDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
-        __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
-        __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
+        __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes
+            .pipe(startWith([]))
+            .subscribe(__classPrivateFieldGet(this, _initFooterDef)));
+        __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes
+            .pipe(startWith([]))
+            .subscribe(__classPrivateFieldGet(this, _initFilterDef)));
         __classPrivateFieldGet(this, _subscription$2).add(combineLatest([
             __classPrivateFieldGet(this, _optionChanges).pipe(startWith(this.gridOption)),
-            this.sdFilterDefs.changes.pipe(startWith(this.filterDefs))
+            this.sdFilterDefs.changes.pipe(startWith(this.filterDefs)),
         ]).subscribe((a) => {
             __classPrivateFieldGet(this, _loadFilterRegister).call(this);
         }));
@@ -2257,21 +2385,23 @@ class SdGridMaterial {
         moveItemInArray(columns, event.previousIndex, event.currentIndex);
     }
     get editedItems() {
-        return this.items.filter(item => {
+        return this.items
+            .filter((item) => {
             if (!item.originItem) {
                 return true;
             }
-            if (Object.keys(item.originItem).some(key => item.originItem[key] !== item[key])) {
+            if (Object.keys(item.originItem).some((key) => item.originItem[key] !== item[key])) {
                 return true;
             }
             return false;
-        }).map(item => {
+        })
+            .map((item) => {
             const { editorStatus, editorHandlerRow, editorHandlerColumn, editorErrorMessage, expandDetail, isExpanded, isExpanding, isSelected, originItem, sdId, sdVersion, selectable, actions, groupedActions, sdGroup, temporary } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "editorErrorMessage", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem", "sdId", "sdVersion", "selectable", "actions", "groupedActions", "sdGroup", "temporary"]);
             return Object.assign(Object.assign({}, result), { editorErrorMessage });
         });
     }
     get gridItems() {
-        return this.items.map(item => {
+        return this.items.map((item) => {
             const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem, sdId, sdVersion, selectable, actions, groupedActions, sdGroup, temporary } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem", "sdId", "sdVersion", "selectable", "actions", "groupedActions", "sdGroup", "temporary"]);
             return result;
         });
@@ -2280,25 +2410,25 @@ class SdGridMaterial {
         return __classPrivateFieldGet(this, _localItems);
     }
     get localGridItems() {
-        return __classPrivateFieldGet(this, _localItems).map(item => {
+        return __classPrivateFieldGet(this, _localItems).map((item) => {
             const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem, sdId, sdVersion, selectable, actions, groupedActions, sdGroup, temporary } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem", "sdId", "sdVersion", "selectable", "actions", "groupedActions", "sdGroup", "temporary"]);
             return result;
         });
     }
     get isEditing() {
-        return this.items.some(e => e.editorStatus !== undefined);
+        return this.items.some((e) => e.editorStatus !== undefined);
     }
 }
 _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$2 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _loadFilterRegister = 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();
 SdGridMaterial.decorators = [
     { type: Component, args: [{
-                selector: 'sd-grid-material',
+                selector: "sd-grid-material",
                 template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <sd-grid-filter *ngIf=\"!gridOption.filter?.disabled && filterRegister\" [filterRegister]=\"filterRegister\" [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\" [externalFilters]=\"gridOption?.filter?.externalFilters\" [filterDefs]=\"filterDefs\" #gridFilter>\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\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\" sdScroll [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]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\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                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\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                    <ng-template #useExpandCollapse>\r\n                      <div [@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                    </ng-template>\r\n                  </ng-container>\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 && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (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                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\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                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\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                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\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\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\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\"\r\n                [matColumnDef]=\"column.field\" [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': configuration.firstColumns[i].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                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\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\">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 matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *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\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [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 [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\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\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\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=\"gridFilter && !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.exportCSV()\" 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-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\"\r\n        (export)=\"onExport($event)\" #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-container>",
                 animations: [
-                    trigger('detailExpand', [
-                        state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
-                        state('expanded', style({ height: '*', visibility: 'visible' })),
-                        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+                    trigger("detailExpand", [
+                        state("collapsed", style({ height: "0", minHeight: "0", visibility: "hidden" })),
+                        state("expanded", style({ height: "*", visibility: "visible" })),
+                        transition("expanded <=> collapsed", animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")),
                     ]),
                 ],
                 styles: [".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]