@sd-angular/core 1.3.238 → 1.3.240

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@sd-angular/core/loading'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@sd-angular/core/group')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@sd-angular/core/loading', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@sd-angular/core/group'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global['sd-angular'].core.loading, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global['sd-angular'].core.group));
-}(this, (function (exports, common, core, common$1, icon, paginator, sort, table, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, loading, progressSpinner, table$1, menu, button, service, tooltip, slideToggle, form, checkbox, list, group) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@angular/forms'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@sd-angular/core/group'), require('@angular/material/chips')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@sd-angular/core/loading', '@sd-angular/core/translate', '@angular/forms', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@sd-angular/core/group', '@angular/material/chips'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global['sd-angular'].core.loading, global['sd-angular'].core.translate, global.ng.forms, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global['sd-angular'].core.group, global.ng.material.chips));
+}(this, (function (exports, common, core, common$1, icon, paginator, sort, table, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, loading, translate, forms, progressSpinner, table$1, menu, button, service, tooltip, slideToggle, form, checkbox, list, group, chips) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1211,7 +1211,409 @@
         mouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
     };
 
-    var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _cacheObjValues, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems, _loadValues, _format;
+    var _getExportableColumns, _getExportColumns, _initTemplate;
+    var SdPopupExport = /** @class */ (function () {
+        function SdPopupExport(ref, loadingService, exportService, notifyService, translateService) {
+            var _this = this;
+            this.ref = ref;
+            this.loadingService = loadingService;
+            this.exportService = exportService;
+            this.notifyService = notifyService;
+            this.translateService = translateService;
+            this.columns = [];
+            this.enableCreating = false;
+            this.selected = {};
+            this.files = [];
+            this.export = new core.EventEmitter();
+            this.form = new forms.FormGroup({});
+            _getExportableColumns.set(this, function () {
+                return __spread(_this.tableColumns, _this.additionalColumns);
+            });
+            this.open = function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_l) {
+                    if (!this.key) {
+                        this.exportDefault();
+                        return [2 /*return*/];
+                    }
+                    this.loadFiles(null);
+                    this.selected = {};
+                    this.modal.open();
+                    this.ref.detectChanges();
+                    return [2 /*return*/];
+                });
+            }); };
+            _getExportColumns.set(this, function () {
+                if (_this.configuration) {
+                    var columns_1 = __spread(_this.tableColumns);
+                    var _l = _this.configuration, firstColumns = _l.firstColumns, secondColumns = _l.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) {
+                            return first;
+                        }
+                        if (column.type !== 'children') {
+                            return __spread(first, [column]);
+                        }
+                        return __spread(first, column.children);
+                    }, []);
+                    var results = displayColumns
+                        .map(function (e) { return (Object.assign(Object.assign({}, e), { data: columns_1.find(function (e1) { return e1.field === e.field; }) })); })
+                        .filter(function (e) { return !!e.data; })
+                        .map(function (e) { return e.data; });
+                    return __spread(results, _this.additionalColumns);
+                }
+                else {
+                    return _this.columns;
+                }
+            });
+            this.exportDefault = function () {
+                _this.export.emit({
+                    file: null,
+                    columns: __classPrivateFieldGet(_this, _getExportColumns).call(_this),
+                    isCSV: false,
+                });
+            };
+            this.exportCSV = function () {
+                _this.export.emit({
+                    file: null,
+                    columns: __classPrivateFieldGet(_this, _getExportColumns).call(_this),
+                    isCSV: true,
+                });
+            };
+            this.loadFiles = function (group) {
+                if (group === void 0) { group = null; }
+                return __awaiter(_this, void 0, void 0, function () {
+                    var _l;
+                    return __generator(this, function (_m) {
+                        switch (_m.label) {
+                            case 0:
+                                _l = this;
+                                return [4 /*yield*/, this.exportService.filesInFolder({
+                                        key: this.key,
+                                        group: group,
+                                    })];
+                            case 1:
+                                _l.files = _m.sent();
+                                this.ref.markForCheck();
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            };
+            _initTemplate.set(this, function (fileName) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _d, sheets, _l, _m, sheet, _o, _p, _q, e_1_1;
+                var e_1, _r;
+                return __generator(this, function (_s) {
+                    switch (_s.label) {
+                        case 0:
+                            sheets = [];
+                            if (!Array.isArray((_b = (_a = this.tableOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.sheets)) return [3 /*break*/, 9];
+                            _s.label = 1;
+                        case 1:
+                            _s.trys.push([1, 7, 8, 9]);
+                            _l = __values(this.tableOption.export.sheets), _m = _l.next();
+                            _s.label = 2;
+                        case 2:
+                            if (!!_m.done) return [3 /*break*/, 6];
+                            sheet = _m.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 5];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 3];
+                            sheets.push({
+                                name: sheet.name,
+                                items: sheet.items,
+                                fields: sheet.fields,
+                            });
+                            return [3 /*break*/, 5];
+                        case 3:
+                            _p = (_o = sheets).push;
+                            _q = {
+                                name: sheet.name
+                            };
+                            return [4 /*yield*/, sheet.items()];
+                        case 4:
+                            _p.apply(_o, [(_q.items = _s.sent(),
+                                    _q.fields = sheet.fields,
+                                    _q)]);
+                            _s.label = 5;
+                        case 5:
+                            _m = _l.next();
+                            return [3 /*break*/, 2];
+                        case 6: return [3 /*break*/, 9];
+                        case 7:
+                            e_1_1 = _s.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 9];
+                        case 8:
+                            try {
+                                if (_m && !_m.done && (_r = _l.return)) _r.call(_l);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 9: return [4 /*yield*/, this.exportService.generateTemplate({
+                                fileName: fileName || ((_d = (_c = this.tableOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.fileName),
+                                columns: this.columns,
+                                sheets: sheets,
+                            })];
+                        case 10: return [2 /*return*/, _s.sent()];
+                    }
+                });
+            }); });
+            this.generateTemplate = function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_l) {
+                    switch (_l.label) {
+                        case 0:
+                            this.loadingService.start();
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _initTemplate).call(this).finally(this.loadingService.stop)];
+                        case 1:
+                            _l.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            this.generateAndUploadTemplate = function (fileName) { return __awaiter(_this, void 0, void 0, function () {
+                var _e, _f, _g, _h, _j, _k, sheets, _l, _m, sheet, _o, _p, _q, e_2_1;
+                var e_2, _r;
+                var _this = this;
+                return __generator(this, function (_s) {
+                    switch (_s.label) {
+                        case 0:
+                            sheets = [];
+                            if (!Array.isArray((_f = (_e = this.tableOption) === null || _e === void 0 ? void 0 : _e.export) === null || _f === void 0 ? void 0 : _f.sheets)) return [3 /*break*/, 9];
+                            _s.label = 1;
+                        case 1:
+                            _s.trys.push([1, 7, 8, 9]);
+                            _l = __values((_h = (_g = this.tableOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.sheets), _m = _l.next();
+                            _s.label = 2;
+                        case 2:
+                            if (!!_m.done) return [3 /*break*/, 6];
+                            sheet = _m.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 5];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 3];
+                            sheets.push({
+                                name: sheet.name,
+                                items: sheet.items,
+                                fields: sheet.fields,
+                            });
+                            return [3 /*break*/, 5];
+                        case 3:
+                            _p = (_o = sheets).push;
+                            _q = {
+                                name: sheet.name
+                            };
+                            return [4 /*yield*/, sheet.items()];
+                        case 4:
+                            _p.apply(_o, [(_q.items = _s.sent(),
+                                    _q.fields = sheet.fields,
+                                    _q)]);
+                            _s.label = 5;
+                        case 5:
+                            _m = _l.next();
+                            return [3 /*break*/, 2];
+                        case 6: return [3 /*break*/, 9];
+                        case 7:
+                            e_2_1 = _s.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 9];
+                        case 8:
+                            try {
+                                if (_m && !_m.done && (_r = _l.return)) _r.call(_l);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                            return [7 /*endfinally*/];
+                        case 9: return [4 /*yield*/, this.exportService.generateUploadTemplate({
+                                key: this.key,
+                                template: {
+                                    fileName: fileName || ((_k = (_j = this.tableOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.fileName),
+                                    columns: this.columns.filter(function (e) { return _this.selected[e.field]; }),
+                                    sheets: sheets,
+                                },
+                            })];
+                        case 10: return [2 /*return*/, _s.sent()];
+                    }
+                });
+            }); };
+            this.onExport = function (file) {
+                _this.export.emit({
+                    file: file,
+                    columns: _this.columns,
+                });
+                _this.ref.detectChanges();
+            };
+            this.uploadTemplate = function () { return __awaiter(_this, void 0, void 0, function () {
+                var file;
+                return __generator(this, function (_l) {
+                    switch (_l.label) {
+                        case 0: return [4 /*yield*/, this.exportService.uploadTemplate({
+                                key: this.key,
+                            })];
+                        case 1:
+                            file = _l.sent();
+                            if (file) {
+                                this.files = __spread(this.files, [file]);
+                                this.ref.detectChanges();
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            this.removeFile = function (file) {
+                _this.notifyService.confirm(_this.translateService.translate('Remove template')).then(function () {
+                    _this.exportService.removeFile({
+                        key: _this.key,
+                        fileName: file.fileName,
+                    });
+                    var idx = _this.files.indexOf(file);
+                    _this.files.splice(idx, 1);
+                    _this.files = __spread(_this.files);
+                    _this.ref.detectChanges();
+                });
+            };
+            this.createTemplate = function () { return __awaiter(_this, void 0, void 0, function () {
+                var fileName, result, file;
+                var _this = this;
+                return __generator(this, function (_l) {
+                    switch (_l.label) {
+                        case 0:
+                            if (this.form.invalid) {
+                                this.form.markAllAsTouched();
+                                return [2 /*return*/];
+                            }
+                            if (!this.columns.some(function (e) { return _this.selected[e.field]; })) {
+                                this.notifyService.notify.warning("Vui l\u00F2ng ch\u1ECDn c\u1ED9t d\u1EEF li\u1EC7u \u0111\u1EC3 xu\u1EA5t");
+                                return [2 /*return*/];
+                            }
+                            this.loadingService.start();
+                            fileName = this.templateName + '.xlsx';
+                            _l.label = 1;
+                        case 1:
+                            _l.trys.push([1, , 3, 4]);
+                            return [4 /*yield*/, this.generateAndUploadTemplate(fileName)];
+                        case 2:
+                            result = _l.sent();
+                            if (result === null || result === void 0 ? void 0 : result.filePath) {
+                                file = {
+                                    filePath: result.filePath,
+                                    fileName: result.fileName,
+                                };
+                                this.onExport(file);
+                                this.templateName = null;
+                                this.enableCreating = false;
+                                this.files = __spread(this.files, [file]);
+                                this.ref.detectChanges();
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.loadingService.stop();
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); };
+            this.templateNameValidator = function (val) {
+                var translate = _this.translateService.translate;
+                var regex = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
+                if (!val) {
+                    return translate('Please enter your template name');
+                }
+                if (val.length > 50) {
+                    return translate('Template name is too long');
+                }
+                if (!regex.test(val)) {
+                    return translate('Template name only contains letters, numbers and spaces');
+                }
+                return null;
+            };
+        }
+        Object.defineProperty(SdPopupExport.prototype, "_tableOption", {
+            set: function (option) {
+                this.tableOption = option;
+                this.columns = __classPrivateFieldGet(this, _getExportableColumns).call(this);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdPopupExport.prototype, "key", {
+            get: function () {
+                var _a, _b, _c, _d;
+                var prefix = '93889e78-f971-4a1d-8c73-fe2321af9233';
+                if (!((_b = (_a = this.tableOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.key)) {
+                    return null;
+                }
+                return hash__default['default']({
+                    prefix: prefix,
+                    key: (_d = (_c = this.tableOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.key,
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdPopupExport.prototype, "tableColumns", {
+            get: function () {
+                var columns = [];
+                this.tableOption.columns
+                    .filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
+                    .forEach(function (column) {
+                    var _a;
+                    if (column.type === 'children') {
+                        (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(function (childColumn) {
+                            columns.push(childColumn);
+                        });
+                        return;
+                    }
+                    columns.push(column);
+                });
+                return columns.map(function (e) { return ({
+                    field: e.field,
+                    title: e.title,
+                    description: e.description,
+                    width: e.width,
+                }); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdPopupExport.prototype, "additionalColumns", {
+            get: function () {
+                var _a, _b;
+                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); })) || []).map(function (e) { return ({
+                    field: e.field,
+                    title: e.title,
+                    description: e.description,
+                    width: e.width,
+                }); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SdPopupExport.prototype.ngOnInit = function () { };
+        SdPopupExport.prototype.ngAfterViewInit = function () { };
+        return SdPopupExport;
+    }());
+    _getExportableColumns = new WeakMap(), _getExportColumns = new WeakMap(), _initTemplate = new WeakMap();
+    SdPopupExport.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-popup-export',
+                    template: "<sd-modal width=\"907px\" [title]=\"'Exported template' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-template #noSelection>\r\n        <div class=\"col-12\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #content>\r\n        <div class=\"row\">\r\n          <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n            <div class=\"c-empty\">\r\n              <img class=\"c-empty-image\" />\r\n              <div class=\"T14R\">{{ 'There are no exported templates' | sdTranslate }}</div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"files?.length\">\r\n            <div class=\"col-12\">\r\n              <div class=\"c-table\" style=\"max-height: 50vh\">\r\n                <table mat-table [dataSource]=\"files\">\r\n                  <ng-container matColumnDef=\"stt\">\r\n                    <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n                    <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                      {{ idx + 1 }}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"fileName\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'File name' | sdTranslate }}</th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                      {{ item.fileName }}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"action\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                      <div class=\"d-flex\">\r\n                        <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                          <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                          <mat-icon>download</mat-icon>\r\n                        </button>\r\n                      </div>\r\n                    </td>\r\n                  </ng-container>\r\n                  <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n                  <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n                </table>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n              <sd-button\r\n                class=\"mr-5\"\r\n                [title]=\"'New template' | sdTranslate\"\r\n                (action)=\"enableCreating = true\"\r\n                color=\"info\"\r\n                [disabled]=\"enableCreating\">\r\n              </sd-button>\r\n              <sd-button\r\n                *ngIf=\"tableOption?.export?.enableUpload\"\r\n                [title]=\"'Upload template' | sdTranslate\"\r\n                (action)=\"uploadTemplate()\"\r\n                type=\"outline\">\r\n              </sd-button>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n            <div class=\"col-12 mt-20\">\r\n              <div class=\"T14R\">{{ 'Select columns for creating template' | sdTranslate }}:</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n                <ng-container *ngFor=\"let column of columns\">\r\n                  <mat-chip [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n                    {{ column.title }}\r\n                  </mat-chip>\r\n                </ng-container>\r\n              </mat-chip-list>\r\n            </div>\r\n            <div class=\"col-12 row\">\r\n              <div class=\"col-10\">\r\n                <sd-input\r\n                  [form]=\"form\"\r\n                  [label]=\"'Template name' | sdTranslate\"\r\n                  [(model)]=\"templateName\"\r\n                  [validator]=\"templateNameValidator\"></sd-input>\r\n              </div>\r\n              <div class=\"col-2 mt-8\">\r\n                <sd-button width=\"100%\" [title]=\"'Save' | sdTranslate\" color=\"info\" (action)=\"createTemplate()\"> </sd-button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </sd-modal-body>\r\n</sd-modal>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{align-items:center;background:#f6f6f6;border-radius:4px;display:flex;flex-direction:column;height:116px;justify-content:center;position:static}.c-empty .c-empty-image{content:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA6CAYAAAAHkoFsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABCiSURBVHgB7VtLj2VVFV5rn0tXJ902ktjppgEJ0iRAGgUsiQk/wJGPhBgxxJg4ZqYDRjqXmSMTTRyYGGYOYODE+AiI4RFaIDSgNII8BIzBQDdQdc/eru/71j637IKuOt0VGegJ1H2cffbda+31+Na3dpv9D18+Z/BzL/ztgeJezVrlw+6ju7XW8J21Ev/74GNreF+ae6utlFpiiHsZMRLj4k8tHvcLn6uYI2aL9xXjqtX4HA+55q14P8Rv4YePHL7sB7ZHV5k1urVSaxtClKFhyRYSNPOQqcQfzOUhSugHklSv8eq1hjSx8rEOLcfEg6XGBFAN1sA5+B7ThK4KNyVkj9fCNeZvzFzvngoP4WgrDYvighqFxTZCiFbGWHwbsVESqPK1lgKVSIgh9FZiOBRQugI0c0tB43PlZ/d8vmqtsyx1p2sxZ3CV9p37CxXQnOObkBsbWmH1xt2yOjbIi+3HomND427RW6v42nkDCqBjwNLhH6HPQv+pUFAMbXARTApr2tOdnyW8aefhudxFp7O6XDoExcqrVDMaNELDraM83cpQESwaNtPo5iWUJl+GKcQOx/8GN+dGw/fxeaB6EGagoT28ZmkSPie/azTxlr6o19ji2GvohP6JjY3Fj3ABbiq3daDS4vka30FYrzLnUBGMJuag2dM9sPvQUxgNrKqEWe2p2c8Sfuw+Df+GAuCvGayoBAaxSj+t8dpk2V6pkDpIga7flE+UDJaDy6ocOoxnOabRZaDHSkVWxYePR/jC5TnN03KxtgpEIQOc06kU7DwUYHSPVIBTKORCOLAr8EthfL5qp+M/KcD73IXPtmofn89nqsrYBi/gZ4bkBveGsTZleVf+dqXAijAHJw/rQS432QNiABwizCJdpUIBYfs1LWTU9wwEggJ7eM3SZO15GoENPtlo/hBZPmraTZ/SYCtENyMDuLcRO+9KX9BgSxwAK2lKldzlWrs7wVUKf0dZ4+NLdZYBzpiQw3rh1Q05nvmvNQXDZkJ0RjeA7RcMcw0IU5aVM9lVWAQxY9FfGk7MVQb4PIBCGldBuPHy6t//+U0bI5kMgfowehzasC/ySHxVLsFr7ELce9vG315z2WVv753wkJWmzhjN5Cw7Z9av2lG8tUHhypnFYgeZ+Og4sf3IgM3p7EiN0AJArf6LXF7g8sQJSvNIngOgBTa/1i8KW0SCGDHY2rhc1sEXdbm5iYfquLT6yYWdjJXsnfAnbrjm9o+6d+rUi1+Kff0uBG7KxonYGoVrehmRtgaaiQXSa2NxVQCNtUBtiWAz3zvDQ5q9AR0ZjQQ6M6ZFwYJwrbaEvTTrGGIX11yzP+9MLr81bbFkQPBHmuPeKlUQAQ0DANvkAo0WAMkR81AWuaocai1HxLeR6xn1VAtI1tAJiyT4T1yqBj74wHeMD3uWOkbspqv4YLbi3C1jBHe+EMgA9FIjLA9dGUFZP9MEdr3AdbdiBSbaQtDU06B3HCDADaeIaYZMw2s7r5k7/+ifnr9jKHas5X5RpQXRB3Vc/K0joSj8C86r71W2ItIUjBn9OBbBHI6QlTYsw6XDwk0htECq2+99sfhj24y3i/Kt2LHDwv0AzBjIsFmqfIJRsbE8gOw95aJm0HjgAMKAZYxZxI3Y+l0JH0PviJ+9DUiiCWHTbyu3I0EoLJkbUSs3DWuB7rU+eaSxXqnafcQ9onMnOHGG7FGI3n9x/Nor7tuyjkdffOn178fENwApsRqkAvhf7HNTUQhRWSF2nTR9QA5GRoEXML/A9PbvJHtGFxN0JH7OnGsTblfJyZRGM1bezRInc7PL+1jPZzmjWrynRiE4Exw+eHC4/9yFbLy//BWiP/ACY0cFlHYWC6I7BIUrEWRVOazwD+MqQp1V6HOXMJiDaiPoSojKEFJyAgkkNMfXSSkt8f2U+5172zokxULHRgJD5EWCnmZnjx49embbQvYvzoypKMQOhf3qElKECHF+romvtAzGhMKCqKr2xRo2fJdm/4Wbr7/zw24+/uRzP4+XdbmoiJUqLTBvmTSHH2PC0VMZ5wV7K7muFUQFkj10nvUwwEFiU+mL6E7YI0KjCGOTPfAqXsW6myjNoK4IlaztIuLtkOpo5hmdhc6xtCw89F4hjfVqU2nGIM7B2nU5g1xli5L+84qAe6BWoZia2YLQP+gvHxD8iYURiSsTuog/mBPrBlQD/Mx44GVj3LjYVMfbg2I7zTEBCbF5WZWySFFczfR58nU9W7zHivjuqdOnj5z7S3X0g5ZulySPu3d+IPg/YyxiLcD3I0KiqkE+z7K4V4O7Y3zOu/MBx34dOPVVMUgByYahMhu3JcGLq7r7chMMk2lzh13oQ0rBnhC+qQD4cIWP4xKIBgLTymhPoL4Y44HwQ1jWC8Iywr5GkNfEmvK3m4kls7WLNPvbbr7+Z7bDdfLpP38VLpkpZqBCalJ6hPp671vK4QN2YNs8IcKRpMSg3crYJkUxpIDjCBRfwgfAi4ESQ5ir4PVKYmH+Qk2mdxd5fg8Qnq8Y1/yiqTpzxQxXJphcoJXNzTNHz52lKnoTzeIZlcONmJjIMZFgY5wrSYsrtYrybtAKMwvl2gXCu3jhnWGu1+ODan4WsBTUJrzgSqOx2E3fjrtDqoNSFOBqh68r/6+ir8UbgNCFKZDhxe+OA+MBUmOmQd/YGdsv/vDY0/fHsKtcPHRVR0bbkGlbqE2lEv28JWifIKx4nJqkvq/YXWYmRm68xsAxarrim+3y+O7k1oXEHh9so6XiVAor6QFMZoLn91n1YUlJ65Y2+RYCBuolkoI7Ch+ruzqevKqJYBO8laMKhUfZ2Yi5CaWIevN+5fuqGOwENy4YwNRHNm6UBVgnbrBLiYPOMaBkaPkuKbLUYFM9LCuoYjcR/xDaWlNJS+RLnkThx5CkdhReCEwkBcGMfoZKSG6CqdSFL1pidu6tLN6yAccFqvuWnkiUqCissqwogFfb/MS5C4l21uUmEzcyQ6KHxI2QBof+AzIOnJx231haBQzO4sZVBWA/2rLsnOcj2pcHYqGHsgYXiaQqBZ5Fc2aGZpFlX7dONIq3ZLGuDcoGjGeN2RIMc1uFUJCbaSXDsE141SQZqQkjgOqiBHYVS5a1vXBAIw9QiuU6eEfFkGjvmG7fTrLb4vbbTtxju7weeeLUNxKlJd6nZFRR5y9SMUo6GpP5vxbhAlrD9skVQFwZrhVtv2pHcj/UkIhBlQrNROwwR0hgkmAqh31jVzs/42IxTm7WBKwoLxk6RSBx71tr+aaWnhAvZWSf79h24e1yuEkwB9huo9sRtNAmGYCtyCssLW2UGRDzTqoRDbQrjntWqmuryk8VXa8AFR3RVioKGFwAU4WnwpLe7qnvim1z13aI3UimjTZVjknJ4b1gNudadYY8sUDOOzBFRGj4sHR67jWvaYFNqdNhAsQHILrRlMeFwtMpO0RNX9YDMgJY5fpTz7x45003XnPfgw8++4lLP7X2nZD+UFOl1oVF7TJ2qtyI3RIoSeqsElV9gQNk5TSORJn7bPj86dMvH14sIqYPi3h+E+LS+t56ffnE+voVZ3eRDVfXw48/8yYZSBL2wleyUJKNLTGCgqQoCAhDfKNqT2mU6QuLLcO/FDD9oEpeYQcJRrWNptzZdF/PMQiqN9DH1twJzp8ltubSWhq6QPLbAu3ce+WVh5+ftfPMbuzHtSxNyTB7hmntBCkNyyRoQ0sqjDFA5JYWKNR2qYIg7cV6m1suLYvKcjixj2hsdsfUKMweHwBRtr+b+ELSf+L8yTq2mmxA6GBjY+Smz2xXRe+AdJKL3sruaptaTQxrGROMWASfGQOyHFZDw89sbtj3Pnvjteub7218zW34yRZKLPF9L4lZJbpgbOvtsdLHk8z0zjoJGtYV1+H9iIwSr2Dc2prS4IXw9lidNlboTTuWJ4kUryxrfiYAQmYOK9r30MK96zdf9xtMduut178WLz998tQL6zHvLdluyCRBMxtJJzeb4HTr7LC4MyFLKaTyOEgDgbv2ww/2LV/aXw9wynf55x1O/o93Ns7OF55mbIC7QbwgGKmfLOrIhQOT3LLOffEgQuJCpiOva4vxsW0aNXsg/tyqeCkd51EMlmyijUnSjr1uVyJI2iz5gsq1lGCuz7533aevfut84syv6trq0JAnm5tdSgKQ1qaSdlXVCaeL7Y3Fvbe8ZHuqMzsk8kNjV6xwm5hhmhGrutZPb6ha3DJe5wPCzPftAuHZjItaVTBr7DWJtMnslqQqF0SezbrAxoajD3qWTNDdMfjbfd5nn3352Pvjxl1qy7RsSfI8nwm7svE5kaJlRZnBFB4KP363yapiKDqcUdVVO7OTPLNS3UOPPHkmC5XVAcJeAdLsVAxNZS8/l57ueuqr2a1+Jeb4ZXwO7s6/EvcP9BppSmtEjyhcfUqDlu1x08A6LvbfddNnjrxhF3DNPIqm4tEY9FzkqXIubrvQ15SYkn3uZaqAUPbVoKirIvvc7dmSYDoUkNEeKp8zixoPPqA8ZkIDjixZWbqfnYdVLlj4rNOKyljV6TRjVsS8WbNXHynRxuz+qANWehZQ4ZOEY2+KmKCwdGwKdROaEx+g0po/Amhbyjjxgv8N4bPaShJWS9bBLBZUJfnmmpmQqYcmnvW4MoJqfMSPPHZpyR2YpfX0EO4EOCqhPeHxxA6nhYUE95x67q/o2SEOTa6ByQa1xVmBiOgY2QxCxh2GxTsXcAhRHRpXAKviywVlmYoyBzMgdfJWPt97dWQgkzBJgpNrhdmjTzcqbppMW2rPAichtXgVnVFzuwXfLRWNx3ym6fgeTURssDNtVHFMESvq8o3ZB5JUybXs8WUPPg8NaXfYRBy2NC4S7ZlITu9HCnqzg4C4HyoW38fU2KZGaaa1KWXKwwRmeppzz9jAA495zndilvMV+LrqwCRMbT62Fz8HUmmQGRPDVnHuHKOgZRJKNE+b/DurPzUfkqdSuuQW9XYW6STP4BIvr8Wsr/qAI72eZ12kGZrAwDjCswTOiMiQRO2RjZJVWslCTAGlvjlPeB2uLy3VbHmKyjM6p2JIPIhl6s0KT2ImfXdCcbKAPHuraC7UUFdpHcPK/Z87ce2PbY+vuYcQk05KvxdVCdOrna7KbncR9d3HswK0pLLp8+w2KrwL7QdfF9oaOU6dX0v0XPPgzp5fcwNep5BobVXAg7Ekd6tMMVlMpmVWaKvEnGnCLOtYpbgkUFOBxMia01YNgb2+Zk36u4dPtu0zuFAb9zfRH4ELdZPkg6KvkCpeV0jQtvwzE5XrBAFj8tdVvL29Ek70ik+nllipM21ZnvLhOR4SfUoUPix/dOL48b+cT56LP4omn83jVMQB6fsANiXJTXUUrBMevSTN/n3juTpGdbIwaHjCBTxpz/j6yrh/DIQCMbPpdI6zR6HUVdnBUHBzxeODOy19VqrzZGC72NP3mQXykFDJlgboE36u6vErU/QssOXcDxWoNEgyZCJI4rlsgGbj0voZoTyZrfP7OceQVSZ1ttzcawJzatgkLN2iF5PatfuyXxmEmnRjVny975b4RznReBZDViLBrJOiSVpSK/zHFkxbaowk2LEt1T8tjuTRJbvw6Hlm77a1D6OFKwAKbabdmdJ9dl5cDKzUlv8mR2J0lKas0HRnalqo6dfzRcg75leyPxVMiZrZuWHATbbHl9ELtv9fH339G/7DwlISq4BTAAAAAElFTkSuQmCC\")}.c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}"]
+                },] }
+    ];
+    SdPopupExport.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: loading.SdLoadingService },
+        { type: _export.SdExportService },
+        { type: notify.SdNotifyService },
+        { type: translate.SdTranslateService }
+    ]; };
+    SdPopupExport.propDecorators = {
+        modal: [{ type: core.ViewChild, args: ['modal',] }],
+        listGroups: [{ type: core.ViewChild, args: ['listGroups',] }],
+        export: [{ type: core.Output }],
+        _tableOption: [{ type: core.Input, args: ['tableOption',] }],
+        configuration: [{ type: core.Input }]
+    };
+
+    var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _cacheObjValues, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _getExportColumns$1, _updateSelectedItems, _loadValues, _format;
     var SdTable = /** @class */ (function () {
         function SdTable(ref, loadingService, tableConfiguration, tableConfigurationService, exportService, notifyService, gridFilterService) {
             var _this = this;
@@ -1739,15 +2141,18 @@
                 var _a, _b;
                 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, _12, _13, sheet, _14, _15, _16, e_6_1;
-                var e_6, _17;
+            this.onExport = function (args) { return __awaiter(_this, void 0, void 0, function () {
+                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _12, file, isCSV, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _13, _14, sheet, _15, _16, _17, e_6_1;
+                var e_6, _18;
                 var _this = this;
-                return __generator(this, function (_18) {
-                    switch (_18.label) {
+                return __generator(this, function (_19) {
+                    switch (_19.label) {
                         case 0:
-                            _18.trys.push([0, , 18, 19]);
-                            columns_2 = __classPrivateFieldGet(this, _getExportColumns).call(this);
+                            _12 = Object.assign({}, args), file = _12.file, isCSV = _12.isCSV;
+                            _19.label = 1;
+                        case 1:
+                            _19.trys.push([1, , 21, 22]);
+                            columns_2 = __classPrivateFieldGet(this, _getExportColumns$1).call(this, args === null || args === void 0 ? void 0 : args.columns);
                             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;
                             total_1 = this.total;
@@ -1965,113 +2370,126 @@
                                     }
                                 });
                             }); };
-                            _18.label = 1;
-                        case 1:
-                            if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
+                            _19.label = 2;
+                        case 2:
+                            if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 4];
                             promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
                             pageNumber_1++;
                             if (promises_1.length < batch) {
-                                return [3 /*break*/, 1];
+                                return [3 /*break*/, 2];
                             }
                             return [4 /*yield*/, handleData()];
-                        case 2:
-                            _18.sent();
-                            return [3 /*break*/, 1];
                         case 3:
-                            if (!(promises_1.length > 0)) return [3 /*break*/, 5];
-                            return [4 /*yield*/, handleData()];
+                            _19.sent();
+                            return [3 /*break*/, 2];
                         case 4:
-                            _18.sent();
-                            _18.label = 5;
+                            if (!(promises_1.length > 0)) return [3 /*break*/, 6];
+                            return [4 /*yield*/, handleData()];
                         case 5:
-                            if (!isCSV) return [3 /*break*/, 7];
+                            _19.sent();
+                            _19.label = 6;
+                        case 6:
+                            if (!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 8];
+                            return [4 /*yield*/, this.exportService.exportByTemplate({
+                                    filePath: file.filePath,
+                                    fileName: file.fileName,
+                                    columns: columns_2,
+                                    items: items_1,
+                                })];
+                        case 7:
+                            _19.sent();
+                            return [2 /*return*/];
+                        case 8:
+                            if (!isCSV) return [3 /*break*/, 10];
                             return [4 /*yield*/, this.exportService.exportCSV({
                                     columns: columns_2,
                                     items: items_1,
                                     fileName: (_p = (_o = this.tableOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName,
                                 })];
-                        case 6:
-                            _18.sent();
+                        case 9:
+                            _19.sent();
                             return [2 /*return*/];
-                        case 7:
+                        case 10:
                             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];
-                            _18.label = 8;
-                        case 8:
-                            _18.trys.push([8, 14, 15, 16]);
-                            _12 = __values(this.tableOption.export.sheets), _13 = _12.next();
-                            _18.label = 9;
-                        case 9:
-                            if (!!_13.done) return [3 /*break*/, 13];
-                            sheet = _13.value;
-                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 12];
-                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 10];
+                            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*/, 19];
+                            _19.label = 11;
+                        case 11:
+                            _19.trys.push([11, 17, 18, 19]);
+                            _13 = __values(this.tableOption.export.sheets), _14 = _13.next();
+                            _19.label = 12;
+                        case 12:
+                            if (!!_14.done) return [3 /*break*/, 16];
+                            sheet = _14.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 15];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 13];
                             sheets.push({
                                 name: sheet.name,
                                 items: sheet.items,
                                 fields: sheet.fields,
                             });
-                            return [3 /*break*/, 12];
-                        case 10:
-                            _15 = (_14 = sheets).push;
-                            _16 = {
+                            return [3 /*break*/, 15];
+                        case 13:
+                            _16 = (_15 = sheets).push;
+                            _17 = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
-                        case 11:
-                            _15.apply(_14, [(_16.items = _18.sent(),
-                                    _16.fields = sheet.fields,
-                                    _16)]);
-                            _18.label = 12;
-                        case 12:
-                            _13 = _12.next();
-                            return [3 /*break*/, 9];
-                        case 13: return [3 /*break*/, 16];
                         case 14:
-                            e_6_1 = _18.sent();
-                            e_6 = { error: e_6_1 };
-                            return [3 /*break*/, 16];
+                            _16.apply(_15, [(_17.items = _19.sent(),
+                                    _17.fields = sheet.fields,
+                                    _17)]);
+                            _19.label = 15;
                         case 15:
+                            _14 = _13.next();
+                            return [3 /*break*/, 12];
+                        case 16: return [3 /*break*/, 19];
+                        case 17:
+                            e_6_1 = _19.sent();
+                            e_6 = { error: e_6_1 };
+                            return [3 /*break*/, 19];
+                        case 18:
                             try {
-                                if (_13 && !_13.done && (_17 = _12.return)) _17.call(_12);
+                                if (_14 && !_14.done && (_18 = _13.return)) _18.call(_13);
                             }
                             finally { if (e_6) throw e_6.error; }
                             return [7 /*endfinally*/];
-                        case 16: return [4 /*yield*/, this.exportService.export({
+                        case 19: return [4 /*yield*/, this.exportService.export({
                                 columns: columns_2,
                                 items: items_1,
                                 fileName: (_t = (_s = this.tableOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
                                 sheets: sheets,
                             })];
-                        case 17:
-                            _18.sent();
+                        case 20:
+                            _19.sent();
                             return [2 /*return*/];
-                        case 18:
+                        case 21:
                             this.isExporting = false;
                             this.exportTitle = "Export";
                             this.ref.detectChanges();
                             return [7 /*endfinally*/];
-                        case 19: return [2 /*return*/];
+                        case 22: return [2 /*return*/];
                     }
                 });
-            }); });
-            _getExportColumns.set(this, function () {
+            }); };
+            _getExportColumns$1.set(this, function (columns) {
                 var _a, _b;
-                var gridColumns = [];
+                var tableColumns = [];
+                // Lấy column từ option
                 _this.tableOption.columns
                     .filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
                     .forEach(function (column) {
                     var _a;
                     if (column.type === 'children') {
                         (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(function (childColumn) {
-                            gridColumns.push(childColumn);
+                            tableColumns.push(childColumn);
                         });
                         return;
                     }
-                    gridColumns.push(column);
+                    tableColumns.push(column);
                 });
+                // Lấy columns từ configuration
                 if (_this.configuration) {
-                    var columns_4 = __spread(gridColumns);
+                    var columns_4 = __spread(tableColumns);
                     var _12 = _this.configuration, firstColumns = _12.firstColumns, secondColumns = _12.secondColumns;
                     var displayColumns = __spread(firstColumns, secondColumns).reduce(function (first, next) {
                         var column = _this.tableOption.columns.find(function (e) { return e.field === next.field; });
@@ -2084,18 +2502,20 @@
                         var children = column.children;
                         return __spread(first, children);
                     }, []);
-                    gridColumns = displayColumns
+                    tableColumns = displayColumns
                         .map(function (e) { return (Object.assign(Object.assign({}, e), { data: columns_4.find(function (e1) { return e1.field === e.field; }) })); })
                         .filter(function (e) { return !!e.data; })
                         .map(function (e) { return e.data; });
                 }
-                return __spread(gridColumns, (((_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); })) || []));
+                // Chỉ lấy các columns được thiết lập
+                var columnFields = columns.map(function (e) { return e.field; });
+                return __spread(tableColumns, (((_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); })) || [])).filter(function (column) { return !(columnFields === null || columnFields === void 0 ? void 0 : columnFields.length) || columnFields.includes(column.field); });
             });
             this.exportExcel = function () {
-                __classPrivateFieldGet(_this, _onExport).call(_this);
+                _this.onExport();
             };
             this.exportCSV = function () {
-                __classPrivateFieldGet(_this, _onExport).call(_this, true);
+                _this.onExport({ isCSV: true });
             };
             this.onFilterChange = function () {
                 var _a, _b;
@@ -2630,11 +3050,11 @@
         });
         return SdTable;
     }());
-    _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _cacheObjValues = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _getExportColumns = new WeakMap(), _updateSelectedItems = new WeakMap(), _loadValues = new WeakMap(), _format = new WeakMap();
+    _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _cacheObjValues = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _getExportColumns$1 = new WeakMap(), _updateSelectedItems = new WeakMap(), _loadValues = new WeakMap(), _format = new WeakMap();
     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\r\n            mat-table\r\n            [dataSource]=\"groupedItems\"\r\n            [trackBy]=\"trackBy\"\r\n            matSort\r\n            [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n            multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"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 class=\"text-center p-0\" mat-header-cell *matHeaderCellDef [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 px-15\"\r\n                    style=\"width: 50px\"\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 p-0\" mat-cell *matCellDef=\"let item\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection px-15\"\r\n                    style=\"width: 50px\"\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\" sticky>\r\n              <th\r\n                class=\"p-0\"\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 class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [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          <ng-container *sdMobileTablet>\r\n            <sd-button\r\n              *ngIf=\"tableFilter\"\r\n              class=\"mr-8\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"tableFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          </ng-container>\r\n          <ng-container *sdDesktop>\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>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else exportable\">\r\n              <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #exportable>\r\n              <sd-button class=\"mr-8\" [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\r\n            mat-table\r\n            [dataSource]=\"groupedItems\"\r\n            [trackBy]=\"trackBy\"\r\n            matSort\r\n            [matSortDisabled]=\"!tableOption.sort?.enable\"\r\n            multiTemplateDataRows>\r\n            <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                  <ng-container *ngIf=\"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 class=\"text-center p-0\" mat-header-cell *matHeaderCellDef [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 px-15\"\r\n                    style=\"width: 50px\"\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 p-0\" mat-cell *matCellDef=\"let item\">\r\n                <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection px-15\"\r\n                    style=\"width: 50px\"\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\" sticky>\r\n              <th\r\n                class=\"p-0\"\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 class=\"d-block px-8\" [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [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          <ng-container *sdMobileTablet>\r\n            <sd-button\r\n              *ngIf=\"tableFilter\"\r\n              class=\"mr-8\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"tableFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          </ng-container>\r\n          <ng-container *sdDesktop>\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>\r\n          <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else exportable\">\r\n              <sd-button class=\"mr-8\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #exportable>\r\n              <sd-button class=\"mr-8\" [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              <button *ngIf=\"tableOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                <span>Thi\u1EBFt l\u1EADp</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <ng-container *sdDesktop>\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          </ng-container>\r\n        </div>\r\n        <ng-container *sdDesktop>\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        </ng-container>\r\n        <ng-container *sdMobileTablet>\r\n          <mat-paginator\r\n            [class.d-none]=\"tableOption.paginate?.hidden\"\r\n            [length]=\"total\"\r\n            [pageSize]=\"tableOption.paginate?.pageSize\"\r\n            hidePageSize=\"true\"></mat-paginator>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export\r\n      *ngIf=\"tableOption.export?.visible\"\r\n      [configuration]=\"configuration\"\r\n      [tableOption]=\"tableOption\"\r\n      (export)=\"onExport($event)\"\r\n      #sdPopupExport></sd-popup-export>\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', [
@@ -2658,6 +3078,7 @@
     SdTable.propDecorators = {
         table: [{ type: core.ViewChild, args: [table.MatTable,] }],
         popupConfiguration: [{ type: core.ViewChild, args: [SdPopupConfiguration,] }],
+        sdPopupExport: [{ type: core.ViewChild, args: [SdPopupExport,] }],
         sdScroll: [{ type: core.ViewChild, args: [common.SdScrollDirective,] }],
         quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],
         tableFilter: [{ type: core.ViewChild, args: [SdTableFilter,] }],
@@ -3702,7 +4123,7 @@
                 }
                 var from = page * pageSize + 1;
                 var to = from + (length - page * pageSize > pageSize ? pageSize : length - page * pageSize) - 1;
-                return from + "-" + to + " tr\u00EAn " + length;
+                return from + "-" + to + "/" + length;
             };
             return _this;
         }
@@ -3731,6 +4152,7 @@
                         slideToggle.MatSlideToggleModule,
                         checkbox.MatCheckboxModule,
                         list.MatListModule,
+                        chips.MatChipsModule,
                         table$1.CdkTableModule,
                         dragDrop.DragDropModule,
                         form.SdFormModule,
@@ -3752,6 +4174,7 @@
                         SdPopupConfiguration,
                         SdTableFilter,
                         SdPopupFilter,
+                        SdPopupExport,
                         // Pipes
                         SdCommandFilterPipe,
                         SdCommandDisablePipe,
@@ -3808,29 +4231,30 @@
     exports.TABLE_CONFIG = TABLE_CONFIG;
     exports.ɵa = SdTableQuickAction;
     exports.ɵb = SdDesktopCell;
+    exports.ɵba = SdGroupPipe;
     exports.ɵc = SdDesktopCellView;
     exports.ɵd = SdDesktopCommand;
     exports.ɵe = SdColumnInlineFilter;
     exports.ɵf = SdPopupConfiguration;
     exports.ɵg = SdTableConfigurationService;
     exports.ɵi = TABLE_CONFIG;
-    exports.ɵj = SdTableFilter;
-    exports.ɵk = SdPopupFilter;
-    exports.ɵl = SdMaterialSubInformationDefDirective;
-    exports.ɵm = SdMaterialFooterDefDirective;
-    exports.ɵn = SdTableFilterService;
-    exports.ɵo = SdCommandFilterPipe;
-    exports.ɵp = SdCommandDisablePipe;
-    exports.ɵq = SdCommandIconPipe;
-    exports.ɵr = SdCommandTitlePipe;
-    exports.ɵs = SdColumnTooltipPipe;
-    exports.ɵt = SdFilterColumnPipe;
-    exports.ɵu = SdFilterExternalPipe;
-    exports.ɵv = SdSelectionActionFilterPipe;
-    exports.ɵw = SdSelectionVisiblePipe;
-    exports.ɵx = SdSelectionDisablePipe;
-    exports.ɵy = SdSelectionVisibleSelectAllPipe;
-    exports.ɵz = SdGroupPipe;
+    exports.ɵj = SdPopupExport;
+    exports.ɵk = SdTableFilter;
+    exports.ɵl = SdPopupFilter;
+    exports.ɵm = SdMaterialSubInformationDefDirective;
+    exports.ɵn = SdMaterialFooterDefDirective;
+    exports.ɵo = SdTableFilterService;
+    exports.ɵp = SdCommandFilterPipe;
+    exports.ɵq = SdCommandDisablePipe;
+    exports.ɵr = SdCommandIconPipe;
+    exports.ɵs = SdCommandTitlePipe;
+    exports.ɵt = SdColumnTooltipPipe;
+    exports.ɵu = SdFilterColumnPipe;
+    exports.ɵv = SdFilterExternalPipe;
+    exports.ɵw = SdSelectionActionFilterPipe;
+    exports.ɵx = SdSelectionVisiblePipe;
+    exports.ɵy = SdSelectionDisablePipe;
+    exports.ɵz = SdSelectionVisibleSelectAllPipe;
 
     Object.defineProperty(exports, '__esModule', { value: true });