@sd-angular/core 1.0.43 → 1.0.46

package/bundles/sd-angular-core-grid-material.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/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('object-hash'), require('@sd-angular/core/setting'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/utility'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', 'object-hash', '@sd-angular/core/setting', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/utility', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer'], 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['grid-material'] = {}), global['sd-angular'].core.common, global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['object-hash'], global['sd-angular'].core.setting, global['ngx-device-detector'], global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core.utility, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer']));
-}(this, (function (exports, common$1, core, paginator, sort, animations, uuid, rxjs, notify, dragDrop, operators, hash, setting, ngxDeviceDetector, loading, translate, _export, forms, utility, quickAction, common, formField, icon, input, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('object-hash'), require('@sd-angular/core/setting'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/utility'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', 'object-hash', '@sd-angular/core/setting', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/utility', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer'], 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['grid-material'] = {}), global['sd-angular'].core.common, global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['object-hash'], global['sd-angular'].core.setting, global['ngx-device-detector'], global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.utility, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer']));
+}(this, (function (exports, common$1, core, paginator, sort, animations, uuid, rxjs, notify, dragDrop, operators, hash, setting, ngxDeviceDetector, loading, translate, _export, forms, quickAction, common, formField, icon, input, table, progressSpinner, table$1, scrolling, menu, slider, button, utility, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,6 +29,7 @@
 
     var uuid__namespace = /*#__PURE__*/_interopNamespace(uuid);
     var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
+    var hash__namespace = /*#__PURE__*/_interopNamespace(hash);
 
     var SdMaterialCellDefDirective = /** @class */ (function () {
         function SdMaterialCellDefDirective(templateRef) {
@@ -1647,74 +1648,58 @@
         { type: undefined, decorators: [{ type: core.Inject, args: [GRID_MATERIAL_CONFIG,] }, { type: core.Optional }] }
     ]; };
 
-    var _prefix$1, _cache$1;
-    var SdGridService = /** @class */ (function () {
-        function SdGridService(utilityService) {
+    var _cache$1;
+    var SdColumnValuesPipe = /** @class */ (function () {
+        function SdColumnValuesPipe() {
             var _this = this;
-            this.utilityService = utilityService;
-            _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
             _cache$1.set(this, {});
-            this.loadValues = function (column, key) { return __awaiter(_this, void 0, void 0, function () {
-                var _a, _b, _c, _d, hashKey, items;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+            this.transform = function (value, column) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _d, _e, _f, items, valueField, displayField, key, values;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             if (column.type !== 'values' || !((_a = column.option) === null || _a === void 0 ? void 0 : _a.items) || !((_b = column.option) === null || _b === void 0 ? void 0 : _b.valueField) || !((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayField)) {
-                                return [2 /*return*/, {
-                                        values: [],
-                                        obj: {}
-                                    }];
+                                return [2 /*return*/, value];
                             }
-                            hashKey = hash__default['default']({
-                                prefix: __classPrivateFieldGet(this, _prefix$1),
-                                field: column.field,
-                                key: key,
-                            });
-                            if (!!__classPrivateFieldGet(this, _cache$1)[hashKey]) return [3 /*break*/, 4];
-                            items = [];
-                            if (!(typeof ((_d = column.option) === null || _d === void 0 ? void 0 : _d.items) === 'function')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, column.option.items()];
+                            _f = column.option, items = _f.items, valueField = _f.valueField, displayField = _f.displayField;
+                            if (!(typeof (items) === 'function')) return [3 /*break*/, 3];
+                            key = hash__namespace(Object.assign(Object.assign({}, column), { value: value }));
+                            if (!!__classPrivateFieldGet(this, _cache$1)[key]) return [3 /*break*/, 2];
+                            return [4 /*yield*/, items(value, true)];
                         case 1:
-                            items = _e.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            items = column.option.items;
-                            _e.label = 3;
-                        case 3:
-                            __classPrivateFieldGet(this, _cache$1)[hashKey] = {
-                                values: items,
-                                obj: this.utilityService.arrayToObject(items, column.option.valueField)
+                            values = _g.sent();
+                            __classPrivateFieldGet(this, _cache$1)[key] = {
+                                items: values,
+                                obj: Array.toObject(values, valueField)
                             };
-                            _e.label = 4;
-                        case 4: return [2 /*return*/, __classPrivateFieldGet(this, _cache$1)[hashKey]];
+                            _g.label = 2;
+                        case 2: return [3 /*break*/, 4];
+                        case 3:
+                            key = hash__namespace(Object.assign({}, column));
+                            if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                                __classPrivateFieldGet(this, _cache$1)[key] = {
+                                    items: items || [],
+                                    obj: Array.toObject(items, valueField)
+                                };
+                            }
+                            _g.label = 4;
+                        case 4: return [2 /*return*/, (_e = (_d = __classPrivateFieldGet(this, _cache$1)[key].obj[valueField]) === null || _d === void 0 ? void 0 : _d[displayField]) !== null && _e !== void 0 ? _e : value];
                     }
                 });
             }); };
-            this.getValues = function (column, key) {
-                var hashKey = hash__default['default']({
-                    prefix: __classPrivateFieldGet(_this, _prefix$1),
-                    field: column.field,
-                    key: key,
-                });
-                return __classPrivateFieldGet(_this, _cache$1)[hashKey] || {
-                    values: [],
-                    obj: {}
-                };
-            };
         }
-        return SdGridService;
+        return SdColumnValuesPipe;
     }());
-    _prefix$1 = new WeakMap(), _cache$1 = new WeakMap();
-    SdGridService.decorators = [
-        { type: core.Injectable }
-    ];
-    SdGridService.ctorParameters = function () { return [
-        { type: utility.SdUtilityService }
-    ]; };
+    _cache$1 = new WeakMap();
+    SdColumnValuesPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnValues'
+                },] }
+    ];
 
     var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
     var SdGridMaterial = /** @class */ (function () {
-        function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
+        function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, columnValuesPipe) {
             var _this = this;
             this.ref = ref;
             this.configuration = configuration;
@@ -1722,7 +1707,7 @@
             this.exportService = exportService;
             this.notifyService = notifyService;
             this.translateService = translateService;
-            this.gridService = gridService;
+            this.columnValuesPipe = columnValuesPipe;
             this.key = uuid.v4();
             this.localItems = [];
             this.items = [];
@@ -1753,11 +1738,11 @@
             this.isSelectAll = false;
             this.exportTitle = 'Export';
             _initCellDef.set(this, function () {
-                var e_1, _t;
+                var e_1, _v;
                 _this.cellDef = {};
                 try {
-                    for (var _u = __values(_this.sdCellDefs), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var cellDef = _v.value;
+                    for (var _w = __values(_this.sdCellDefs), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var cellDef = _x.value;
                         if (cellDef.sdMaterialCellDef) {
                             _this.cellDef[cellDef.sdMaterialCellDef] = cellDef;
                         }
@@ -1766,35 +1751,35 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_t = _u.return)) _t.call(_u);
+                        if (_x && !_x.done && (_v = _w.return)) _v.call(_w);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
             });
             _initFilterDef.set(this, function () {
-                var e_2, _t;
+                var e_2, _v;
                 _this.filterDefs = [];
                 try {
-                    for (var _u = __values(_this.sdFilterDefs), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var filterDef = _v.value;
+                    for (var _w = __values(_this.sdFilterDefs), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var filterDef = _x.value;
                         _this.filterDefs.push(filterDef);
                     }
                 }
                 catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_t = _u.return)) _t.call(_u);
+                        if (_x && !_x.done && (_v = _w.return)) _v.call(_w);
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
             });
             _initFooterDef.set(this, function () {
-                var e_3, _t;
+                var e_3, _v;
                 _this.footerDef = {};
                 _this.hasFooter = false;
                 try {
-                    for (var _u = __values(_this.sdFooterDefs), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var footerDef = _v.value;
+                    for (var _w = __values(_this.sdFooterDefs), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var footerDef = _x.value;
                         if (footerDef.sdMaterialFooterDef) {
                             _this.hasFooter = true;
                             _this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
@@ -1804,7 +1789,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (_v && !_v.done && (_t = _u.return)) _t.call(_u);
+                        if (_x && !_x.done && (_v = _w.return)) _v.call(_w);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -1836,7 +1821,7 @@
                 var columns = _this.gridOption.columns;
                 var rawColumnFilter = filterInfo.rawColumnFilter, orderBy = filterInfo.orderBy, orderDirection = filterInfo.orderDirection, pageSize = filterInfo.pageSize, pageNumber = filterInfo.pageNumber;
                 var items = localItems.filter(function (item) {
-                    var e_4, _t;
+                    var e_4, _v;
                     var _a, _b, _c, _d;
                     try {
                         for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
@@ -1910,7 +1895,7 @@
                     catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (columns_1_1 && !columns_1_1.done && (_t = columns_1.return)) _t.call(columns_1);
+                            if (columns_1_1 && !columns_1_1.done && (_v = columns_1.return)) _v.call(columns_1);
                         }
                         finally { if (e_4) throw e_4.error; }
                     }
@@ -1968,37 +1953,37 @@
             _load$1.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
-                    var result, results, _t, error_1;
-                    return __generator(this, function (_u) {
-                        switch (_u.label) {
+                    var result, results, _v, error_1;
+                    return __generator(this, function (_w) {
+                        switch (_w.label) {
                             case 0:
                                 this.isLoading = true;
-                                _u.label = 1;
+                                _w.label = 1;
                             case 1:
-                                _u.trys.push([1, 8, 9, 10]);
+                                _w.trys.push([1, 8, 9, 10]);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 3];
                                 result = this.gridOption.items(filterReq);
                                 if (rxjs.isObservable(result)) {
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 2: return [2 /*return*/, _u.sent()];
+                            case 2: return [2 /*return*/, _w.sent()];
                             case 3:
                                 if (!force) return [3 /*break*/, 6];
                                 results = this.gridOption.items();
                                 if (!(results instanceof Promise)) return [3 /*break*/, 5];
-                                _t = this;
+                                _v = this;
                                 return [4 /*yield*/, results];
                             case 4:
-                                _t.localItems = _u.sent();
+                                _v.localItems = _w.sent();
                                 return [3 /*break*/, 6];
                             case 5:
                                 this.localItems = results;
-                                _u.label = 6;
+                                _w.label = 6;
                             case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, this.localItems, filterReq)];
                             case 7: return [3 /*break*/, 10];
                             case 8:
-                                error_1 = _u.sent();
+                                error_1 = _w.sent();
                                 this.notifyService.handle.error(error_1);
                                 return [3 /*break*/, 10];
                             case 9:
@@ -2012,8 +1997,8 @@
             });
             _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c;
-                return __generator(this, function (_t) {
-                    switch (_t.label) {
+                return __generator(this, function (_v) {
+                    switch (_v.label) {
                         case 0:
                             this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
                             this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
@@ -2023,7 +2008,7 @@
                             });
                             return [4 /*yield*/, ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items))];
                         case 1:
-                            _t.sent();
+                            _v.sent();
                             this.isSelectAll = this.items.every(function (e) { return e.isSelected; });
                             __classPrivateFieldGet(this, _updateSelectedItems).call(this);
                             return [2 /*return*/];
@@ -2034,11 +2019,11 @@
                 if (force === void 0) { force = true; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var data;
-                    return __generator(this, function (_t) {
-                        switch (_t.label) {
+                    return __generator(this, function (_v) {
+                        switch (_v.label) {
                             case 0: return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
                             case 1:
-                                data = _t.sent();
+                                data = _v.sent();
                                 __classPrivateFieldGet(this, _render).call(this, data);
                                 return [2 /*return*/];
                         }
@@ -2050,8 +2035,8 @@
                 if (pageSize === void 0) { pageSize = 10000; }
                 return __awaiter(_this, void 0, void 0, function () {
                     var _d, _e, result, filterInfo, result, exportedItems, results;
-                    return __generator(this, function (_t) {
-                        switch (_t.label) {
+                    return __generator(this, function (_v) {
+                        switch (_v.label) {
                             case 0:
                                 if (!((_d = this.gridOption.export) === null || _d === void 0 ? void 0 : _d.items)) return [3 /*break*/, 2];
                                 result = (_e = this.gridOption.export) === null || _e === void 0 ? void 0 : _e.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
@@ -2065,7 +2050,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 1: return [2 /*return*/, _t.sent()];
+                            case 1: return [2 /*return*/, _v.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
                                 if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
@@ -2074,7 +2059,7 @@
                                     result = result.toPromise();
                                 }
                                 return [4 /*yield*/, result];
-                            case 3: return [2 /*return*/, _t.sent()];
+                            case 3: return [2 /*return*/, _v.sent()];
                             case 4:
                                 exportedItems = [];
                                 if (!(typeof (this.gridOption.items) === 'function')) return [3 /*break*/, 8];
@@ -2082,15 +2067,15 @@
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
                             case 5:
-                                exportedItems = _t.sent();
+                                exportedItems = _v.sent();
                                 return [3 /*break*/, 7];
                             case 6:
                                 exportedItems = results;
-                                _t.label = 7;
+                                _v.label = 7;
                             case 7: return [3 /*break*/, 9];
                             case 8:
                                 exportedItems = this.gridOption.items;
-                                _t.label = 9;
+                                _v.label = 9;
                             case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
                         }
                     });
@@ -2130,13 +2115,13 @@
                 return ((_b = (_a = _this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
             });
             _onExport.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
-                var _f, _g, _h, _j, _k, _l, _m, _o, _p, file, columns_2, isCSV, pageSize, total, pageNumber, exportItems, items, _loop_1, this_1, sheets, _t, _u, sheet, _v, _w, _x, e_5_1;
-                var e_5, _y;
+                var _f, _g, _h, _j, _k, _l, _m, _o, _p, file, columns_2, isCSV, pageSize, total, pageNumber, exportItems, items, _loop_1, this_1, sheets, _v, _w, sheet, _x, _y, _z, e_5_1;
+                var e_5, _0;
                 var _this = this;
-                return __generator(this, function (_z) {
-                    switch (_z.label) {
+                return __generator(this, function (_1) {
+                    switch (_1.label) {
                         case 0:
-                            _z.trys.push([0, , 18, 19]);
+                            _1.trys.push([0, , 18, 19]);
                             file = args.file, columns_2 = args.columns, isCSV = args.isCSV;
                             pageSize = ((_g = (_f = this.gridOption) === null || _f === void 0 ? void 0 : _f.export) === null || _g === void 0 ? void 0 : _g.maxItemsPerRequest) || 1000;
                             total = this.total;
@@ -2145,13 +2130,13 @@
                             this.isExporting = true;
                             items = [];
                             _loop_1 = function () {
-                                var res, results, totalPage, percent, allColumns, allExportedColumns, _loop_2, exportItems_1, exportItems_1_1, item;
-                                var e_6, _t;
-                                return __generator(this, function (_u) {
-                                    switch (_u.label) {
+                                var res, results, totalPage, percent, allColumns, allExportedColumns, _loop_2, exportItems_1, exportItems_1_1, item, e_6_1;
+                                var e_6, _v;
+                                return __generator(this, function (_w) {
+                                    switch (_w.label) {
                                         case 0: return [4 /*yield*/, __classPrivateFieldGet(this_1, _exportedItems).call(this_1, pageNumber, pageSize)];
                                         case 1:
-                                            res = _u.sent();
+                                            res = _w.sent();
                                             if ('items' in res) {
                                                 exportItems = res.items;
                                                 total = res.total;
@@ -2165,11 +2150,11 @@
                                             if (!(results instanceof Promise)) return [3 /*break*/, 3];
                                             return [4 /*yield*/, results];
                                         case 2:
-                                            exportItems = _u.sent();
+                                            exportItems = _w.sent();
                                             return [3 /*break*/, 4];
                                         case 3:
                                             exportItems = results;
-                                            _u.label = 4;
+                                            _w.label = 4;
                                         case 4:
                                             totalPage = total / pageSize;
                                             percent = Math.round(pageNumber * 100.0 / totalPage);
@@ -2177,103 +2162,159 @@
                                             allColumns = __classPrivateFieldGet(this_1, _allColumns).call(this_1);
                                             allExportedColumns = __classPrivateFieldGet(this_1, _allExportedColumns).call(this_1);
                                             _loop_2 = function (item) {
-                                                var obj = {};
-                                                var handle = function (exportColumn) {
-                                                    var _a, _b;
-                                                    obj[exportColumn.field] = item[exportColumn.field];
-                                                    var column = allColumns.find(function (e) { return e.field === exportColumn.field; });
-                                                    var exportedColumn = allExportedColumns.find(function (e) { return e.field === exportColumn.field; });
-                                                    if (exportedColumn === null || exportedColumn === void 0 ? void 0 : exportedColumn.transform) {
-                                                        obj[exportedColumn.field] = exportedColumn.transform(item[exportedColumn.field], item);
-                                                        return;
-                                                    }
-                                                    if (!column) {
-                                                        return;
-                                                    }
-                                                    if (column.type === 'children' || column.type === 'children-col') {
-                                                        column === null || column === void 0 ? void 0 : column.children.forEach(function (childColumn) { return handle(childColumn); });
-                                                        return;
-                                                    }
-                                                    if (!columns_2.some(function (e) { return e.field === column.field; })) {
-                                                        return;
-                                                    }
-                                                    if (column.transform) {
-                                                        obj[column.field] = column.transform(item[column.field], item);
-                                                    }
-                                                    else if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
-                                                        obj[column.field] = '';
-                                                    }
-                                                    else if (column.type === 'string' || column.type === 'number') {
-                                                        // Nếu cell là string hoặc number thì gán bằng chính nó
-                                                        obj[column.field] = item[column.field];
+                                                var obj, handle, columns_3, columns_3_1, exportColumn, e_7_1;
+                                                var e_7, _v;
+                                                return __generator(this, function (_w) {
+                                                    switch (_w.label) {
+                                                        case 0:
+                                                            obj = {};
+                                                            handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
+                                                                var _q, _r, column, exportedColumn, date, date, date, _v, _w;
+                                                                return __generator(this, function (_x) {
+                                                                    switch (_x.label) {
+                                                                        case 0:
+                                                                            obj[exportColumn.field] = item[exportColumn.field];
+                                                                            column = allColumns.find(function (e) { return e.field === exportColumn.field; });
+                                                                            exportedColumn = allExportedColumns.find(function (e) { return e.field === exportColumn.field; });
+                                                                            if (exportedColumn === null || exportedColumn === void 0 ? void 0 : exportedColumn.transform) {
+                                                                                obj[exportedColumn.field] = exportedColumn.transform(item[exportedColumn.field], item);
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!column) {
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (column.type === 'children' || column.type === 'children-col') {
+                                                                                column === null || column === void 0 ? void 0 : column.children.forEach(function (childColumn) { return handle(childColumn); });
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!columns_2.some(function (e) { return e.field === column.field; })) {
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!column.transform) return [3 /*break*/, 1];
+                                                                            obj[column.field] = column.transform(item[column.field], item);
+                                                                            return [3 /*break*/, 10];
+                                                                        case 1:
+                                                                            if (!(item[column.field] === undefined || item[column.field] === null || item[column.field] === '')) return [3 /*break*/, 2];
+                                                                            obj[column.field] = '';
+                                                                            return [3 /*break*/, 10];
+                                                                        case 2:
+                                                                            if (!(column.type === 'string' || column.type === 'number')) return [3 /*break*/, 3];
+                                                                            // Nếu cell là string hoặc number thì gán bằng chính nó
+                                                                            obj[column.field] = item[column.field];
+                                                                            return [3 /*break*/, 10];
+                                                                        case 3:
+                                                                            if (!(column.type === 'bool')) return [3 /*break*/, 4];
+                                                                            // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
+                                                                            if (item[column.field]) {
+                                                                                obj[column.field] = ((_q = column.option) === null || _q === void 0 ? void 0 : _q.displayOnTrue) || 'True';
+                                                                            }
+                                                                            else {
+                                                                                obj[column.field] = ((_r = column.option) === null || _r === void 0 ? void 0 : _r.displayOnFalse) || 'False';
+                                                                            }
+                                                                            return [3 /*break*/, 10];
+                                                                        case 4:
+                                                                            if (!(column.type === 'date')) return [3 /*break*/, 5];
+                                                                            date = new Date(item[column.field]);
+                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
+                                                                            return [3 /*break*/, 10];
+                                                                        case 5:
+                                                                            if (!(column.type === 'datetime')) return [3 /*break*/, 6];
+                                                                            date = new Date(item[column.field]);
+                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm:ss');
+                                                                            return [3 /*break*/, 10];
+                                                                        case 6:
+                                                                            if (!(column.type === 'time')) return [3 /*break*/, 7];
+                                                                            date = new Date(item[column.field]);
+                                                                            obj[column.field] = Date.toFormat(date, 'HH:mm:ss');
+                                                                            return [3 /*break*/, 10];
+                                                                        case 7:
+                                                                            if (!(column.type === 'values')) return [3 /*break*/, 9];
+                                                                            // Nếu là values thì lấy giá trị của value được chọn
+                                                                            _v = obj;
+                                                                            _w = column.field;
+                                                                            return [4 /*yield*/, this.columnValuesPipe.transform(item[column.field], column)];
+                                                                        case 8:
+                                                                            // Nếu là values thì lấy giá trị của value được chọn
+                                                                            _v[_w] = _x.sent();
+                                                                            return [3 /*break*/, 10];
+                                                                        case 9:
+                                                                            obj[column.field] = item[column.field];
+                                                                            _x.label = 10;
+                                                                        case 10: return [2 /*return*/];
+                                                                    }
+                                                                });
+                                                            }); };
+                                                            _w.label = 1;
+                                                        case 1:
+                                                            _w.trys.push([1, 6, 7, 8]);
+                                                            columns_3 = (e_7 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
+                                                            _w.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:
+                                                            _w.sent();
+                                                            _w.label = 4;
+                                                        case 4:
+                                                            columns_3_1 = columns_3.next();
+                                                            return [3 /*break*/, 2];
+                                                        case 5: return [3 /*break*/, 8];
+                                                        case 6:
+                                                            e_7_1 = _w.sent();
+                                                            e_7 = { error: e_7_1 };
+                                                            return [3 /*break*/, 8];
+                                                        case 7:
+                                                            try {
+                                                                if (columns_3_1 && !columns_3_1.done && (_v = columns_3.return)) _v.call(columns_3);
+                                                            }
+                                                            finally { if (e_7) throw e_7.error; }
+                                                            return [7 /*endfinally*/];
+                                                        case 8:
+                                                            items.push(obj);
+                                                            return [2 /*return*/];
                                                     }
-                                                    else if (column.type === 'bool') {
-                                                        // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
-                                                        if (item[column.field]) {
-                                                            obj[column.field] = ((_a = column.option) === null || _a === void 0 ? void 0 : _a.displayOnTrue) || 'True';
-                                                        }
-                                                        else {
-                                                            obj[column.field] = ((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False';
-                                                        }
-                                                    }
-                                                    else if (column.type === 'date') {
-                                                        // Nếu là date thì convert theo đúng format
-                                                        var date = new Date(item[column.field]);
-                                                        obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
-                                                    }
-                                                    else if (column.type === 'datetime') {
-                                                        // Nếu là datetime thì convert theo đúng format
-                                                        var date = new Date(item[column.field]);
-                                                        obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm:ss');
-                                                    }
-                                                    else if (column.type === 'time') {
-                                                        // Nếu là time thì convert theo đúng format
-                                                        var date = new Date(item[column.field]);
-                                                        obj[column.field] = Date.toFormat(date, 'HH:mm:ss');
-                                                    }
-                                                    else if (column.type === 'values') {
-                                                        // Nếu là values thì lấy giá trị của value được chọn
-                                                        var data = _this.gridService.getValues(column, _this.key);
-                                                        if (data.obj[column.option.displayField] !== null && data.obj[column.option.displayField] !== undefined) {
-                                                            obj[column.field] = data.obj[column.option.displayField];
-                                                        }
-                                                        else {
-                                                            obj[column.field] = item[column.field];
-                                                        }
-                                                    }
-                                                    else {
-                                                        obj[column.field] = item[column.field];
-                                                    }
-                                                };
-                                                // this.gridOption.columns.forEach(handle);
-                                                columns_2.forEach(handle);
-                                                items.push(obj);
+                                                });
                                             };
+                                            _w.label = 5;
+                                        case 5:
+                                            _w.trys.push([5, 10, 11, 12]);
+                                            exportItems_1 = (e_6 = void 0, __values(exportItems)), exportItems_1_1 = exportItems_1.next();
+                                            _w.label = 6;
+                                        case 6:
+                                            if (!!exportItems_1_1.done) return [3 /*break*/, 9];
+                                            item = exportItems_1_1.value;
+                                            return [5 /*yield**/, _loop_2(item)];
+                                        case 7:
+                                            _w.sent();
+                                            _w.label = 8;
+                                        case 8:
+                                            exportItems_1_1 = exportItems_1.next();
+                                            return [3 /*break*/, 6];
+                                        case 9: return [3 /*break*/, 12];
+                                        case 10:
+                                            e_6_1 = _w.sent();
+                                            e_6 = { error: e_6_1 };
+                                            return [3 /*break*/, 12];
+                                        case 11:
                                             try {
-                                                for (exportItems_1 = (e_6 = void 0, __values(exportItems)), exportItems_1_1 = exportItems_1.next(); !exportItems_1_1.done; exportItems_1_1 = exportItems_1.next()) {
-                                                    item = exportItems_1_1.value;
-                                                    _loop_2(item);
-                                                }
-                                            }
-                                            catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                                            finally {
-                                                try {
-                                                    if (exportItems_1_1 && !exportItems_1_1.done && (_t = exportItems_1.return)) _t.call(exportItems_1);
-                                                }
-                                                finally { if (e_6) throw e_6.error; }
+                                                if (exportItems_1_1 && !exportItems_1_1.done && (_v = exportItems_1.return)) _v.call(exportItems_1);
                                             }
+                                            finally { if (e_6) throw e_6.error; }
+                                            return [7 /*endfinally*/];
+                                        case 12:
                                             pageNumber++;
                                             return [2 /*return*/];
                                     }
                                 });
                             };
                             this_1 = this;
-                            _z.label = 1;
+                            _1.label = 1;
                         case 1:
                             if (!(pageNumber * pageSize < total)) return [3 /*break*/, 3];
                             return [5 /*yield**/, _loop_1()];
                         case 2:
-                            _z.sent();
+                            _1.sent();
                             return [3 /*break*/, 1];
                         case 3:
                             if (!!(file === null || file === void 0 ? void 0 : file.filePath)) return [3 /*break*/, 16];
@@ -2284,19 +2325,19 @@
                                     fileName: (_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.fileName
                                 })];
                         case 4:
-                            _z.sent();
+                            _1.sent();
                             return [2 /*return*/];
                         case 5:
                             sheets = [];
                             if (!Array.isArray((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.sheets)) return [3 /*break*/, 14];
-                            _z.label = 6;
+                            _1.label = 6;
                         case 6:
-                            _z.trys.push([6, 12, 13, 14]);
-                            _t = __values(this.gridOption.export.sheets), _u = _t.next();
-                            _z.label = 7;
+                            _1.trys.push([6, 12, 13, 14]);
+                            _v = __values(this.gridOption.export.sheets), _w = _v.next();
+                            _1.label = 7;
                         case 7:
-                            if (!!_u.done) return [3 /*break*/, 11];
-                            sheet = _u.value;
+                            if (!!_w.done) return [3 /*break*/, 11];
+                            sheet = _w.value;
                             if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 10];
                             if (!Array.isArray(sheet.items)) return [3 /*break*/, 8];
                             sheets.push({
@@ -2306,27 +2347,27 @@
                             });
                             return [3 /*break*/, 10];
                         case 8:
-                            _w = (_v = sheets).push;
-                            _x = {
+                            _y = (_x = sheets).push;
+                            _z = {
                                 name: sheet.name
                             };
                             return [4 /*yield*/, sheet.items()];
                         case 9:
-                            _w.apply(_v, [(_x.items = _z.sent(),
-                                    _x.fields = sheet.fields,
-                                    _x)]);
-                            _z.label = 10;
+                            _y.apply(_x, [(_z.items = _1.sent(),
+                                    _z.fields = sheet.fields,
+                                    _z)]);
+                            _1.label = 10;
                         case 10:
-                            _u = _t.next();
+                            _w = _v.next();
                             return [3 /*break*/, 7];
                         case 11: return [3 /*break*/, 14];
                         case 12:
-                            e_5_1 = _z.sent();
+                            e_5_1 = _1.sent();
                             e_5 = { error: e_5_1 };
                             return [3 /*break*/, 14];
                         case 13:
                             try {
-                                if (_u && !_u.done && (_y = _t.return)) _y.call(_t);
+                                if (_w && !_w.done && (_0 = _v.return)) _0.call(_v);
                             }
                             finally { if (e_5) throw e_5.error; }
                             return [7 /*endfinally*/];
@@ -2337,7 +2378,7 @@
                                 sheets: sheets
                             })];
                         case 15:
-                            _z.sent();
+                            _1.sent();
                             return [2 /*return*/];
                         case 16: return [4 /*yield*/, this.exportService.exportByTemplate({
                                 filePath: file.filePath,
@@ -2346,7 +2387,7 @@
                                 items: items
                             })];
                         case 17:
-                            _z.sent();
+                            _1.sent();
                             return [3 /*break*/, 19];
                         case 18:
                             this.isExporting = false;
@@ -2360,7 +2401,7 @@
             this.onExport = function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var translate;
                 var _this = this;
-                return __generator(this, function (_t) {
+                return __generator(this, function (_v) {
                     translate = this.translateService.translate;
                     if (!args.isCSV && this.gridOption.export.max && this.total > this.gridOption.export.max) {
                         this.notifyService.confirm(translate("Total rows reach limit, do you want to export CSV")).then(function () {
@@ -2378,8 +2419,8 @@
                 _this.reload(false);
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
-                var _q, _r, _s, data;
-                return __generator(this, function (_t) {
+                var _s, _t, _u, data;
+                return __generator(this, function (_v) {
                     if (rowData.isExpanding) {
                         return [2 /*return*/];
                     }
@@ -2387,8 +2428,8 @@
                         rowData.isExpanded = false;
                         return [2 /*return*/];
                     }
-                    data = (_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.subInformation) === null || _r === void 0 ? void 0 : _r.onExpand(rowData);
-                    if (!((_s = this.gridOption.subInformation) === null || _s === void 0 ? void 0 : _s.multiple)) {
+                    data = (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.subInformation) === null || _t === void 0 ? void 0 : _t.onExpand(rowData);
+                    if (!((_u = this.gridOption.subInformation) === null || _u === void 0 ? void 0 : _u.multiple)) {
                         this.items.forEach(function (item) { return item.isExpanding = item.isExpanded = false; });
                     }
                     if (data instanceof Promise) {
@@ -2450,7 +2491,7 @@
             };
             this.onCreate = function () {
                 var _a, _b;
-                var _t = _this.gridOption, type = _t.type, editor = _t.editor, columns = _t.columns;
+                var _v = _this.gridOption, type = _v.type, editor = _v.editor, columns = _v.columns;
                 if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
                     return;
                 }
@@ -2506,23 +2547,23 @@
             };
             this.onSave = function (item) { return __awaiter(_this, void 0, void 0, function () {
                 var editor, result, message, result, err_1;
-                return __generator(this, function (_t) {
-                    switch (_t.label) {
+                return __generator(this, function (_v) {
+                    switch (_v.label) {
                         case 0:
                             if (item.editorHandlerRow.saving) {
                                 return [2 /*return*/];
                             }
                             editor = this.gridOption.editor;
-                            _t.label = 1;
+                            _v.label = 1;
                         case 1:
-                            _t.trys.push([1, 7, 8, 9]);
+                            _v.trys.push([1, 7, 8, 9]);
                             item.editorHandlerRow.saving = true;
                             if (!editor.validate) return [3 /*break*/, 4];
                             result = editor.validate(item, this.items.indexOf(item));
                             if (!(result instanceof Promise)) return [3 /*break*/, 3];
                             return [4 /*yield*/, result];
                         case 2:
-                            message = _t.sent();
+                            message = _v.sent();
                             if (message) {
                                 throw message;
                             }
@@ -2531,15 +2572,15 @@
                             if (result) {
                                 throw result;
                             }
-                            _t.label = 4;
+                            _v.label = 4;
                         case 4:
                             if (!editor.onSave) return [3 /*break*/, 6];
                             result = editor.onSave(item);
                             if (!(result instanceof Promise)) return [3 /*break*/, 6];
                             return [4 /*yield*/, result];
                         case 5:
-                            _t.sent();
-                            _t.label = 6;
+                            _v.sent();
+                            _v.label = 6;
                         case 6:
                             if (item.editorStatus === 'create' && editor.type === 'popup') {
                                 if (this.gridOption.type === 'local') {
@@ -2550,7 +2591,7 @@
                             item.editorStatus = undefined;
                             return [3 /*break*/, 9];
                         case 7:
-                            err_1 = _t.sent();
+                            err_1 = _v.sent();
                             this.notifyService.notify.warning(err_1);
                             return [3 /*break*/, 9];
                         case 8:
@@ -2742,13 +2783,20 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SdGridMaterial.prototype, "isEditing", {
+            get: function () {
+                return this.items.some(function (e) { return e.editorStatus !== undefined; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         return SdGridMaterial;
     }());
     _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
     SdGridMaterial.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-material',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n          <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" 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                <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  <ng-container *ngIf=\"item.isExpanded\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdSubInformation.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button *ngIf=\"!element.isExpanding\" mat-icon-button 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 px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                  <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                  <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditorValidation\">\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n              </th>\r\n              <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-editor-validation>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditor\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <button class=\"c-btn-add\"\r\n                  *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                  (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                  <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                  <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                    <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">save</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                <div>\r\n                  <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                  </div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n            </ng-container>\r\n            <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n              [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n          <ng-template #elseEmpty>\r\n            <table mat-table [dataSource]=\"[{}]\">\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEmpty\">\r\n                <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #sdEmptyDataNoRef>\r\n                    <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                  </ng-template>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                  <div>\r\n                    <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n            </table>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n            size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                <span> {{ \"Configure\" | sdTranslate }}</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n      #sdPopupExport>\r\n    </sd-popup-export>\r\n    <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n    </sd-popup-grid-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n<sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection()\">\r\n</sd-grid-quick-action>",
+                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n          <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" 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                <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                  <ng-container *ngIf=\"item.isExpanded\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdSubInformation.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button *ngIf=\"!element.isExpanding\" mat-icon-button 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 px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                  <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n\r\n              </th>\r\n              <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                  <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                  </mat-checkbox>\r\n                </ng-container>\r\n\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditorValidation\">\r\n              <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n              </th>\r\n              <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                  [gridOption]=\"gridOption\">\r\n                </sd-desktop-editor-validation>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdEditor\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <button class=\"c-btn-add\"\r\n                  *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                  (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                  <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                  <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                    <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">save</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                      mat-icon-button>\r\n                      <mat-icon class=\"c-icon\">close</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </ng-container>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"sdCommand\">\r\n              <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                <div>\r\n                  <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                  </div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div [class.text-right]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                </sd-desktop-cell>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef>\r\n                <ng-container *ngIf=\"footerDef[column.field]\">\r\n                  <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n            </ng-container>\r\n            <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n              [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n            <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n              <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n            </ng-container>\r\n          </table>\r\n          <ng-template #elseEmpty>\r\n            <table mat-table [dataSource]=\"[{}]\">\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEmpty\">\r\n                <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #sdEmptyDataNoRef>\r\n                    <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                  </ng-template>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [class.text-right]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                  <div>\r\n                    <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right'\" [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n              </tr>\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n            </table>\r\n          </ng-template>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n            size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n          </sd-button>\r\n          <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n            <ng-container *ngIf=\"isExporting; else unExporting\">\r\n              <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                size=\"sm\" type=\"link\">\r\n              </sd-button>\r\n            </ng-container>\r\n            <ng-template #unExporting>\r\n              <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n              </button>\r\n              <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                <span> {{ \"Configure\" | sdTranslate }}</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n      #sdPopupExport>\r\n    </sd-popup-export>\r\n    <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n    </sd-popup-grid-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n<sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection()\">\r\n</sd-grid-quick-action>",
                     animations: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -2766,7 +2814,7 @@
         { type: _export.SdExportService },
         { type: notify.SdNotifyService },
         { type: translate.SdTranslateService },
-        { type: SdGridService }
+        { type: SdColumnValuesPipe }
     ]; };
     SdGridMaterial.propDecorators = {
         quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],
@@ -2974,33 +3022,6 @@
                 },] }
     ];
 
-    var SdColumnValuesPipe = /** @class */ (function () {
-        function SdColumnValuesPipe(gridService) {
-            var _this = this;
-            this.gridService = gridService;
-            this.transform = function (value, column, key) { return __awaiter(_this, void 0, void 0, function () {
-                var _a, data;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.gridService.loadValues(column, key)];
-                        case 1:
-                            data = _b.sent();
-                            return [2 /*return*/, (_a = data.obj[value]) !== null && _a !== void 0 ? _a : value];
-                    }
-                });
-            }); };
-        }
-        return SdColumnValuesPipe;
-    }());
-    SdColumnValuesPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'columnValues'
-                },] }
-    ];
-    SdColumnValuesPipe.ctorParameters = function () { return [
-        { type: SdGridService }
-    ]; };
-
     var SdColumnHtmlTemplatePipe = /** @class */ (function () {
         function SdColumnHtmlTemplatePipe(deviceService) {
             this.isMobileOrTablet = false;
@@ -3045,6 +3066,71 @@
         gridOption: [{ type: core.Input }]
     };
 
+    var _prefix$1, _cache$2;
+    var SdGridService = /** @class */ (function () {
+        function SdGridService(utilityService) {
+            var _this = this;
+            this.utilityService = utilityService;
+            _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
+            _cache$2.set(this, {});
+            this.loadValues = function (column, key) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _d, hashKey, items;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (column.type !== 'values' || !((_a = column.option) === null || _a === void 0 ? void 0 : _a.items) || !((_b = column.option) === null || _b === void 0 ? void 0 : _b.valueField) || !((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayField)) {
+                                return [2 /*return*/, {
+                                        values: [],
+                                        obj: {}
+                                    }];
+                            }
+                            hashKey = hash__default['default']({
+                                prefix: __classPrivateFieldGet(this, _prefix$1),
+                                field: column.field,
+                                key: key,
+                            });
+                            if (!!__classPrivateFieldGet(this, _cache$2)[hashKey]) return [3 /*break*/, 4];
+                            items = [];
+                            if (!(typeof ((_d = column.option) === null || _d === void 0 ? void 0 : _d.items) === 'function')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, column.option.items()];
+                        case 1:
+                            items = _e.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            items = column.option.items;
+                            _e.label = 3;
+                        case 3:
+                            __classPrivateFieldGet(this, _cache$2)[hashKey] = {
+                                values: items,
+                                obj: Array.toObject(items, column.option.valueField)
+                            };
+                            _e.label = 4;
+                        case 4: return [2 /*return*/, __classPrivateFieldGet(this, _cache$2)[hashKey]];
+                    }
+                });
+            }); };
+            this.getValues = function (column, key) {
+                var hashKey = hash__default['default']({
+                    prefix: __classPrivateFieldGet(_this, _prefix$1),
+                    field: column.field,
+                    key: key,
+                });
+                return __classPrivateFieldGet(_this, _cache$2)[hashKey] || {
+                    values: [],
+                    obj: {}
+                };
+            };
+        }
+        return SdGridService;
+    }());
+    _prefix$1 = new WeakMap(), _cache$2 = new WeakMap();
+    SdGridService.decorators = [
+        { type: core.Injectable }
+    ];
+    SdGridService.ctorParameters = function () { return [
+        { type: utility.SdUtilityService }
+    ]; };
+
     var SdColumnTransformPipe = /** @class */ (function () {
         function SdColumnTransformPipe(gridService) {
             this.gridService = gridService;
@@ -3183,7 +3269,7 @@
     SdDesktopCellChildrenView.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell-children-view',
-                    template: "<ng-container *ngIf=\"column.children?.length\">\r\n  <div class=\"row mx-0\">\r\n    <div *ngFor=\"let childColumn of column.children | columnChildrenFilter:item\" class=\"px-2\"\r\n      [ngClass]=\"{'col-6': childColumn?.colSpan === 1, 'col-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n      <span class=\"c-title\">\r\n        {{item | columnTitle:childColumn | async}}:\r\n      </span>\r\n      <ng-container *ngIf=\"childColumn.htmlTemplate;else useDefaultView\">\r\n        <div (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"\r\n          style=\"display:inline-block ;overflow-wrap: break-word;\" [ngClass]=\"{'cursor-pointer':childColumn.click}\"\r\n          [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn) | safeHtml\">\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #useDefaultView>\r\n        <span *ngIf=\"childColumn.type === 'string'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'number'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'datetime'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'date'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'time'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | date:'HH:mm'}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'bool'\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n          <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.option?.displayOnTrue ||\r\n            'True'}}</strong>\r\n          <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.option?.displayOnFalse ||\r\n            'False'}}</strong>\r\n        </span>\r\n        <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n          <ng-container *ngIf=\"childColumn.transform\">{{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n          <ng-container *ngIf=\"!childColumn.transform\">\r\n            <ng-container *ngIf=\"item[childColumn.field] | columnValues:childColumn:key | async; $implicit as valueData\">\r\n              <div\r\n                *ngIf=\"valueData[childColumn.option?.colorField] || valueData[childColumn.option?.backgroundColorField]; else elseNoStatus\"\r\n                [ngStyle]=\"{'color':valueData[childColumn.option?.colorField], 'background-color': valueData[childColumn.option?.backgroundColorField]}\">\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </div>\r\n              <ng-template #elseNoStatus>\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </ng-template>\r\n            </ng-container>\r\n          </ng-container>\r\n          \r\n        </ng-container>\r\n        <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field] | columnTransform:item:childColumn | async\" [width]=\"childColumn.display?.width\"\r\n          [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"column.children?.length\">\r\n  <div class=\"row mx-0\">\r\n    <div *ngFor=\"let childColumn of column.children | columnChildrenFilter:item\" class=\"px-2\"\r\n      [ngClass]=\"{'col-6': childColumn?.colSpan === 1, 'col-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n      <span class=\"c-title\">\r\n        {{item | columnTitle:childColumn | async}}:\r\n      </span>\r\n      <ng-container *ngIf=\"childColumn.htmlTemplate;else useDefaultView\">\r\n        <div (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"\r\n          style=\"display:inline-block ;overflow-wrap: break-word;\" [ngClass]=\"{'cursor-pointer':childColumn.click}\"\r\n          [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn) | safeHtml\">\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #useDefaultView>\r\n        <span *ngIf=\"childColumn.type === 'string'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'number'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'datetime'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'date'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'time'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | date:'HH:mm'}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'bool'\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n          <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.option?.displayOnTrue ||\r\n            'True'}}</strong>\r\n          <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.option?.displayOnFalse ||\r\n            'False'}}</strong>\r\n        </span>\r\n        <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n          <ng-container *ngIf=\"childColumn.transform\">{{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n          <ng-container *ngIf=\"!childColumn.transform\">\r\n            {{item[childColumn.field] | columnValues:childColumn | async}}\r\n            <!-- <ng-container *ngIf=\"item[childColumn.field] | columnValues:childColumn | async; $implicit as valueData\">\r\n              <div\r\n                *ngIf=\"valueData[childColumn.option?.colorField] || valueData[childColumn.option?.backgroundColorField]; else elseNoStatus\"\r\n                [ngStyle]=\"{'color':valueData[childColumn.option?.colorField], 'background-color': valueData[childColumn.option?.backgroundColorField]}\">\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </div>\r\n              <ng-template #elseNoStatus>\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </ng-template>\r\n            </ng-container> -->\r\n          </ng-container>\r\n          \r\n        </ng-container>\r\n        <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field] | columnTransform:item:childColumn | async\" [width]=\"childColumn.display?.width\"\r\n          [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</ng-container>",
                     styles: [".c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}"]
                 },] }
     ];
@@ -3335,7 +3421,7 @@
         { type: SdGridConfigurationService }
     ]; };
 
-    var _cache$2;
+    var _cache$3;
     var SdPopupGridConfiguration = /** @class */ (function () {
         function SdPopupGridConfiguration(ref, notifyService, translateService, gridConfigurationService) {
             var _this = this;
@@ -3344,7 +3430,7 @@
             this.translateService = translateService;
             this.gridConfigurationService = gridConfigurationService;
             this.changes = new core.EventEmitter();
-            _cache$2.set(this, void 0);
+            _cache$3.set(this, void 0);
             this.isCreatingColumn = false;
             this.selected = {};
             this.disabledDrag = true;
@@ -3353,9 +3439,9 @@
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            __classPrivateFieldSet(this, _cache$2, this.gridConfigurationService.init(this.key, this.gridOption));
+                            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
                             _b = this;
-                            return [4 /*yield*/, __classPrivateFieldGet(this, _cache$2).get()];
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _cache$3).get()];
                         case 1:
                             _b.configuration = _c.sent();
                             this.modal.open();
@@ -3364,7 +3450,7 @@
                 });
             }); };
             this.onSave = function () {
-                __classPrivateFieldGet(_this, _cache$2).set(_this.configuration);
+                __classPrivateFieldGet(_this, _cache$3).set(_this.configuration);
                 _this.modal.close();
                 _this.ref.detectChanges();
             };
@@ -3374,7 +3460,7 @@
                 return __generator(this, function (_b) {
                     translate = this.translateService.translate;
                     this.notifyService.confirm(translate('Reset grid configuration to default')).then(function () {
-                        __classPrivateFieldGet(_this, _cache$2).remove();
+                        __classPrivateFieldGet(_this, _cache$3).remove();
                         _this.modal.close();
                         _this.ref.detectChanges();
                     });
@@ -3406,7 +3492,7 @@
                         generatedColumns: this.configuration.columns.filter(function (e) { var _a; return _this.selected[(_a = e.origin) === null || _a === void 0 ? void 0 : _a.field]; }).map(function (e) { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.field; })
                     };
                     this.configuration.columns.push(generatedColumn);
-                    this.configuration = __classPrivateFieldGet(this, _cache$2).set(this.configuration);
+                    this.configuration = __classPrivateFieldGet(this, _cache$3).set(this.configuration);
                     this.isCreatingColumn = false;
                     return [2 /*return*/];
                 });
@@ -3429,7 +3515,7 @@
         };
         return SdPopupGridConfiguration;
     }());
-    _cache$2 = new WeakMap();
+    _cache$3 = new WeakMap();
     SdPopupGridConfiguration.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-grid-configuration',
@@ -3712,12 +3798,12 @@
                 },] }
     ];
 
-    var _cache$3;
+    var _cache$4;
     var SdGeneratedColumnService = /** @class */ (function () {
         function SdGeneratedColumnService(settingService) {
             var _this = this;
             this.settingService = settingService;
-            _cache$3.set(this, {});
+            _cache$4.set(this, {});
             this.load = function (configuration) {
                 if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
                     return null;
@@ -3726,22 +3812,22 @@
                     prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
                     key: configuration.key
                 });
-                if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
+                if (!__classPrivateFieldGet(_this, _cache$4)[key]) {
                     if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                        __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.createServer(key, {
+                        __classPrivateFieldGet(_this, _cache$4)[key] = _this.settingService.createServer(key, {
                             args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                             default: []
                         });
                     }
                     else {
-                        __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
+                        __classPrivateFieldGet(_this, _cache$4)[key] = _this.settingService.create(key, {
                             type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                             args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                             default: []
                         });
                     }
                 }
-                return __classPrivateFieldGet(_this, _cache$3)[key];
+                return __classPrivateFieldGet(_this, _cache$4)[key];
             };
             this.loadSystem = function (configuration) {
                 var _a, _b;
@@ -3755,27 +3841,27 @@
                     prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
                     key: configuration.key
                 });
-                if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
+                if (!__classPrivateFieldGet(_this, _cache$4)[key]) {
                     if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                        __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.createServer(key, {
+                        __classPrivateFieldGet(_this, _cache$4)[key] = _this.settingService.createServer(key, {
                             args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
                             default: []
                         });
                     }
                     else {
-                        __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
+                        __classPrivateFieldGet(_this, _cache$4)[key] = _this.settingService.create(key, {
                             type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                             args: (_b = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _b === void 0 ? void 0 : _b.args,
                             default: []
                         });
                     }
                 }
-                return __classPrivateFieldGet(_this, _cache$3)[key];
+                return __classPrivateFieldGet(_this, _cache$4)[key];
             };
         }
         return SdGeneratedColumnService;
     }());
-    _cache$3 = new WeakMap();
+    _cache$4 = new WeakMap();
     SdGeneratedColumnService.decorators = [
         { type: core.Injectable }
     ];
@@ -4273,9 +4359,9 @@
 
     var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
     var SdCellViewPipe = /** @class */ (function () {
-        function SdCellViewPipe(deviceService, utilityService, gridService) {
+        function SdCellViewPipe(deviceService, utilityService, columnValuesPipe) {
             this.utilityService = utilityService;
-            this.gridService = gridService;
+            this.columnValuesPipe = columnValuesPipe;
             _maxSecond.set(this, 60);
             _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
             _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
@@ -4285,11 +4371,11 @@
             __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
         }
         SdCellViewPipe.prototype.transform = function (value, rowData, column, gridOption, key) {
-            var _a, _b, _c, _d;
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var displayOnEmpty, align, click, tooltip, htmlTemplate, transform, result, val, _e, option, seconds, data, option;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var displayOnEmpty, align, click, tooltip, htmlTemplate, transform, result, val, _b, option, seconds, _c, option;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             displayOnEmpty = gridOption.displayOnEmpty;
                             align = column.align, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
@@ -4310,14 +4396,14 @@
                             if (!(typeof (transform) === 'function')) return [3 /*break*/, 5];
                             val = transform(value, rowData);
                             if (!(val instanceof Promise)) return [3 /*break*/, 3];
-                            _e = result.display;
+                            _b = result.display;
                             return [4 /*yield*/, val];
                         case 2:
-                            _e.value = _f.sent();
+                            _b.value = _d.sent();
                             return [3 /*break*/, 4];
                         case 3:
                             result.display.value = val;
-                            _f.label = 4;
+                            _d.label = 4;
                         case 4: return [3 /*break*/, 9];
                         case 5:
                             if (column.type === 'date' || column.type === 'datetime') {
@@ -4355,22 +4441,22 @@
                                 result.display.value = Date.toFormat(value, 'HH:mm');
                             }
                             if (!(column.type === 'values')) return [3 /*break*/, 7];
-                            return [4 /*yield*/, this.gridService.loadValues(column, key)];
+                            _c = result.display;
+                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
                         case 6:
-                            data = _f.sent();
-                            result.display.value = (_c = (_a = data.obj[value]) === null || _a === void 0 ? void 0 : _a[(_b = column.option) === null || _b === void 0 ? void 0 : _b.displayField]) !== null && _c !== void 0 ? _c : value;
+                            _c.value = _d.sent();
                             return [3 /*break*/, 8];
                         case 7:
                             if (column.type === 'number' && Number.isNumber(value)) {
                                 result.display.value = Number.toVNCurrency(value);
                             }
-                            _f.label = 8;
+                            _d.label = 8;
                         case 8:
                             if (column.type === 'bool') {
                                 option = column.option;
                                 result.display.value = value === true ? ((option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True') : ((option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False');
                             }
-                            _f.label = 9;
+                            _d.label = 9;
                         case 9:
                             if (displayOnEmpty && (result.display.value === null || result.display.value === undefined || result.display.value === '')) {
                                 if (typeof (displayOnEmpty) === 'function') {
@@ -4382,14 +4468,14 @@
                                     result.display.html = "<div class=\"T16R text-black400\">--</div>";
                                 }
                             }
-                            _f.label = 10;
+                            _d.label = 10;
                         case 10:
                             // Badge
                             if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
                                 result.badge = {
                                     type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
                                     color: column.badge(value, rowData),
-                                    icon: (_d = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _d === void 0 ? void 0 : _d.call(column, value, rowData)
+                                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
                                 };
                             }
                             else if (column.type === 'bool') {
@@ -4423,7 +4509,7 @@
     SdCellViewPipe.ctorParameters = function () { return [
         { type: ngxDeviceDetector.DeviceDetectorService },
         { type: utility.SdUtilityService },
-        { type: SdGridService }
+        { type: SdColumnValuesPipe }
     ]; };
 
     var MatPaginatorIntlCro = /** @class */ (function (_super) {
@@ -4548,6 +4634,7 @@
                         SdGridFilterService,
                         SdGridConfigurationService,
                         SdGeneratedColumnService,
+                        SdColumnValuesPipe,
                         {
                             provide: paginator.MatPaginatorIntl, useClass: MatPaginatorIntlCro
                         }
@@ -4569,9 +4656,9 @@
     exports.ɵa = MatPaginatorIntlCro;
     exports.ɵb = SdGridFilter;
     exports.ɵba = SdCommandTitlePipe;
-    exports.ɵbb = SdColumnValuesPipe;
-    exports.ɵbc = SdColumnHtmlTemplatePipe;
-    exports.ɵbd = SdColumnTransformPipe;
+    exports.ɵbb = SdColumnHtmlTemplatePipe;
+    exports.ɵbc = SdColumnTransformPipe;
+    exports.ɵbd = SdGridService;
     exports.ɵbe = SdColumnTooltipPipe;
     exports.ɵbf = SdColumnBadgePipe;
     exports.ɵbg = SdFilterColumnPipe;
@@ -4591,7 +4678,7 @@
     exports.ɵe = SdPopupExport;
     exports.ɵg = GRID_MATERIAL_CONFIG;
     exports.ɵh = SdGridConfigurationService;
-    exports.ɵi = SdGridService;
+    exports.ɵi = SdColumnValuesPipe;
     exports.ɵj = SdGridQuickAction;
     exports.ɵk = SdDesktopCell;
     exports.ɵl = SdDesktopCellEditor;