@sd-angular/core 1.3.201 → 1.3.203

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

@@ -1227,11 +1227,11 @@
             this.cacheValues = {};
             _cacheObjValues.set(this, {});
             _initCellDef.set(this, function () {
-                var e_1, _10;
+                var e_1, _8;
                 _this.cellDef = {};
                 try {
-                    for (var _11 = __values(_this.sdCellDefs || []), _12 = _11.next(); !_12.done; _12 = _11.next()) {
-                        var cellDef = _12.value;
+                    for (var _9 = __values(_this.sdCellDefs || []), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var cellDef = _10.value;
                         if (cellDef.sdTableCellDef) {
                             _this.cellDef[cellDef.sdTableCellDef] = cellDef;
                         }
@@ -1240,35 +1240,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_12 && !_12.done && (_10 = _11.return)) _10.call(_11);
+                        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, _10;
+                var e_2, _8;
                 _this.filterDefs = [];
                 try {
-                    for (var _11 = __values(_this.sdFilterDefs), _12 = _11.next(); !_12.done; _12 = _11.next()) {
-                        var filterDef = _12.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 (_12 && !_12.done && (_10 = _11.return)) _10.call(_11);
+                        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, _10;
+                var e_3, _8;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _11 = __values(_this.sdFooterDefs), _12 = _11.next(); !_12.done; _12 = _11.next()) {
-                        var footerDef = _12.value;
+                    for (var _9 = __values(_this.sdFooterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var footerDef = _10.value;
                         if (footerDef.sdTableFooterDef) {
                             _this.hasFooter = true;
                             _this.footerDef[footerDef.sdTableFooterDef] = footerDef;
@@ -1278,14 +1278,14 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_12 && !_12.done && (_10 = _11.return)) _10.call(_11);
+                        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 _10 = _this.filterRegister.value.get(), columnOperator = _10.columnOperator, columnFilter = _10.columnFilter, externalFilter = _10.externalFilter, filterDef = _10.filterDef;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1299,7 +1299,7 @@
                 };
             });
             _initConfiguration$1.set(this, function (option) {
-                var e_4, _10;
+                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 = {
@@ -1309,8 +1309,8 @@
                     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 _11 = __values(option.columns || []), _12 = _11.next(); !_12.done; _12 = _11.next()) {
-                        var column = _12.value;
+                    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.tableConfiguration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
@@ -1330,7 +1330,7 @@
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
-                        if (_12 && !_12.done && (_10 = _11.return)) _10.call(_11);
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
                     }
                     finally { if (e_4) throw e_4.error; }
                 }
@@ -1369,7 +1369,7 @@
                 var columns = _this.tableOption.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_5, _10;
+                    var e_5, _8;
                     var _a, _b, _c, _d;
                     var item = tableItem.data;
                     try {
@@ -1450,7 +1450,7 @@
                     catch (e_5_1) { e_5 = { error: e_5_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_10 = columns_1.return)) _10.call(columns_1);
+                            if (columns_1_1 && !columns_1_1.done && (_8 = columns_1.return)) _8.call(columns_1);
                         }
                         finally { if (e_5) throw e_5.error; }
                     }
@@ -1496,7 +1496,7 @@
             });
             _getFilter.set(this, function () {
                 var _a, _b, _c, _d, _e, _f;
-                var _10 = _this.filterRegister.value.get(), columnOperator = _10.columnOperator, columnFilter = _10.columnFilter, externalFilter = _10.externalFilter, filterDef = _10.filterDef;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 return {
                     columnOperator: columnOperator || {},
                     rawColumnFilter: columnFilter || {},
@@ -1511,10 +1511,10 @@
             _load.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var items, data, _10, items, results, data, _11, _12;
+                    var items, data, _8, items, results, data, _9, _10;
                     var _this = this;
-                    return __generator(this, function (_13) {
-                        switch (_13.label) {
+                    return __generator(this, function (_11) {
+                        switch (_11.label) {
                             case 0:
                                 this.isLoading = true;
                                 this.ref.detectChanges();
@@ -1529,15 +1529,15 @@
                                         };
                                     })];
                             case 1:
-                                data = _13.sent();
-                                _10 = {};
+                                data = _11.sent();
+                                _8 = {};
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data === null || data === void 0 ? void 0 : data.items, this.tableOption.columns).finally(function () {
                                         _this.isLoading = false;
                                         _this.ref.detectChanges();
                                     })];
-                            case 2: return [2 /*return*/, (_10.items = _13.sent(),
-                                    _10.total = (data === null || data === void 0 ? void 0 : data.total) || 0,
-                                    _10)];
+                            case 2: return [2 /*return*/, (_8.items = _11.sent(),
+                                    _8.total = (data === null || data === void 0 ? void 0 : data.total) || 0,
+                                    _8)];
                             case 3:
                                 if (!force) return [3 /*break*/, 8];
                                 items = this.tableOption.items;
@@ -1550,22 +1550,22 @@
                                         return [];
                                     })];
                             case 4:
-                                data = _13.sent();
+                                data = _11.sent();
                                 return [3 /*break*/, 6];
                             case 5:
                                 data = results;
-                                _13.label = 6;
+                                _11.label = 6;
                             case 6:
                                 if (!Array.isArray(data)) {
                                     this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
                                     data = [];
                                 }
-                                _11 = __classPrivateFieldSet;
-                                _12 = [this, _localItems];
+                                _9 = __classPrivateFieldSet;
+                                _10 = [this, _localItems];
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _format).call(this, data, this.tableOption.columns)];
                             case 7:
-                                _11.apply(void 0, _12.concat([_13.sent()]));
-                                _13.label = 8;
+                                _9.apply(void 0, _10.concat([_11.sent()]));
+                                _11.label = 8;
                             case 8:
                                 this.isLoading = false;
                                 this.ref.detectChanges();
@@ -1576,15 +1576,15 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c, _d;
-                return __generator(this, function (_10) {
-                    switch (_10.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.tableOption) === 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:
-                            _10.sent();
+                            _8.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.meta.selector.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -1595,13 +1595,13 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _e, _f, data;
-                    return __generator(this, function (_10) {
-                        switch (_10.label) {
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
                             case 0:
                                 (_f = (_e = this.tableFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
                                 return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
                             case 1:
-                                data = _10.sent();
+                                data = _8.sent();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
                         }
@@ -1613,8 +1613,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 (_10) {
-                        switch (_10.label) {
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
                             case 0:
                                 if (!((_g = this.tableOption.export) === null || _g === void 0 ? void 0 : _g.items)) return [3 /*break*/, 2];
                                 result = (_h = this.tableOption.export) === null || _h === void 0 ? void 0 : _h.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
@@ -1628,13 +1628,13 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _10.sent()];
+                            case 1: return [2 /*return*/, _8.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
                                 if (!(this.tableOption.type === 'server')) return [3 /*break*/, 4];
                                 result = this.tableOption.items(filterInfo);
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _10.sent()];
+                            case 3: return [2 /*return*/, _8.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof this.tableOption.items === 'function')) return [3 /*break*/, 8];
@@ -1642,15 +1642,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _10.sent();
+                                exportedItems = _8.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _10.label = 7;
+                                _8.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.tableOption.items;
-                                _10.label = 9;
+                                _8.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -1677,13 +1677,13 @@
                 return ((_b = (_a = _this.tableOption.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, _10, _11, sheet, _12, _13, _14, e_6_1;
-                var e_6, _15;
+                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 (_16) {
-                    switch (_16.label) {
+                return __generator(this, function (_14) {
+                    switch (_14.label) {
                         case 0:
-                            _16.trys.push([0, , 18, 19]);
+                            _14.trys.push([0, , 18, 19]);
                             columns_2 = __classPrivateFieldGet(this, _getExportColumns).call(this);
                             pageSize_1 = ((_k = (_j = this.tableOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
                             batch = ((_m = (_l = this.tableOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.batch) || 1;
@@ -1695,13 +1695,13 @@
                             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_7_1;
-                                var e_8, _10, e_7, _11;
+                                var e_8, _8, e_7, _9;
                                 var _this = this;
-                                return __generator(this, function (_12) {
-                                    switch (_12.label) {
+                                return __generator(this, function (_10) {
+                                    switch (_10.label) {
                                         case 0: return [4 /*yield*/, Promise.all(promises_1)];
                                         case 1:
-                                            results = _12.sent();
+                                            results = _10.sent();
                                             promises_1 = [];
                                             exportItems_1 = [];
                                             try {
@@ -1719,7 +1719,7 @@
                                             catch (e_8_1) { e_8 = { error: e_8_1 }; }
                                             finally {
                                                 try {
-                                                    if (results_1_1 && !results_1_1.done && (_10 = results_1.return)) _10.call(results_1);
+                                                    if (results_1_1 && !results_1_1.done && (_8 = results_1.return)) _8.call(results_1);
                                                 }
                                                 finally { if (e_8) throw e_8.error; }
                                             }
@@ -1728,11 +1728,11 @@
                                             if (!(results_2 instanceof Promise)) return [3 /*break*/, 3];
                                             return [4 /*yield*/, results_2];
                                         case 2:
-                                            exportItems_1 = _12.sent();
+                                            exportItems_1 = _10.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
                                             exportItems_1 = results_2;
-                                            _12.label = 4;
+                                            _10.label = 4;
                                         case 4:
                                             totalPage = total_1 / pageSize_1;
                                             percent = Math.round(((pageNumber_1 - 1) * 100.0) / totalPage);
@@ -1741,15 +1741,16 @@
                                             allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
                                             _loop_1 = function (item) {
                                                 var obj, handle, columns_3, columns_3_1, exportColumn, e_9_1;
-                                                var e_9, _10;
-                                                return __generator(this, function (_11) {
-                                                    switch (_11.label) {
+                                                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, _y, _z, column, exportedColumn, transform, _10, _11, date, date, date;
-                                                                return __generator(this, function (_12) {
-                                                                    switch (_12.label) {
+                                                                var _v, _w, _x, _y, _z, column, exportedColumn, transform, _8, _9, date, date, date, value, val, vals, vals;
+                                                                var _this = this;
+                                                                return __generator(this, function (_10) {
+                                                                    switch (_10.label) {
                                                                         case 0:
                                                                             obj[exportColumn.field] = item[exportColumn.field];
                                                                             column = allColumns.find(function (e) { return e.field === exportColumn.field; });
@@ -1773,15 +1774,15 @@
                                                                                 isExport: true,
                                                                             });
                                                                             if (!(transform instanceof Promise)) return [3 /*break*/, 2];
-                                                                            _10 = obj;
-                                                                            _11 = column.field;
+                                                                            _8 = obj;
+                                                                            _9 = column.field;
                                                                             return [4 /*yield*/, transform];
                                                                         case 1:
-                                                                            _10[_11] = _12.sent();
+                                                                            _8[_9] = _10.sent();
                                                                             return [3 /*break*/, 3];
                                                                         case 2:
                                                                             obj[column.field] = transform;
-                                                                            _12.label = 3;
+                                                                            _10.label = 3;
                                                                         case 3:
                                                                             obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
                                                                             return [3 /*break*/, 5];
@@ -1818,41 +1819,48 @@
                                                                                 obj[column.field] = Date.toFormat(date, 'HH:mm');
                                                                             }
                                                                             else if (column.type === 'values' || column.type === 'lazy-values') {
-                                                                                // Nếu là values thì lấy giá trị của value được chọn
-                                                                                obj[column.field] =
-                                                                                    ((_z = (_y = __classPrivateFieldGet(this, _cacheObjValues)[column.field]) === null || _y === void 0 ? void 0 : _y[item[column.field]]) === null || _z === void 0 ? void 0 : _z[column.option.displayField]) || item[column.field];
+                                                                                value = item[column.field];
+                                                                                if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
+                                                                                    val = column.option.mapValue(value, item);
+                                                                                    vals = (Array.isArray(val) ? val : [val]).filter(function (e) { return !!(e === null || e === void 0 ? void 0 : e.toString()); });
+                                                                                    obj[column.field] = (_y = vals.map(function (val) { var _a, _b; return ((_b = (_a = __classPrivateFieldGet(_this, _cacheObjValues)[column.field]) === null || _a === void 0 ? void 0 : _a[val]) === null || _b === void 0 ? void 0 : _b[column.option.displayField]) || val; })) === null || _y === void 0 ? void 0 : _y.join(', ');
+                                                                                }
+                                                                                else {
+                                                                                    vals = (Array.isArray(value) ? value : [value]).filter(function (e) { return !!(e === null || e === void 0 ? void 0 : e.toString()); });
+                                                                                    obj[column.field] = (_z = vals.map(function (val) { var _a, _b; return ((_b = (_a = __classPrivateFieldGet(_this, _cacheObjValues)[column.field]) === null || _a === void 0 ? void 0 : _a[val]) === null || _b === void 0 ? void 0 : _b[column.option.displayField]) || val; })) === null || _z === void 0 ? void 0 : _z.join(', ');
+                                                                                }
                                                                             }
                                                                             else {
                                                                                 obj[column.field] = item[column.field];
                                                                             }
-                                                                            _12.label = 5;
+                                                                            _10.label = 5;
                                                                         case 5: return [2 /*return*/];
                                                                     }
                                                                 });
                                                             }); };
-                                                            _11.label = 1;
+                                                            _9.label = 1;
                                                         case 1:
-                                                            _11.trys.push([1, 6, 7, 8]);
+                                                            _9.trys.push([1, 6, 7, 8]);
                                                             columns_3 = (e_9 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
-                                                            _11.label = 2;
+                                                            _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:
-                                                            _11.sent();
-                                                            _11.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_9_1 = _11.sent();
+                                                            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 && (_10 = columns_3.return)) _10.call(columns_3);
+                                                                if (columns_3_1 && !columns_3_1.done && (_8 = columns_3.return)) _8.call(columns_3);
                                                             }
                                                             finally { if (e_9) throw e_9.error; }
                                                             return [7 /*endfinally*/];
@@ -1862,29 +1870,29 @@
                                                     }
                                                 });
                                             };
-                                            _12.label = 5;
+                                            _10.label = 5;
                                         case 5:
-                                            _12.trys.push([5, 10, 11, 12]);
+                                            _10.trys.push([5, 10, 11, 12]);
                                             exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
-                                            _12.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:
-                                            _12.sent();
-                                            _12.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_7_1 = _12.sent();
+                                            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 && (_11 = exportItems_2.return)) _11.call(exportItems_2);
+                                                if (exportItems_2_1 && !exportItems_2_1.done && (_9 = exportItems_2.return)) _9.call(exportItems_2);
                                             }
                                             finally { if (e_7) throw e_7.error; }
                                             return [7 /*endfinally*/];
@@ -1892,7 +1900,7 @@
                                     }
                                 });
                             }); };
-                            _16.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));
@@ -1902,14 +1910,14 @@
                             }
                             return [4 /*yield*/, handleData()];
                         case 2:
-                            _16.sent();
+                            _14.sent();
                             return [3 /*break*/, 1];
                         case 3:
                             if (!(promises_1.length > 0)) return [3 /*break*/, 5];
                             return [4 /*yield*/, handleData()];
                         case 4:
-                            _16.sent();
-                            _16.label = 5;
+                            _14.sent();
+                            _14.label = 5;
                         case 5:
                             if (!isCSV) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.exportService.exportCSV({
@@ -1918,19 +1926,19 @@
                                     fileName: (_p = (_o = this.tableOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName,
                                 })];
                         case 6:
-                            _16.sent();
+                            _14.sent();
                             return [2 /*return*/];
                         case 7:
                             sheets = [];
                             if (!Array.isArray((_r = (_q = this.tableOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) return [3 /*break*/, 16];
-                            _16.label = 8;
+                            _14.label = 8;
                         case 8:
-                            _16.trys.push([8, 14, 15, 16]);
-                            _10 = __values(this.tableOption.export.sheets), _11 = _10.next();
-                            _16.label = 9;
+                            _14.trys.push([8, 14, 15, 16]);
+                            _8 = __values(this.tableOption.export.sheets), _9 = _8.next();
+                            _14.label = 9;
                         case 9:
-                            if (!!_11.done) return [3 /*break*/, 13];
-                            sheet = _11.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({
@@ -1940,27 +1948,27 @@
                             });
                             return [3 /*break*/, 12];
                         case 10:
-                            _13 = (_12 = sheets).push;
-                            _14 = {
+                            _11 = (_10 = sheets).push;
+                            _12 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
                         case 11:
-                            _13.apply(_12, [(_14.items = _16.sent(),
-                                    _14.fields = sheet.fields,
-                                    _14)]);
-                            _16.label = 12;
+                            _11.apply(_10, [(_12.items = _14.sent(),
+                                    _12.fields = sheet.fields,
+                                    _12)]);
+                            _14.label = 12;
                         case 12:
-                            _11 = _10.next();
+                            _9 = _8.next();
                             return [3 /*break*/, 9];
                         case 13: return [3 /*break*/, 16];
                         case 14:
-                            e_6_1 = _16.sent();
+                            e_6_1 = _14.sent();
                             e_6 = { error: e_6_1 };
                             return [3 /*break*/, 16];
                         case 15:
                             try {
-                                if (_11 && !_11.done && (_15 = _10.return)) _15.call(_10);
+                                if (_9 && !_9.done && (_13 = _8.return)) _13.call(_8);
                             }
                             finally { if (e_6) throw e_6.error; }
                             return [7 /*endfinally*/];
@@ -1971,7 +1979,7 @@
                                 sheets: sheets,
                             })];
                         case 17:
-                            _16.sent();
+                            _14.sent();
                             return [2 /*return*/];
                         case 18:
                             this.isExporting = false;
@@ -1999,7 +2007,7 @@
                 });
                 if (_this.configuration) {
                     var columns_4 = __spread(gridColumns);
-                    var _10 = _this.configuration, firstColumns = _10.firstColumns, secondColumns = _10.secondColumns;
+                    var _8 = _this.configuration, firstColumns = _8.firstColumns, secondColumns = _8.secondColumns;
                     var displayColumns = __spread(firstColumns, secondColumns).reduce(function (first, next) {
                         var column = _this.tableOption.columns.find(function (e) { return e.field === next.field; });
                         if (!column) {
@@ -2034,7 +2042,7 @@
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
                 var _0, _1, _2, _3, _4, data;
-                return __generator(this, function (_10) {
+                return __generator(this, function (_8) {
                     if ((_0 = this.tableOption.expand) === null || _0 === void 0 ? void 0 : _0.always) {
                         return [2 /*return*/];
                     }
@@ -2109,7 +2117,7 @@
                 _this.filterRegister.value.remove();
             };
             this.setFilter = function (args) {
-                var _10 = args || {}, columnFilter = _10.columnFilter, externalFilter = _10.externalFilter, filterDef = _10.filterDef;
+                var _8 = args || {}, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
                 if (columnFilter) {
                     _this.columnFilter = columnFilter;
                 }
@@ -2122,9 +2130,9 @@
             this.detectChanges = function () { return _this.ref.detectChanges(); };
             _loadValues.set(this, function (columns) { return __awaiter(_this, void 0, void 0, function () {
                 var promises, _loop_2, this_1, columns_5, columns_5_1, column, results, _loop_3, this_2, results_3, results_3_1, result;
-                var e_10, _10, e_11, _11;
-                return __generator(this, function (_12) {
-                    switch (_12.label) {
+                var e_10, _8, e_11, _9;
+                return __generator(this, function (_10) {
+                    switch (_10.label) {
                         case 0:
                             promises = [];
                             _loop_2 = function (column) {
@@ -2150,11 +2158,11 @@
                                     }
                                     else {
                                         this_1.cacheValues[column.field] = column.option.items.map(function (e) {
-                                            var _10;
-                                            return (_10 = {},
-                                                _10[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
-                                                _10[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
-                                                _10);
+                                            var _8;
+                                            return (_8 = {},
+                                                _8[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                                                _8[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                                                _8);
                                         });
                                         __classPrivateFieldGet(this_1, _cacheObjValues)[column.field] = Array.toObject(this_1.cacheValues[column.field], column.option.valueField);
                                     }
@@ -2170,21 +2178,21 @@
                             catch (e_10_1) { e_10 = { error: e_10_1 }; }
                             finally {
                                 try {
-                                    if (columns_5_1 && !columns_5_1.done && (_10 = columns_5.return)) _10.call(columns_5);
+                                    if (columns_5_1 && !columns_5_1.done && (_8 = columns_5.return)) _8.call(columns_5);
                                 }
                                 finally { if (e_10) throw e_10.error; }
                             }
                             if (!promises.length) return [3 /*break*/, 2];
                             return [4 /*yield*/, Promise.all(promises)];
                         case 1:
-                            results = _12.sent();
+                            results = _10.sent();
                             _loop_3 = function (result) {
                                 this_2.cacheValues[result.key] = result.data.map(function (e) {
-                                    var _10;
-                                    return (_10 = {},
-                                        _10[result.valueField] = e === null || e === void 0 ? void 0 : e[result.valueField],
-                                        _10[result.displayField] = e === null || e === void 0 ? void 0 : e[result.displayField],
-                                        _10);
+                                    var _8;
+                                    return (_8 = {},
+                                        _8[result.valueField] = e === null || e === void 0 ? void 0 : e[result.valueField],
+                                        _8[result.displayField] = e === null || e === void 0 ? void 0 : e[result.displayField],
+                                        _8);
                                 });
                                 __classPrivateFieldGet(this_2, _cacheObjValues)[result.key] = Array.toObject(this_2.cacheValues[result.key], result.valueField);
                             };
@@ -2198,32 +2206,32 @@
                             catch (e_11_1) { e_11 = { error: e_11_1 }; }
                             finally {
                                 try {
-                                    if (results_3_1 && !results_3_1.done && (_11 = results_3.return)) _11.call(results_3);
+                                    if (results_3_1 && !results_3_1.done && (_9 = results_3.return)) _9.call(results_3);
                                 }
                                 finally { if (e_11) throw e_11.error; }
                             }
-                            _12.label = 2;
+                            _10.label = 2;
                         case 2: return [2 /*return*/];
                     }
                 });
             }); });
             _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
-                var _5, _6, _7, _8, _9, items, _loop_4, this_3, columns_6, columns_6_1, column, e_12_1;
-                var e_12, _10;
+                var _5, _6, _7, items, _loop_4, this_3, columns_6, columns_6_1, column, e_12_1;
+                var e_12, _8;
                 var _this = this;
-                return __generator(this, function (_11) {
-                    switch (_11.label) {
+                return __generator(this, function (_9) {
+                    switch (_9.label) {
                         case 0:
                             items = rawItems.map(MapToSdTableItem);
                             _loop_4 = function (column) {
-                                var field, cellStyle, click, tooltip, htmlTemplate, transform, _10, views, mapValue_1, values_1, lazyItems, _loop_5, items_2, items_2_1, item, e_13_1;
-                                var e_13, _11;
-                                return __generator(this, function (_12) {
-                                    switch (_12.label) {
+                                var field, cellStyle, click, tooltip, htmlTemplate, transform, _8, views, mapValue_1, values_1, lazyItems, _loop_5, items_2, items_2_1, item, e_13_1;
+                                var e_13, _9;
+                                return __generator(this, function (_10) {
+                                    switch (_10.label) {
                                         case 0:
                                             field = column.field, cellStyle = column.cellStyle, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
                                             if (!(!transform && !htmlTemplate && column.type === 'lazy-values' && typeof column.option.views === 'function')) return [3 /*break*/, 2];
-                                            _10 = column.option, views = _10.views, mapValue_1 = _10.mapValue;
+                                            _8 = column.option, views = _8.views, mapValue_1 = _8.mapValue;
                                             __classPrivateFieldGet(this_3, _cacheObjValues)[field] = __classPrivateFieldGet(this_3, _cacheObjValues)[field] || {};
                                             values_1 = items
                                                 .map(function (item) {
@@ -2233,7 +2241,9 @@
                                                 }
                                                 return (_b = item.data) === null || _b === void 0 ? void 0 : _b[field];
                                             })
-                                                .filter(function (val) { return (!!val || val === 0) && !Object.keys(__classPrivateFieldGet(_this, _cacheObjValues)[field]).includes(val); })
+                                                .filter(function (val) { return !!(val === null || val === void 0 ? void 0 : val.toString()); })
+                                                .reduce(function (current, next) { return __spread(current, (Array.isArray(next) ? next : [next])); }, [])
+                                                .filter(function (val) { return !Object.keys(__classPrivateFieldGet(_this, _cacheObjValues)[field]).includes(val); })
                                                 .union();
                                             if (!values_1.length) return [3 /*break*/, 2];
                                             return [4 /*yield*/, views(values_1).catch(function (err) {
@@ -2241,22 +2251,22 @@
                                                     return [];
                                                 })];
                                         case 1:
-                                            lazyItems = (_12.sent())
+                                            lazyItems = (_10.sent())
                                                 .filter(function (item) { return values_1.includes(item === null || item === void 0 ? void 0 : item[column.option.valueField]); })
                                                 .map(function (e) {
-                                                var _10;
-                                                return (_10 = {},
-                                                    _10[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
-                                                    _10[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
-                                                    _10);
+                                                var _8;
+                                                return (_8 = {},
+                                                    _8[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                                                    _8[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                                                    _8);
                                             });
                                             Object.assign(__classPrivateFieldGet(this_3, _cacheObjValues)[field], Array.toObject(lazyItems, column.option.valueField) || {});
-                                            _12.label = 2;
+                                            _10.label = 2;
                                         case 2:
                                             _loop_5 = function (item) {
-                                                var rowData, value, display, newValue, _10, date, time, option;
-                                                return __generator(this, function (_11) {
-                                                    switch (_11.label) {
+                                                var rowData, value, display, newValue, _8, date, time, val, vals, vals, option;
+                                                return __generator(this, function (_9) {
+                                                    switch (_9.label) {
                                                         case 0:
                                                             rowData = item.data;
                                                             value = rowData === null || rowData === void 0 ? void 0 : rowData[field];
@@ -2277,14 +2287,14 @@
                                                             if (!(typeof transform === 'function')) return [3 /*break*/, 5];
                                                             newValue = transform(value, rowData);
                                                             if (!(newValue instanceof Promise)) return [3 /*break*/, 3];
-                                                            _10 = display;
+                                                            _8 = display;
                                                             return [4 /*yield*/, newValue];
                                                         case 2:
-                                                            _10.data = _11.sent();
+                                                            _8.data = _9.sent();
                                                             return [3 /*break*/, 4];
                                                         case 3:
                                                             display.data = newValue;
-                                                            _11.label = 4;
+                                                            _9.label = 4;
                                                         case 4: return [3 /*break*/, 6];
                                                         case 5:
                                                             if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
@@ -2308,10 +2318,13 @@
                                                             }
                                                             if (column.type === 'values' || column.type === 'lazy-values') {
                                                                 if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
-                                                                    display.data = ((_6 = (_5 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _5 === void 0 ? void 0 : _5[column.option.mapValue(value, rowData)]) === null || _6 === void 0 ? void 0 : _6[column.option.displayField]) || value;
+                                                                    val = column.option.mapValue(value, rowData);
+                                                                    vals = (Array.isArray(val) ? val : [val]).filter(function (e) { return !!(e === null || e === void 0 ? void 0 : e.toString()); });
+                                                                    display.data = (_5 = vals.map(function (val) { var _a, _b; return ((_b = (_a = __classPrivateFieldGet(_this, _cacheObjValues)[field]) === null || _a === void 0 ? void 0 : _a[val]) === null || _b === void 0 ? void 0 : _b[column.option.displayField]) || val; })) === null || _5 === void 0 ? void 0 : _5.join(', ');
                                                                 }
                                                                 else {
-                                                                    display.data = ((_8 = (_7 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _7 === void 0 ? void 0 : _7[value]) === null || _8 === void 0 ? void 0 : _8[column.option.displayField]) || value;
+                                                                    vals = (Array.isArray(value) ? value : [value]).filter(function (e) { return !!(e === null || e === void 0 ? void 0 : e.toString()); });
+                                                                    display.data = (_6 = vals.map(function (val) { var _a, _b; return ((_b = (_a = __classPrivateFieldGet(_this, _cacheObjValues)[field]) === null || _a === void 0 ? void 0 : _a[val]) === null || _b === void 0 ? void 0 : _b[column.option.displayField]) || val; })) === null || _6 === void 0 ? void 0 : _6.join(', ');
                                                                 }
                                                             }
                                                             if (column.type === 'number' && Number.isNumber(value)) {
@@ -2331,7 +2344,7 @@
                                                                 display.badge = {
                                                                     type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'icon' : column.badgeType,
                                                                     color: column.badge(value, rowData),
-                                                                    icon: (_9 = column.badgeIcon) === null || _9 === void 0 ? void 0 : _9.call(column, value, rowData),
+                                                                    icon: (_7 = column.badgeIcon) === null || _7 === void 0 ? void 0 : _7.call(column, value, rowData),
                                                                 };
                                                             }
                                                             else if (column.type === 'bool') {
@@ -2341,34 +2354,34 @@
                                                                     icon: null,
                                                                 };
                                                             }
-                                                            _11.label = 6;
+                                                            _9.label = 6;
                                                         case 6: return [2 /*return*/];
                                                     }
                                                 });
                                             };
-                                            _12.label = 3;
+                                            _10.label = 3;
                                         case 3:
-                                            _12.trys.push([3, 8, 9, 10]);
+                                            _10.trys.push([3, 8, 9, 10]);
                                             items_2 = (e_13 = void 0, __values(items)), items_2_1 = items_2.next();
-                                            _12.label = 4;
+                                            _10.label = 4;
                                         case 4:
                                             if (!!items_2_1.done) return [3 /*break*/, 7];
                                             item = items_2_1.value;
                                             return [5 /*yield**/, _loop_5(item)];
                                         case 5:
-                                            _12.sent();
-                                            _12.label = 6;
+                                            _10.sent();
+                                            _10.label = 6;
                                         case 6:
                                             items_2_1 = items_2.next();
                                             return [3 /*break*/, 4];
                                         case 7: return [3 /*break*/, 10];
                                         case 8:
-                                            e_13_1 = _12.sent();
+                                            e_13_1 = _10.sent();
                                             e_13 = { error: e_13_1 };
                                             return [3 /*break*/, 10];
                                         case 9:
                                             try {
-                                                if (items_2_1 && !items_2_1.done && (_11 = items_2.return)) _11.call(items_2);
+                                                if (items_2_1 && !items_2_1.done && (_9 = items_2.return)) _9.call(items_2);
                                             }
                                             finally { if (e_13) throw e_13.error; }
                                             return [7 /*endfinally*/];
@@ -2377,29 +2390,29 @@
                                 });
                             };
                             this_3 = this;
-                            _11.label = 1;
+                            _9.label = 1;
                         case 1:
-                            _11.trys.push([1, 6, 7, 8]);
+                            _9.trys.push([1, 6, 7, 8]);
                             columns_6 = __values(columns), columns_6_1 = columns_6.next();
-                            _11.label = 2;
+                            _9.label = 2;
                         case 2:
                             if (!!columns_6_1.done) return [3 /*break*/, 5];
                             column = columns_6_1.value;
                             return [5 /*yield**/, _loop_4(column)];
                         case 3:
-                            _11.sent();
-                            _11.label = 4;
+                            _9.sent();
+                            _9.label = 4;
                         case 4:
                             columns_6_1 = columns_6.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_12_1 = _11.sent();
+                            e_12_1 = _9.sent();
                             e_12 = { error: e_12_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (columns_6_1 && !columns_6_1.done && (_10 = columns_6.return)) _10.call(columns_6);
+                                if (columns_6_1 && !columns_6_1.done && (_8 = columns_6.return)) _8.call(columns_6);
                             }
                             finally { if (e_12) throw e_12.error; }
                             return [7 /*endfinally*/];
@@ -2407,6 +2420,10 @@
                     }
                 });
             }); });
+            this.onOperatorChange = function (column, operator) {
+                var _a, _b, _c;
+                (_c = (_b = (_a = _this.tableOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.operatorChange) === null || _c === void 0 ? void 0 : _c.call(_b, column, operator);
+            };
             this.trackBy = function (index, item) {
                 return item.meta.id;
             };
@@ -2498,13 +2515,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 (_10) {
-                    switch (_10.label) {
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
                         case 0:
                             filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
                             return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
                         case 1:
-                            result = _10.sent();
+                            result = _8.sent();
                             __classPrivateFieldSet(this, _loadCompleted, true);
                             return [2 /*return*/, result];
                     }
@@ -2552,7 +2569,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></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': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" 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=\"tableOption?.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 && !tableOption?.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 : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.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 : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.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]=\"tableOption.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;\"\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=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.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=\"true\"\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]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\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                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\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\" [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=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\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                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\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.meta.selector.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        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\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=\"tableOption.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 class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\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=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"tableOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></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': tableOption?.style?.maxHeight,\r\n            'min-height': tableOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" 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=\"tableOption?.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 && !tableOption?.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 : tableOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!tableOption.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 : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.meta.selector.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.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]=\"tableOption.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;\"\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=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': column.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=\"true\"\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]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\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                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\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\" [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=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter  && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    (operatorChange)=\"onOperatorChange(column, $event)\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\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                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [cellDef]=\"cellDef\">\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.meta.selector.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        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            title=\"T\u1EA3i l\u1EA1i\"\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=\"tableOption.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 class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\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=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"tableOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"tableOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -3262,6 +3279,7 @@
             this.inlineSymbol = 'filter_alt';
             _inlineOperator_1.set(this, void 0);
             this.inlineOperatorChange = new core.EventEmitter();
+            this.operatorChange = new core.EventEmitter();
             this.columnFilter = {};
             this.operators = [];
             this.items = [];
@@ -3281,6 +3299,7 @@
                     _this.inlineSymbol = 'filter_alt';
                 }
                 _this.inlineOperatorChange.emit(__classPrivateFieldGet(_this, _inlineOperator_1));
+                _this.operatorChange.emit(__classPrivateFieldGet(_this, _inlineOperator_1));
                 _this.ref.markForCheck();
             };
         }
@@ -3367,6 +3386,7 @@
         _value: [{ type: core.Input, args: ['value',] }],
         _inlineOperator: [{ type: core.Input, args: ['inlineOperator',] }],
         inlineOperatorChange: [{ type: core.Output }],
+        operatorChange: [{ type: core.Output }],
         _columnFilter: [{ type: core.Input, args: ['columnFilter',] }],
         cacheValues: [{ type: core.Input }],
         _column: [{ type: core.Input, args: ['column',] }],