@sd-angular/core 1.0.45 → 1.0.48

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/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'), require('@sd-angular/core/utility')) :
+    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/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', '@sd-angular/core/utility'], 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.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'], global['sd-angular'].core.utility));
+}(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, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer, utility) { '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) {
@@ -1648,73 +1649,58 @@
     ]; };
 
     var _prefix$1, _cache$1;
-    var SdGridService = /** @class */ (function () {
-        function SdGridService(utilityService) {
+    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({ prefix: __classPrivateFieldGet(this, _prefix$1) }, 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({ prefix: __classPrivateFieldGet(this, _prefix$1) }, 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[value]) === 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 }
-    ]; };
+    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 +1708,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 +1739,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 +1752,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 +1790,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 +1822,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 +1896,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 +1954,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 +1998,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 +2009,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 +2020,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 +2036,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 +2051,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 +2060,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 +2068,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 +2116,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 +2131,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 +2151,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 +2163,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];
-                                                    }
-                                                    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');
+                                                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 === '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 +2326,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 +2348,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 +2379,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 +2388,7 @@
                                 items: items
                             })];
                         case 17:
-                            _z.sent();
+                            _1.sent();
                             return [3 /*break*/, 19];
                         case 18:
                             this.isExporting = false;
@@ -2360,7 +2402,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 +2420,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 +2429,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 +2492,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 +2548,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 +2573,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 +2592,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:
@@ -2773,7 +2815,7 @@
         { type: _export.SdExportService },
         { type: notify.SdNotifyService },
         { type: translate.SdTranslateService },
-        { type: SdGridService }
+        { type: SdColumnValuesPipe }
     ]; };
     SdGridMaterial.propDecorators = {
         quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],
@@ -2981,33 +3023,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;
@@ -3038,7 +3053,7 @@
     SdDesktopCellView.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell-view',
-                    template: "<ng-container *ngIf=\"item[column.field] | cellView:item:column:gridOption:key | async as view\">\r\n  <div *ngIf=\"view.display.hasHtml;else useValue\" (click)=\"!!view.click && view.click()\" class=\"text-break\"\r\n    [class.cursor-pointer]=\"!!view.click\" [matTooltip]=\"view.tooltip\" [innerHTML]=\"view.display.html | safeHtml\">\r\n  </div>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge [type]=\"view.badge.type\" [title]=\"view.display.value\" [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\" [tooltip]=\"view.tooltip\" (sdClick)=\"column.click(item[column.field], item)\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <ng-container *ngIf=\"column.type !== 'children'; else childrenView\">\r\n        <div *ngIf=\"column.type !== 'image'\" class=\"text-break\"\r\n          [class.text-center]=\"view.display.align === 'center'\" [class.text-right]=\"view.display.align === 'right'\"\r\n          [matTooltip]=\"view.tooltip\">\r\n          <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{view.display.value}}</a>\r\n          <ng-container *ngIf=\"!view.click\">{{view.display.value}}\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"view.display.value\" [src]=\"view.display.value\" [width]=\"column.option?.width\"\r\n            [height]=\"column.option?.height\" class=\"c-image\" (click)=\"!!view.click && view.click()\"\r\n            [class.cursor-pointer]=\"!!view.click\">\r\n          <mat-icon *ngIf=\"!view.display.value\" class=\"c-img\" [class.cursor-pointer]=\"!!view.click\"\r\n            (click)=\"!!view.click && view.click()\">\r\n            image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #childrenView>\r\n        <sd-desktop-cell-children-view [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n        </sd-desktop-cell-children-view>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"item[column.field] | cellView:item:column:gridOption:key | async as view\">\r\n  <div *ngIf=\"view.display.hasHtml;else useValue\" class=\"text-break\" [matTooltip]=\"view.tooltip\" [innerHTML]=\"view.display.html | safeHtml\">\r\n  </div>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge [type]=\"view.badge.type\" [title]=\"view.display.value\" [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\" [tooltip]=\"view.tooltip\" (sdClick)=\"column.click(item[column.field], item)\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <ng-container *ngIf=\"column.type !== 'children'; else childrenView\">\r\n        <div *ngIf=\"column.type !== 'image'\" class=\"text-break\"\r\n          [class.text-center]=\"view.display.align === 'center'\" [class.text-right]=\"view.display.align === 'right'\"\r\n          [matTooltip]=\"view.tooltip\">\r\n          <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{view.display.value}}</a>\r\n          <ng-container *ngIf=\"!view.click\">{{view.display.value}}\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"view.display.value\" [src]=\"view.display.value\" [width]=\"column.option?.width\"\r\n            [height]=\"column.option?.height\" class=\"c-image\" (click)=\"!!view.click && view.click()\"\r\n            [class.cursor-pointer]=\"!!view.click\">\r\n          <mat-icon *ngIf=\"!view.display.value\" class=\"c-img\" [class.cursor-pointer]=\"!!view.click\"\r\n            (click)=\"!!view.click && view.click()\">\r\n            image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #childrenView>\r\n        <sd-desktop-cell-children-view [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n        </sd-desktop-cell-children-view>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
                 },] }
