@sd-angular/core 1.2.78 → 1.2.81

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

@@ -825,7 +825,7 @@
         filterChange: [{ type: core.Output }]
     };
 
-    var _getExportableColumns, _getExportableGroups, _initTemplate;
+    var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
     var SdPopupExport = /** @class */ (function () {
         function SdPopupExport(ref, loadingService, exportService, notifyService, translateService) {
             var _this = this;
@@ -905,25 +905,47 @@
                     return [2 /*return*/];
                 });
             }); };
-            this.exportDefault = function (isCSV) {
-                if (isCSV === void 0) { isCSV = false; }
+            _getExportColumns.set(this, function () {
                 if (_this.configuration) {
                     var _x = _this.configuration, firstColumns = _x.firstColumns, secondColumns = _x.secondColumns;
-                    var columns = __spread(firstColumns, secondColumns).map(function (e) { return (Object.assign(Object.assign({}, e), { data: _this.columns.find(function (e1) { return e1.field === e.field; }) })); }).filter(function (e) { return !!e.data; })
+                    var displayColumns = __spread(firstColumns, secondColumns).reduce(function (first, next) {
+                        var column = _this.gridOption.columns.find(function (e) { return e.field === next.field; });
+                        if (!column) {
+                            return first;
+                        }
+                        if (column.type !== 'children') {
+                            return __spread(first, [column]);
+                        }
+                        var children = column.children.filter(function (e1) { return e1.type !== 'image'; });
+                        return __spread(first, children);
+                    }, []);
+                    return displayColumns.map(function (e) { return (Object.assign(Object.assign({}, e), { data: _this.columns.find(function (e1) { return e1.field === e.field; }) })); }).filter(function (e) { return !!e.data; })
                         .map(function (e) { return e.data; });
-                    _this.export.emit({
-                        file: null,
-                        columns: columns,
-                        isCSV: isCSV
-                    });
                 }
                 else {
-                    _this.export.emit({
-                        file: null,
-                        columns: _this.columns,
-                        isCSV: isCSV
-                    });
+                    return _this.columns;
                 }
+            });
+            this.exportDefault = function () {
+                _this.export.emit({
+                    file: null,
+                    columns: __classPrivateFieldGet(_this, _getExportColumns).call(_this),
+                    isCSV: false
+                });
+            };
+            this.exportCSV = function () {
+                _this.export.emit({
+                    file: null,
+                    columns: __classPrivateFieldGet(_this, _getExportColumns).call(_this),
+                    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; }
@@ -1214,7 +1236,7 @@
         };
         return SdPopupExport;
     }());
-    _getExportableColumns = new WeakMap(), _getExportableGroups = new WeakMap(), _initTemplate = new WeakMap();
+    _getExportableColumns = new WeakMap(), _getExportableGroups = new WeakMap(), _getExportColumns = new WeakMap(), _initTemplate = new WeakMap();
     SdPopupExport.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-export',
@@ -1836,11 +1858,11 @@
             this.isSelectAll = false;
             this.exportTitle = 'Export';
             _initCellDef.set(this, function () {
-                var e_1, _y;
+                var e_1, _2;
                 _this.cellDef = {};
                 try {
-                    for (var _z = __values(_this.sdCellDefs), _0 = _z.next(); !_0.done; _0 = _z.next()) {
-                        var cellDef = _0.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;
                         }
@@ -1849,35 +1871,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_0 && !_0.done && (_y = _z.return)) _y.call(_z);
+                        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, _y;
+                var e_2, _2;
                 _this.filterDefs = [];
                 try {
-                    for (var _z = __values(_this.sdFilterDefs), _0 = _z.next(); !_0.done; _0 = _z.next()) {
-                        var filterDef = _0.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 (_0 && !_0.done && (_y = _z.return)) _y.call(_z);
+                        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, _y;
+                var e_3, _2;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _z = __values(_this.sdFooterDefs), _0 = _z.next(); !_0.done; _0 = _z.next()) {
-                        var footerDef = _0.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;
@@ -1887,7 +1909,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_0 && !_0.done && (_y = _z.return)) _y.call(_z);
+                        if (_4 && !_4.done && (_2 = _3.return)) _2.call(_3);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -1919,7 +1941,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, _y;
+                    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()) {
@@ -1993,7 +2015,7 @@
                     catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_y = columns_1.return)) _y.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; }
                     }
