@sd-angular/core 1.3.147 → 1.3.148

package/bundles/sd-angular-core-table.umd.js

@@ -1421,11 +1421,11 @@
             this.exportTitle = 'Export';
             _loadCompleted.set(this, false);
             _initCellDef.set(this, function () {
-                var e_1, _3;
+                var e_1, _8;
                 _this.cellDef = {};
                 try {
-                    for (var _4 = __values(_this.sdCellDefs), _5 = _4.next(); !_5.done; _5 = _4.next()) {
-                        var cellDef = _5.value;
+                    for (var _9 = __values(_this.sdCellDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var cellDef = _10.value;
                         if (cellDef.sdMaterialCellDef) {
                             _this.cellDef[cellDef.sdMaterialCellDef] = cellDef;
                         }
@@ -1434,35 +1434,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_5 && !_5.done && (_3 = _4.return)) _3.call(_4);
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
             });
             _initFilterDef.set(this, function () {
-                var e_2, _3;
+                var e_2, _8;
                 _this.filterDefs = [];
                 try {
-                    for (var _4 = __values(_this.sdFilterDefs), _5 = _4.next(); !_5.done; _5 = _4.next()) {
-                        var filterDef = _5.value;
+                    for (var _9 = __values(_this.sdFilterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var filterDef = _10.value;
                         _this.filterDefs.push(filterDef);
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_5 && !_5.done && (_3 = _4.return)) _3.call(_4);
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
             });
             _initFooterDef.set(this, function () {
-                var e_3, _3;
+                var e_3, _8;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _4 = __values(_this.sdFooterDefs), _5 = _4.next(); !_5.done; _5 = _4.next()) {
-                        var footerDef = _5.value;
+                    for (var _9 = __values(_this.sdFooterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var footerDef = _10.value;
                         if (footerDef.sdMaterialFooterDef) {
                             _this.hasFooter = true;
                             _this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
@@ -1472,14 +1472,14 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_5 && !_5.done && (_3 = _4.return)) _3.call(_4);
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
             });
             _filterExportInfo.set(this, function (pageNumber, pageSize) {
                 var _a, _b;
-                var _3 = _this.filterRegister.value.get(), columnOperator = _3.columnOperator, columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1493,7 +1493,8 @@
                 };
             });
             _initConfiguration$1.set(this, function (option) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                var e_4, _8;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
                 // Init pagination
                 option.paginate = {
                     hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
@@ -1501,6 +1502,32 @@
                     pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = _this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_TABLE_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
                     showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
                 };
+                try {
+                    for (var _9 = __values(option.columns || []), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var column = _10.value;
+                        if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
+                            if (column.type === 'string') {
+                                column.filter.operator.list = ((_y = (_x = (_w = _this.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
+                            }
+                            if (column.type === 'number') {
+                                column.filter.operator.list = ((_1 = (_0 = (_z = _this.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                            }
+                            if (column.type === 'values') {
+                                column.filter.operator.list = ((_4 = (_3 = (_2 = _this.configuration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
+                            }
+                            if (column.type === 'date' || column.type === 'datetime') {
+                                column.filter.operator.list = ((_7 = (_6 = (_5 = _this.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
+                            }
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
                 return option;
             });
             _loadFilterRegister.set(this, function () {
@@ -1534,7 +1561,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 (tableItem) {
-                    var e_4, _3;
+                    var e_5, _8;
                     var _a, _b, _c, _d;
                     var item = tableItem.current;
                     try {
@@ -1612,12 +1639,12 @@
                             }
                         }
                     }
-                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_3 = columns_1.return)) _3.call(columns_1);
+                            if (columns_1_1 && !columns_1_1.done && (_8 = columns_1.return)) _8.call(columns_1);
                         }
-                        finally { if (e_4) throw e_4.error; }
+                        finally { if (e_5) throw e_5.error; }
                     }
                     return true;
                 });
@@ -1661,7 +1688,7 @@
             });
             _getFilter.set(this, function () {
                 var _a, _b, _c, _d, _e, _f;
-                var _3 = _this.filterRegister.value.get(), columnOperator = _3.columnOperator, columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1678,8 +1705,8 @@
                 return __awaiter(_this, void 0, void 0, function () {
                     var items, data, items, results, data;
                     var _this = this;
-                    return __generator(this, function (_3) {
-                        switch (_3.label) {
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
                             case 0:
                                 this.isLoading = true;
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 2];
@@ -1693,7 +1720,7 @@
                                         };
                                     })];
                             case 1:
-                                data = _3.sent();
+                                data = _8.sent();
                                 this.isLoading = false;
                                 return [2 /*return*/, {
                                         items: (data === null || data === void 0 ? void 0 : data.items.map(MapToSdTableItem)) || [],
@@ -1711,11 +1738,11 @@
                                         return [];
                                     })];
                             case 3:
-                                data = _3.sent();
+                                data = _8.sent();
                                 return [3 /*break*/, 5];
                             case 4:
                                 data = results;
-                                _3.label = 5;
+                                _8.label = 5;
                             case 5:
                                 if (!Array.isArray(data)) {
                                     this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
@@ -1723,7 +1750,7 @@
                                 }
                                 __classPrivateFieldSet(this, _localItems, data.map(MapToSdTableItem));
                                 this.isLoading = false;
-                                _3.label = 6;
+                                _8.label = 6;
                             case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
                         }
                     });
@@ -1731,15 +1758,15 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c, _d;
-                return __generator(this, function (_3) {
-                    switch (_3.label) {
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
                         case 0:
                             (_a = this.sdScroll) === null || _a === void 0 ? void 0 : _a.scrollTop();
                             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
                             this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
                             return [4 /*yield*/, ((_d = (_c = (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.reload) === null || _c === void 0 ? void 0 : _c.onReload) === null || _d === void 0 ? void 0 : _d.call(_c, this.items))];
                         case 1:
-                            _3.sent();
+                            _8.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.meta.selector.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -1750,13 +1777,13 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _e, _f, data;
-                    return __generator(this, function (_3) {
-                        switch (_3.label) {
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
                             case 0:
                                 (_f = (_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
                             case 1:
-                                data = _3.sent();
+                                data = _8.sent();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
                         }
@@ -1768,8 +1795,8 @@
                 if (pageSize === void 0) { pageSize = 10000; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _g, _h, result, filterInfo, result, exportedItems, results;
-                    return __generator(this, function (_3) {
-                        switch (_3.label) {
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
                             case 0:
                                 if (!((_g = this.gridOption.export) === null || _g === void 0 ? void 0 : _g.items)) return [3 /*break*/, 2];
                                 result = (_h = this.gridOption.export) === null || _h === void 0 ? void 0 : _h.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
@@ -1783,13 +1810,13 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _3.sent()];
+                            case 1: return [2 /*return*/, _8.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
                                 result = this.gridOption.items(filterInfo);
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _3.sent()];
+                            case 3: return [2 /*return*/, _8.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof this.gridOption.items === 'function')) return [3 /*break*/, 8];
@@ -1797,15 +1824,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _3.sent();
+                                exportedItems = _8.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _3.label = 7;
+                                _8.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.gridOption.items;
-                                _3.label = 9;
+                                _8.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -1832,13 +1859,13 @@
                 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 (isCSV) { return __awaiter(_this, void 0, void 0, function () {
-                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _3, _4, sheet, _5, _6, _7, e_5_1;
-                var e_5, _8;
+                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _8, _9, sheet, _10, _11, _12, e_6_1;
+                var e_6, _13;
                 var _this = this;
-                return __generator(this, function (_9) {
-                    switch (_9.label) {
+                return __generator(this, function (_14) {
+                    switch (_14.label) {
                         case 0:
-                            _9.trys.push([0, , 18, 19]);
+                            _14.trys.push([0, , 18, 19]);
                             columns_2 = __classPrivateFieldGet(this, _getExportColumns).call(this);
                             pageSize_1 = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
                             batch = ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.batch) || 1;
@@ -1849,14 +1876,14 @@
                             items_1 = [];
                             promises_1 = [];
                             handleData = function () { return __awaiter(_this, void 0, void 0, function () {
-                                var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_6_1;
-                                var e_7, _3, e_6, _4;
+                                var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_7_1;
+                                var e_8, _8, e_7, _9;
                                 var _this = this;
-                                return __generator(this, function (_5) {
-                                    switch (_5.label) {
+                                return __generator(this, function (_10) {
+                                    switch (_10.label) {
                                         case 0: return [4 /*yield*/, Promise.all(promises_1)];
                                         case 1:
-                                            results = _5.sent();
+                                            results = _10.sent();
                                             promises_1 = [];
                                             exportItems_1 = [];
                                             try {
@@ -1871,23 +1898,23 @@
                                                     }
                                                 }
                                             }
-                                            catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                                            catch (e_8_1) { e_8 = { error: e_8_1 }; }
                                             finally {
                                                 try {
-                                                    if (results_1_1 && !results_1_1.done && (_3 = results_1.return)) _3.call(results_1);
+                                                    if (results_1_1 && !results_1_1.done && (_8 = results_1.return)) _8.call(results_1);
                                                 }
-                                                finally { if (e_7) throw e_7.error; }
+                                                finally { if (e_8) throw e_8.error; }
                                             }
                                             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_1 = _5.sent();
+                                            exportItems_1 = _10.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
                                             exportItems_1 = results_2;
-                                            _5.label = 4;
+                                            _10.label = 4;
                                         case 4:
                                             totalPage = total_1 / pageSize_1;
                                             percent = Math.round(((pageNumber_1 - 1) * 100.0) / totalPage);
@@ -1895,16 +1922,16 @@
                                             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, _3;
-                                                return __generator(this, function (_4) {
-                                                    switch (_4.label) {
+                                                var obj, handle, columns_3, columns_3_1, exportColumn, e_9_1;
+                                                var e_9, _8;
+                                                return __generator(this, function (_9) {
+                                                    switch (_9.label) {
                                                         case 0:
                                                             obj = {};
                                                             handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
-                                                                var _v, _w, _x, column, exportedColumn, transform, _3, _4, date, transformDate, date, transformDate, date, transformDate, _5, _6;
-                                                                return __generator(this, function (_7) {
-                                                                    switch (_7.label) {
+                                                                var _v, _w, _x, column, exportedColumn, transform, _8, _9, date, transformDate, date, transformDate, date, transformDate, _10, _11;
+                                                                return __generator(this, function (_12) {
+                                                                    switch (_12.label) {
                                                                         case 0:
                                                                             obj[exportColumn.field] = item[exportColumn.field];
                                                                             column = allColumns.find(function (e) { return e.field === exportColumn.field; });
@@ -1928,15 +1955,15 @@
                                                                                 isExport: true,
                                                                             });
                                                                             if (!(transform instanceof Promise)) return [3 /*break*/, 2];
-                                                                            _3 = obj;
-                                                                            _4 = column.field;
+                                                                            _8 = obj;
+                                                                            _9 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _3[_4] = _7.sent();
+                                                                            _8[_9] = _12.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _7.label = 3;
+                                                                            _12.label = 3;
                                                                         case 3:
                                                                             obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
                                                                             return [3 /*break*/, 13];
@@ -1992,45 +2019,45 @@
                                                                         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
-                                                                            _5 = obj;
-                                                                            _6 = column.field;
+                                                                            _10 = obj;
+                                                                            _11 = 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
-                                                                            _5[_6] = _7.sent();
+                                                                            _10[_11] = _12.sent();
                                                                             return [3 /*break*/, 13];
                                                                         case 12:
                                                                             obj[column.field] = item[column.field];
-                                                                            _7.label = 13;
+                                                                            _12.label = 13;
                                                                         case 13: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
-                                                            _4.label = 1;
+                                                            _9.label = 1;
                                                         case 1:
-                                                            _4.trys.push([1, 6, 7, 8]);
-                                                            columns_3 = (e_8 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
-                                                            _4.label = 2;
+                                                            _9.trys.push([1, 6, 7, 8]);
+                                                            columns_3 = (e_9 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
+                                                            _9.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:
-                                                            _4.sent();
-                                                            _4.label = 4;
+                                                            _9.sent();
+                                                            _9.label = 4;
                                                         case 4:
                                                             columns_3_1 = columns_3.next();
                                                             return [3 /*break*/, 2];
                                                         case 5: return [3 /*break*/, 8];
                                                         case 6:
-                                                            e_8_1 = _4.sent();
-                                                            e_8 = { error: e_8_1 };
+                                                            e_9_1 = _9.sent();
+                                                            e_9 = { error: e_9_1 };
                                                             return [3 /*break*/, 8];
                                                         case 7:
                                                             try {
-                                                                if (columns_3_1 && !columns_3_1.done && (_3 = columns_3.return)) _3.call(columns_3);
+                                                                if (columns_3_1 && !columns_3_1.done && (_8 = columns_3.return)) _8.call(columns_3);
                                                             }
-                                                            finally { if (e_8) throw e_8.error; }
+                                                            finally { if (e_9) throw e_9.error; }
                                                             return [7 /*endfinally*/];
                                                         case 8:
                                                             items_1.push(obj);
@@ -2038,37 +2065,37 @@
                                                     }
                                                 });
                                             };
-                                            _5.label = 5;
+                                            _10.label = 5;
                                         case 5:
-                                            _5.trys.push([5, 10, 11, 12]);
+                                            _10.trys.push([5, 10, 11, 12]);
                                             exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
-                                            _5.label = 6;
+                                            _10.label = 6;
                                         case 6:
                                             if (!!exportItems_2_1.done) return [3 /*break*/, 9];
                                             item = exportItems_2_1.value;
                                             return [5 /*yield**/, _loop_1(item)];
                                         case 7:
-                                            _5.sent();
-                                            _5.label = 8;
+                                            _10.sent();
+                                            _10.label = 8;
                                         case 8:
                                             exportItems_2_1 = exportItems_2.next();
                                             return [3 /*break*/, 6];
                                         case 9: return [3 /*break*/, 12];
                                         case 10:
-                                            e_6_1 = _5.sent();
-                                            e_6 = { error: e_6_1 };
+                                            e_7_1 = _10.sent();
+                                            e_7 = { error: e_7_1 };
                                             return [3 /*break*/, 12];
                                         case 11:
                                             try {
-                                                if (exportItems_2_1 && !exportItems_2_1.done && (_4 = exportItems_2.return)) _4.call(exportItems_2);
+                                                if (exportItems_2_1 && !exportItems_2_1.done && (_9 = exportItems_2.return)) _9.call(exportItems_2);
                                             }
-                                            finally { if (e_6) throw e_6.error; }
+                                            finally { if (e_7) throw e_7.error; }
                                             return [7 /*endfinally*/];
                                         case 12: return [2 /*return*/];
                                     }
                                 });
                             }); };
-                            _9.label = 1;
+                            _14.label = 1;
                         case 1:
                             if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
                             promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
@@ -2078,14 +2105,14 @@
                             }
                             return [4 /*yield*/, handleData()];
                         case 2:
-                            _9.sent();
+                            _14.sent();
                             return [3 /*break*/, 1];
                         case 3:
                             if (!(promises_1.length > 0)) return [3 /*break*/, 5];
                             return [4 /*yield*/, handleData()];
                         case 4:
-                            _9.sent();
-                            _9.label = 5;
+                            _14.sent();
+                            _14.label = 5;
                         case 5:
                             if (!isCSV) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.exportService.exportCSV({
@@ -2094,19 +2121,19 @@
                                     fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName,
                                 })];
                         case 6:
-                            _9.sent();
+                            _14.sent();
                             return [2 /*return*/];
                         case 7:
                             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*/, 16];
-                            _9.label = 8;
+                            _14.label = 8;
                         case 8:
-                            _9.trys.push([8, 14, 15, 16]);
-                            _3 = __values(this.gridOption.export.sheets), _4 = _3.next();
-                            _9.label = 9;
+                            _14.trys.push([8, 14, 15, 16]);
+                            _8 = __values(this.gridOption.export.sheets), _9 = _8.next();
+                            _14.label = 9;
                         case 9:
-                            if (!!_4.done) return [3 /*break*/, 13];
-                            sheet = _4.value;
+                            if (!!_9.done) return [3 /*break*/, 13];
+                            sheet = _9.value;
                             if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 12];
                             if (!Array.isArray(sheet.items)) return [3 /*break*/, 10];
                             sheets.push({
@@ -2116,29 +2143,29 @@
                             });
                             return [3 /*break*/, 12];
                         case 10:
-                            _6 = (_5 = sheets).push;
-                            _7 = {
+                            _11 = (_10 = sheets).push;
+                            _12 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
                         case 11:
-                            _6.apply(_5, [(_7.items = _9.sent(),
-                                    _7.fields = sheet.fields,
-                                    _7)]);
-                            _9.label = 12;
+                            _11.apply(_10, [(_12.items = _14.sent(),
+                                    _12.fields = sheet.fields,
+                                    _12)]);
+                            _14.label = 12;
                         case 12:
-                            _4 = _3.next();
+                            _9 = _8.next();
                             return [3 /*break*/, 9];
                         case 13: return [3 /*break*/, 16];
                         case 14:
-                            e_5_1 = _9.sent();
-                            e_5 = { error: e_5_1 };
+                            e_6_1 = _14.sent();
+                            e_6 = { error: e_6_1 };
                             return [3 /*break*/, 16];
                         case 15:
                             try {
-                                if (_4 && !_4.done && (_8 = _3.return)) _8.call(_3);
+                                if (_9 && !_9.done && (_13 = _8.return)) _13.call(_8);
                             }
-                            finally { if (e_5) throw e_5.error; }
+                            finally { if (e_6) throw e_6.error; }
                             return [7 /*endfinally*/];
                         case 16: return [4 /*yield*/, this.exportService.export({
                                 columns: columns_2,
@@ -2147,7 +2174,7 @@
                                 sheets: sheets,
                             })];
                         case 17:
-                            _9.sent();
+                            _14.sent();
                             return [2 /*return*/];
                         case 18:
                             this.isExporting = false;
@@ -2184,7 +2211,7 @@
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
                 var _y, _z, _0, _1, _2, data;
-                return __generator(this, function (_3) {
+                return __generator(this, function (_8) {
                     if ((_y = this.gridOption.expand) === null || _y === void 0 ? void 0 : _y.always) {
                         return [2 /*return*/];
                     }
@@ -2260,7 +2287,7 @@
             };
             this.setFilter = function (args) {
                 var _a, _b;
-                var _3 = args || {}, columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
+                var _8 = args || {}, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 if (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) && columnFilter) {
                     _this.columnFilter = columnFilter;
                 }
@@ -2348,13 +2375,13 @@
             var _this = this;
             __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
                 var filterInfo, result;
-                return __generator(this, function (_3) {
-                    switch (_3.label) {
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
                         case 0:
                             filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
                             return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
                         case 1:
-                            result = _3.sent();
+                            result = _8.sent();
                             __classPrivateFieldSet(this, _loadCompleted, true);
                             return [2 /*return*/, result];
                     }
@@ -2395,7 +2422,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n    <sd-grid-filter\r\n      *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\"\r\n      [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n      [filterDefs]=\"filterDefs\"\r\n      #gridFilter>\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div\r\n            class=\"c-table\"\r\n            sdScroll\r\n            [ngStyle]=\"{\r\n              'max-height': gridOption?.style?.maxHeight,\r\n              'min-height': gridOption?.style?.minHeight\r\n            }\">\r\n            <table\r\n              *ngIf=\"items?.length; else elseEmpty\"\r\n              mat-table\r\n              [dataSource]=\"groupedItems\"\r\n              matSort\r\n              [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n              multiTemplateDataRows>\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.expand?.always; else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </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=\"sdSubInformation.templateRef; context: { item: item }\"> </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\r\n                  class=\"p-0\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button\r\n                    *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n                    mat-icon-button\r\n                    aria-label=\"Expand & Collapse\"\r\n                    (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th\r\n                  class=\"text-center px-15\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n                    <mat-checkbox\r\n                      *ngIf=\"!gridOption.selector?.single\"\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\"\r\n                      (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\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?.selector\">\r\n                    <mat-checkbox\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\"\r\n                      [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n                    </mat-checkbox>\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\r\n                  class=\"px-8 py-8\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  cdkDrag\r\n                  class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                  [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                  <div>\r\n                    <div\r\n                      aria-hidden=\"false\"\r\n                      role=\"presentation\"\r\n                      mat-sort-header\r\n                      [disabled]=\"!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\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [columnOperator]=\"columnOperator\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    *ngIf=\"!item?.sdGroup\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n              </ng-container>\r\n              <tr\r\n                mat-row\r\n                *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n                matRipple\r\n                class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\"></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\r\n                    class=\"px-15\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th\r\n                    class=\"px-8\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th\r\n                    class=\"p-0\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.columns\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                    [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                    <div>\r\n                      <div\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\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div\r\n                        [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [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\"></tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button\r\n              *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button\r\n              *ngIf=\"gridOption.reload?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Reload' | sdTranslate\"\r\n              icon=\"refresh\"\r\n              size=\"sm\"\r\n              (action)=\"reload()\"\r\n              [disabled]=\"!items?.length\"\r\n              type=\"link\">\r\n            </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\" size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button\r\n                  class=\"mr-10\"\r\n                  [title]=\"exportTitle | sdTranslate\"\r\n                  icon=\"get_app\"\r\n                  size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\"\r\n                  type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t excel</span>\r\n                </button>\r\n                <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t CSV</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button\r\n              *ngIf=\"gridOption.config?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\"\r\n              size=\"sm\"\r\n              (action)=\"popupGridConfiguration.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator\r\n            [class.d-none]=\"gridOption.paginate?.hidden\"\r\n            [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\"\r\n            [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n    <sd-grid-filter\r\n      *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\"\r\n      [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n      [filterDefs]=\"filterDefs\"\r\n      #gridFilter>\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div\r\n            class=\"c-table\"\r\n            sdScroll\r\n            [ngStyle]=\"{\r\n              'max-height': gridOption?.style?.maxHeight,\r\n              'min-height': gridOption?.style?.minHeight\r\n            }\">\r\n            <table\r\n              *ngIf=\"items?.length; else elseEmpty\"\r\n              mat-table\r\n              [dataSource]=\"groupedItems\"\r\n              matSort\r\n              [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n              multiTemplateDataRows>\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.expand?.always; else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </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=\"sdSubInformation.templateRef; context: { item: item }\"> </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\r\n                  class=\"p-0\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button\r\n                    *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n                    mat-icon-button\r\n                    aria-label=\"Expand & Collapse\"\r\n                    (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th\r\n                  class=\"text-center px-15\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n                    <mat-checkbox\r\n                      *ngIf=\"!gridOption.selector?.single\"\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\"\r\n                      (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\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?.selector\">\r\n                    <mat-checkbox\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\"\r\n                      [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n                    </mat-checkbox>\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\r\n                  class=\"px-8 py-8\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  cdkDrag\r\n                  class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                  [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                  <div>\r\n                    <div\r\n                      aria-hidden=\"false\"\r\n                      role=\"presentation\"\r\n                      mat-sort-header\r\n                      [disabled]=\"!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\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    *ngIf=\"!item?.sdGroup\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n              </ng-container>\r\n              <tr\r\n                mat-row\r\n                *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n                matRipple\r\n                class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\"></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\r\n                    class=\"px-15\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th\r\n                    class=\"px-8\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th\r\n                    class=\"p-0\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.columns\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                    [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                    <div>\r\n                      <div\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\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\">\r\n                      </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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div\r\n                        [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [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\"></tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button\r\n              *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button\r\n              *ngIf=\"gridOption.reload?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Reload' | sdTranslate\"\r\n              icon=\"refresh\"\r\n              size=\"sm\"\r\n              (action)=\"reload()\"\r\n              [disabled]=\"!items?.length\"\r\n              type=\"link\">\r\n            </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\" size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button\r\n                  class=\"mr-10\"\r\n                  [title]=\"exportTitle | sdTranslate\"\r\n                  icon=\"get_app\"\r\n                  size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\"\r\n                  type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t excel</span>\r\n                </button>\r\n                <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t CSV</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button\r\n              *ngIf=\"gridOption.config?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\"\r\n              size=\"sm\"\r\n              (action)=\"popupGridConfiguration.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator\r\n            [class.d-none]=\"gridOption.paginate?.hidden\"\r\n            [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\"\r\n            [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -3310,47 +3337,74 @@
     var SdFilterOperators = [
         {
             value: 'EQUAL',
-            display: '=',
+            symbol: '=',
+            display: 'Bằng',
         },
         {
             value: 'NOT_EQUAL',
-            display: '!=',
+            symbol: '≠',
+            display: 'Không bằng',
         },
-        {
-            value: 'CONTAIN',
-            display: '∈',
-        },
-        // {
-        //   value: 'START_WITH';
-        //   display: '=';
-        // },
-        // {
-        //   value: 'END_WITH';
-        //   display: '=';
-        // },
         {
             value: 'GREATER_THAN',
-            display: '>',
+            symbol: '>',
+            display: 'Lớn hơn',
         },
         {
             value: 'LESS_THAN',
-            display: '<',
+            symbol: '<',
+            display: 'Nhỏ hơn',
         },
         {
             value: 'GREATER_OR_EQUAL',
-            display: '>=',
+            symbol: '≥',
+            display: 'Lớn hơn, hoặc bằng'
         },
         {
             value: 'LESS_OR_EQUAL',
-            display: '<=',
+            symbol: '≤',
+            display: 'Nhỏ hơn, hoặc bằng'
+        },
+        {
+            value: 'CONTAIN',
+            symbol: 'join_inner',
+            display: 'Chứa',
+        },
+        {
+            value: 'NOT_CONTAIN',
+            symbol: 'join',
+            display: 'Không chứa',
+        },
+        {
+            value: 'START_WITH',
+            symbol: 'line_start_circle',
+            display: 'Bắt đầu bởi'
+        },
+        {
+            value: 'END_WITH',
+            symbol: 'line_end_circle',
+            display: 'Kết thúc bởi'
+        },
+        {
+            value: 'IN',
+            symbol: 'checklist_rtl',
+            display: 'Nằm trong'
+        },
+        {
+            value: 'NOT_IN',
+            symbol: 'event_list',
+            display: 'Không nằm trong'
         },
     ];
 
-    var _valueChanges, _subcription;
+    var _inlineOperator_1, _valueChanges, _subcription;
     var SdColumnInlineFilter = /** @class */ (function () {
-        function SdColumnInlineFilter() {
+        function SdColumnInlineFilter(ref) {
             var _this = this;
-            this.columnOperator = {};
+            this.ref = ref;
+            this.inlineSymbol = 'filter_alt';
+            _inlineOperator_1.set(this, void 0);
+            this.inlineOperatorChange = new core.EventEmitter();
             this.columnFilter = {};
             this.operators = [];
             this.filterChange = new core.EventEmitter();
@@ -3359,14 +3413,30 @@
             this.onFilterChange = function () {
                 _this.filterChange.emit();
             };
+            this.onChangeOperator = function (operator) {
+                if (operator) {
+                    __classPrivateFieldSet(_this, _inlineOperator_1, operator.value);
+                    _this.inlineSymbol = operator.symbol;
+                }
+                else {
+                    __classPrivateFieldSet(_this, _inlineOperator_1, null);
+                    _this.inlineSymbol = 'filter_alt';
+                }
+                _this.inlineOperatorChange.emit(__classPrivateFieldGet(_this, _inlineOperator_1));
+                _this.ref.markForCheck();
+            };
         }
         SdColumnInlineFilter.prototype._value = function (value) {
             this.value = value;
             __classPrivateFieldGet(this, _valueChanges).next();
         };
-        Object.defineProperty(SdColumnInlineFilter.prototype, "_columnOperator", {
-            set: function (columnOperator) {
-                this.columnOperator = columnOperator || {};
+        Object.defineProperty(SdColumnInlineFilter.prototype, "_inlineOperator", {
+            set: function (inlineOperator) {
+                var _a, _b;
+                if (__classPrivateFieldGet(this, _inlineOperator_1) !== inlineOperator) {
+                    __classPrivateFieldSet(this, _inlineOperator_1, inlineOperator);
+                    this.inlineSymbol = (_b = (_a = SdFilterOperators.find(function (e) { return e.value === inlineOperator; })) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : 'filter_alt';
+                }
             },
             enumerable: false,
             configurable: true
@@ -3412,19 +3482,22 @@
         };
         return SdColumnInlineFilter;
     }());
-    _valueChanges = new WeakMap(), _subcription = new WeakMap();
+    _inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription = new WeakMap();
     SdColumnInlineFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-column-inline-filter',
-                    template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <sd-select\r\n      *ngIf=\"operators.length\"\r\n      style=\"width: 60px; margin-right: 4px\"\r\n      size=\"sm\"\r\n      [items]=\"operators\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      required\r\n      [(model)]=\"columnOperator[column.field]\"></sd-select>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
+                    template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n      [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
                 },] }
     ];
-    SdColumnInlineFilter.ctorParameters = function () { return []; };
+    SdColumnInlineFilter.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
     SdColumnInlineFilter.propDecorators = {
         _value: [{ type: core.Input, args: ['value',] }],
-        _columnOperator: [{ type: core.Input, args: ['columnOperator',] }],
+        _inlineOperator: [{ type: core.Input, args: ['inlineOperator',] }],
+        inlineOperatorChange: [{ type: core.Output }],
         _columnFilter: [{ type: core.Input, args: ['columnFilter',] }],
         _column: [{ type: core.Input, args: ['column',] }],
         filterChange: [{ type: core.Output }]