@sd-angular/core 1.0.8 → 1.0.13

package/bundles/sd-angular-core-grid-material.umd.js

@@ -2748,7 +2748,7 @@
                             animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
                     ],
-                    styles: [":host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:12px!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]
+                    styles: [".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:12px!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]
                 },] }
     ];
     SdGridMaterial.ctorParameters = function () { return [
@@ -3023,9 +3023,9 @@
     SdDesktopCellView.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-desktop-cell-view',
-                    template: "<ng-container *sdLet=\"item[column.field] | cellView:item:column:gridOption:key | async as view\">\r\n  <div *ngIf=\"!!view.display.html;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.html;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>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".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}"]
+                    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}"]
                 },] }
     ];
     SdDesktopCellView.ctorParameters = function () { return []; };
@@ -4095,7 +4095,7 @@
                     selector: 'sd-desktop-editor-validation',
                     template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:items:gridOption | async\">\r\n  <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n    [matTooltip]=\"item.editorErrorMessage\">\r\n  </div>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:100%;left:0;padding:12px 0;position:absolute;top:0}:host .c-editor-validation{border-bottom-right-radius:2px;border-top-right-radius:2px;height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
+                    styles: [".text-black400{color:#757575}:host{height:100%;left:0;padding:12px 0;position:absolute;top:0}:host .c-editor-validation{border-bottom-right-radius:2px;border-top-right-radius:2px;height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
                 },] }
     ];
     SdDesktopEditorValidation.ctorParameters = function () { return []; };
@@ -4279,9 +4279,9 @@
         SdCellViewPipe.prototype.transform = function (value, rowData, column, gridOption, key) {
             var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var displayOnEmpty, align, click, tooltip, htmlTemplate, transform, result, timeDifferent, seconds, data, option;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var displayOnEmpty, align, click, tooltip, htmlTemplate, transform, result, val, _e, option, seconds, data, option;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             displayOnEmpty = gridOption.displayOnEmpty;
                             align = column.align, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
@@ -4296,70 +4296,82 @@
                             };
                             if (!(typeof (htmlTemplate) === 'function')) return [3 /*break*/, 1];
                             result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
-                            return [3 /*break*/, 7];
+                            return [3 /*break*/, 10];
                         case 1:
-                            if (!transform) return [3 /*break*/, 2];
-                            result.display.value = transform(value, rowData);
-                            return [3 /*break*/, 6];
+                            if (!(typeof (transform) === 'function')) return [3 /*break*/, 5];
+                            val = transform(value, rowData);
+                            if (!(val instanceof Promise)) return [3 /*break*/, 3];
+                            _e = result.display;
+                            return [4 /*yield*/, val];
                         case 2:
+                            _e.value = _f.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            result.display.value = val;
+                            _f.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
                             if (column.type === 'date' || column.type === 'datetime') {
-                                timeDifferent = column.option.timeDifferent;
+                                option = column.option;
                                 seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
-                                if (timeDifferent === 'month' && seconds < __classPrivateFieldGet(this, _maxMonth)) {
+                                if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'month' && seconds < __classPrivateFieldGet(this, _maxMonth)) {
                                     result.display.value = this.utilityService.timeDifference(value);
                                     result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
                                 }
-                                else if (timeDifferent === 'day' && seconds < __classPrivateFieldGet(this, _maxDay)) {
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'day' && seconds < __classPrivateFieldGet(this, _maxDay)) {
                                     result.display.value = this.utilityService.timeDifference(value);
                                     result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
                                 }
-                                else if (timeDifferent === 'hour' && seconds < __classPrivateFieldGet(this, _maxHour)) {
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'hour' && seconds < __classPrivateFieldGet(this, _maxHour)) {
                                     result.display.value = this.utilityService.timeDifference(value);
                                     result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
                                 }
-                                else if (timeDifferent === 'minute' && seconds < __classPrivateFieldGet(this, _maxMinute)) {
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'minute' && seconds < __classPrivateFieldGet(this, _maxMinute)) {
                                     result.display.value = this.utilityService.timeDifference(value);
                                     result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
                                 }
-                                else if (timeDifferent === 'second' && seconds < __classPrivateFieldGet(this, _maxSecond)) {
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'second' && seconds < __classPrivateFieldGet(this, _maxSecond)) {
                                     result.display.value = this.utilityService.timeDifference(value);
                                     result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
                                 }
                                 else {
                                     result.display.value = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                    if (column.type === 'datetime' && result.display.value) {
+                                        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>";
+                                    }
                                 }
                             }
                             if (column.type === 'time') {
                                 result.display.value = Date.toFormat(value, 'HH:mm');
                             }
-                            if (!(column.type === 'values')) return [3 /*break*/, 4];
+                            if (!(column.type === 'values')) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.gridService.loadValues(column, key)];
-                        case 3:
-                            data = _e.sent();
+                        case 6:
+                            data = _f.sent();
                             result.display.value = (_c = (_a = data.obj[value]) === null || _a === void 0 ? void 0 : _a[(_b = column.option) === null || _b === void 0 ? void 0 : _b.displayField]) !== null && _c !== void 0 ? _c : value;
-                            return [3 /*break*/, 5];
-                        case 4:
+                            return [3 /*break*/, 8];
+                        case 7:
                             if (column.type === 'number' && Number.isNumber(value)) {
-                                result.display.value = Number.toVNCurrency(value); // this.decimalPipe.transform(value, '1.0-2');
+                                result.display.value = Number.toVNCurrency(value);
                             }
-                            _e.label = 5;
-                        case 5:
+                            _f.label = 8;
+                        case 8:
                             if (column.type === 'bool') {
                                 option = column.option;
                                 result.display.value = value === true ? ((option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True') : ((option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False');
                             }
-                            _e.label = 6;
-                        case 6:
+                            _f.label = 9;
+                        case 9:
                             if (displayOnEmpty && (result.display.value === null || result.display.value === undefined || result.display.value === '')) {
                                 if (typeof (displayOnEmpty) === 'function') {
                                     result.display.html = displayOnEmpty(rowData, column);
                                 }
                                 else {
-                                    result.display.html = "<div class=\"T16R\">--</div>";
+                                    result.display.html = "<div class=\"T16R text-black400\">--</div>";
                                 }
                             }
-                            _e.label = 7;
-                        case 7:
+                            _f.label = 10;
+                        case 10:
                             // Badge
                             if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
                                 result.badge = {