@sd-angular/core 1.0.45 → 1.0.46

package/fesm2015/sd-angular-core-grid-material.js

@@ -1,5 +1,5 @@
 import { SdCommonModule } from '@sd-angular/core/common';
-import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, Pipe, QueryList, ContentChild, ContentChildren, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
 import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -10,14 +10,14 @@ import { Subject, Subscription, isObservable } from 'rxjs';
 import { SdNotifyService } from '@sd-angular/core/notify';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { startWith, debounceTime, map, switchMap } from 'rxjs/operators';
-import hash from 'object-hash';
+import * as hash from 'object-hash';
+import hash__default from 'object-hash';
 import { SdSettingService } from '@sd-angular/core/setting';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { SdLoadingService } from '@sd-angular/core/loading';
 import { SdTranslateService } from '@sd-angular/core/translate';
 import { SdExportService } from '@sd-angular/core/export';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { SdUtilityService } from '@sd-angular/core/utility';
 import { SdQuickAction } from '@sd-angular/core/quick-action';
 import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -30,6 +30,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatButtonModule } from '@angular/material/button';
+import { SdUtilityService } from '@sd-angular/core/utility';
 import { SdServiceModule } from '@sd-angular/core/service';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatChipsModule } from '@angular/material/chips';
@@ -236,7 +237,7 @@ class SdGridFilterService {
                 prefix: __classPrivateFieldGet(this, _prefix),
                 key
             });
