@sd-angular/core 1.0.5 → 1.0.9

package/esm2015/grid-material/src/lib/pipes/cell-view.pipe.js

@@ -0,0 +1,131 @@
+var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet;
+import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { Pipe } from '@angular/core';
+import { SdUtilityService } from '@sd-angular/core/utility';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { SdGridService } from '../services/grid.service';
+export class SdCellViewPipe {
+    constructor(deviceService, utilityService, gridService) {
+        this.utilityService = utilityService;
+        this.gridService = gridService;
+        _maxSecond.set(this, 60);
+        _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
+        _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
+        _maxDay.set(this, __classPrivateFieldGet(this, _maxHour) * 30);
+        _maxMonth.set(this, __classPrivateFieldGet(this, _maxHour) * 365);
+        _isMobileOrTablet.set(this, false);
+        __classPrivateFieldSet(this, _isMobileOrTablet, !deviceService.isDesktop());
+    }
+    transform(value, rowData, column, gridOption, key) {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { displayOnEmpty } = gridOption;
+            const { align, click, tooltip, htmlTemplate, transform } = column;
+            const result = {
+                badge: null,
+                tooltip: null,
+                display: {
+                    align: align || (column.type === 'number' ? 'right' : 'left'),
+                    value
+                },
+                click: null
+            };
+            // Display
+            if (typeof (htmlTemplate) === 'function') {
+                result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet));
+            }
+            else {
+                if (transform) {
+                    result.display.value = transform(value, rowData);
+                }
+                else {
+                    if (column.type === 'date' || column.type === 'datetime') {
+                        const { option } = column;
+                        const seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
+                        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 ((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 ((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 ((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 ((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 === 'time') {
+                        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;
+                    }
+                    else if (column.type === 'number' && Number.isNumber(value)) {
+                        result.display.value = Number.toVNCurrency(value);
+                    }
+                    if (column.type === 'bool') {
+                        const { option } = column;
+                        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');
+                    }
+                }
+                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>`;
+                    }
+                }
+            }
+            // Badge
+            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                result.badge = {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: column.badge(value, rowData),
+                    icon: (_d = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _d === void 0 ? void 0 : _d.call(column, value, rowData)
+                };
+            }
+            else if (column.type === 'bool') {
+                result.badge = {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: !!value ? 'success' : 'danger',
+                    icon: null
+                };
+            }
+            // Tooltip
+            if (typeof (tooltip) === 'function') {
+                result.tooltip = tooltip(value, rowData);
+            }
+            // Clickable
+            if (typeof (click) === 'function') {
+                result.click = () => click(value, rowData);
+            }
+            return result;
+        });
+    }
+}
+_maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet = new WeakMap();
+SdCellViewPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'cellView'
+            },] }
+];
+SdCellViewPipe.ctorParameters = () => [
+    { type: DeviceDetectorService },
+    { type: SdUtilityService },
+    { type: SdGridService }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2VsbC12aWV3LnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9jZWxsLXZpZXcucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUNBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3BELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzVELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBSTVELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUl6RCxNQUFNLE9BQU8sY0FBYztJQU96QixZQUNFLGFBQW9DLEVBQzVCLGNBQWdDLEVBQ2hDLFdBQTBCO1FBRDFCLG1CQUFjLEdBQWQsY0FBYyxDQUFrQjtRQUNoQyxnQkFBVyxHQUFYLFdBQVcsQ0FBZTtRQVRwQyxxQkFBYSxFQUFFLEVBQUM7UUFDaEIscUJBQWEsMkNBQWtCLEVBQUUsRUFBQztRQUNsQyxtQkFBVywyQ0FBa0IsRUFBRSxFQUFDO1FBQ2hDLGtCQUFVLHlDQUFnQixFQUFFLEVBQUM7UUFDN0Isb0JBQVkseUNBQWdCLEdBQUcsRUFBQztRQUNoQyw0QkFBb0IsS0FBSyxFQUFDO1FBS3hCLHVCQUFBLElBQUkscUJBQXFCLENBQUMsYUFBYSxDQUFDLFNBQVMsRUFBRSxFQUFDO0lBQ3RELENBQUM7SUFDSyxTQUFTLENBQUMsS0FBVSxFQUFFLE9BQVksRUFBRSxNQUE0QixFQUFFLFVBQWdDLEVBQUUsR0FBVzs7O1lBQ25ILE1BQU0sRUFBRSxjQUFjLEVBQUUsR0FBRyxVQUFVLENBQUM7WUFDdEMsTUFBTSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsR0FB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SUFBSSxPQUFPLENBQUMsS0FBSyxDQUFDLEtBQUssVUFBVSxFQUFFO2dCQUNqQyxNQUFNLENBQUMsS0FBSyxHQUFHLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLENBQUM7YUFDNUM7WUFDRCxPQUFPLE1BQU0sQ0FBQzs7S0FDZjs7OztZQXRHRixJQUFJLFNBQUM7Z0JBQ0osSUFBSSxFQUFFLFVBQVU7YUFDakI7OztZQVBRLHFCQUFxQjtZQURyQixnQkFBZ0I7WUFLaEIsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEUgfSBmcm9tICdAYW5ndWxhci9jZGsva2V5Y29kZXMnO1xyXG5pbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkVXRpbGl0eVNlcnZpY2UgfSBmcm9tICdAc2QtYW5ndWxhci9jb3JlL3V0aWxpdHknO1xyXG5pbXBvcnQgeyBEZXZpY2VEZXRlY3RvclNlcnZpY2UgfSBmcm9tICduZ3gtZGV2aWNlLWRldGVjdG9yJztcclxuaW1wb3J0IHsgU2RDZWxsVmlldyB9IGZyb20gJy4uL21vZGVscy9ncmlkLWNlbGwubW9kZWwnO1xyXG5pbXBvcnQgeyBTZEdyaWRNYXRlcmlhbENvbHVtbiB9IGZyb20gJy4uL21vZGVscy9ncmlkLWNvbHVtbi5tb2RlbCc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsT3B0aW9uIH0gZnJvbSAnLi4vbW9kZWxzL2dyaWQtb3B0aW9uLm1vZGVsJztcclxuaW1wb3J0IHsgU2RHcmlkU2VydmljZSB9IGZyb20gJy4uL3NlcnZpY2VzL2dyaWQuc2VydmljZSc7XHJcbkBQaXBlKHtcclxuICBuYW1lOiAnY2VsbFZpZXcnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZENlbGxWaWV3UGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gICNtYXhTZWNvbmQgPSA2MDtcclxuICAjbWF4TWludXRlID0gdGhpcy4jbWF4U2Vjb25kICogNjA7XHJcbiAgI21heEhvdXIgPSB0aGlzLiNtYXhNaW51dGUgKiAyNDtcclxuICAjbWF4RGF5ID0gdGhpcy4jbWF4SG91ciAqIDMwO1xyXG4gICNtYXhNb250aCA9IHRoaXMuI21heEhvdXIgKiAzNjU7XHJcbiAgI2lzTW9iaWxlT3JUYWJsZXQgPSBmYWxzZTtcclxuICBjb25zdHJ1Y3RvcihcclxuICAgIGRldmljZVNlcnZpY2U6IERldmljZURldGVjdG9yU2VydmljZSxcclxuICAgIHByaXZhdGUgdXRpbGl0eVNlcnZpY2U6IFNkVXRpbGl0eVNlcnZpY2UsXHJcbiAgICBwcml2YXRlIGdyaWRTZXJ2aWNlOiBTZEdyaWRTZXJ2aWNlKSB7XHJcbiAgICB0aGlzLiNpc01vYmlsZU9yVGFibGV0ID0gIWRldmljZVNlcnZpY2UuaXNEZXNrdG9wKCk7XHJcbiAgfVxyXG4gIGFzeW5jIHRyYW5zZm9ybSh2YWx1ZTogYW55LCByb3dEYXRhOiBhbnksIGNvbHVtbjogU2RHcmlkTWF0ZXJpYWxDb2x1bW4sIGdyaWRPcHRpb246IFNkR3JpZE1hdGVyaWFsT3B0aW9uLCBrZXk6IHN0cmluZyk6IFByb21pc2U8U2RDZWxsVmlldz4ge1xyXG4gICAgY29uc3QgeyBkaXNwbGF5T25FbXB0eSB9ID0gZ3JpZE9wdGlvbjtcclxuICAgIGNvbnN0IHsgYWxpZ24sIGNsaWNrLCB0b29sdGlwLCBodG1sVGVtcGxhdGUsIHRyYW5zZm9ybSB9ID0gY29sdW1uO1xyXG4gICAgY29uc3QgcmVzdWx0OiBTZENlbGxWaWV3ID0ge1xyXG4gICAgICBiYWRnZTogbnVsbCxcclxuICAgICAgdG9vbHRpcDogbnVsbCxcclxuICAgICAgZGlzcGxheToge1xyXG4gICAgICAgIGFsaWduOiBhbGlnbiB8fCAoY29sdW1uLnR5cGUgPT09ICdudW1iZXInID8gJ3JpZ2h0JyA6ICdsZWZ0JyksXHJcbiAgICAgICAgdmFsdWVcclxuICAgICAgfSxcclxuICAgICAgY2xpY2s6IG51bGxcclxuICAgIH1cclxuICAgIC8vIERpc3BsYXlcclxuICAgIGlmICh0eXBlb2YgKGh0bWxUZW1wbGF0ZSkgPT09ICdmdW5jdGlvbicpIHtcclxuICAgICAgcmVzdWx0LmRpc3BsYXkuaHRtbCA9IGh0bWxUZW1wbGF0ZSh2YWx1ZSwgcm93RGF0YSwgdGhpcy4jaXNNb2JpbGVPclRhYmxldCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBpZiAodHJhbnNmb3JtKSB7XHJcbiAgICAgICAgcmVzdWx0LmRpc3BsYXkudmFsdWUgPSB0cmFuc2Zvcm0odmFsdWUsIHJvd0RhdGEpO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIGlmIChjb2x1bW4udHlwZSA9PT0gJ2RhdGUnIHx8IGNvbHVtbi50eXBlID09PSAnZGF0ZXRpbWUnKSB7XHJcbiAgICAgICAgICBjb25zdCB7IG9wdGlvbiB9ID0gY29sdW1uO1xyXG4gICAgICAgICAgY29uc3Qgc2Vjb25kcyA9IE1hdGgucm91bmQoKG5ldyBEYXRlKCkuZ2V0VGltZSgpIC0gbmV3IERhdGUodmFsdWUpLmdldFRpbWUoKSkgLyAxMDAwKTtcclxuICAgICAgICAgIGlmIChvcHRpb24/LnRpbWVEaWZmZXJlbnQgPT09ICdtb250aCcgJiYgc2Vjb25kcyA8IHRoaXMuI21heE1vbnRoKSB7XHJcbiAgICAgICAgICAgIHJlc3VsdC5kaXNwbGF5LnZhbHVlID0gdGhpcy51dGlsaXR5U2VydmljZS50aW1lRGlmZmVyZW5jZSh2YWx1ZSk7XHJcbiAgICAgICAgICAgIHJlc3VsdC50b29sdGlwID0gRGF0ZS50b0Zvcm1hdCh2YWx1ZSwgY29sdW1uLnR5cGUgPT09ICdkYXRlJyA/ICdkZC9NTS95eXl5JyA6ICdkZC9NTS95eXl5IEhIOm1tJyk7XHJcbiAgICAgICAgICB9IGVsc2UgaWYgKG9wdGlvbj8udGltZURpZmZlcmVudCA9PT0gJ2RheScgJiYgc2Vjb25kcyA8IHRoaXMuI21heERheSkge1xyXG4gICAgICAgICAgICByZXN1bHQuZGlzcGxheS52YWx1ZSA9IHRoaXMudXRpbGl0eVNlcnZpY2UudGltZURpZmZlcmVuY2UodmFsdWUpO1xyXG4gICAgICAgICAgICByZXN1bHQudG9vbHRpcCA9IERhdGUudG9Gb3JtYXQodmFsdWUsIGNvbHVtbi50eXBlID09PSAnZGF0ZScgPyAnZGQvTU0veXl5eScgOiAnZGQvTU0veXl5eSBISDptbScpO1xyXG4gICAgICAgICAgfSBlbHNlIGlmIChvcHRpb24/LnRpbWVEaWZmZXJlbnQgPT09ICdob3VyJyAmJiBzZWNvbmRzIDwgdGhpcy4jbWF4SG91cikge1xyXG4gICAgICAgICAgICByZXN1bHQuZGlzcGxheS52YWx1ZSA9IHRoaXMudXRpbGl0eVNlcnZpY2UudGltZURpZmZlcmVuY2UodmFsdWUpO1xyXG4gICAgICAgICAgICByZXN1bHQudG9vbHRpcCA9IERhdGUudG9Gb3JtYXQodmFsdWUsIGNvbHVtbi50eXBlID09PSAnZGF0ZScgPyAnZGQvTU0veXl5eScgOiAnZGQvTU0veXl5eSBISDptbScpO1xyXG4gICAgICAgICAgfSBlbHNlIGlmIChvcHRpb24/LnRpbWVEaWZmZXJlbnQgPT09ICdtaW51dGUnICYmIHNlY29uZHMgPCB0aGlzLiNtYXhNaW51dGUpIHtcclxuICAgICAgICAgICAgcmVzdWx0LmRpc3BsYXkudmFsdWUgPSB0aGlzLnV0aWxpdHlTZXJ2aWNlLnRpbWVEaWZmZXJlbmNlKHZhbHVlKTtcclxuICAgICAgICAgICAgcmVzdWx0LnRvb2x0aXAgPSBEYXRlLnRvRm9ybWF0KHZhbHVlLCBjb2x1bW4udHlwZSA9PT0gJ2RhdGUnID8gJ2RkL01NL3l5eXknIDogJ2RkL01NL3l5eXkgSEg6bW0nKTtcclxuICAgICAgICAgIH0gZWxzZSBpZiAob3B0aW9uPy50aW1lRGlmZmVyZW50ID09PSAnc2Vjb25kJyAmJiBzZWNvbmRzIDwgdGhpcy4jbWF4U2Vjb25kKSB7XHJcbiAgICAgICAgICAgIHJlc3VsdC5kaXNwbGF5LnZhbHVlID0gdGhpcy51dGlsaXR5U2VydmljZS50aW1lRGlmZmVyZW5jZSh2YWx1ZSk7XHJcbiAgICAgICAgICAgIHJlc3VsdC50b29sdGlwID0gRGF0ZS50b0Zvcm1hdCh2YWx1ZSwgY29sdW1uLnR5cGUgPT09ICdkYXRlJyA/ICdkZC9NTS95eXl5JyA6ICdkZC9NTS95eXl5IEhIOm1tJyk7XHJcbiAgICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICByZXN1bHQuZGlzcGxheS52YWx1ZSA9IERhdGUudG9Gb3JtYXQodmFsdWUsIGNvbHVtbi50eXBlID09PSAnZGF0ZScgPyAnZGQvTU0veXl5eScgOiAnZGQvTU0veXl5eSBISDptbScpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgICAgICBpZiAoY29sdW1uLnR5cGUgPT09ICd0aW1lJykge1xyXG4gICAgICAgICAgcmVzdWx0LmRpc3BsYXkudmFsdWUgPSBEYXRlLnRvRm9ybWF0KHZhbHVlLCAnSEg6bW0nKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgaWYgKGNvbHVtbi50eXBlID09PSAndmFsdWVzJykge1xyXG4gICAgICAgICAgY29uc3QgZGF0YSA9IGF3YWl0IHRoaXMuZ3JpZFNlcnZpY2UubG9hZFZhbHVlcyhjb2x1bW4sIGtleSk7XHJcbiAgICAgICAgICByZXN1bHQuZGlzcGxheS52YWx1ZSA9IGRhdGEub2JqW3ZhbHVlXT8uW2NvbHVtbi5vcHRpb24/LmRpc3BsYXlGaWVsZF0gPz8gdmFsdWU7XHJcbiAgICAgICAgfSBlbHNlIGlmIChjb2x1bW4udHlwZSA9PT0gJ251bWJlcicgJiYgTnVtYmVyLmlzTnVtYmVyKHZhbHVlKSkge1xyXG4gICAgICAgICAgcmVzdWx0LmRpc3BsYXkudmFsdWUgPSBOdW1iZXIudG9WTkN1cnJlbmN5KHZhbHVlKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgaWYgKGNvbHVtbi50eXBlID09PSAnYm9vbCcpIHtcclxuICAgICAgICAgIGNvbnN0IHsgb3B0aW9uIH0gPSBjb2x1bW47XHJcbiAgICAgICAgICByZXN1bHQuZGlzcGxheS52YWx1ZSA9IHZhbHVlID09PSB0cnVlID8gKG9wdGlvbj8uZGlzcGxheU9uVHJ1ZSB8fCAnVHJ1ZScpIDogKG9wdGlvbj8uZGlzcGxheU9uRmFsc2UgfHwgJ0ZhbHNlJyk7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICAgIGlmIChkaXNwbGF5T25FbXB0eSAmJiAocmVzdWx0LmRpc3BsYXkudmFsdWUgPT09IG51bGwgfHwgcmVzdWx0LmRpc3BsYXkudmFsdWUgPT09IHVuZGVmaW5lZCB8fCByZXN1bHQuZGlzcGxheS52YWx1ZSA9PT0gJycpKSB7XHJcbiAgICAgICAgaWYgKHR5cGVvZiAoZGlzcGxheU9uRW1wdHkpID09PSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgICAgICByZXN1bHQuZGlzcGxheS5odG1sID0gZGlzcGxheU9uRW1wdHkocm93RGF0YSwgY29sdW1uKTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgcmVzdWx0LmRpc3BsYXkuaHRtbCA9IGA8ZGl2IGNsYXNzPVwiVDE2UlwiPi0tPC9kaXY+YFxyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgLy8gQmFkZ2VcclxuICAgIGlmICgoY29sdW1uLnR5cGUgPT09ICdzdHJpbmcnIHx8IGNvbHVtbi50eXBlID09PSAnbnVtYmVyJyB8fCBjb2x1bW4udHlwZSA9PT0gJ3ZhbHVlcycpICYmIGNvbHVtbi5iYWRnZSkge1xyXG4gICAgICByZXN1bHQuYmFkZ2UgPSB7XHJcbiAgICAgICAgdHlwZTogIWNvbHVtbj8uYmFkZ2VUeXBlID8gJ3JvdW5kJyA6IGNvbHVtbi5iYWRnZVR5cGUsXHJcbiAgICAgICAgY29sb3I6IGNvbHVtbi5iYWRnZSh2YWx1ZSwgcm93RGF0YSksXHJcbiAgICAgICAgaWNvbjogY29sdW1uPy5iYWRnZUljb24/Lih2YWx1ZSwgcm93RGF0YSlcclxuICAgICAgfVxyXG4gICAgfSBlbHNlIGlmIChjb2x1bW4udHlwZSA9PT0gJ2Jvb2wnKSB7XHJcbiAgICAgIHJlc3VsdC5iYWRnZSA9IHtcclxuICAgICAgICB0eXBlOiAhY29sdW1uPy5iYWRnZVR5cGUgPyAncm91bmQnIDogY29sdW1uLmJhZGdlVHlwZSxcclxuICAgICAgICBjb2xvcjogISF2YWx1ZSA/ICdzdWNjZXNzJyA6ICdkYW5nZXInLFxyXG4gICAgICAgIGljb246IG51bGxcclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgLy8gVG9vbHRpcFxyXG4gICAgaWYgKHR5cGVvZiAodG9vbHRpcCkgPT09ICdmdW5jdGlvbicpIHtcclxuICAgICAgcmVzdWx0LnRvb2x0aXAgPSB0b29sdGlwKHZhbHVlLCByb3dEYXRhKTtcclxuICAgIH1cclxuICAgIC8vIENsaWNrYWJsZVxyXG4gICAgaWYgKHR5cGVvZiAoY2xpY2spID09PSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgIHJlc3VsdC5jbGljayA9ICgpID0+IGNsaWNrKHZhbHVlLCByb3dEYXRhKTtcclxuICAgIH1cclxuICAgIHJldHVybiByZXN1bHQ7XHJcbiAgfVxyXG59XHJcbiJdfQ==

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

@@ -420,7 +420,7 @@ _filterOptionChanges = new WeakMap(), _subscription = new WeakMap(), _loadDefaul
 SdGridFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-filter',
-                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && (columns?.length || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
                 styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];
@@ -2186,9 +2186,9 @@ class SdDesktopCellView {
 SdDesktopCellView.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-cell-view',
-                template: "<ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n  <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n    [ngClass]=\"{'cursor-pointer':column.click}\"\r\n    [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n  </div>\r\n</ng-container>\r\n<ng-template #useDefaultView>\r\n  <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n    <ng-container *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n      <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n        <ng-container\r\n          *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n          <ng-container *ngIf=\"!!badge\">\r\n            <sd-badge [type]=\"badge.type\" [title]=\"val\" [color]=\"badge.color\" [icon]=\"badge.icon\" [tooltip]=\"tooltip\"\r\n              (sdClick)=\"column.click(item[column.field], item)\"></sd-badge>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!badge\">\r\n            <div class=\"text-break\" [matTooltip]=\"tooltip\">\r\n              <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{val}}</a>\r\n              <ng-container *ngIf=\"!column.click\">{{val}}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n        <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n          [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n          {{val | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'time'\">\r\n          {{val | date:'HH:mm'}}\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"val\" [src]=\"val\" [width]=\"column.option?.width\" [height]=\"column.option?.height\"\r\n            style=\"margin: 5px 0;object-fit: contain;\" (click)=\"column.click && column.click(item[column.field], item)\"\r\n            [ngClass]=\"{'pointer':column.click}\">\r\n          <mat-icon *ngIf=\"!val\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n  </sd-desktop-cell-children-view>\r\n</ng-template>",
+                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>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
+                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}"]
             },] }
 ];
 SdDesktopCellView.ctorParameters = () => [];
@@ -2196,7 +2196,8 @@ SdDesktopCellView.propDecorators = {
     sdId: [{ type: Input }],
     key: [{ type: Input }],
     column: [{ type: Input }],
-    item: [{ type: Input }]
+    item: [{ type: Input }],
+    gridOption: [{ type: Input }]
 };
 
 class SdColumnTransformPipe {
@@ -2846,7 +2847,7 @@ class SdDesktopCell {
 SdDesktopCell.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-cell',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow?.visible;else useView\">\r\n    <!-- <ng-container *sdLet=\"item[column.field] | sdId:item:column\"> -->\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              cellDef[column.field].templateRef;\r\n              context: { item: item, column: column, idx: idx, isEdited: true }\r\n            \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- </ng-container> -->\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow?.visible;else useView\">\r\n    <!-- <ng-container *sdLet=\"item[column.field] | sdId:item:column\"> -->\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              cellDef[column.field].templateRef;\r\n              context: { item: item, column: column, idx: idx, isEdited: true }\r\n            \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n    <!-- </ng-container> -->\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [gridOption]=\"gridOption\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2876,7 +2877,7 @@ class SdDesktopCellEditor {
 SdDesktopCellEditor.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-cell-editor',
-                template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n  (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: true, display: column.option?.displayOnTrue || 'True' },\r\n        { value: false, display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-select>\r\n<sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n  [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\r\n</sd-select>\r\n<sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n  [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-autocomplete>\r\n<sd-date-time *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(model)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-date-time>",
+                template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input-currency *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n  (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input-currency>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: true, display: column.option?.displayOnTrue || 'True' },\r\n        { value: false, display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-select>\r\n<sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n  [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\r\n</sd-select>\r\n<sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n  [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-autocomplete>\r\n<sd-date-time *ngIf=\"\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time'\r\n      \" size=\"sm\" [(model)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-date-time>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -3172,6 +3173,132 @@ SdGridQuickAction.propDecorators = {
     clear: [{ type: Output }]
 };
 
+var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
+class SdCellViewPipe {
+    constructor(deviceService, utilityService, gridService) {
+        this.utilityService = utilityService;
+        this.gridService = gridService;
+        _maxSecond.set(this, 60);
+        _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
+        _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
+        _maxDay.set(this, __classPrivateFieldGet(this, _maxHour) * 30);
+        _maxMonth.set(this, __classPrivateFieldGet(this, _maxHour) * 365);
+        _isMobileOrTablet$1.set(this, false);
+        __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
+    }
+    transform(value, rowData, column, gridOption, key) {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { displayOnEmpty } = gridOption;
+            const { align, click, tooltip, htmlTemplate, transform } = column;
+            const result = {
+                badge: null,
+                tooltip: null,
+                display: {
+                    align: align || (column.type === 'number' ? 'right' : 'left'),
+                    value
+                },
+                click: null
+            };
+            // Display
+            if (typeof (htmlTemplate) === 'function') {
+                result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
+            }
+            else {
+                if (transform) {
+                    result.display.value = transform(value, rowData);
+                }
+                else {
+                    if (column.type === 'date' || column.type === 'datetime') {
+                        const { option } = column;
+                        const seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
+                        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 ((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 ((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 ((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 ((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 === 'time') {
+                        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;
+                    }
+                    else if (column.type === 'number' && Number.isNumber(value)) {
+                        result.display.value = Number.toVNCurrency(value);
+                    }
+                    if (column.type === 'bool') {
+                        const { option } = column;
+                        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');
+                    }
+                }
+                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>`;
+                    }
+                }
+            }
+            // Badge
+            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                result.badge = {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: column.badge(value, rowData),
+                    icon: (_d = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _d === void 0 ? void 0 : _d.call(column, value, rowData)
+                };
+            }
+            else if (column.type === 'bool') {
+                result.badge = {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: !!value ? 'success' : 'danger',
+                    icon: null
+                };
+            }
+            // Tooltip
+            if (typeof (tooltip) === 'function') {
+                result.tooltip = tooltip(value, rowData);
+            }
+            // Clickable
+            if (typeof (click) === 'function') {
+                result.click = () => click(value, rowData);
+            }
+            return result;
+        });
+    }
+}
+_maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet$1 = new WeakMap();
+SdCellViewPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'cellView'
+            },] }
+];
+SdCellViewPipe.ctorParameters = () => [
+    { type: DeviceDetectorService },
+    { type: SdUtilityService },
+    { type: SdGridService }
+];
+
 class MatPaginatorIntlCro extends MatPaginatorIntl {
     constructor() {
         super(...arguments);
@@ -3268,7 +3395,8 @@ SdGridMaterialModule.decorators = [
                     SdEditorHandlerColumnPipe,
                     SdEditorValidatePipe,
                     SdIdPipe,
-                    SdStyleRowCss
+                    SdStyleRowCss,
+                    SdCellViewPipe
                 ],
                 exports: [
                     SdGridMaterial,
@@ -3298,5 +3426,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, 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, 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 };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map