@@ -2051,37 +2073,37 @@
             _load$1.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var result, results, _y, error_1;
-                    return __generator(this, function (_z) {
-                        switch (_z.label) {
+                    var result, results, _2, error_1;
+                    return __generator(this, function (_3) {
+                        switch (_3.label) {
                             case 0:
                                 this.isLoading = true;
-                                _z.label = 1;
+                                _3.label = 1;
                             case 1:
-                                _z.trys.push([1, 8, 9, 10]);
+                                _3.trys.push([1, 8, 9, 10]);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 3];
                                 result = this.gridOption.items(filterReq);
                                 if (rxjs.isObservable(result)) {
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 2: return [2 /*return*/, _z.sent()];
+                            case 2: return [2 /*return*/, _3.sent()];
                             case 3:
                                 if (!force) return [3 /*break*/, 6];
                                 results = this.gridOption.items();
                                 if (!(results instanceof Promise)) return [3 /*break*/, 5];
-                                _y = this;
+                                _2 = this;
                                 return [4 /*yield*/, results];
                             case 4:
-                                _y.localItems = _z.sent();
+                                _2.localItems = _3.sent();
                                 return [3 /*break*/, 6];
                             case 5:
                                 this.localItems = results;
-                                _z.label = 6;
+                                _3.label = 6;
                             case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, this.localItems, filterReq)];
                             case 7: return [3 /*break*/, 10];
                             case 8:
-                                error_1 = _z.sent();
+                                error_1 = _3.sent();
                                 this.notifyService.handle.error(error_1);
                                 return [3 /*break*/, 10];
                             case 9:
@@ -2095,8 +2117,8 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c;
-                return __generator(this, function (_y) {
-                    switch (_y.label) {
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
                             this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
@@ -2106,7 +2128,7 @@
                             });
                             return [4 /*yield*/, ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items))];
                         case 1:
-                            _y.sent();
+                            _2.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -2117,11 +2139,11 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _d, data;
-                    return __generator(this, function (_y) {
-                        switch (_y.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 = _y.sent();
+                                data = _2.sent();
                                 (_d = this.sdScroll) === null || _d === void 0 ? void 0 : _d.scrollTop();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
@@ -2134,8 +2156,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 (_y) {
-                        switch (_y.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));
@@ -2149,7 +2171,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _y.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];
@@ -2158,7 +2180,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _y.sent()];
+                            case 3: return [2 /*return*/, _2.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof (this.gridOption.items) === 'function')) return [3 /*break*/, 8];
@@ -2166,15 +2188,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _y.sent();
+                                exportedItems = _2.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _y.label = 7;
+                                _2.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.gridOption.items;
-                                _y.label = 9;
+                                _2.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -2214,64 +2236,80 @@
                 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, file, isCSV, columns_2, pageSize, total, pageNumber, exportItems, items, _loop_1, this_1, sheets, _y, _z, sheet, _0, _1, _2, e_5_1;
-                var e_5, _3;
+                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, _2, _3, sheet, _4, _5, _6, e_5_1;
+                var e_5, _7;
                 var _this = this;
-                return __generator(this, function (_4) {
-                    switch (_4.label) {
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
                         case 0:
-                            _4.trys.push([0, , 18, 19]);
-                            file = args.file, isCSV = args.isCSV;
+                            _8.trys.push([0, , 22, 23]);
+                            file = args.file, isCSV = args.isCSV, isRaw = args.isRaw;
                             columns_2 = args.columns;
-                            pageSize = ((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.maxItemsPerRequest) || 1000;
-                            total = this.total;
-                            pageNumber = 0;
-                            exportItems = [];
+                            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;
+                            total_1 = this.total;
+                            pageNumber_1 = 0;
+                            exportItems_1 = [];
                             this.isExporting = true;
-                            items = [];
-                            _loop_1 = function () {
-                                var res, results, totalPage, percent, allColumns, allExportedColumns, _loop_2, exportItems_1, exportItems_1_1, item, e_6_1;
-                                var e_6, _y;
-                                return __generator(this, function (_z) {
-                                    switch (_z.label) {
-                                        case 0: return [4 /*yield*/, __classPrivateFieldGet(this_1, _exportedItems).call(this_1, pageNumber, pageSize)];
+                            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, _2, e_6, _3;
+                                var _this = this;
+                                return __generator(this, function (_4) {
+                                    switch (_4.label) {
+                                        case 0: return [4 /*yield*/, Promise.all(promises_1)];
                                         case 1:
-                                            res = _z.sent();
-                                            if ('items' in res) {
-                                                exportItems = res.items;
-                                                total = res.total;
+                                            results = _4.sent();
+                                            promises_1 = [];
+                                            exportItems_1 = [];
+                                            try {
+                                                for (results_1 = __values(results), results_1_1 = results_1.next(); !results_1_1.done; results_1_1 = results_1.next()) {
+                                                    result = results_1_1.value;
+                                                    if ('items' in result) {
+                                                        exportItems_1 = __spread(exportItems_1, result.items);
+                                                        total_1 = result.total;
+                                                    }
+                                                    else {
+                                                        exportItems_1 = __spread(exportItems_1, result);
+                                                    }
+                                                }
                                             }
-                                            else {
-                                                exportItems = res;
-                                                // total = exportItems.length;
+                                            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                                            finally {
+                                                try {
+                                                    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 (!((_j = this_1.gridOption.export) === null || _j === void 0 ? void 0 : _j.mapping)) return [3 /*break*/, 4];
-                                            results = this_1.gridOption.export.mapping(exportItems);
-                                            if (!(results instanceof Promise)) return [3 /*break*/, 3];
-                                            return [4 /*yield*/, results];
+                                            if (!((_u = this.gridOption.export) === null || _u === void 0 ? void 0 : _u.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 = _z.sent();
+                                            exportItems_1 = _4.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
-                                            exportItems = results;
-                                            _z.label = 4;
+                                            exportItems_1 = results_2;
+                                            _4.label = 4;
                                         case 4:
-                                            totalPage = total / pageSize;
-                                            percent = Math.round(pageNumber * 100.0 / totalPage);
-                                            this_1.exportTitle = "Exporting..." + percent + "%";
-                                            allColumns = __classPrivateFieldGet(this_1, _allColumns).call(this_1);
-                                            allExportedColumns = __classPrivateFieldGet(this_1, _allExportedColumns).call(this_1);
-                                            _loop_2 = function (item) {
-                                                var obj, handle, columns_3, columns_3_1, exportColumn, e_7_1;
-                                                var e_7, _y;
-                                                return __generator(this, function (_z) {
-                                                    switch (_z.label) {
+                                            totalPage = total_1 / pageSize_1;
+                                            percent = Math.round((pageNumber_1 - 1) * 100.0 / totalPage);
+                                            this.exportTitle = "Exporting..." + percent + "%";
+                                            allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
+                                            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, _2;
+                                                return __generator(this, function (_3) {
+                                                    switch (_3.label) {
                                                         case 0:
                                                             obj = {};
                                                             handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
-                                                                var _r, _s, column, exportedColumn, transform, _y, _z, date, transformDate, date, transformDate, date, transformDate, _0, _1;
-                                                                return __generator(this, function (_2) {
-                                                                    switch (_2.label) {
+                                                                var _v, _w, 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; });
@@ -2293,15 +2331,15 @@
                                                                             if (!column.transform) return [3 /*break*/, 4];
                                                                             transform = column.transform(item[column.field], item);
                                                                             if (!(transform instanceof Promise)) return [3 /*break*/, 2];
-                                                                            _y = obj;
-                                                                            _z = column.field;
+                                                                            _2 = obj;
+                                                                            _3 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _y[_z] = _2.sent();
+                                                                            _2[_3] = _6.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _2.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];
@@ -2316,10 +2354,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] = ((_r = column.option) === null || _r === void 0 ? void 0 : _r.displayOnTrue) || 'True';
+                                                                                obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnTrue) || 'True';
                                                                             }
                                                                             else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                                                                obj[column.field] = ((_s = column.option) === null || _s === void 0 ? void 0 : _s.displayOnFalse) || 'False';
+                                                                                obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnFalse) || 'False';
                                                                             }
                                                                             return [3 /*break*/, 13];
                                                                         case 7:
@@ -2355,184 +2393,203 @@
                                                                         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
-                                                                            _0 = obj;
-                                                                            _1 = 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
-                                                                            _0[_1] = _2.sent();
+                                                                            _4[_5] = _6.sent();
                                                                             return [3 /*break*/, 13];
                                                                         case 12:
                                                                             obj[column.field] = item[column.field];
-                                                                            _2.label = 13;
+                                                                            _6.label = 13;
                                                                         case 13: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
-                                                            _z.label = 1;
+                                                            _3.label = 1;
                                                         case 1:
-                                                            _z.trys.push([1, 6, 7, 8]);
-                                                            columns_3 = (e_7 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
-                                                            _z.label = 2;
+                                                            _3.trys.push([1, 6, 7, 8]);
+                                                            columns_3 = (e_8 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
+                                                            _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:
-                                                            _z.sent();
-                                                            _z.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_7_1 = _z.sent();
-                                                            e_7 = { error: e_7_1 };
+                                                            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 && (_y = columns_3.return)) _y.call(columns_3);
+                                                                if (columns_3_1 && !columns_3_1.done && (_2 = columns_3.return)) _2.call(columns_3);
                                                             }
-                                                            finally { if (e_7) throw e_7.error; }
+                                                            finally { if (e_8) throw e_8.error; }
                                                             return [7 /*endfinally*/];
                                                         case 8:
-                                                            items.push(obj);
+                                                            items_1.push(obj);
                                                             return [2 /*return*/];
                                                     }
                                                 });
                                             };
-                                            _z.label = 5;
+                                            _4.label = 5;
                                         case 5:
-                                            _z.trys.push([5, 10, 11, 12]);
-                                            exportItems_1 = (e_6 = void 0, __values(exportItems)), exportItems_1_1 = exportItems_1.next();
-                                            _z.label = 6;
+                                            _4.trys.push([5, 10, 11, 12]);
+                                            exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
+                                            _4.label = 6;
                                         case 6:
-                                            if (!!exportItems_1_1.done) return [3 /*break*/, 9];
-                                            item = exportItems_1_1.value;
-                                            return [5 /*yield**/, _loop_2(item)];
+                                            if (!!exportItems_2_1.done) return [3 /*break*/, 9];
+                                            item = exportItems_2_1.value;
+                                            return [5 /*yield**/, _loop_1(item)];
                                         case 7:
-                                            _z.sent();
-                                            _z.label = 8;
+                                            _4.sent();
+                                            _4.label = 8;
                                         case 8:
-                                            exportItems_1_1 = exportItems_1.next();
+                                            exportItems_2_1 = exportItems_2.next();
                                             return [3 /*break*/, 6];
                                         case 9: return [3 /*break*/, 12];
                                         case 10:
-                                            e_6_1 = _z.sent();
+                                            e_6_1 = _4.sent();
                                             e_6 = { error: e_6_1 };
                                             return [3 /*break*/, 12];
                                         case 11:
                                             try {
-                                                if (exportItems_1_1 && !exportItems_1_1.done && (_y = exportItems_1.return)) _y.call(exportItems_1);
+                                                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*/];
-                                        case 12:
-                                            pageNumber++;
-                                            return [2 /*return*/];
+                                        case 12: return [2 /*return*/];
                                     }
                                 });
-                            };
-                            this_1 = this;
-                            _4.label = 1;
+                            }); };
+                            _8.label = 1;
                         case 1:
-                            if (!(pageNumber * pageSize < total)) return [3 /*break*/, 3];
-                            return [5 /*yield**/, _loop_1()];
+                            if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
+                            promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
+                            pageNumber_1++;
+                            if (promises_1.length < batch) {
+                                return [3 /*break*/, 1];
+                            }
+                            return [4 /*yield*/, handleData()];
                         case 2:
-                            _4.sent();
+                            _8.sent();
                             return [3 /*break*/, 1];
                         case 3:
-                            if (!!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 16];
-                            if (!isCSV) return [3 /*break*/, 5];
+                            if (!(promises_1.length > 0)) return [3 /*break*/, 5];
+                            return [4 /*yield*/, handleData()];
+                        case 4:
+                            _8.sent();
+                            _8.label = 5;
+                        case 5:
+                            if (!!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 20];
+                            if (!isCSV) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.exportService.exportCSV({
                                     columns: columns_2,
-                                    items: items,
-                                    fileName: (_l = (_k = this.gridOption) === null || _k === void 0 ? void 0 : _k.export) === null || _l === void 0 ? void 0 : _l.fileName
+                                    items: items_1,
+                                    fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName
                                 })];
-                        case 4:
-                            _4.sent();
-                            return [2 /*return*/];
-                        case 5:
-                            sheets = [];
-                            if (!Array.isArray((_o = (_m = this.gridOption) === null || _m === void 0 ? void 0 : _m.export) === null || _o === void 0 ? void 0 : _o.sheets)) return [3 /*break*/, 14];
-                            _4.label = 6;
                         case 6:
-                            _4.trys.push([6, 12, 13, 14]);
-                            _y = __values(this.gridOption.export.sheets), _z = _y.next();
-                            _4.label = 7;
+                            _8.sent();
+                            return [2 /*return*/];
                         case 7:
-                            if (!!_z.done) return [3 /*break*/, 11];
-                            sheet = _z.value;
-                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 10];
-                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 8];
+                            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
+                                })];
+                        case 8:
+                            _8.sent();
+                            return [2 /*return*/];
+                        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];
+                            _8.label = 10;
+                        case 10:
+                            _8.trys.push([10, 16, 17, 18]);
+                            _2 = __values(this.gridOption.export.sheets), _3 = _2.next();
+                            _8.label = 11;
+                        case 11:
+                            if (!!_3.done) return [3 /*break*/, 15];
+                            sheet = _3.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 14];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 12];
                             sheets.push({
                                 name: sheet.name,
                                 items: sheet.items,
                                 fields: sheet.fields
                             });
-                            return [3 /*break*/, 10];
-                        case 8:
-                            _1 = (_0 = sheets).push;
-                            _2 = {
+                            return [3 /*break*/, 14];
+                        case 12:
+                            _5 = (_4 = sheets).push;
+                            _6 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
-                        case 9:
-                            _1.apply(_0, [(_2.items = _4.sent(),
-                                    _2.fields = sheet.fields,
-                                    _2)]);
-                            _4.label = 10;
-                        case 10:
-                            _z = _y.next();
-                            return [3 /*break*/, 7];
-                        case 11: return [3 /*break*/, 14];
-                        case 12:
-                            e_5_1 = _4.sent();
-                            e_5 = { error: e_5_1 };
-                            return [3 /*break*/, 14];
                         case 13:
+                            _5.apply(_4, [(_6.items = _8.sent(),
+                                    _6.fields = sheet.fields,
+                                    _6)]);
+                            _8.label = 14;
+                        case 14:
+                            _3 = _2.next();
+                            return [3 /*break*/, 11];
+                        case 15: return [3 /*break*/, 18];
+                        case 16:
+                            e_5_1 = _8.sent();
+                            e_5 = { error: e_5_1 };
+                            return [3 /*break*/, 18];
+                        case 17:
                             try {
-                                if (_z && !_z.done && (_3 = _y.return)) _3.call(_y);
+                                if (_3 && !_3.done && (_7 = _2.return)) _7.call(_2);
                             }
                             finally { if (e_5) throw e_5.error; }
                             return [7 /*endfinally*/];
-                        case 14: return [4 /*yield*/, this.exportService.export({
+                        case 18: return [4 /*yield*/, this.exportService.export({
                                 columns: columns_2,
-                                items: items,
-                                fileName: (_q = (_p = this.gridOption) === null || _p === void 0 ? void 0 : _p.export) === null || _q === void 0 ? void 0 : _q.fileName,
+                                items: items_1,
+                                fileName: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
                                 sheets: sheets
                             })];
-                        case 15:
-                            _4.sent();
+                        case 19:
+                            _8.sent();
                             return [2 /*return*/];
-                        case 16: return [4 /*yield*/, this.exportService.exportByTemplate({
+                        case 20: return [4 /*yield*/, this.exportService.exportByTemplate({
                                 filePath: file.filePath,
                                 fileName: file.fileName,
                                 columns: columns_2,
-                                items: items
+                                items: items_1
                             })];
-                        case 17:
-                            _4.sent();
-                            return [3 /*break*/, 19];
-                        case 18:
+                        case 21:
+                            _8.sent();
+                            return [3 /*break*/, 23];
+                        case 22:
                             this.isExporting = false;
                             this.exportTitle = "Export";
                             this.ref.detectChanges();
                             return [7 /*endfinally*/];
-                        case 19: return [2 /*return*/];
+                        case 23: return [2 /*return*/];
                     }
                 });
             }); });
             this.onExport = function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var translate;
-                var _this = this;
-                return __generator(this, function (_y) {
+                return __generator(this, function (_2) {
                     translate = this.translateService.translate;
                     if (!args.isCSV && this.gridOption.export.max && this.total > this.gridOption.export.max) {
-                        this.notifyService.confirm(translate("Total rows reach limit, do you want to export CSV")).then(function () {
-                            args.isCSV = true;
-                            __classPrivateFieldGet(_this, _onExport).call(_this, args);
-                        });
+                        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*/];
                     }
                     __classPrivateFieldGet(this, _onExport).call(this, args);
@@ -2544,9 +2601,9 @@
                 _this.reload(false);
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
-                var _t, _u, _v, _w, _x, data;
-                return __generator(this, function (_y) {
-                    if ((_t = this.gridOption.subInformation) === null || _t === void 0 ? void 0 : _t.always) {
+                var _x, _y, _z, _0, _1, data;
+                return __generator(this, function (_2) {
+                    if ((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.always) {
                         return [2 /*return*/];
                     }
                     if (rowData.isExpanding) {
@@ -2556,8 +2613,8 @@
                         rowData.isExpanded = false;
                         return [2 /*return*/];
                     }
-                    data = (_w = (_v = (_u = this.gridOption) === null || _u === void 0 ? void 0 : _u.subInformation) === null || _v === void 0 ? void 0 : _v.onExpand) === null || _w === void 0 ? void 0 : _w.call(_v, rowData);
-                    if (!((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.multiple)) {
+                    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)) {
                         this.items.forEach(function (item) { return item.isExpanding = item.isExpanded = false; });
                     }
                     if (data instanceof Promise) {
@@ -2630,7 +2687,7 @@
             };
             this.onCreate = function () {
                 var _a, _b;
-                var _y = _this.gridOption, type = _y.type, editor = _y.editor, columns = _y.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;
                 }
@@ -2686,23 +2743,23 @@
             };
             this.onSave = function (item) { return __awaiter(_this, void 0, void 0, function () {
                 var editor, result, message, result, err_1;
-                return __generator(this, function (_y) {
-                    switch (_y.label) {
+                return __generator(this, function (_2) {
+                    switch (_2.label) {
                         case 0:
                             if (item.editorHandlerRow.saving) {
                                 return [2 /*return*/];
                             }
                             editor = this.gridOption.editor;
-                            _y.label = 1;
+                            _2.label = 1;
                         case 1:
-                            _y.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 = _y.sent();
+                            message = _2.sent();
                             if (message) {
                                 throw message;
                             }
@@ -2711,15 +2768,15 @@
                             if (result) {
                                 throw result;
                             }
-                            _y.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:
-                            _y.sent();
-                            _y.label = 6;
+                            _2.sent();
+                            _2.label = 6;
                         case 6:
                             if (item.editorStatus === 'create' && editor.type === 'popup') {
                                 if (this.gridOption.type === 'local') {
@@ -2730,7 +2787,7 @@
                             item.editorStatus = undefined;
                             return [3 /*break*/, 9];
                         case 7:
-                            err_1 = _y.sent();
+                            err_1 = _2.sent();
                             this.notifyService.notify.warning(err_1);
                             return [3 /*break*/, 9];
                         case 8:
@@ -2945,7 +3002,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    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <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.exportDefault(true)\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-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\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-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    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <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\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                     animations: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),