@@ -3053,30 +3068,27 @@
     };
 
     var SdColumnTransformPipe = /** @class */ (function () {
-        function SdColumnTransformPipe(gridService) {
-            this.gridService = gridService;
+        function SdColumnTransformPipe(columnValuesPipe) {
+            this.columnValuesPipe = columnValuesPipe;
         }
         SdColumnTransformPipe.prototype.transform = function (value, rowData, column, key) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
-                var data;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (column === null || column === void 0 ? void 0 : column.transform) {
                                 return [2 /*return*/, column.transform(value, rowData)];
                             }
                             if (!(column.type === 'values')) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.gridService.loadValues(column, key)];
-                        case 1:
-                            data = _f.sent();
-                            return [2 /*return*/, (_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];
+                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
+                        case 1: return [2 /*return*/, _c.sent()];
                         case 2:
                             if (column.type === 'number' && Number.isNumber(value)) {
                                 return [2 /*return*/, Number.toVNCurrency(value)]; // this.decimalPipe.transform(value, '1.0-2');
                             }
                             if (column.type === 'bool') {
-                                return [2 /*return*/, value === true ? (((_d = column.option) === null || _d === void 0 ? void 0 : _d.displayOnTrue) || 'True') : (((_e = column.option) === null || _e === void 0 ? void 0 : _e.displayOnFalse) || 'False')];
+                                return [2 /*return*/, value === true ? (((_a = column.option) === null || _a === void 0 ? void 0 : _a.displayOnTrue) || 'True') : (((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False')];
                             }
                             return [2 /*return*/, value];
                     }
@@ -3091,7 +3103,7 @@
                 },] }
     ];
     SdColumnTransformPipe.ctorParameters = function () { return [
-        { type: SdGridService }
+        { type: SdColumnValuesPipe }
     ]; };
 
     var SdFilterExternalPipe = /** @class */ (function () {
@@ -3190,7 +3202,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}"]
                 },] }
     ];
@@ -4280,9 +4292,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);
@@ -4292,11 +4304,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;
@@ -4317,15 +4329,20 @@
                             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;
-                        case 4: return [3 /*break*/, 9];
+                            _d.label = 4;
+                        case 4:
+                            if (column.type === 'datetime' && result.display.value) {
+                                result.display.hasHtml = true;
+                                result.display.html = "<span class=\"d-block T14R text-black400\">" + Date.toFormat(value, 'HH:mm') + "</span><span class=\"d-block T14R\">" + Date.toFormat(value, 'dd/MM/yyyy') + "</span>";
+                            }
+                            return [3 /*break*/, 9];
                         case 5:
                             if (column.type === 'date' || column.type === 'datetime') {
                                 option = column.option;
@@ -4362,22 +4379,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') {
@@ -4389,14 +4406,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') {
@@ -4430,7 +4447,7 @@
     SdCellViewPipe.ctorParameters = function () { return [
         { type: ngxDeviceDetector.DeviceDetectorService },
         { type: utility.SdUtilityService },
-        { type: SdGridService }
+        { type: SdColumnValuesPipe }
     ]; };
 
     var MatPaginatorIntlCro = /** @class */ (function (_super) {
@@ -4551,10 +4568,10 @@
                         common.DecimalPipe,
                         SdIdPipe,
                         table$1.CdkColumnDef,
-                        SdGridService,
                         SdGridFilterService,
                         SdGridConfigurationService,
                         SdGeneratedColumnService,
+                        SdColumnValuesPipe,
                         {
                             provide: paginator.MatPaginatorIntl, useClass: MatPaginatorIntlCro
                         }
@@ -4576,29 +4593,28 @@
     exports.ɵa = MatPaginatorIntlCro;
     exports.ɵb = SdGridFilter;
     exports.ɵba = SdCommandTitlePipe;
-    exports.ɵbb = SdColumnValuesPipe;
-    exports.ɵbc = SdColumnHtmlTemplatePipe;
-    exports.ɵbd = SdColumnTransformPipe;
-    exports.ɵbe = SdColumnTooltipPipe;
-    exports.ɵbf = SdColumnBadgePipe;
-    exports.ɵbg = SdFilterColumnPipe;
-    exports.ɵbh = SdFilterExternalPipe;
-    exports.ɵbi = SdSelectionActionFilterPipe;
-    exports.ɵbj = SdSelectionVisiblePipe;
-    exports.ɵbk = SdSelectionDisablePipe;
-    exports.ɵbl = SdSelectionVisibleSelectAllPipe;
-    exports.ɵbm = SdEditorHandlerRowPipe;
-    exports.ɵbn = SdEditorHandlerColumnPipe;
-    exports.ɵbo = SdEditorValidatePipe;
-    exports.ɵbp = SdIdPipe;
-    exports.ɵbq = SdStyleRowCss;
-    exports.ɵbr = SdCellViewPipe;
+    exports.ɵbb = SdColumnHtmlTemplatePipe;
+    exports.ɵbc = SdColumnTransformPipe;
+    exports.ɵbd = SdColumnTooltipPipe;
+    exports.ɵbe = SdColumnBadgePipe;
+    exports.ɵbf = SdFilterColumnPipe;
+    exports.ɵbg = SdFilterExternalPipe;
+    exports.ɵbh = SdSelectionActionFilterPipe;
+    exports.ɵbi = SdSelectionVisiblePipe;
+    exports.ɵbj = SdSelectionDisablePipe;
+    exports.ɵbk = SdSelectionVisibleSelectAllPipe;
+    exports.ɵbl = SdEditorHandlerRowPipe;
+    exports.ɵbm = SdEditorHandlerColumnPipe;
+    exports.ɵbn = SdEditorValidatePipe;
+    exports.ɵbo = SdIdPipe;
+    exports.ɵbp = SdStyleRowCss;
+    exports.ɵbq = SdCellViewPipe;
     exports.ɵc = SdPopupFilter;
     exports.ɵd = SdGridFilterService;
     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;