@sd-angular/core 1.3.34 → 1.3.36

package/bundles/sd-angular-core-grid-material.umd.js

@@ -897,13 +897,6 @@
                     isCSV: true
                 });
             };
-            this.exportRaw = function () {
-                _this.export.emit({
-                    file: null,
-                    columns: __classPrivateFieldGet(_this, _getExportColumns).call(_this),
-                    isRaw: true
-                });
-            };
             this.loadFiles = function (group) {
                 if (group === void 0) { group = null; }
                 return __awaiter(_this, void 0, void 0, function () {
@@ -1885,11 +1878,11 @@
             this.exportTitle = 'Export';
             _loadCompleted.set(this, false);
             _initCellDef.set(this, function () {
-                var e_1, _4;
+                var e_1, _2;
                 _this.cellDef = {};
                 try {
-                    for (var _5 = __values(_this.sdCellDefs), _6 = _5.next(); !_6.done; _6 = _5.next()) {
-                        var cellDef = _6.value;
+                    for (var _3 = __values(_this.sdCellDefs), _4 = _3.next(); !_4.done; _4 = _3.next()) {
+                        var cellDef = _4.value;
                         if (cellDef.sdMaterialCellDef) {
                             _this.cellDef[cellDef.sdMaterialCellDef] = cellDef;
                         }
@@ -1898,35 +1891,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_6 && !_6.done && (_4 = _5.return)) _4.call(_5);
+                        if (_4 && !_4.done && (_2 = _3.return)) _2.call(_3);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
             });
             _initFilterDef.set(this, function () {
-                var e_2, _4;
+                var e_2, _2;
                 _this.filterDefs = [];
                 try {
-                    for (var _5 = __values(_this.sdFilterDefs), _6 = _5.next(); !_6.done; _6 = _5.next()) {
-                        var filterDef = _6.value;
+                    for (var _3 = __values(_this.sdFilterDefs), _4 = _3.next(); !_4.done; _4 = _3.next()) {
+                        var filterDef = _4.value;
                         _this.filterDefs.push(filterDef);
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_6 && !_6.done && (_4 = _5.return)) _4.call(_5);
+                        if (_4 && !_4.done && (_2 = _3.return)) _2.call(_3);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
             });
             _initFooterDef.set(this, function () {
-                var e_3, _4;
+                var e_3, _2;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _5 = __values(_this.sdFooterDefs), _6 = _5.next(); !_6.done; _6 = _5.next()) {
-                        var footerDef = _6.value;
+                    for (var _3 = __values(_this.sdFooterDefs), _4 = _3.next(); !_4.done; _4 = _3.next()) {
+                        var footerDef = _4.value;
                         if (footerDef.sdMaterialFooterDef) {
                             _this.hasFooter = true;
                             _this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
@@ -1936,7 +1929,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_6 && !_6.done && (_4 = _5.return)) _4.call(_5);
+                        if (_4 && !_4.done && (_2 = _3.return)) _2.call(_3);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -1968,7 +1961,7 @@
                 var columns = _this.gridOption.columns;
                 var rawColumnFilter = filterInfo.rawColumnFilter, orderBy = filterInfo.orderBy, orderDirection = filterInfo.orderDirection, pageSize = filterInfo.pageSize, pageNumber = filterInfo.pageNumber;
                 var items = localItems.filter(function (item) {
-                    var e_4, _4;
+                    var e_4, _2;
                     var _a, _b, _c, _d;
                     try {
                         for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
@@ -2042,7 +2035,7 @@
                     catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_4 = columns_1.return)) _4.call(columns_1);
+                            if (columns_1_1 && !columns_1_1.done && (_2 = columns_1.return)) _2.call(columns_1);
                         }
                         finally { if (e_4) throw e_4.error; }
                     }
@@ -2100,14 +2093,14 @@
             _load$1.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var result, data, results, _4, _5, error_1;
-                    return __generator(this, function (_6) {
-                        switch (_6.label) {
+                    var result, data, results, _2, _3, error_1;
+                    return __generator(this, function (_4) {
+                        switch (_4.label) {
                             case 0:
                                 this.isLoading = true;
-                                _6.label = 1;
+                                _4.label = 1;
                             case 1:
-                                _6.trys.push([1, 8, 9, 10]);
+                                _4.trys.push([1, 8, 9, 10]);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 3];
                                 result = this.gridOption.items(filterReq);
                                 if (rxjs.isObservable(result)) {
@@ -2115,7 +2108,7 @@
                                 }
                                 return [4 /*yield*/, result];
                             case 2:
-                                data = _6.sent();
+                                data = _4.sent();
                                 return [2 /*return*/, {
                                         items: data.items || [],
                                         total: data.total || 0
@@ -2124,19 +2117,19 @@
                                 if (!force) return [3 /*break*/, 6];
                                 results = this.gridOption.items();
                                 if (!(results instanceof Promise)) return [3 /*break*/, 5];
-                                _4 = __classPrivateFieldSet;
-                                _5 = [this, _localItems];
+                                _2 = __classPrivateFieldSet;
+                                _3 = [this, _localItems];
                                 return [4 /*yield*/, results];
                             case 4:
-                                _4.apply(void 0, _5.concat([_6.sent()]));
+                                _2.apply(void 0, _3.concat([_4.sent()]));
                                 return [3 /*break*/, 6];
                             case 5:
                                 __classPrivateFieldSet(this, _localItems, results);
-                                _6.label = 6;
+                                _4.label = 6;
                             case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
                             case 7: return [3 /*break*/, 10];
                             case 8:
-                                error_1 = _6.sent();
+                                error_1 = _4.sent();
                                 this.notifyService.handle.error(error_1);
                                 return [3 /*break*/, 10];
                             case 9:
@@ -2150,8 +2143,8 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c, _d;
-                return __generator(this, function (_4) {
-                    switch (_4.label) {
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             (_a = this.sdScroll) === null || _a === void 0 ? void 0 : _a.scrollTop();
                             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
@@ -2162,7 +2155,7 @@
                             });
                             return [4 /*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))];
                         case 1:
-                            _4.sent();
+                            _2.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -2173,11 +2166,11 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var data;
-                    return __generator(this, function (_4) {
-                        switch (_4.label) {
+                    return __generator(this, function (_2) {
+                        switch (_2.label) {
                             case 0: return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
                             case 1:
-                                data = _4.sent();
+                                data = _2.sent();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
                         }
@@ -2189,8 +2182,8 @@
                 if (pageSize === void 0) { pageSize = 10000; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _e, _f, result, filterInfo, result, exportedItems, results;
-                    return __generator(this, function (_4) {
-                        switch (_4.label) {
+                    return __generator(this, function (_2) {
+                        switch (_2.label) {
                             case 0:
                                 if (!((_e = this.gridOption.export) === null || _e === void 0 ? void 0 : _e.items)) return [3 /*break*/, 2];
                                 result = (_f = this.gridOption.export) === null || _f === void 0 ? void 0 : _f.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
@@ -2204,7 +2197,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _4.sent()];
+                            case 1: return [2 /*return*/, _2.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
@@ -2213,7 +2206,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _4.sent()];
+                            case 3: return [2 /*return*/, _2.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof (this.gridOption.items) === 'function')) return [3 /*break*/, 8];
@@ -2221,15 +2214,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _4.sent();
+                                exportedItems = _2.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _4.label = 7;
+                                _2.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.gridOption.items;
-                                _4.label = 9;
+                                _2.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -2269,14 +2262,14 @@
                 return ((_b = (_a = _this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
             });
             _onExport.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
-                var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, file, isCSV, isRaw, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _4, _5, sheet, _6, _7, _8, e_5_1;
-                var e_5, _9;
+                var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, file, isCSV, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _2, _3, sheet, _4, _5, _6, e_5_1;
+                var e_5, _7;
                 var _this = this;
-                return __generator(this, function (_10) {
-                    switch (_10.label) {
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
                         case 0:
-                            _10.trys.push([0, , 22, 23]);
-                            file = args.file, isCSV = args.isCSV, isRaw = args.isRaw;
+                            _8.trys.push([0, , 20, 21]);
+                            file = args.file, isCSV = args.isCSV;
                             columns_2 = args.columns;
                             pageSize_1 = ((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.maxItemsPerRequest) || 1000;
                             batch = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.batch) || 1;
@@ -2287,14 +2280,14 @@
                             items_1 = [];
                             promises_1 = [];
                             handleData = function () { return __awaiter(_this, void 0, void 0, function () {
-                                var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_6_1;
-                                var e_7, _4, e_6, _5;
+                                var _s, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_6_1;
+                                var e_7, _2, e_6, _3;
                                 var _this = this;
-                                return __generator(this, function (_6) {
-                                    switch (_6.label) {
+                                return __generator(this, function (_4) {
+                                    switch (_4.label) {
                                         case 0: return [4 /*yield*/, Promise.all(promises_1)];
                                         case 1:
-                                            results = _6.sent();
+                                            results = _4.sent();
                                             promises_1 = [];
                                             exportItems_1 = [];
                                             try {
@@ -2312,20 +2305,20 @@
                                             catch (e_7_1) { e_7 = { error: e_7_1 }; }
                                             finally {
                                                 try {
-                                                    if (results_1_1 && !results_1_1.done && (_4 = results_1.return)) _4.call(results_1);
+                                                    if (results_1_1 && !results_1_1.done && (_2 = results_1.return)) _2.call(results_1);
                                                 }
                                                 finally { if (e_7) throw e_7.error; }
                                             }
-                                            if (!((_u = this.gridOption.export) === null || _u === void 0 ? void 0 : _u.mapping)) return [3 /*break*/, 4];
+                                            if (!((_s = this.gridOption.export) === null || _s === void 0 ? void 0 : _s.mapping)) return [3 /*break*/, 4];
                                             results_2 = this.gridOption.export.mapping(exportItems_1);
                                             if (!(results_2 instanceof Promise)) return [3 /*break*/, 3];
                                             return [4 /*yield*/, results_2];
                                         case 2:
-                                            exportItems_1 = _6.sent();
+                                            exportItems_1 = _4.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
                                             exportItems_1 = results_2;
-                                            _6.label = 4;
+                                            _4.label = 4;
                                         case 4:
                                             totalPage = total_1 / pageSize_1;
                                             percent = Math.round((pageNumber_1 - 1) * 100.0 / totalPage);
@@ -2334,15 +2327,15 @@
                                             allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
                                             _loop_1 = function (item) {
                                                 var obj, handle, columns_3, columns_3_1, exportColumn, e_8_1;
-                                                var e_8, _4;
-                                                return __generator(this, function (_5) {
-                                                    switch (_5.label) {
+                                                var e_8, _2;
+                                                return __generator(this, function (_3) {
+                                                    switch (_3.label) {
                                                         case 0:
                                                             obj = {};
                                                             handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
-                                                                var _v, _w, column, exportedColumn, transform, _4, _5, date, transformDate, date, transformDate, date, transformDate, _6, _7;
-                                                                return __generator(this, function (_8) {
-                                                                    switch (_8.label) {
+                                                                var _t, _u, column, exportedColumn, transform, _2, _3, date, transformDate, date, transformDate, date, transformDate, _4, _5;
+                                                                return __generator(this, function (_6) {
+                                                                    switch (_6.label) {
                                                                         case 0:
                                                                             obj[exportColumn.field] = item[exportColumn.field];
                                                                             column = allColumns.find(function (e) { return e.field === exportColumn.field; });
@@ -2366,15 +2359,15 @@
                                                                                 isExport: true
                                                                             });
                                                                             if (!(transform instanceof Promise)) return [3 /*break*/, 2];
-                                                                            _4 = obj;
-                                                                            _5 = column.field;
+                                                                            _2 = obj;
+                                                                            _3 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _4[_5] = _8.sent();
+                                                                            _2[_3] = _6.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _8.label = 3;
+                                                                            _6.label = 3;
                                                                         case 3: return [3 /*break*/, 13];
                                                                         case 4:
                                                                             if (!(item[column.field] === undefined || item[column.field] === null || item[column.field] === '')) return [3 /*break*/, 5];
@@ -2389,10 +2382,10 @@
                                                                             if (!(column.type === 'bool')) return [3 /*break*/, 7];
                                                                             // 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] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnTrue) || 'True';
+                                                                                obj[column.field] = ((_t = column.option) === null || _t === void 0 ? void 0 : _t.displayOnTrue) || 'True';
                                                                             }
                                                                             else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                                                                obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnFalse) || 'False';
+                                                                                obj[column.field] = ((_u = column.option) === null || _u === void 0 ? void 0 : _u.displayOnFalse) || 'False';
                                                                             }
                                                                             return [3 /*break*/, 13];
                                                                         case 7:
@@ -2428,43 +2421,43 @@
                                                                         case 10:
                                                                             if (!(column.type === 'values')) return [3 /*break*/, 12];
                                                                             // Nếu là values thì lấy giá trị của value được chọn
-                                                                            _6 = obj;
-                                                                            _7 = column.field;
+                                                                            _4 = obj;
+                                                                            _5 = column.field;
                                                                             return [4 /*yield*/, this.columnValuesPipe.transform(item[column.field], column)];
                                                                         case 11:
                                                                             // Nếu là values thì lấy giá trị của value được chọn
-                                                                            _6[_7] = _8.sent();
+                                                                            _4[_5] = _6.sent();
                                                                             return [3 /*break*/, 13];
                                                                         case 12:
                                                                             obj[column.field] = item[column.field];
-                                                                            _8.label = 13;
+                                                                            _6.label = 13;
                                                                         case 13: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
-                                                            _5.label = 1;
+                                                            _3.label = 1;
                                                         case 1:
-                                                            _5.trys.push([1, 6, 7, 8]);
+                                                            _3.trys.push([1, 6, 7, 8]);
                                                             columns_3 = (e_8 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
-                                                            _5.label = 2;
+                                                            _3.label = 2;
                                                         case 2:
                                                             if (!!columns_3_1.done) return [3 /*break*/, 5];
                                                             exportColumn = columns_3_1.value;
                                                             return [4 /*yield*/, handle(exportColumn)];
                                                         case 3:
-                                                            _5.sent();
-                                                            _5.label = 4;
+                                                            _3.sent();
+                                                            _3.label = 4;
                                                         case 4:
                                                             columns_3_1 = columns_3.next();
                                                             return [3 /*break*/, 2];
                                                         case 5: return [3 /*break*/, 8];
                                                         case 6:
-                                                            e_8_1 = _5.sent();
+                                                            e_8_1 = _3.sent();
                                                             e_8 = { error: e_8_1 };
                                                             return [3 /*break*/, 8];
                                                         case 7:
                                                             try {
-                                                                if (columns_3_1 && !columns_3_1.done && (_4 = columns_3.return)) _4.call(columns_3);
+                                                                if (columns_3_1 && !columns_3_1.done && (_2 = columns_3.return)) _2.call(columns_3);
                                                             }
                                                             finally { if (e_8) throw e_8.error; }
                                                             return [7 /*endfinally*/];
@@ -2474,29 +2467,29 @@
                                                     }
                                                 });
                                             };
-                                            _6.label = 5;
+                                            _4.label = 5;
                                         case 5:
-                                            _6.trys.push([5, 10, 11, 12]);
+                                            _4.trys.push([5, 10, 11, 12]);
                                             exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
-                                            _6.label = 6;
+                                            _4.label = 6;
                                         case 6:
                                             if (!!exportItems_2_1.done) return [3 /*break*/, 9];
                                             item = exportItems_2_1.value;
                                             return [5 /*yield**/, _loop_1(item)];
                                         case 7:
-                                            _6.sent();
-                                            _6.label = 8;
+                                            _4.sent();
+                                            _4.label = 8;
                                         case 8:
                                             exportItems_2_1 = exportItems_2.next();
                                             return [3 /*break*/, 6];
                                         case 9: return [3 /*break*/, 12];
                                         case 10:
-                                            e_6_1 = _6.sent();
+                                            e_6_1 = _4.sent();
                                             e_6 = { error: e_6_1 };
                                             return [3 /*break*/, 12];
                                         case 11:
                                             try {
-                                                if (exportItems_2_1 && !exportItems_2_1.done && (_5 = exportItems_2.return)) _5.call(exportItems_2);
+                                                if (exportItems_2_1 && !exportItems_2_1.done && (_3 = exportItems_2.return)) _3.call(exportItems_2);
                                             }
                                             finally { if (e_6) throw e_6.error; }
                                             return [7 /*endfinally*/];
@@ -2504,7 +2497,7 @@
                                     }
                                 });
                             }); };
-                            _10.label = 1;
+                            _8.label = 1;
                         case 1:
                             if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
                             promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
@@ -2514,16 +2507,16 @@
                             }
                             return [4 /*yield*/, handleData()];
                         case 2:
-                            _10.sent();
+                            _8.sent();
                             return [3 /*break*/, 1];
                         case 3:
                             if (!(promises_1.length > 0)) return [3 /*break*/, 5];
                             return [4 /*yield*/, handleData()];
                         case 4:
-                            _10.sent();
-                            _10.label = 5;
+                            _8.sent();
+                            _8.label = 5;
                         case 5:
-                            if (!!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 20];
+                            if (!!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 18];
                             if (!isCSV) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.exportService.exportCSV({
                                     columns: columns_2,
@@ -2531,102 +2524,81 @@
                                     fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName
                                 })];
                         case 6:
-                            _10.sent();
+                            _8.sent();
                             return [2 /*return*/];
                         case 7:
-                            if (!isRaw) return [3 /*break*/, 9];
-                            return [4 /*yield*/, this.exportService.exportExcelRaw({
-                                    columns: columns_2,
-                                    items: items_1,
-                                    fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName
-                                })];
+                            sheets = [];
+                            if (!Array.isArray((_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.sheets)) return [3 /*break*/, 16];
+                            _8.label = 8;
                         case 8:
-                            _10.sent();
-                            return [2 /*return*/];
+                            _8.trys.push([8, 14, 15, 16]);
+                            _2 = __values(this.gridOption.export.sheets), _3 = _2.next();
+                            _8.label = 9;
                         case 9:
-                            sheets = [];
-                            if (!Array.isArray((_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) return [3 /*break*/, 18];
-                            _10.label = 10;
-                        case 10:
-                            _10.trys.push([10, 16, 17, 18]);
-                            _4 = __values(this.gridOption.export.sheets), _5 = _4.next();
-                            _10.label = 11;
-                        case 11:
-                            if (!!_5.done) return [3 /*break*/, 15];
-                            sheet = _5.value;
-                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 14];
-                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 12];
+                            if (!!_3.done) return [3 /*break*/, 13];
+                            sheet = _3.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 12];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 10];
                             sheets.push({
                                 name: sheet.name,
                                 items: sheet.items,
                                 fields: sheet.fields
                             });
-                            return [3 /*break*/, 14];
-                        case 12:
-                            _7 = (_6 = sheets).push;
-                            _8 = {
+                            return [3 /*break*/, 12];
+                        case 10:
+                            _5 = (_4 = sheets).push;
+                            _6 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
-                        case 13:
-                            _7.apply(_6, [(_8.items = _10.sent(),
-                                    _8.fields = sheet.fields,
-                                    _8)]);
-                            _10.label = 14;
+                        case 11:
+                            _5.apply(_4, [(_6.items = _8.sent(),
+                                    _6.fields = sheet.fields,
+                                    _6)]);
+                            _8.label = 12;
+                        case 12:
+                            _3 = _2.next();
+                            return [3 /*break*/, 9];
+                        case 13: return [3 /*break*/, 16];
                         case 14:
-                            _5 = _4.next();
-                            return [3 /*break*/, 11];
-                        case 15: return [3 /*break*/, 18];
-                        case 16:
-                            e_5_1 = _10.sent();
+                            e_5_1 = _8.sent();
                             e_5 = { error: e_5_1 };
-                            return [3 /*break*/, 18];
-                        case 17:
+                            return [3 /*break*/, 16];
+                        case 15:
                             try {
-                                if (_5 && !_5.done && (_9 = _4.return)) _9.call(_4);
+                                if (_3 && !_3.done && (_7 = _2.return)) _7.call(_2);
                             }
                             finally { if (e_5) throw e_5.error; }
                             return [7 /*endfinally*/];
-                        case 18: return [4 /*yield*/, this.exportService.export({
+                        case 16: return [4 /*yield*/, this.exportService.export({
                                 columns: columns_2,
                                 items: items_1,
-                                fileName: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
+                                fileName: (_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.fileName,
                                 sheets: sheets
                             })];
-                        case 19:
-                            _10.sent();
+                        case 17:
+                            _8.sent();
                             return [2 /*return*/];
-                        case 20: return [4 /*yield*/, this.exportService.exportByTemplate({
+                        case 18: return [4 /*yield*/, this.exportService.exportByTemplate({
                                 filePath: file.filePath,
                                 fileName: file.fileName,
                                 columns: columns_2,
                                 items: items_1
                             })];
-                        case 21:
-                            _10.sent();
-                            return [3 /*break*/, 23];
-                        case 22:
+                        case 19:
+                            _8.sent();
+                            return [3 /*break*/, 21];
+                        case 20:
                             this.isExporting = false;
                             this.exportTitle = "Export";
                             this.ref.detectChanges();
                             return [7 /*endfinally*/];
-                        case 23: return [2 /*return*/];
+                        case 21: return [2 /*return*/];
                     }
                 });
             }); });
             this.onExport = function (args) { return __awaiter(_this, void 0, void 0, function () {
-                var translate;
-                return __generator(this, function (_4) {
-                    translate = this.translateService.translate;
-                    if (!args.isCSV && this.gridOption.export.max && this.total > this.gridOption.export.max) {
-                        args.isRaw = true;
-                        __classPrivateFieldGet(this, _onExport).call(this, args);
-                        // this.notifyService.confirm(translate(`Total rows reach limit, do you want to export CSV`)).then(() => {
-                        //   args.isCSV = true;
-                        //   this.#onExport(args);
-                        // });
-                        return [2 /*return*/];
-                    }
+                return __generator(this, function (_2) {
                     __classPrivateFieldGet(this, _onExport).call(this, args);
                     return [2 /*return*/];
                 });
@@ -2636,9 +2608,9 @@
                 _this.reload(false);
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
-                var _x, _y, _z, _0, _1, data;
-                return __generator(this, function (_4) {
-                    if ((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.always) {
+                var _v, _w, _x, _y, _z, data;
+                return __generator(this, function (_2) {
+                    if ((_v = this.gridOption.subInformation) === null || _v === void 0 ? void 0 : _v.always) {
                         return [2 /*return*/];
                     }
                     if (rowData.isExpanding) {
@@ -2648,8 +2620,8 @@
                         rowData.isExpanded = false;
                         return [2 /*return*/];
                     }
-                    data = (_0 = (_z = (_y = this.gridOption) === null || _y === void 0 ? void 0 : _y.subInformation) === null || _z === void 0 ? void 0 : _z.onExpand) === null || _0 === void 0 ? void 0 : _0.call(_z, rowData);
-                    if (!((_1 = this.gridOption.subInformation) === null || _1 === void 0 ? void 0 : _1.multiple)) {
+                    data = (_y = (_x = (_w = this.gridOption) === null || _w === void 0 ? void 0 : _w.subInformation) === null || _x === void 0 ? void 0 : _x.onExpand) === null || _y === void 0 ? void 0 : _y.call(_x, rowData);
+                    if (!((_z = this.gridOption.subInformation) === null || _z === void 0 ? void 0 : _z.multiple)) {
                         this.items.forEach(function (item) { return item.isExpanding = item.isExpanded = false; });
                     }
                     if (data instanceof Promise) {
@@ -2722,7 +2694,7 @@
             };
             this.onCreate = function () {
                 var _a, _b;
-                var _4 = _this.gridOption, type = _4.type, editor = _4.editor, columns = _4.columns;
+                var _2 = _this.gridOption, type = _2.type, editor = _2.editor, columns = _2.columns;
                 if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
                     return;
                 }
@@ -2778,23 +2750,23 @@
             };
             this.onSave = function (item) { return __awaiter(_this, void 0, void 0, function () {
                 var editor, result, message, result, err_1;
-                return __generator(this, function (_4) {
-                    switch (_4.label) {
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             if (item.editorHandlerRow.saving) {
                                 return [2 /*return*/];
                             }
                             editor = this.gridOption.editor;
-                            _4.label = 1;
+                            _2.label = 1;
                         case 1:
-                            _4.trys.push([1, 7, 8, 9]);
+                            _2.trys.push([1, 7, 8, 9]);
                             item.editorHandlerRow.saving = true;
                             if (!editor.validate) return [3 /*break*/, 4];
                             result = editor.validate(item, this.items.indexOf(item));
                             if (!(result instanceof Promise)) return [3 /*break*/, 3];
                             return [4 /*yield*/, result];
                         case 2:
-                            message = _4.sent();
+                            message = _2.sent();
                             if (message) {
                                 throw message;
                             }
@@ -2803,15 +2775,15 @@
                             if (result) {
                                 throw result;
                             }
-                            _4.label = 4;
+                            _2.label = 4;
                         case 4:
                             if (!editor.onSave) return [3 /*break*/, 6];
                             result = editor.onSave(item);
                             if (!(result instanceof Promise)) return [3 /*break*/, 6];
                             return [4 /*yield*/, result];
                         case 5:
-                            _4.sent();
-                            _4.label = 6;
+                            _2.sent();
+                            _2.label = 6;
                         case 6:
                             if (item.editorStatus === 'create' && editor.type === 'popup') {
                                 if (this.gridOption.type === 'local') {
@@ -2822,7 +2794,7 @@
                             item.editorStatus = undefined;
                             return [3 /*break*/, 9];
                         case 7:
-                            err_1 = _4.sent();
+                            err_1 = _2.sent();
                             this.notifyService.notify.warning(err_1);
                             return [3 /*break*/, 9];
                         case 8:
@@ -2873,9 +2845,9 @@
                 _this.ref.detectChanges();
             };
             this.onRemove = function (item) { return __awaiter(_this, void 0, void 0, function () {
-                var _2, _3, editor, beforeRemove, result, idx2, idx1;
-                return __generator(this, function (_4) {
-                    switch (_4.label) {
+                var _0, _1, editor, beforeRemove, result, idx2, idx1;
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             editor = this.gridOption.editor;
                             if (!(editor === null || editor === void 0 ? void 0 : editor.beforeRemove)) return [3 /*break*/, 3];
@@ -2883,7 +2855,7 @@
                             if (!(beforeRemove instanceof Promise)) return [3 /*break*/, 2];
                             return [4 /*yield*/, beforeRemove];
                         case 1:
-                            result = _4.sent();
+                            result = _2.sent();
                             if (!result) {
                                 return [2 /*return*/];
                             }
@@ -2892,7 +2864,7 @@
                             if (!beforeRemove) {
                                 return [2 /*return*/];
                             }
-                            _4.label = 3;
+                            _2.label = 3;
                         case 3:
                             if (editor.type === 'inline') {
                                 if (this.gridOption.type === 'local') {
@@ -2904,10 +2876,10 @@
                                 this.items.splice(idx1, 1);
                                 this.items = __spread(this.items);
                                 if (this.gridOption.type === 'local') {
-                                    (_2 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _2 === void 0 ? void 0 : _2.call(editor, item, __classPrivateFieldGet(this, _localItems));
+                                    (_0 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _0 === void 0 ? void 0 : _0.call(editor, item, __classPrivateFieldGet(this, _localItems));
                                 }
                                 else {
-                                    (_3 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _3 === void 0 ? void 0 : _3.call(editor, item, this.items);
+                                    (_1 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _1 === void 0 ? void 0 : _1.call(editor, item, this.items);
                                 }
                                 this.ref.detectChanges();
                                 return [2 /*return*/];
@@ -3034,13 +3006,13 @@
                 return data.source === 'INITIALIZE';
             }), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
                 var filterInfo, result;
-                return __generator(this, function (_4) {
-                    switch (_4.label) {
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
                             return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
                         case 1:
-                            result = _4.sent();
+                            result = _2.sent();
                             __classPrivateFieldSet(this, _loadCompleted, true);
                             return [2 /*return*/, result];
                     }
@@ -3121,7 +3093,7 @@
     SdGridMaterial.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-material',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <sd-grid-filter *ngIf=\"!gridOption.filter?.disabled\" [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\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=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleExcelRaw !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportRaw()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel raw\" | 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>",
+                    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\" [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\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=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.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: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),