@sd-angular/core 1.0.45 → 1.0.48

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';
@@ -40,6 +40,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
 import { SdSideDrawer } from '@sd-angular/core/side-drawer';
+import { SdUtilityService } from '@sd-angular/core/utility';
 
 class SdMaterialCellDefDirective {
     constructor(templateRef) {
@@ -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)
             });
@@ -1101,70 +1102,57 @@ SdGridConfigurationService.ctorParameters = () => [
 ];
 
 var _prefix$1, _cache$1;
-class SdGridService {
-    constructor(utilityService) {
-        this.utilityService = utilityService;
+class SdColumnValuesPipe {
+    constructor() {
         _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
         _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({ prefix: __classPrivateFieldGet(this, _prefix$1) }, 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({ prefix: __classPrivateFieldGet(this, _prefix$1) }, 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[value]) === 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 }
+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 +1510,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 +1542,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 +1565,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 +1646,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 +1654,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 +1991,7 @@ SdGridMaterial.ctorParameters = () => [
     { type: SdExportService },
     { type: SdNotifyService },
     { type: SdTranslateService },
-    { type: SdGridService }
+    { type: SdColumnValuesPipe }
 ];
 SdGridMaterial.propDecorators = {
     quickAction: [{ type: ViewChild, args: [SdQuickAction,] }],
@@ -2151,25 +2135,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;
@@ -2197,7 +2162,7 @@ class SdDesktopCellView {
 SdDesktopCellView.decorators = [
     { type: 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: 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}"]
             },] }
@@ -2212,24 +2177,23 @@ SdDesktopCellView.propDecorators = {
 };
 
 class SdColumnTransformPipe {
-    constructor(gridService) {
-        this.gridService = gridService;
+    constructor(columnValuesPipe) {
+        this.columnValuesPipe = columnValuesPipe;
     }
     transform(value, rowData, column, key) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             if (column === null || column === void 0 ? void 0 : column.transform) {
                 return column.transform(value, rowData);
             }
             if (column.type === 'values') {
-                const data = yield this.gridService.loadValues(column, key);
-                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 yield this.columnValuesPipe.transform(value, column);
             }
             if (column.type === 'number' && Number.isNumber(value)) {
                 return Number.toVNCurrency(value); // this.decimalPipe.transform(value, '1.0-2');
             }
             if (column.type === 'bool') {
-                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 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 value;
         });
@@ -2241,7 +2205,7 @@ SdColumnTransformPipe.decorators = [
             },] }
 ];
 SdColumnTransformPipe.ctorParameters = () => [
-    { type: SdGridService }
+    { type: SdColumnValuesPipe }
 ];
 
 class SdFilterExternalPipe {
@@ -2300,7 +2264,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}"]
             },] }
 ];
@@ -2586,7 +2550,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 +2560,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 +2593,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 +2601,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 +2609,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;
                     }
                 }
@@ -2702,7 +2666,7 @@ class SdGeneratedColumnService {
             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
             });
@@ -2731,7 +2695,7 @@ 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
             });
@@ -2929,7 +2893,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 +2931,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 +3070,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 +3083,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 +3114,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 +3150,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 +3162,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;
@@ -3225,6 +3189,10 @@ class SdCellViewPipe {
                     else {
                         result.display.value = val;
                     }
+                    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>`;
+                    }
                 }
                 else {
                     if (column.type === 'date' || column.type === 'datetime') {
@@ -3262,8 +3230,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 +3256,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 +3287,7 @@ SdCellViewPipe.decorators = [
 SdCellViewPipe.ctorParameters = () => [
     { type: DeviceDetectorService },
     { type: SdUtilityService },
-    { type: SdGridService }
+    { type: SdColumnValuesPipe }
 ];
 
 class MatPaginatorIntlCro extends MatPaginatorIntl {
@@ -3435,10 +3402,10 @@ SdGridMaterialModule.decorators = [
                     DecimalPipe,
                     SdIdPipe,
                     CdkColumnDef,
-                    SdGridService,
                     SdGridFilterService,
                     SdGridConfigurationService,
                     SdGeneratedColumnService,
+                    SdColumnValuesPipe,
                     {
                         provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro
                     }
@@ -3450,5 +3417,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, SdColumnTooltipPipe as ɵbd, SdColumnBadgePipe as ɵbe, SdFilterColumnPipe as ɵbf, SdFilterExternalPipe as ɵbg, SdSelectionActionFilterPipe as ɵbh, SdSelectionVisiblePipe as ɵbi, SdSelectionDisablePipe as ɵbj, SdSelectionVisibleSelectAllPipe as ɵbk, SdEditorHandlerRowPipe as ɵbl, SdEditorHandlerColumnPipe as ɵbm, SdEditorValidatePipe as ɵbn, SdIdPipe as ɵbo, SdStyleRowCss as ɵbp, SdCellViewPipe as ɵbq, 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