-            key = hash({
+            key = hash__default({
                 prefix: __classPrivateFieldGet(this, _prefix),
                 key
             });
@@ -692,7 +693,7 @@ class SdPopupExport {
         if (!((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.key)) {
             return null;
         }
-        return hash({
+        return hash__default({
             prefix,
             key: (_d = (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.key
         });
@@ -763,7 +764,7 @@ class SdGridConfigurationService {
             if (!((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.key) && !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
                 return null;
             }
-            return hash({
+            return hash__default({
                 prefix,
                 key: ((_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.key) || !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)
             });
@@ -1100,71 +1101,57 @@ SdGridConfigurationService.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [GRID_MATERIAL_CONFIG,] }, { type: Optional }] }
 ];
 
-var _prefix$1, _cache$1;
-class SdGridService {
-    constructor(utilityService) {
-        this.utilityService = utilityService;
-        _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
+var _cache$1;
+class SdColumnValuesPipe {
+    constructor() {
         _cache$1.set(this, {});
-        this.loadValues = (column, key) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
+        this.transform = (value, column) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
             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 {
-                    values: [],
-                    obj: {}
-                };
-            }
-            const hashKey = hash({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                field: column.field,
-                key,
-            });
-            if (!__classPrivateFieldGet(this, _cache$1)[hashKey]) {
-                let items = [];
-                if (typeof ((_d = column.option) === null || _d === void 0 ? void 0 : _d.items) === 'function') {
-                    items = yield column.option.items();
+                return value;
+            }
+            const { items, valueField, displayField } = column.option;
+            let key;
+            if (typeof (items) === 'function') {
+                key = hash(Object.assign(Object.assign({}, column), { value }));
+                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                    const values = yield items(value, true);
+                    __classPrivateFieldGet(this, _cache$1)[key] = {
+                        items: values,
+                        obj: Array.toObject(values, valueField)
+                    };
                 }
-                else {
-                    items = column.option.items;
+            }
+            else {
+                key = hash(Object.assign({}, column));
+                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                    __classPrivateFieldGet(this, _cache$1)[key] = {
+                        items: items || [],
+                        obj: Array.toObject(items, valueField)
+                    };
                 }
-                __classPrivateFieldGet(this, _cache$1)[hashKey] = {
-                    values: items,
-                    obj: this.utilityService.arrayToObject(items, column.option.valueField)
-                };
             }
-            return __classPrivateFieldGet(this, _cache$1)[hashKey];
+            return (_e = (_d = __classPrivateFieldGet(this, _cache$1)[key].obj[valueField]) === null || _d === void 0 ? void 0 : _d[displayField]) !== null && _e !== void 0 ? _e : value;
         });
-        this.getValues = (column, key) => {
-            const hashKey = hash({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                field: column.field,
-                key,
-            });
-            return __classPrivateFieldGet(this, _cache$1)[hashKey] || {
-                values: [],
-                obj: {}
-            };
-        };
     }
 }
-_prefix$1 = new WeakMap(), _cache$1 = new WeakMap();
-SdGridService.decorators = [
-    { type: Injectable }
-];
-SdGridService.ctorParameters = () => [
-    { type: SdUtilityService }
+_cache$1 = new WeakMap();
+SdColumnValuesPipe.decorators = [
+    { type: 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;
 class SdGridMaterial {
-    constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
+    constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, columnValuesPipe) {
         this.ref = ref;
         this.configuration = configuration;
         this.gridConfigurationService = gridConfigurationService;
         this.exportService = exportService;
         this.notifyService = notifyService;
         this.translateService = translateService;
-        this.gridService = gridService;
+        this.columnValuesPipe = columnValuesPipe;
         this.key = v4();
         this.localItems = [];
         this.items = [];
@@ -1522,8 +1509,8 @@ class SdGridMaterial {
                     const allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
                     for (const item of exportItems) {
                         const obj = {};
-                        const handle = (exportColumn) => {
-                            var _a, _b;
+                        const handle = (exportColumn) => __awaiter(this, void 0, void 0, function* () {
+                            var _q, _r;
                             obj[exportColumn.field] = item[exportColumn.field];
                             const column = allColumns.find(e => e.field === exportColumn.field);
                             const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
@@ -1554,10 +1541,10 @@ class SdGridMaterial {
                             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';
+                                    obj[column.field] = ((_q = column.option) === null || _q === void 0 ? void 0 : _q.displayOnTrue) || 'True';
                                 }
                                 else {
-                                    obj[column.field] = ((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False';
+                                    obj[column.field] = ((_r = column.option) === null || _r === void 0 ? void 0 : _r.displayOnFalse) || 'False';
                                 }
                             }
                             else if (column.type === 'date') {
@@ -1577,20 +1564,16 @@ class SdGridMaterial {
                             }
                             else if (column.type === 'values') {
                                 // Nếu là values thì lấy giá trị của value được chọn
-                                const 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];
-                                }
+                                obj[column.field] = yield this.columnValuesPipe.transform(item[column.field], column);
                             }
                             else {
                                 obj[column.field] = item[column.field];
                             }
-                        };
+                        });
                         // this.gridOption.columns.forEach(handle);
-                        columns.forEach(handle);
+                        for (const exportColumn of columns) {
+                            yield handle(exportColumn);
+                        }
                         items.push(obj);
                     }
                     pageNumber++;
@@ -1662,7 +1645,7 @@ class SdGridMaterial {
             this.reload(false);
         };
         this.onExpand = (rowData) => __awaiter(this, void 0, void 0, function* () {
-            var _q, _r, _s;
+            var _s, _t, _u;
             if (rowData.isExpanding) {
                 return;
             }
@@ -1670,8 +1653,8 @@ class SdGridMaterial {
                 rowData.isExpanded = false;
                 return;
             }
-            const 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)) {
+            const 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(item => item.isExpanding = item.isExpanded = false);
             }
             if (data instanceof Promise) {
@@ -2007,7 +1990,7 @@ SdGridMaterial.ctorParameters = () => [
     { type: SdExportService },
     { type: SdNotifyService },
     { type: SdTranslateService },
-    { type: SdGridService }
+    { type: SdColumnValuesPipe }
 ];
 SdGridMaterial.propDecorators = {
     quickAction: [{ type: ViewChild, args: [SdQuickAction,] }],
@@ -2151,25 +2134,6 @@ SdCommandTitlePipe.decorators = [
             },] }
 ];
 
-class SdColumnValuesPipe {
-    constructor(gridService) {
-        this.gridService = gridService;
-        this.transform = (value, column, key) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const data = yield this.gridService.loadValues(column, key);
-            return (_a = data.obj[value]) !== null && _a !== void 0 ? _a : value;
-        });
-    }
-}
-SdColumnValuesPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnValues'
-            },] }
-];
-SdColumnValuesPipe.ctorParameters = () => [
-    { type: SdGridService }
-];
-
 class SdColumnHtmlTemplatePipe {
     constructor(deviceService) {
         this.isMobileOrTablet = false;
@@ -2211,6 +2175,61 @@ SdDesktopCellView.propDecorators = {
     gridOption: [{ type: Input }]
 };
 
+var _prefix$1, _cache$2;
+class SdGridService {
+    constructor(utilityService) {
+        this.utilityService = utilityService;
+        _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
+        _cache$2.set(this, {});
+        this.loadValues = (column, key) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            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 {
+                    values: [],
+                    obj: {}
+                };
+            }
+            const hashKey = hash__default({
+                prefix: __classPrivateFieldGet(this, _prefix$1),
+                field: column.field,
+                key,
+            });
+            if (!__classPrivateFieldGet(this, _cache$2)[hashKey]) {
+                let items = [];
+                if (typeof ((_d = column.option) === null || _d === void 0 ? void 0 : _d.items) === 'function') {
+                    items = yield column.option.items();
+                }
+                else {
+                    items = column.option.items;
+                }
+                __classPrivateFieldGet(this, _cache$2)[hashKey] = {
+                    values: items,
+                    obj: Array.toObject(items, column.option.valueField)
+                };
+            }
+            return __classPrivateFieldGet(this, _cache$2)[hashKey];
+        });
+        this.getValues = (column, key) => {
+            const hashKey = hash__default({
+                prefix: __classPrivateFieldGet(this, _prefix$1),
+                field: column.field,
+                key,
+            });
+            return __classPrivateFieldGet(this, _cache$2)[hashKey] || {
+                values: [],
+                obj: {}
+            };
+        };
+    }
+}
+_prefix$1 = new WeakMap(), _cache$2 = new WeakMap();
+SdGridService.decorators = [
+    { type: Injectable }
+];
+SdGridService.ctorParameters = () => [
+    { type: SdUtilityService }
+];
+
 class SdColumnTransformPipe {
     constructor(gridService) {
         this.gridService = gridService;
@@ -2300,7 +2319,7 @@ class SdDesktopCellChildrenView {
 SdDesktopCellChildrenView.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -2437,7 +2456,7 @@ SdGridConfigurationResultPipe.ctorParameters = () => [
     { type: SdGridConfigurationService }
 ];
 
-var _cache$2;
+var _cache$3;
 class SdPopupGridConfiguration {
     constructor(ref, notifyService, translateService, gridConfigurationService) {
         this.ref = ref;
@@ -2445,24 +2464,24 @@ class SdPopupGridConfiguration {
         this.translateService = translateService;
         this.gridConfigurationService = gridConfigurationService;
         this.changes = new EventEmitter();
-        _cache$2.set(this, void 0);
+        _cache$3.set(this, void 0);
         this.isCreatingColumn = false;
         this.selected = {};
         this.disabledDrag = true;
         this.open = () => __awaiter(this, void 0, void 0, function* () {
-            __classPrivateFieldSet(this, _cache$2, this.gridConfigurationService.init(this.key, this.gridOption));
-            this.configuration = yield __classPrivateFieldGet(this, _cache$2).get();
+            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
+            this.configuration = yield __classPrivateFieldGet(this, _cache$3).get();
             this.modal.open();
         });
         this.onSave = () => {
-            __classPrivateFieldGet(this, _cache$2).set(this.configuration);
+            __classPrivateFieldGet(this, _cache$3).set(this.configuration);
             this.modal.close();
             this.ref.detectChanges();
         };
         this.onReset = () => __awaiter(this, void 0, void 0, function* () {
             const { translate } = this.translateService;
             this.notifyService.confirm(translate('Reset grid configuration to default')).then(() => {
-                __classPrivateFieldGet(this, _cache$2).remove();
+                __classPrivateFieldGet(this, _cache$3).remove();
                 this.modal.close();
                 this.ref.detectChanges();
             });
@@ -2486,7 +2505,7 @@ class SdPopupGridConfiguration {
                 generatedColumns: this.configuration.columns.filter(e => { var _a; return this.selected[(_a = e.origin) === null || _a === void 0 ? void 0 : _a.field]; }).map(e => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.field; })
             };
             this.configuration.columns.push(generatedColumn);
-            this.configuration = __classPrivateFieldGet(this, _cache$2).set(this.configuration);
+            this.configuration = __classPrivateFieldGet(this, _cache$3).set(this.configuration);
             this.isCreatingColumn = false;
         });
     }
@@ -2506,7 +2525,7 @@ class SdPopupGridConfiguration {
         this.disabledDrag = true;
     }
 }
-_cache$2 = new WeakMap();
+_cache$3 = new WeakMap();
 SdPopupGridConfiguration.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-grid-configuration',
@@ -2586,7 +2605,7 @@ class SdSelectionActionFilterPipe {
                 if ('children' in action) {
                     const children = [];
                     for (const childAction of action.children) {
-                        const key = hash(childAction);
+                        const key = hash__default(childAction);
                         if (selectedItems.every(e => e.actions.includes(key))) {
                             children.push(childAction);
                         }
@@ -2596,7 +2615,7 @@ class SdSelectionActionFilterPipe {
                     }
                 }
                 else {
-                    const key = hash(action);
+                    const key = hash__default(action);
                     if (selectedItems.every(e => e.actions.includes(key))) {
                         results.push(action);
                     }
@@ -2629,7 +2648,7 @@ class SdSelectionDisablePipe {
             const availableActions = actions.filter(action => {
                 if ('children' in action) {
                     for (const childAction of action.children) {
-                        const key = hash(childAction);
+                        const key = hash__default(childAction);
                         if (selectedItems.every(e => e.actions.includes(key))) {
                             return true;
                         }
@@ -2637,7 +2656,7 @@ class SdSelectionDisablePipe {
                     return false;
                 }
                 else {
-                    const key = hash(action);
+                    const key = hash__default(action);
                     return selectedItems.every(e => e.actions.includes(key));
                 }
             });
@@ -2645,13 +2664,13 @@ class SdSelectionDisablePipe {
             for (const action of availableActions) {
                 if ('children' in action) {
                     for (const childAction of action.children) {
-                        if (rowData.actions.includes(hash(childAction))) {
+                        if (rowData.actions.includes(hash__default(childAction))) {
                             return false;
                         }
                     }
                 }
                 else {
-                    if (rowData.actions.includes(hash(action))) {
+                    if (rowData.actions.includes(hash__default(action))) {
                         return false;
                     }
                 }
@@ -2693,35 +2712,35 @@ SdSelectionVisibleSelectAllPipe.decorators = [
             },] }
 ];
 
-var _cache$3;
+var _cache$4;
 class SdGeneratedColumnService {
     constructor(settingService) {
         this.settingService = settingService;
-        _cache$3.set(this, {});
+        _cache$4.set(this, {});
         this.load = (configuration) => {
             if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
                 return null;
             }
-            const key = hash({
+            const key = hash__default({
                 prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
                 key: configuration.key
             });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
+            if (!__classPrivateFieldGet(this, _cache$4)[key]) {
                 if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.createServer(key, {
                         args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                         default: []
                     });
                 }
                 else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.create(key, {
                         type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                         args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                         default: []
                     });
                 }
             }
-            return __classPrivateFieldGet(this, _cache$3)[key];
+            return __classPrivateFieldGet(this, _cache$4)[key];
         };
         this.loadSystem = (configuration) => {
             var _a, _b;
@@ -2731,30 +2750,30 @@ class SdGeneratedColumnService {
             if (!(configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn)) {
                 return null;
             }
-            const key = hash({
+            const key = hash__default({
                 prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
                 key: configuration.key
             });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
+            if (!__classPrivateFieldGet(this, _cache$4)[key]) {
                 if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.createServer(key, {
                         args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
                         default: []
                     });
                 }
                 else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.create(key, {
                         type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                         args: (_b = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _b === void 0 ? void 0 : _b.args,
                         default: []
                     });
                 }
             }
-            return __classPrivateFieldGet(this, _cache$3)[key];
+            return __classPrivateFieldGet(this, _cache$4)[key];
         };
     }
 }
-_cache$3 = new WeakMap();
+_cache$4 = new WeakMap();
 SdGeneratedColumnService.decorators = [
     { type: Injectable }
 ];
@@ -2929,7 +2948,7 @@ class SdEditorHandlerRowPipe {
             item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status, removable: false, savable: false, cancelable: false });
         }
         const { sdId, editorHandlerColumn } = item, remain = __rest(item, ["sdId", "editorHandlerColumn"]);
-        item.sdId = hash(remain);
+        item.sdId = hash__default(remain);
         return item.editorHandlerRow;
     }
 }
@@ -2967,7 +2986,7 @@ class SdEditorHandlerColumnPipe {
             item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, col, item) });
         }
         const { sdId, editorHandlerColumn } = item, remain = __rest(item, ["sdId", "editorHandlerColumn"]);
-        item.sdId = hash(remain);
+        item.sdId = hash__default(remain);
         return true;
     }
 }
@@ -3106,7 +3125,7 @@ class SdSelectionVisiblePipe {
                     let flag = false;
                     for (const childAction of action.children) {
                         const { hidden } = childAction;
-                        const key = hash(childAction);
+                        const key = hash__default(childAction);
                         if (typeof (hidden) === 'function') {
                             if (!hidden(rowData)) {
                                 rowData.actions.push(key);
@@ -3119,12 +3138,12 @@ class SdSelectionVisiblePipe {
                         }
                     }
                     if (flag) {
-                        rowData.actions.push(hash(action));
+                        rowData.actions.push(hash__default(action));
                     }
                 }
                 else {
                     const { hidden } = action;
-                    const key = hash(action);
+                    const key = hash__default(action);
                     if (typeof (hidden) === 'function') {
                         if (!hidden(rowData)) {
                             rowData.actions.push(key);
@@ -3150,7 +3169,7 @@ class SdIdPipe {
     transform(value, item, column) {
         const { sdId, editorHandlerColumn } = item, remain = __rest(item, ["sdId", "editorHandlerColumn"]);
         item.editorHandlerColumn = item.editorHandlerColumn || {};
-        item.sdId = hash(remain);
+        item.sdId = hash__default(remain);
         item.editorHandlerColumn[column.field] = Object.assign({}, item.editorHandlerColumn[column.field]);
         return item.sdId;
     }
@@ -3186,9 +3205,9 @@ SdGridQuickAction.propDecorators = {
 
 var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
 class SdCellViewPipe {
-    constructor(deviceService, utilityService, gridService) {
+    constructor(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);
@@ -3198,7 +3217,7 @@ class SdCellViewPipe {
         __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
     }
     transform(value, rowData, column, gridOption, key) {
-        var _a, _b, _c, _d;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const { displayOnEmpty } = gridOption;
             const { align, click, tooltip, htmlTemplate, transform } = column;
@@ -3262,8 +3281,7 @@ class SdCellViewPipe {
                         result.display.value = Date.toFormat(value, 'HH:mm');
                     }
                     if (column.type === 'values') {
-                        const data = yield this.gridService.loadValues(column, key);
-                        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;
+                        result.display.value = yield this.columnValuesPipe.transform(value, column);
                     }
                     else if (column.type === 'number' && Number.isNumber(value)) {
                         result.display.value = Number.toVNCurrency(value);
@@ -3289,7 +3307,7 @@ class SdCellViewPipe {
                 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') {
@@ -3320,7 +3338,7 @@ SdCellViewPipe.decorators = [
 SdCellViewPipe.ctorParameters = () => [
     { type: DeviceDetectorService },
     { type: SdUtilityService },
-    { type: SdGridService }
+    { type: SdColumnValuesPipe }
 ];
 
 class MatPaginatorIntlCro extends MatPaginatorIntl {
@@ -3439,6 +3457,7 @@ SdGridMaterialModule.decorators = [
                     SdGridFilterService,
                     SdGridConfigurationService,
                     SdGeneratedColumnService,
+                    SdColumnValuesPipe,
                     {
                         provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro
                     }
@@ -3450,5 +3469,5 @@ SdGridMaterialModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandTitlePipe as ɵba, SdColumnValuesPipe as ɵbb, SdColumnHtmlTemplatePipe as ɵbc, SdColumnTransformPipe as ɵbd, SdColumnTooltipPipe as ɵbe, SdColumnBadgePipe as ɵbf, SdFilterColumnPipe as ɵbg, SdFilterExternalPipe as ɵbh, SdSelectionActionFilterPipe as ɵbi, SdSelectionVisiblePipe as ɵbj, SdSelectionDisablePipe as ɵbk, SdSelectionVisibleSelectAllPipe as ɵbl, SdEditorHandlerRowPipe as ɵbm, SdEditorHandlerColumnPipe as ɵbn, SdEditorValidatePipe as ɵbo, SdIdPipe as ɵbp, SdStyleRowCss as ɵbq, SdCellViewPipe as ɵbr, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdGridQuickAction as ɵj, SdDesktopCell as ɵk, SdDesktopCellEditor as ɵl, SdDesktopEditorValidation as ɵm, SdDesktopCellView as ɵn, SdDesktopCellChildrenView as ɵo, SdDesktopCommand as ɵp, SdColumnInlineFilter as ɵq, SdPopupGridConfiguration as ɵr, SdDynamicColumn as ɵs, SdGeneratedColumnService as ɵt, SdGridConfigurationResultPipe as ɵu, SdColumnChildrenFilterPipe as ɵv, SdColumnTitlePipe as ɵw, SdCommandFilterPipe as ɵx, SdCommandDisablePipe as ɵy, SdCommandIconPipe as ɵz };
+export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandTitlePipe as ɵba, SdColumnHtmlTemplatePipe as ɵbb, SdColumnTransformPipe as ɵbc, SdGridService as ɵbd, SdColumnTooltipPipe as ɵbe, SdColumnBadgePipe as ɵbf, SdFilterColumnPipe as ɵbg, SdFilterExternalPipe as ɵbh, SdSelectionActionFilterPipe as ɵbi, SdSelectionVisiblePipe as ɵbj, SdSelectionDisablePipe as ɵbk, SdSelectionVisibleSelectAllPipe as ɵbl, SdEditorHandlerRowPipe as ɵbm, SdEditorHandlerColumnPipe as ɵbn, SdEditorValidatePipe as ɵbo, SdIdPipe as ɵbp, SdStyleRowCss as ɵbq, SdCellViewPipe as ɵbr, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdColumnValuesPipe as ɵi, SdGridQuickAction as ɵj, SdDesktopCell as ɵk, SdDesktopCellEditor as ɵl, SdDesktopEditorValidation as ɵm, SdDesktopCellView as ɵn, SdDesktopCellChildrenView as ɵo, SdDesktopCommand as ɵp, SdColumnInlineFilter as ɵq, SdPopupGridConfiguration as ɵr, SdDynamicColumn as ɵs, SdGeneratedColumnService as ɵt, SdGridConfigurationResultPipe as ɵu, SdColumnChildrenFilterPipe as ɵv, SdColumnTitlePipe as ɵw, SdCommandFilterPipe as ɵx, SdCommandDisablePipe as ɵy, SdCommandIconPipe as ɵz };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map