@sd-angular/core 1.3.0 → 1.3.1

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

@@ -1,3935 +0,0 @@
-import { Pipe, InjectionToken, Directive, TemplateRef, Input, Injectable, QueryList, Component, ChangeDetectionStrategy, Inject, Optional, ChangeDetectorRef, ViewChildren, ViewChild, ContentChildren, EventEmitter, Output, ViewEncapsulation, NgModule } from '@angular/core';
-import { DatePipe, DecimalPipe, CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatTableModule } from '@angular/material/table';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-import { SdServiceModule } from '@sd-angular/core/service';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { __classPrivateFieldGet, __awaiter, __rest, __classPrivateFieldSet } from 'tslib';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import $ from 'jquery';
-import { SdApiService } from '@sd-angular/core/api';
-import { SdExcelService } from '@sd-angular/core/excel';
-import { SdNotifyService } from '@sd-angular/core/notify';
-import { SdLoadingService } from '@sd-angular/core/loading';
-import { SdTranslateService } from '@sd-angular/core/translate';
-import { Subscription, merge } from 'rxjs';
-import { startWith } from 'rxjs/operators';
-import { SdSettingService } from '@sd-angular/core/setting';
-import hash from 'object-hash';
-import { MatSelectModule } from '@angular/material/select';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { SdUtilityService } from '@sd-angular/core/utility';
-import { SdUploadExcel, SdUploadExcelModule } from '@sd-angular/core/upload-excel';
-import { SdFormModule } from '@sd-angular/core/form';
-
-const defaultGridOption = {
-    type: undefined,
-    items: [],
-    filter: {
-        type: 'inline',
-        disabled: false
-    },
-    sortable: true,
-    paginate: {
-        pageSize: 50,
-        pageCount: 5
-    },
-    commands: [],
-    columns: []
-};
-
-class EditorHandlerPipe {
-    transform(value, item, gridOption) {
-        const visible = (column) => {
-            var _a, _b, _c, _d;
-            if (column.type === 'children') {
-                return false;
-            }
-            let isDisabled = false;
-            // Kiểm tra xem có bị disabled hay không?
-            if (column.editor) {
-                isDisabled = typeof (column.editor.disabled) === 'function' ? column.editor.disabled(item) : column.editor.disabled;
-            }
-            // Nếu bị disabled return false
-            if (isDisabled) {
-                return false;
-            }
-            if (typeof ((_a = gridOption.editor) === null || _a === void 0 ? void 0 : _a.disabled) === 'function') {
-                isDisabled = gridOption.editor.disabled(item);
-            }
-            else {
-                isDisabled = (_b = gridOption.editor) === null || _b === void 0 ? void 0 : _b.disabled;
-            }
-            // Nếu bị disabled return false
-            if (isDisabled) {
-                return false;
-            }
-            // Hiển thị editor nếu dòng đó:
-            // Đang được edit: editingStatus
-            return item.editingStatus
-                // Được thiết lập alwayDisplay
-                || ((_c = column.editor) === null || _c === void 0 ? void 0 : _c.alwayDisplay)
-                // Editable có thuộc tính type inline
-                || ((_d = gridOption.editor) === null || _d === void 0 ? void 0 : _d.type) === 'inline';
-        };
-        item.editorHandler = item.editorHandler || {};
-        for (const column of gridOption.columns) {
-            item.editorHandler.disabled = false;
-            item.editorHandler[column.field] = {};
-            if (typeof (gridOption.editor) === 'object') {
-                if (typeof (gridOption.editor.disabled) === 'function') {
-                    item.editorHandler.disabled = gridOption.editor.disabled(item);
-                }
-                else {
-                    item.editorHandler.disabled = gridOption.editor.disabled;
-                }
-            }
-            else {
-                item.editorHandler.disabled = false;
-            }
-            if (item.editorHandler.disabled) {
-                item.editorHandler[column.field].visible = false;
-            }
-            else {
-                item.editorHandler[column.field].visible = visible(column);
-            }
-        }
-        return true;
-    }
-}
-EditorHandlerPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorHandler'
-            },] }
-];
-
-const GRID_CONFIG = new InjectionToken('grid.configuration');
-
-class SdCellDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdCellDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdCellDef]'
-            },] }
-];
-SdCellDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdCellDefDirective.propDecorators = {
-    sdCellDef: [{ type: Input }]
-};
-
-class SdCellFooterDevDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdCellFooterDevDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdCellFooterDef]'
-            },] }
-];
-SdCellFooterDevDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdCellFooterDevDirective.propDecorators = {
-    sdCellFooterDef: [{ type: Input }]
-};
-
-class SdCellEditorDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdCellEditorDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdCellEditorDef]'
-            },] }
-];
-SdCellEditorDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdCellEditorDefDirective.propDecorators = {
-    sdCellEditorDef: [{ type: Input }]
-};
-
-class HandlerLocal {
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-        this.filter = (localItems, filterInfo) => {
-            const items = localItems.filter(item => {
-                for (const column of filterInfo.columns) {
-                    const filterValue = (filterInfo.rawFilter[column.field] || '').toString().trim().toLowerCase();
-                    const columnValue = (item[column.field] || '').toString().trim().toLowerCase();
-                    if (filterValue) {
-                        if (!columnValue) {
-                            return false;
-                        }
-                        if (column.type === 'string') {
-                            if (columnValue.indexOf(filterValue) === -1) {
-                                return false;
-                            }
-                        }
-                        else if (column.type === 'values' || column.type === 'radio') {
-                            if (columnValue !== filterValue) {
-                                return false;
-                            }
-                        }
-                        else if (column.type === 'number') {
-                            const fValue = +filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '');
-                            const cValue = +columnValue;
-                            if (fValue || fValue === 0) {
-                                if (!cValue && cValue !== 0) {
-                                    return false;
-                                }
-                                if (filterValue.indexOf('>=') > -1 && cValue < fValue) {
-                                    return false;
-                                }
-                                else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
-                                    return false;
-                                }
-                                else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
-                                    return false;
-                                }
-                                else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
-                                    return false;
-                                }
-                                else if (cValue !== fValue) {
-                                    return false;
-                                }
-                            }
-                        }
-                        else if (column.type === 'bool') {
-                            if (filterValue === '1' && columnValue !== '1' && columnValue !== 'true') {
-                                return false;
-                            }
-                            else if (filterValue === '0' && columnValue !== '0' && columnValue !== 'false') {
-                                return false;
-                            }
-                        }
-                        else if (column.type === 'date' || column.type === 'datetime') {
-                            const date = this.datePipe.transform(filterValue, 'yyyy/MM/dd');
-                            const fromDate = new Date(date);
-                            const toDate = new Date(date);
-                            toDate.setDate(toDate.getDate() + 1);
-                            if (new Date(columnValue).getTime() < fromDate.getTime() || new Date(columnValue).getTime() >= toDate.getTime()) {
-                                return false;
-                            }
-                        }
-                    }
-                }
-                return true;
-            });
-            // Sort
-            if (filterInfo.orderBy && filterInfo.orderDirection) {
-                const column = filterInfo.columns.find(e => e.field === filterInfo.orderBy);
-                if (column) {
-                    const { type, field } = column;
-                    items.sort((current, next) => {
-                        if (type === 'number') {
-                            return (current[field] || 0) - (next[field] || 0);
-                        }
-                        if (type === 'date' || type === 'datetime' || type === 'time') {
-                            const d1 = new Date(current[field] || '').getTime();
-                            const d2 = new Date(current[field] || '').getTime();
-                            return d1 - d2;
-                        }
-                        const s1 = (current[field] || '').toString();
-                        const s2 = (next[field] || '').toString();
-                        if (s1 > s2) {
-                            return 1;
-                        }
-                        if (s1 < s2) {
-                            return -1;
-                        }
-                        return 0;
-                    });
-                    if (filterInfo.orderDirection === 'DESC') {
-                        items.reverse();
-                    }
-                }
-            }
-            return {
-                items,
-                total: items.length
-            };
-        };
-    }
-}
-HandlerLocal.decorators = [
-    { type: Injectable }
-];
-HandlerLocal.ctorParameters = () => [
-    { type: DatePipe }
-];
-
-var _isGuid;
-class HandlerDotnet {
-    constructor() {
-        this.mapRequest = (filterInfo) => {
-            var _a;
-            const result = {
-                whereClause: '1>0',
-                pageSize: filterInfo.pageSize,
-                pageNumber: filterInfo.pageNumber,
-                orderBy: filterInfo.orderBy,
-                orderDirection: filterInfo.orderDirection,
-                filter: {},
-                externalFilter: {}
-            };
-            if (filterInfo.customFilter) {
-                // Nếu custom filter là string
-                if (typeof (filterInfo.customFilter) === 'string') {
-                    result.whereClause += ` AND ${filterInfo.customFilter}`;
-                }
-                else if (typeof (filterInfo.customFilter) === 'function') {
-                    result.whereClause += ` AND ${filterInfo.customFilter()}`;
-                }
-            }
-            const executeColumnNoChildren = (column) => {
-                var _a;
-                if (!filterInfo.rawFilter[column.field] && filterInfo.rawFilter[column.field] !== 0) {
-                    return;
-                }
-                result.filter[column.field] = filterInfo.rawFilter[column.field];
-                if (column.type === 'string') {
-                    const filterValue = ((_a = filterInfo.rawFilter[column.field]) !== null && _a !== void 0 ? _a : '').toString();
-                    if (__classPrivateFieldGet(this, _isGuid).call(this, filterValue)) {
-                        result.whereClause += ` AND ${column.field} = GUID("${filterInfo.rawFilter[column.field]}")`;
-                    }
-                    else if (filterValue.startsWith('!=')) {
-                        result.whereClause += ` AND ${column.field} != "${filterValue.substring(2, filterValue.length)}"`;
-                    }
-                    else if (filterValue.startsWith('=')) {
-                        result.whereClause += ` AND ${column.field} = "${filterValue.substring(1, filterValue.length)}"`;
-                    }
-                    else if (filterValue.startsWith('%')) {
-                        result.whereClause += ` AND ${column.field}.EndsWith("${filterValue.substring(1, filterValue.length)}")`;
-                    }
-                    else if (filterValue.endsWith('%')) {
-                        result.whereClause += ` AND ${column.field}.StartsWith("${filterValue.substring(0, filterValue.length - 1)}")`;
-                    }
-                    else {
-                        result.whereClause += ` AND ${column.field}.Contains("${filterValue}")`;
-                    }
-                }
-                else if (column.type === 'number') {
-                    const value = +(filterInfo.rawFilter[column.field].replace('>=', '').replace('<=', '').replace('>', '').replace('<', '').trim());
-                    if (filterInfo.rawFilter[column.field].indexOf('>=') > -1) {
-                        result.whereClause += ` AND ${column.field} >= ${value}`;
-                    }
-                    else if (filterInfo.rawFilter[column.field].indexOf('<=') > -1) {
-                        result.whereClause += ` AND ${column.field} <= ${value}`;
-                    }
-                    else if (filterInfo.rawFilter[column.field].indexOf('>') > -1) {
-                        result.whereClause += ` AND ${column.field} > ${value}`;
-                    }
-                    else if (filterInfo.rawFilter[column.field].indexOf('<') > -1) {
-                        result.whereClause += ` AND ${column.field} < ${value}`;
-                    }
-                    else {
-                        result.whereClause += ` AND ${column.field} = ${value}`;
-                    }
-                }
-                else if (column.type === 'bool') {
-                    if (filterInfo.rawFilter[column.field] === '0' || filterInfo.rawFilter[column.field] === '1') {
-                        result.whereClause += ` AND ${column.field} = ${filterInfo.rawFilter[column.field] === '1' ? 'true' : 'false'}`;
-                    }
-                }
-                else if (column.type === 'values') {
-                    if (filterInfo.rawFilter[column.field]) {
-                        if (__classPrivateFieldGet(this, _isGuid).call(this, filterInfo.rawFilter[column.field])) {
-                            result.whereClause += ` AND ${column.field} = GUID("${filterInfo.rawFilter[column.field]}")`;
-                        }
-                        else if (typeof (filterInfo.rawFilter[column.field]) === 'string') {
-                            result.whereClause += ` AND ${column.field} = "${filterInfo.rawFilter[column.field]}"`;
-                        }
-                        else {
-                            result.whereClause += ` AND ${column.field} = ${filterInfo.rawFilter[column.field]}`;
-                        }
-                    }
-                }
-                else if (column.type === 'radio') {
-                    if (filterInfo.rawFilter[column.field]) {
-                        result.whereClause += ` AND ${column.field} = "${filterInfo.rawFilter[column.field]}"`;
-                    }
-                }
-                else if (column.type === 'date' || column.type === 'datetime') {
-                    // "DateTime(yyyy,mm,dd,HH,mm,ss)"
-                    // generate fromDate, toDate
-                    let date = new Date(filterInfo.rawFilter[column.field]);
-                    // From Date
-                    date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
-                    result.whereClause += ` AND ${column.field} >= DateTime(${date.getFullYear()},${date.getMonth() + 1},${date.getDate()})`;
-                    // To Date
-                    date.setDate(date.getDate() + 1);
-                    result.whereClause += ` AND ${column.field} < DateTime(${date.getFullYear()},${date.getMonth() + 1},${date.getDate()})`;
-                }
-            };
-            const executeColumnChildren = (columnChildren) => {
-                var _a;
-                let flag = false;
-                for (const column of columnChildren.children) {
-                    if (filterInfo.rawFilter[column.field] || filterInfo.rawFilter[column.field] === 0) {
-                        executeColumnNoChildren(column);
-                        flag = true;
-                    }
-                }
-                if (flag) {
-                    return;
-                }
-                if (!filterInfo.rawFilter[columnChildren.field]) {
-                    return;
-                }
-                result.filter[columnChildren.field] = filterInfo.rawFilter[columnChildren.field];
-                let whereClause = '';
-                const filterValue = ((_a = filterInfo.rawFilter[columnChildren.field]) !== null && _a !== void 0 ? _a : '').toString().trim();
-                for (const column of columnChildren.children) {
-                    if (column.type === 'string') {
-                        if (__classPrivateFieldGet(this, _isGuid).call(this, filterValue)) {
-                            whereClause += ` OR ${column.field} = GUID("${filterValue}")`;
-                        }
-                        else if (filterValue.startsWith('!=')) {
-                            whereClause += ` OR ${column.field} != "${filterValue.substring(2, filterValue.length)}"`;
-                        }
-                        else if (filterValue.startsWith('=')) {
-                            whereClause += ` OR ${column.field} = "${filterValue.substring(1, filterValue.length)}"`;
-                        }
-                        else if (filterValue.startsWith('%')) {
-                            whereClause += ` OR ${column.field}.EndsWith("${filterValue.substring(1, filterValue.length)}")`;
-                        }
-                        else if (filterValue.endsWith('%')) {
-                            whereClause += ` OR ${column.field}.StartsWith("${filterValue.substring(0, filterValue.length - 1)}")`;
-                        }
-                        else {
-                            whereClause += ` OR ${column.field}.Contains("${filterValue}")`;
-                        }
-                    }
-                    else if (column.type === 'number') {
-                        const value = +(filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '').trim());
-                        if (!Number.isNaN(value)) {
-                            if (filterValue.indexOf('>=') > -1) {
-                                whereClause += ` OR ${column.field} >= ${value}`;
-                            }
-                            else if (filterValue.indexOf('<=') > -1) {
-                                whereClause += ` OR ${column.field} <= ${value}`;
-                            }
-                            else if (filterValue.indexOf('>') > -1) {
-                                whereClause += ` OR ${column.field} > ${value}`;
-                            }
-                            else if (filterValue.indexOf('<') > -1) {
-                                whereClause += ` OR ${column.field} < ${value}`;
-                            }
-                            else {
-                                whereClause += ` OR ${column.field} = ${value}`;
-                            }
-                        }
-                    }
-                    else if (column.type === 'bool') {
-                        if (filterValue === '0' || filterValue === '1') {
-                            whereClause += ` OR ${column.field} = ${filterValue === '1' ? 'true' : 'false'}`;
-                        }
-                    }
-                    else if (column.type === 'values') {
-                        if (__classPrivateFieldGet(this, _isGuid).call(this, filterValue)) {
-                            whereClause += ` OR ${column.field} = GUID("${filterValue}")`;
-                        }
-                        if (typeof (filterInfo.rawFilter[column.field]) === 'string') {
-                            whereClause += ` OR ${column.field} = "${filterValue}"`;
-                        }
-                        else {
-                            whereClause += ` OR ${column.field} = ${filterValue}`;
-                        }
-                    }
-                    else if (column.type === 'radio') {
-                        if (filterValue) {
-                            whereClause += ` OR ${column.field} = "${filterValue}"`;
-                        }
-                    }
-                    else if (column.type === 'date' || column.type === 'datetime') {
-                        // "DateTime(yyyy,mm,dd,HH,mm,ss)"
-                        // generate fromDate, toDate
-                        if (Date.isDate(filterValue)) {
-                            let date = new Date(filterValue);
-                            // From Date
-                            date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
-                            whereClause += ` OR (${column.field} >= DateTime(${date.getFullYear()},${date.getMonth() + 1},${date.getDate()})`;
-                            // To Date
-                            date.setDate(date.getDate() + 1);
-                            whereClause += ` AND ${column.field} < DateTime(${date.getFullYear()},${date.getMonth() + 1},${date.getDate()}))`;
-                        }
-                    }
-                }
-                if (whereClause.trim().startsWith('OR')) {
-                    whereClause = whereClause.trim().substr(2).trim();
-                    result.whereClause += ` AND(${whereClause})`;
-                }
-            };
-            filterInfo.columns.forEach(column => {
-                if (column.type !== 'children') {
-                    executeColumnNoChildren(column);
-                }
-                else {
-                    executeColumnChildren(column);
-                }
-            });
-            (_a = filterInfo.externalFilters) === null || _a === void 0 ? void 0 : _a.forEach(externalFilter => {
-                var _a, _b, _c, _d, _e;
-                const { field, type } = externalFilter;
-                if (type === 'daterangefull') {
-                    result.externalFilter[field] = (_a = filterInfo.rawExternalFilter) === null || _a === void 0 ? void 0 : _a[field];
-                    if (((_b = result.externalFilter[field]) === null || _b === void 0 ? void 0 : _b.from) && ((_c = result.externalFilter[field]) === null || _c === void 0 ? void 0 : _c.to)) {
-                        const fromDate = new Date((_d = result.externalFilter[field]) === null || _d === void 0 ? void 0 : _d.from);
-                        const toDate = Date.addDays((_e = result.externalFilter[field]) === null || _e === void 0 ? void 0 : _e.to, 1);
-                        // tslint:disable-next-line: max-line-length
-                        result.whereClause += ` AND ${field} >= DateTime(${fromDate.getFullYear()},${fromDate.getMonth() + 1},${fromDate.getDate()})`;
-                        result.whereClause += ` AND ${field} < DateTime(${toDate.getFullYear()},${toDate.getMonth() + 1},${toDate.getDate()})`;
-                    }
-                    return;
-                }
-            });
-            return result;
-        };
-        this.mapResponse = (res) => {
-            const { items, total } = res;
-            return {
-                items,
-                total
-            };
-        };
-        _isGuid.set(this, (key) => {
-            const regex = /[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}/i;
-            return regex.test(key);
-        });
-    }
-}
-_isGuid = new WeakMap();
-HandlerDotnet.decorators = [
-    { type: Injectable }
-];
-
-var _numberOfFooterRows, _paginator, _subscription, _setSelectedItems;
-class SdGrid {
-    constructor(configuration, ref, deviceService, handlerLocal, handlerDotnet, translateService, datePipe, loadingService, apiService, excelService, notifyService, editorVisiblePipe) {
-        this.configuration = configuration;
-        this.ref = ref;
-        this.handlerLocal = handlerLocal;
-        this.handlerDotnet = handlerDotnet;
-        this.translateService = translateService;
-        this.datePipe = datePipe;
-        this.loadingService = loadingService;
-        this.apiService = apiService;
-        this.excelService = excelService;
-        this.notifyService = notifyService;
-        this.editorVisiblePipe = editorVisiblePipe;
-        this.isMobileOrTablet = false;
-        this.displayKey = 'SDCUSTOM';
-        this.localItems = [];
-        this.items = [];
-        this.filter = {};
-        this.externalFilter = {};
-        this.hiddenPaginate = false;
-        this.inlineExternal = {};
-        this.inlineColumn = {};
-        this.quickFilters = [];
-        // Paginate
-        this.pages = [1];
-        this.pageCount = 5;
-        this.totalPage = 1;
-        // Loading
-        this.isLoading = false;
-        this.viewItems = [];
-        this.fixedColumns = [];
-        this.normalColumns = [];
-        this.columns = [];
-        this.isCheckedAll = false;
-        this.selectedItems = [];
-        this.cellDefs = new QueryList();
-        this.cellDef = {};
-        this.cellEditorDefs = new QueryList();
-        this.cellEditorDef = {};
-        this.cellFooterDefs = new QueryList();
-        this.cellFooterDef = {};
-        _numberOfFooterRows.set(this, 0);
-        this.footerRows = [];
-        _paginator.set(this, void 0);
-        this.selectedItem = null;
-        _subscription.set(this, new Subscription());
-        this.rowHandler = {
-            click: (item) => {
-                this.selectedItem = item;
-                if (this.gridOption.onClickRow) {
-                    this.gridOption.onClickRow(item);
-                }
-            },
-            dblClick: (item) => {
-                this.selectedItem = item;
-                if (this.gridOption.onDblClickRow) {
-                    this.gridOption.onDblClickRow(item);
-                }
-            }
-        };
-        this.setOption = (option) => {
-            option = this.initConfiguration(option);
-            option = this.initTranslate(option);
-            delete this.gridOption;
-            this.gridOption = option;
-            // Loại bỏ những command bị ẩn
-            this.gridOption.commands = this.gridOption.commands.filter(command => {
-                const hidden = command.hidden;
-                if (hidden !== undefined) {
-                    if (typeof (hidden) === 'boolean') {
-                        return !hidden;
-                    }
-                    else if (typeof (hidden) === 'function') {
-                        return !hidden();
-                    }
-                }
-                else {
-                    return true;
-                }
-            });
-            this.sdGridConfig.setOption({
-                key: option.key,
-                pageSize: this.gridOption.paginate.pageSize,
-                columns: this.gridOption.columns
-            });
-            this.initExternalFilter();
-            this.resize();
-            this.detectChanges();
-        };
-        this.initConfiguration = (option) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const gridConfiguration = this.configuration;
-            // Filter
-            if (!((_a = option.filter) === null || _a === void 0 ? void 0 : _a.type) && ((_b = gridConfiguration === null || gridConfiguration === void 0 ? void 0 : gridConfiguration.filter) === null || _b === void 0 ? void 0 : _b.type)) {
-                if (!option.filter) {
-                    option.filter = {
-                        type: gridConfiguration.filter.type
-                    };
-                }
-                else {
-                    option.filter.type = gridConfiguration.filter.type;
-                }
-            }
-            if (!((_c = option.filter) === null || _c === void 0 ? void 0 : _c.columnInline) && ((_d = gridConfiguration === null || gridConfiguration === void 0 ? void 0 : gridConfiguration.filter) === null || _d === void 0 ? void 0 : _d.columnInline)) {
-                if (!option.filter) {
-                    option.filter = {
-                        columnInline: gridConfiguration.filter.columnInline
-                    };
-                }
-                else {
-                    option.filter.columnInline = gridConfiguration.filter.columnInline;
-                }
-            }
-            if (!((_e = option.filter) === null || _e === void 0 ? void 0 : _e.quickFilterVisibility) && ((_f = gridConfiguration === null || gridConfiguration === void 0 ? void 0 : gridConfiguration.filter) === null || _f === void 0 ? void 0 : _f.quickFilterVisibility)) {
-                if (!option.filter) {
-                    option.filter = {
-                        quickFilterVisibility: gridConfiguration.filter.quickFilterVisibility
-                    };
-                }
-                else {
-                    option.filter.quickFilterVisibility = gridConfiguration.filter.quickFilterVisibility;
-                }
-            }
-            // Translate
-            option.translate = (_g = option.translate) !== null && _g !== void 0 ? _g : gridConfiguration === null || gridConfiguration === void 0 ? void 0 : gridConfiguration.translate;
-            switch (option.type) {
-                case 'local':
-                    this.handler = this.handlerLocal;
-                    break;
-                case 'dotnet':
-                    this.handler = this.handlerDotnet;
-                    break;
-                case 'custom':
-                    this.handler = option.handlerCustom || (gridConfiguration === null || gridConfiguration === void 0 ? void 0 : gridConfiguration.handlerCustom);
-                    if (!this.handler) {
-                        this.notifyService.notify.warning(`Handler custom was not found`);
-                        return;
-                    }
-                    break;
-            }
-            return Object.assign(Object.assign({}, defaultGridOption), option);
-        };
-        this.initTranslate = (option) => {
-            var _a, _b, _c, _d;
-            const { translate } = this.translateService;
-            (_a = option.commands) === null || _a === void 0 ? void 0 : _a.forEach(command => {
-                var _a;
-                if (!option.translate) {
-                    return;
-                }
-                if (typeof (command.title) === 'string') {
-                    command.title = translate(command.title);
-                }
-                if ('children' in command) {
-                    (_a = command.children) === null || _a === void 0 ? void 0 : _a.forEach(childCommand => {
-                        if (typeof (childCommand.title) === 'string') {
-                            childCommand.title = translate(childCommand.title);
-                        }
-                    });
-                }
-            });
-            (_b = option.columns) === null || _b === void 0 ? void 0 : _b.forEach(column => {
-                var _a;
-                if (column.translate === false) {
-                    return;
-                }
-                if (option.translate || column.translate) {
-                    column.title = translate(column.title);
-                }
-                if (column.type === 'children') {
-                    (_a = column === null || column === void 0 ? void 0 : column.children) === null || _a === void 0 ? void 0 : _a.forEach(childColumn => {
-                        if (childColumn.translate === false) {
-                            return;
-                        }
-                        if (option.translate || childColumn.translate) {
-                            childColumn.title = translate(childColumn.title);
-                        }
-                    });
-                }
-            });
-            (_d = (_c = option.filter) === null || _c === void 0 ? void 0 : _c.externalFilters) === null || _d === void 0 ? void 0 : _d.forEach(externalFilter => {
-                if (option.translate) {
-                    externalFilter.title = translate(externalFilter.title);
-                }
-            });
-            return option;
-        };
-        this.reload = (gridItems) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f;
-            if (this.isLoading) {
-                return;
-            }
-            this.isLoading = true;
-            const currentPage = (((_a = __classPrivateFieldGet(this, _paginator)) === null || _a === void 0 ? void 0 : _a.pageIndex) || 0) + 1;
-            const pageSize = ((_b = __classPrivateFieldGet(this, _paginator)) === null || _b === void 0 ? void 0 : _b.pageSize) || 50;
-            try {
-                if (this.gridOption.type !== 'local') {
-                    const handler = this.handler;
-                    const filter = handler.mapRequest(this.getFilterInfo(currentPage, pageSize));
-                    if (this.gridOption.method === 'GET') {
-                        const queryString = Object.keys(filter).filter(key => filter[key] !== null && filter[key] !== undefined)
-                            .map(key => key + '=' + filter[key]).join('&');
-                        const url = this.gridOption.url.includes('?') ? `${this.gridOption.url}&${queryString}` : `${this.gridOption.url}?${queryString}`;
-                        const response = yield this.apiService.get(url);
-                        const { items, total } = handler.mapResponse(response);
-                        this.items = items;
-                        this.total = total;
-                    }
-                    else {
-                        const response = yield this.apiService.post(this.gridOption.url, filter);
-                        const { items, total } = handler.mapResponse(response);
-                        this.items = items;
-                        this.total = total;
-                    }
-                }
-                else {
-                    const handler = this.handler;
-                    if (typeof (this.gridOption.items) === 'function') {
-                        if (Array.isArray(gridItems)) {
-                            this.localItems = gridItems;
-                        }
-                        else {
-                            const results = this.gridOption.items();
-                            if (results instanceof Promise) {
-                                this.localItems = yield results;
-                            }
-                            else {
-                                this.localItems = results;
-                            }
-                        }
-                    }
-                    else {
-                        this.gridOption.items = gridItems || this.gridOption.items;
-                        this.localItems = this.gridOption.items;
-                    }
-                    const response = handler.filter(this.localItems, {
-                        customFilter: this.gridOption.filter.customFilter,
-                        rawFilter: this.filter,
-                        columns: this.gridOption.columns,
-                        rawExternalFilter: this.externalFilter,
-                        externalFilters: (_c = this.gridOption.filter) === null || _c === void 0 ? void 0 : _c.externalFilters,
-                        orderBy: this.orderBy,
-                        orderDirection: this.orderDirection,
-                        pageNumber: currentPage,
-                        pageSize
-                    });
-                    this.items = response.items;
-                    this.total = response.total;
-                }
-                this.items.forEach(item => item.originItem = Object.assign({}, item));
-                this.isCheckedAll = false;
-                __classPrivateFieldGet(this, _setSelectedItems).call(this);
-                yield ((_e = (_d = this.gridOption) === null || _d === void 0 ? void 0 : _d.onReloadCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, this.items));
-                this.generateViewItems();
-                this.generateEditorHandlers();
-                $(this.gridBody.nativeElement).scrollTop(0);
-                if (currentPage > 1 && !((_f = this.viewItems) === null || _f === void 0 ? void 0 : _f.length)) {
-                    __classPrivateFieldGet(this, _paginator).firstPage();
-                }
-                this.detectChanges();
-            }
-            catch (error) {
-                this.notifyService.handle.error(error);
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
-        this.detectChanges = () => {
-            this.ref.detectChanges();
-            this.ref.markForCheck();
-        };
-        this.selectPage = () => {
-            if (this.gridOption.type === 'local') {
-                this.reload(this.localItems);
-            }
-            else {
-                this.reload();
-            }
-        };
-        this.updateFilter = (param) => {
-            this.filter = (param === null || param === void 0 ? void 0 : param.filter) || this.filter;
-            this.externalFilter = (param === null || param === void 0 ? void 0 : param.externalFilter) || this.externalFilter;
-            __classPrivateFieldGet(this, _paginator).pageIndex = 0;
-            if (this.gridOption.type === 'local') {
-                this.reload(this.localItems);
-            }
-            else {
-                this.reload();
-            }
-        };
-        //#region Checkable
-        _setSelectedItems.set(this, () => {
-            this.selectedItems = this.items.filter(item => item.isChecked)
-                .map(item => {
-                const { temporary, originItem, editorHandler, editingStatus, isChecked, subInformation, blinker } = item, result = __rest(item, ["temporary", "originItem", "editorHandler", "editingStatus", "isChecked", "subInformation", "blinker"]);
-                return result;
-            });
-        });
-        this.onCheck = (item, isCheckbox) => {
-            var _a, _b;
-            if (!this.gridOption.checkable) {
-                return;
-            }
-            if (!isCheckbox) {
-                item.isChecked = !item.isChecked;
-            }
-            this.isCheckedAll = this.items.length === this.items.filter(e => e.isChecked).length;
-            (_b = (_a = this.gridOption).onCheck) === null || _b === void 0 ? void 0 : _b.call(_a, this.items.filter(e => e.isChecked), item);
-            __classPrivateFieldGet(this, _setSelectedItems).call(this);
-        };
-        //#endregion
-        //#region Sort
-        this.sort = (column) => {
-            var _a, _b;
-            if (column.type === 'children' || column.type === 'image') {
-                return;
-            }
-            const sortable = (_a = this.gridOption.sortable) !== null && _a !== void 0 ? _a : true;
-            const columnSortable = (_b = column.sortable) !== null && _b !== void 0 ? _b : true;
-            if (!sortable || !columnSortable) {
-                return;
-            }
-            if (this.orderBy === column.field) {
-                this.orderDirection = this.orderDirection === 'ASC' ? 'DESC' : 'ASC';
-            }
-            else {
-                this.orderBy = column.field;
-                this.orderDirection = 'ASC';
-            }
-            if (this.gridOption.type === 'local') {
-                this.reload(this.localItems);
-            }
-            else {
-                this.reload();
-            }
-        };
-        this.clearFilter = () => {
-            this.filter = {};
-            this.externalFilter = {};
-            this.initFilter();
-            this.initExternalFilter();
-            if (this.sdGridPopupFilter) {
-                this.sdGridPopupFilter.filter = this.filter;
-                this.sdGridPopupFilter.externalFilter = this.externalFilter;
-            }
-        };
-        this.onClearFilter = () => {
-            this.clearFilter();
-            this.reload();
-        };
-        this.expandOrCollapse = (gridItem) => __awaiter(this, void 0, void 0, function* () {
-            var _g, _h;
-            const { temporary, originItem, editorHandler, editingStatus, isChecked, subInformation } = gridItem, item = __rest(gridItem, ["temporary", "originItem", "editorHandler", "editingStatus", "isChecked", "subInformation"]);
-            if (!this.gridOption.subInformation) {
-                return;
-            }
-            if ((_g = gridItem.subInformation) === null || _g === void 0 ? void 0 : _g.isOpened) {
-                gridItem.subInformation.isOpened = false;
-                return;
-            }
-            if (this.gridOption.subInformation.lazyLoading && !((_h = gridItem.subInformation) === null || _h === void 0 ? void 0 : _h.isLoaded)) {
-                gridItem.subInformation.isLoading = true;
-                try {
-                    gridItem.subInformation.subItems = yield this.gridOption.subInformation.onLoad(item);
-                    if (!Array.isArray(gridItem.subInformation.subItems)) {
-                        this.notifyService.alert.warning(`Data is not an array`);
-                        gridItem.subInformation.subItems = [];
-                    }
-                    gridItem.subInformation.isLoading = false;
-                    gridItem.subInformation.isLoaded = true;
-                    gridItem.subInformation.isOpened = true;
-                    this.ref.detectChanges();
-                }
-                catch (err) {
-                    this.notifyService.handle.error(err);
-                    gridItem.subInformation.isLoading = false;
-                    this.ref.detectChanges();
-                }
-                return;
-            }
-            if (this.gridOption.subInformation.lazyLoading === false && !gridItem.subInformation.isLoaded) {
-                gridItem.subInformation.subItems = gridItem[this.gridOption.subInformation.field];
-                if (!Array.isArray(gridItem.subInformation.subItems)) {
-                    this.notifyService.alert.warning(`Data is not an array`);
-                    gridItem.subInformation.subItems = [];
-                }
-                gridItem.subInformation.isLoaded = true;
-                gridItem.subInformation.isOpened = true;
-                return;
-            }
-            gridItem.subInformation.isOpened = true;
-            this.ref.detectChanges();
-        });
-        //#region Editable
-        this.onCreate = () => {
-            var _a;
-            const { type, editor, columns } = this.gridOption;
-            if (!(editor === null || editor === void 0 ? void 0 : editor.addable)) {
-                return;
-            }
-            const item = {};
-            // Gán giá trị mặc định
-            columns.forEach(column => {
-                if (column.type === 'values') {
-                    item[column.field] = '';
-                }
-                else if (column.type === 'bool') {
-                    item[column.field] = true;
-                }
-                else if (column.type === 'number') {
-                    item[column.field] = null;
-                }
-            });
-            (_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item);
-            // Đưa item lên dòng đầu tiên nếu type khác popup
-            if (editor.type !== 'popup') {
-                if (type === 'local') {
-                    this.items.splice(0, 0, item);
-                }
-                this.viewItems.splice(0, 0, item);
-            }
-            this.onUpdate(item, false);
-        };
-        this.onUpdate = (item, isModified) => {
-            const { editor, columns } = this.gridOption;
-            item.editingStatus = isModified ? 'update' : 'create';
-            item.temporary = Object.assign({}, item);
-            this.generateEditorHanlder(item);
-            if (editor.type === 'popup') {
-                this.sdGridPopupEditor.open(item, columns, isModified);
-            }
-            this.ref.detectChanges();
-        };
-        this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
-            const { editor } = this.gridOption;
-            try {
-                item.editorHandler.saving = true;
-                if (editor.validate) {
-                    const result = editor.validate(item);
-                    if (result instanceof Promise) {
-                        const message = yield result;
-                        if (message) {
-                            throw message;
-                        }
-                    }
-                    else {
-                        if (result) {
-                            throw result;
-                        }
-                    }
-                }
-                if (editor.onSave) {
-                    const result = editor.onSave(item);
-                    if (result instanceof Promise) {
-                        yield result;
-                    }
-                }
-                if (item.editingStatus === 'create' && editor.type === 'popup') {
-                    if (this.gridOption.type === 'local') {
-                        this.items.splice(0, 0, item);
-                    }
-                    this.viewItems.splice(0, 0, item);
-                }
-                item.editingStatus = undefined;
-                this.generateEditorHanlder(item);
-            }
-            catch (err) {
-                this.notifyService.notify.warning(err);
-            }
-            finally {
-                item.editorHandler.saving = false;
-                this.ref.detectChanges();
-            }
-        });
-        this.onCancel = (item) => {
-            const { editor } = this.gridOption;
-            if (editor.type === 'inline') {
-                if (this.gridOption.type === 'local') {
-                    const idx1 = this.items.indexOf(item);
-                    this.items.splice(idx1, 1);
-                }
-                const idx2 = this.viewItems.indexOf(item);
-                this.viewItems.splice(idx2, 1);
-                return;
-            }
-            if (item.editingStatus === 'create') {
-                if (editor.type !== 'popup') {
-                    if (this.gridOption.type === 'local') {
-                        this.items.splice(0, 1);
-                    }
-                    this.viewItems.splice(0, 1);
-                }
-            }
-            else {
-                Object.assign(item, item.temporary);
-                item.editingStatus = undefined;
-                this.generateEditorHanlder(item);
-                this.ref.detectChanges();
-            }
-        };
-        this.initExternalFilter = () => {
-            var _a, _b;
-            if ((_b = (_a = this.gridOption.filter) === null || _a === void 0 ? void 0 : _a.externalFilters) === null || _b === void 0 ? void 0 : _b.length) {
-                this.gridOption.filter.externalFilters.forEach(externalFilter => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                    if (externalFilter.type === 'string') {
-                        if (externalFilter.default) {
-                            this.externalFilter[externalFilter.field] = (_a = externalFilter.default) !== null && _a !== void 0 ? _a : '';
-                        }
-                        return;
-                    }
-                    if (externalFilter.type === 'number') {
-                        if (externalFilter.default) {
-                            this.externalFilter[externalFilter.field] = (_b = externalFilter.default) !== null && _b !== void 0 ? _b : undefined;
-                        }
-                        return;
-                    }
-                    if (externalFilter.type === 'daterange') {
-                        this.externalFilter[externalFilter.field] = {
-                            from: (_c = externalFilter.defaultFrom) !== null && _c !== void 0 ? _c : undefined,
-                            to: (_d = externalFilter.defaultTo) !== null && _d !== void 0 ? _d : undefined
-                        };
-                        return;
-                    }
-                    if (externalFilter.type === 'numberrange') {
-                        this.externalFilter[externalFilter.field] = {
-                            from: (_e = externalFilter.defaultFrom) !== null && _e !== void 0 ? _e : undefined,
-                            to: (_f = externalFilter.defaultTo) !== null && _f !== void 0 ? _f : undefined
-                        };
-                        return;
-                    }
-                    if (externalFilter.type === 'daterangefull') {
-                        this.externalFilter[externalFilter.field] = {
-                            from: (_g = externalFilter.defaultFrom) !== null && _g !== void 0 ? _g : undefined,
-                            to: (_h = externalFilter.defaultTo) !== null && _h !== void 0 ? _h : undefined
-                        };
-                        return;
-                    }
-                    if (externalFilter.type === 'values') { // andn1
-                        if (externalFilter.default) {
-                            this.externalFilter[externalFilter.field] = (_j = externalFilter.default) !== null && _j !== void 0 ? _j : '';
-                        }
-                        return;
-                    }
-                });
-            }
-        };
-        //#endregion
-        this.onSearch = (searchValue, item, column) => {
-            item[column.field] = searchValue;
-        };
-        this.onFilterConfigurationLoaded = (param) => {
-            var _a, _b;
-            this.quickFilters = param.quickFilters || [];
-            this.selectedQuickFilter = param.selectedQuickFilter || '';
-            if (this.selectedQuickFilter) {
-                const quickFilter = this.quickFilters.find(e => e.code === this.selectedQuickFilter);
-                if (quickFilter) {
-                    const f1 = JSON.stringify(quickFilter.filter);
-                    const f2 = JSON.stringify(quickFilter.externalFilter);
-                    this.filter = JSON.parse(f1);
-                    this.externalFilter = this.refreshExternalFilter((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.externalFilters, JSON.parse(f2));
-                }
-            }
-            this.inlineExternal = param.inlineExternal || {};
-            this.inlineColumn = param.inlineColumn || {};
-            this.resize();
-        };
-        this.onSelectQuickFilter = (value) => {
-            var _a, _b, _c;
-            const quickFilter = this.quickFilters.find(e => e.code === value);
-            if (quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.code) {
-                const f1 = JSON.stringify(quickFilter.filter);
-                const f2 = JSON.stringify(quickFilter.externalFilter);
-                this.selectedQuickFilter = quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.code;
-                this.filter = JSON.parse(f1);
-                this.externalFilter = this.refreshExternalFilter((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.externalFilters, JSON.parse(f2));
-                this.updateFilter();
-            }
-            else {
-                this.selectedQuickFilter = '';
-                this.onClearFilter();
-            }
-            (_c = this.sdGridPopupFilter) === null || _c === void 0 ? void 0 : _c.updateConfiguration(this.selectedQuickFilter);
-        };
-        this.getExportItems = (pageNumber = 1, pageSize = 10000) => __awaiter(this, void 0, void 0, function* () {
-            var _j;
-            if (this.isLoading) {
-                return;
-            }
-            this.isLoading = true;
-            try {
-                if (this.gridOption.type !== 'local') {
-                    const handler = this.handler;
-                    const filter = handler.mapRequest(this.getFilterInfo(pageNumber, pageSize));
-                    if (this.gridOption.method === 'GET') {
-                        const queryString = Object.keys(filter).filter(key => filter[key] !== null && filter[key] !== undefined)
-                            .map(key => key + '=' + filter[key]).join('&');
-                        const url = this.gridOption.url.includes('?') ? `${this.gridOption.url}&${queryString}` : `${this.gridOption.url}?${queryString}`;
-                        const response = yield this.apiService.get(url);
-                        return handler.mapResponse(response).items;
-                    }
-                    else {
-                        const response = yield this.apiService.post(this.gridOption.url, filter);
-                        return handler.mapResponse(response).items;
-                    }
-                }
-                else {
-                    let localItems = [];
-                    const handler = this.handler;
-                    if (typeof (this.gridOption.items) === 'function') {
-                        const results = this.gridOption.items();
-                        if (results instanceof Promise) {
-                            localItems = yield results;
-                        }
-                        else {
-                            localItems = results;
-                        }
-                    }
-                    else {
-                        localItems = this.gridOption.items;
-                    }
-                    const response = handler.filter(localItems, {
-                        customFilter: this.gridOption.filter.customFilter,
-                        rawFilter: this.filter,
-                        columns: this.gridOption.columns,
-                        rawExternalFilter: this.externalFilter,
-                        externalFilters: (_j = this.gridOption.filter) === null || _j === void 0 ? void 0 : _j.externalFilters,
-                        orderBy: this.orderBy,
-                        orderDirection: this.orderDirection,
-                        pageNumber,
-                        pageSize
-                    });
-                    return response.items;
-                }
-            }
-            catch (error) {
-                this.notifyService.handle.error(error);
-            }
-            finally {
-                this.isLoading = false;
-                this.ref.detectChanges();
-            }
-        });
-        this.getFilterInfo = (pageNumber, pageSize) => {
-            var _a;
-            for (const key of Object.keys(this.filter)) {
-                if (typeof (this.filter[key]) === 'string') {
-                    this.filter[key] = this.filter[key].trim();
-                }
-            }
-            for (const key of Object.keys(this.externalFilter)) {
-                if (typeof (this.externalFilter[key]) === 'string') {
-                    this.externalFilter[key] = this.externalFilter[key].trim();
-                }
-            }
-            return {
-                customFilter: this.gridOption.filter.customFilter,
-                rawFilter: this.filter,
-                columns: this.gridOption.columns,
-                rawExternalFilter: this.externalFilter,
-                externalFilters: (_a = this.gridOption.filter) === null || _a === void 0 ? void 0 : _a.externalFilters,
-                orderBy: this.orderBy,
-                orderDirection: this.orderDirection,
-                pageNumber,
-                pageSize
-            };
-        };
-        this.onExportByTemplate = (params) => __awaiter(this, void 0, void 0, function* () {
-            var _k, _l, _m, _o;
-            this.loadingService.start();
-            let exportItems = [];
-            if ((_k = this.gridOption.export) === null || _k === void 0 ? void 0 : _k.items) {
-                exportItems = yield ((_l = this.gridOption.export) === null || _l === void 0 ? void 0 : _l.items(this.getFilterInfo(1, 10000)).finally(this.loadingService.stop));
-            }
-            else {
-                exportItems = yield this.getExportItems().finally(this.loadingService.stop);
-            }
-            if ((_m = this.gridOption.export) === null || _m === void 0 ? void 0 : _m.mapping) {
-                const results = this.gridOption.export.mapping(exportItems, params.excelConfig.name);
-                if (results instanceof Promise) {
-                    exportItems = yield results;
-                }
-                else {
-                    exportItems = results;
-                }
-            }
-            const columns = [...this.gridOption.columns, ...(((_o = this.gridOption.export) === null || _o === void 0 ? void 0 : _o.columns) || [])];
-            const items = exportItems.map(item => {
-                const obj = {};
-                const handle = (column) => {
-                    if (column.type === 'children') {
-                        column.children.forEach(handle);
-                    }
-                    else if (column.transform) {
-                        obj[column.field] = column.transform(item[column.field], item);
-                    }
-                    else if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
-                        obj[column.field] = '';
-                    }
-                    else if (column.type === 'string' || column.type === 'number' || column.type === 'color') {
-                        // Nếu cell là string hoặc number thì gán bằng chính nó
-                        obj[column.field] = item[column.field];
-                    }
-                    else if (column.type === 'bool') {
-                        // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
-                        if (item[column.field]) {
-                            obj[column.field] = column.trueValue || 'True';
-                        }
-                        else {
-                            obj[column.field] = column.falseValue || 'False';
-                        }
-                    }
-                    else if (column.type === 'date') {
-                        // Nếu là date thì convert theo đúng format
-                        const date = new Date(item[column.field]);
-                        obj[column.field] = this.datePipe.transform(date, 'dd/MM/yyyy');
-                    }
-                    else if (column.type === 'datetime') {
-                        // Nếu là datetime thì convert theo đúng format
-                        const date = new Date(item[column.field]);
-                        obj[column.field] = this.datePipe.transform(date, 'dd/MM/yyyy HH:mm:ss');
-                    }
-                    else if (column.type === 'time') {
-                        // Nếu là time thì convert theo đúng format
-                        const date = new Date(item[column.field]);
-                        obj[column.field] = this.datePipe.transform(date, 'HH:mm:ss');
-                    }
-                    else if (column.type === 'values') {
-                        // Nếu là values thì lấy giá trị của value được chọn
-                        const data = column.values.find(e => e.value === item[column.field]);
-                        if (data) {
-                            obj[column.field] = data.text;
-                        }
-                        else {
-                            obj[column.field] = item[column.field];
-                        }
-                    }
-                    else if (column.type === 'radio') {
-                        const data = column.values.find(e => e[column.valueField] === item[column.field]);
-                        if (data) {
-                            obj[column.field] = data[column.displayField];
-                        }
-                        else {
-                            obj[column.field] = item[column.field];
-                        }
-                    }
-                };
-                columns.forEach(handle);
-                return obj;
-            });
-            this.excelService.generateExcelDataByTemplate(params.excelConfig.fullPath, params.excelColumns, items, params.excelConfig.name);
-        });
-        this.bigExport = () => __awaiter(this, void 0, void 0, function* () {
-            var _p, _q, _r, _s;
-            const pageSize = 1000;
-            let pageNumber = 1;
-            this.loadingService.start();
-            try {
-                let exportItems = [];
-                let filePath = null;
-                let destination = null;
-                let latestRow = 0;
-                while (true) {
-                    if ((_p = this.gridOption.export) === null || _p === void 0 ? void 0 : _p.items) {
-                        exportItems = yield ((_q = this.gridOption.export) === null || _q === void 0 ? void 0 : _q.items(this.getFilterInfo(pageNumber, pageSize)).finally(this.loadingService.stop));
-                    }
-                    else {
-                        exportItems = yield this.getExportItems(pageNumber, pageSize).finally(this.loadingService.stop);
-                    }
-                    if ((_r = this.gridOption.export) === null || _r === void 0 ? void 0 : _r.mapping) {
-                        const results = this.gridOption.export.mapping(exportItems);
-                        if (results instanceof Promise) {
-                            exportItems = yield results;
-                        }
-                        else {
-                            exportItems = results;
-                        }
-                    }
-                    const columns = [...this.gridOption.columns, ...(((_s = this.gridOption.export) === null || _s === void 0 ? void 0 : _s.columns) || [])];
-                    const items = exportItems.map(item => {
-                        const obj = {};
-                        const handle = (column) => {
-                            if (column.type === 'children') {
-                                column.children.forEach(handle);
-                            }
-                            else if (column.transform) {
-                                obj[column.field] = column.transform(item[column.field], item);
-                            }
-                            else if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
-                                obj[column.field] = '';
-                            }
-                            else if (column.type === 'string' || column.type === 'number' || column.type === 'color') {
-                                // Nếu cell là string hoặc number thì gán bằng chính nó
-                                obj[column.field] = item[column.field];
-                            }
-                            else if (column.type === 'bool') {
-                                // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
-                                if (item[column.field]) {
-                                    obj[column.field] = column.trueValue || 'True';
-                                }
-                                else {
-                                    obj[column.field] = column.falseValue || 'False';
-                                }
-                            }
-                            else if (column.type === 'date') {
-                                // Nếu là date thì convert theo đúng format
-                                const date = new Date(item[column.field]);
-                                obj[column.field] = this.datePipe.transform(date, 'dd/MM/yyyy');
-                            }
-                            else if (column.type === 'datetime') {
-                                // Nếu là datetime thì convert theo đúng format
-                                const date = new Date(item[column.field]);
-                                obj[column.field] = this.datePipe.transform(date, 'dd/MM/yyyy HH:mm:ss');
-                            }
-                            else if (column.type === 'time') {
-                                // Nếu là time thì convert theo đúng format
-                                const date = new Date(item[column.field]);
-                                obj[column.field] = this.datePipe.transform(date, 'HH:mm:ss');
-                            }
-                            else if (column.type === 'values') {
-                                // Nếu là values thì lấy giá trị của value được chọn
-                                const data = column.values.find(e => e.value === item[column.field]);
-                                if (data) {
-                                    obj[column.field] = data.text;
-                                }
-                                else {
-                                    obj[column.field] = item[column.field];
-                                }
-                            }
-                            else if (column.type === 'radio') {
-                                const data = column.values.find(e => e[column.valueField] === item[column.field]);
-                                if (data) {
-                                    obj[column.field] = data[column.displayField];
-                                }
-                                else {
-                                    obj[column.field] = item[column.field];
-                                }
-                            }
-                        };
-                        columns.forEach(handle);
-                        return obj;
-                    });
-                    const result = yield this.excelService.bigExport({
-                        columns,
-                        items,
-                        latestRow,
-                        filePath,
-                        destination
-                    });
-                    latestRow = result.latestRow;
-                    filePath = result.filePath;
-                    destination = result.destination;
-                    if ((pageNumber - 1) * pageSize + items.length >= this.total) {
-                        yield this.excelService.download(filePath);
-                        break;
-                    }
-                    pageNumber++;
-                }
-            }
-            finally {
-                this.loadingService.stop();
-            }
-        });
-        this.onEditorChange = () => {
-            this.ref.detectChanges();
-        };
-        this.onSelectPageSize = () => {
-            this.reload();
-        };
-        this.refreshExternalFilter = (externalFilters, externalFilter) => {
-            externalFilter = externalFilter || {};
-            externalFilters = externalFilters || [];
-            externalFilters.forEach(e => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-                if (e.type === 'string') {
-                    externalFilter[e.field] = (_b = (_a = externalFilter[e.field]) !== null && _a !== void 0 ? _a : e.default) !== null && _b !== void 0 ? _b : '';
-                    return;
-                }
-                if (e.type === 'number') {
-                    externalFilter[e.field] = (_d = (_c = externalFilter[e.field]) !== null && _c !== void 0 ? _c : e.default) !== null && _d !== void 0 ? _d : undefined;
-                    return;
-                }
-                if (e.type === 'daterange') {
-                    externalFilter[e.field] = {
-                        from: (_g = (_f = (_e = externalFilter[e.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : e.defaultFrom) !== null && _g !== void 0 ? _g : undefined,
-                        to: (_k = (_j = (_h = externalFilter[e.field]) === null || _h === void 0 ? void 0 : _h.to) !== null && _j !== void 0 ? _j : e.defaultTo) !== null && _k !== void 0 ? _k : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'numberrange') {
-                    externalFilter[e.field] = {
-                        from: (_o = (_m = (_l = externalFilter[e.field]) === null || _l === void 0 ? void 0 : _l.from) !== null && _m !== void 0 ? _m : e.defaultFrom) !== null && _o !== void 0 ? _o : undefined,
-                        to: (_r = (_q = (_p = externalFilter[e.field]) === null || _p === void 0 ? void 0 : _p.to) !== null && _q !== void 0 ? _q : e.defaultTo) !== null && _r !== void 0 ? _r : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'daterangefull') {
-                    externalFilter[e.field] = {
-                        from: (_u = (_t = (_s = externalFilter[e.field]) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : e.defaultFrom) !== null && _u !== void 0 ? _u : undefined,
-                        to: (_x = (_w = (_v = externalFilter[e.field]) === null || _v === void 0 ? void 0 : _v.to) !== null && _w !== void 0 ? _w : e.defaultTo) !== null && _x !== void 0 ? _x : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'values') { // andn1
-                    externalFilter[e.field] = (_y = (externalFilter[e.field] || e.default)) !== null && _y !== void 0 ? _y : '';
-                    return;
-                }
-            });
-            return externalFilter;
-        };
-        this.onCreateQuickFilter = (ev) => {
-            var _a, _b, _c;
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            this.onFilterPopup();
-            (_b = this.sdGridPopupFilter) === null || _b === void 0 ? void 0 : _b.close();
-            (_c = this.sdGridPopupFilter) === null || _c === void 0 ? void 0 : _c.onCreateQuickFilter(ev);
-        };
-        this.onEditQuickFilter = (ev, quickFilter) => {
-            var _a, _b, _c;
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            this.onFilterPopup();
-            (_b = this.sdGridPopupFilter) === null || _b === void 0 ? void 0 : _b.close();
-            (_c = this.sdGridPopupFilter) === null || _c === void 0 ? void 0 : _c.onEditQuickFilter(ev, quickFilter);
-        };
-        this.onDeleteQuickFilter = (ev, quickFilter) => {
-            var _a, _b, _c;
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            this.onFilterPopup();
-            (_b = this.sdGridPopupFilter) === null || _b === void 0 ? void 0 : _b.close();
-            (_c = this.sdGridPopupFilter) === null || _c === void 0 ? void 0 : _c.onDeleteQuickFilter(ev, quickFilter);
-        };
-        this.isMobileOrTablet = !deviceService.isDesktop();
-        // this.ref.detach();
-        // setInterval(() => {
-        //   this.ref.markForCheck();
-        // }, 1000);
-        // ref.detach();
-    }
-    set paginator(paginator) {
-        if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
-            __classPrivateFieldSet(this, _paginator, paginator);
-            __classPrivateFieldGet(this, _subscription).add(paginator.page.subscribe(this.selectPage));
-        }
-    }
-    set option(value) {
-        this.setOption(value);
-    }
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription).add(this.fixedHeaders.changes.pipe(startWith([])).subscribe(() => {
-            setTimeout(() => {
-                const fixedHeaders = this.fixedHeaders.toArray();
-                if (fixedHeaders.length > 0) {
-                    let left = $(fixedHeaders[0].nativeElement).outerWidth(true);
-                    for (let i = 1; i < fixedHeaders.length; i++) {
-                        $(fixedHeaders[i].nativeElement).css({ left });
-                        left += $(fixedHeaders[i].nativeElement).outerWidth(true);
-                    }
-                }
-            }, 100);
-        }));
-        __classPrivateFieldGet(this, _subscription).add(merge(this.fixedBodies.changes, this.cellFooterDefs.changes).pipe(startWith({})).subscribe(() => {
-            setTimeout(() => {
-                const fixedBodies = this.fixedBodies.toArray();
-                if (fixedBodies.length > 0) {
-                    const fixedPerRow = this.fixedBodies.length / (this.viewItems.length + __classPrivateFieldGet(this, _numberOfFooterRows));
-                    let left = $(fixedBodies[0].nativeElement).outerWidth(true);
-                    for (let i = 1; i < fixedBodies.length; i++) {
-                        if (i % fixedPerRow === 0) {
-                            left = 0;
-                        }
-                        $(fixedBodies[i].nativeElement).css({ left });
-                        left += $(fixedBodies[i].nativeElement).outerWidth(true);
-                    }
-                }
-                const fixedHeaders = this.fixedHeaders.toArray();
-                if (fixedHeaders.length > 0) {
-                    let left = $(fixedHeaders[0].nativeElement).outerWidth(true);
-                    for (let i = 1; i < fixedHeaders.length; i++) {
-                        $(fixedHeaders[i].nativeElement).css({ left });
-                        left += $(fixedHeaders[i].nativeElement).outerWidth(true);
-                    }
-                }
-            }, 100);
-        }));
-        __classPrivateFieldGet(this, _subscription).add(this.cellDefs.changes.pipe(startWith([])).subscribe(() => {
-            this.cellDef = {};
-            for (const cellDef of this.cellDefs) {
-                if (cellDef.sdCellDef) {
-                    this.cellDef[cellDef.sdCellDef] = cellDef;
-                }
-            }
-        }));
-        __classPrivateFieldGet(this, _subscription).add(this.cellEditorDefs.changes.pipe(startWith([])).subscribe(() => {
-            this.cellEditorDef = {};
-            for (const cellEditorDef of this.cellEditorDefs) {
-                if (cellEditorDef.sdCellEditorDef) {
-                    this.cellEditorDef[cellEditorDef.sdCellEditorDef] = cellEditorDef;
-                }
-            }
-        }));
-        __classPrivateFieldGet(this, _subscription).add(this.cellFooterDefs.changes.pipe(startWith([])).subscribe(() => {
-            this.cellFooterDef = {};
-            __classPrivateFieldSet(this, _numberOfFooterRows, 0);
-            for (const cellFooterDef of this.cellFooterDefs) {
-                if (cellFooterDef.sdCellFooterDef) {
-                    if (!this.cellFooterDef[cellFooterDef.sdCellFooterDef]) {
-                        this.cellFooterDef[cellFooterDef.sdCellFooterDef] = [];
-                    }
-                    this.cellFooterDef[cellFooterDef.sdCellFooterDef].push(cellFooterDef);
-                    if (this.cellFooterDef[cellFooterDef.sdCellFooterDef].length > __classPrivateFieldGet(this, _numberOfFooterRows)) {
-                        __classPrivateFieldSet(this, _numberOfFooterRows, this.cellFooterDef[cellFooterDef.sdCellFooterDef].length);
-                    }
-                }
-            }
-            this.footerRows = Array(__classPrivateFieldGet(this, _numberOfFooterRows)).fill(0).map((v, i) => i);
-        }));
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription).unsubscribe();
-    }
-    reloadItem(data) {
-        Object.keys(data).forEach(id => {
-            const item = this.items.find(e => !!e.id && e.id === id);
-            if (item) {
-                this.gridOption.columns.forEach(column => {
-                    if (item[column.field] !== undefined && data[id][column.field] !== undefined && item[column.field] !== data[id][column.field]) {
-                        this.blink(item, column.field);
-                    }
-                });
-                Object.assign(item, data[id]);
-                this.generateEditorHanlder(item);
-                this.stopBlink();
-            }
-        });
-    }
-    blink(item, field) {
-        item.blinker = item.blinker || {};
-        item.blinker[field] = true;
-    }
-    stopBlink() {
-        setTimeout(() => {
-            this.viewItems.forEach(item => {
-                item.blinker = {};
-            });
-        }, 1500);
-    }
-    generateViewItems() {
-        var _a, _b;
-        const currentPage = (((_a = __classPrivateFieldGet(this, _paginator)) === null || _a === void 0 ? void 0 : _a.pageIndex) || 0) + 1;
-        const pageSize = ((_b = __classPrivateFieldGet(this, _paginator)) === null || _b === void 0 ? void 0 : _b.pageSize) || 50;
-        delete this.viewItems;
-        if (this.gridOption.type === 'local') {
-            this.viewItems = this.items.filter((item, index) => {
-                return index >= (currentPage - 1) * pageSize
-                    && index < currentPage * pageSize;
-            });
-        }
-        else {
-            this.viewItems = this.items;
-        }
-        this.viewItems.forEach(item => {
-            item.blinker = item.blinker || {};
-            item.subInformation = item.subInformation || {};
-        });
-    }
-    get editedItems() {
-        return this.items.filter(item => {
-            if (!item.originItem) {
-                return true;
-            }
-            if (Object.keys(item.originItem).some(key => item.originItem[key] !== item[key])) {
-                return true;
-            }
-            return false;
-        }).map(item => {
-            const { temporary, originItem, editorHandler, editingStatus, isChecked, subInformation, blinker } = item, result = __rest(item, ["temporary", "originItem", "editorHandler", "editingStatus", "isChecked", "subInformation", "blinker"]);
-            return result;
-        });
-    }
-    getItems() {
-        return this.items;
-    }
-    checkAll(isCheckedAll) {
-        this.isCheckedAll = isCheckedAll;
-        this.items.forEach(item => item.isChecked = this.isCheckedAll);
-        if (this.gridOption.onCheck) {
-            this.gridOption.onCheck(this.items.filter(item => item.isChecked));
-        }
-        __classPrivateFieldGet(this, _setSelectedItems).call(this);
-    }
-    //#endregion
-    // #region Resize Grid
-    resize() {
-        this.detectChanges();
-        if (this.gridOption.height) {
-            this.gridBody.nativeElement.style.height = this.gridOption.height;
-        }
-        else {
-            this.gridBody.nativeElement.style.height = `${window.innerHeight - 300}px`;
-            setTimeout(() => {
-                // Lấy offset top để điều chỉnh kích thước Grid vừa với màn hình
-                const top = this.gridBody.nativeElement.getBoundingClientRect().top;
-                // const top = $(this.gridBody.nativeElement).offset().top;
-                const bottom = this.gridOption.hideFooter ? 0 : (this.isMobileOrTablet ? 45 : 55);
-                const height = window.innerHeight - top - bottom;
-                this.gridBody.nativeElement.style.height = `${height}px`;
-            }, 0);
-            setTimeout(() => {
-                // Lấy offset top để điều chỉnh kích thước Grid vừa với màn hình
-                const top = this.gridBody.nativeElement.getBoundingClientRect().top;
-                // const top = $(this.gridBody.nativeElement).offset().top;
-                const bottom = this.gridOption.hideFooter ? 0 : (this.isMobileOrTablet ? 45 : 55);
-                const height = window.innerHeight - top - bottom;
-                this.gridBody.nativeElement.style.height = `${height}px`;
-            }, 200);
-            setTimeout(() => {
-                // Lấy offset top để điều chỉnh kích thước Grid vừa với màn hình
-                const top = this.gridBody.nativeElement.getBoundingClientRect().top;
-                // const top = $(this.gridBody.nativeElement).offset().top;
-                const bottom = this.gridOption.hideFooter ? 0 : (this.isMobileOrTablet ? 45 : 55);
-                const height = window.innerHeight - top - bottom;
-                this.gridBody.nativeElement.style.height = `${height}px`;
-            }, 500);
-            setTimeout(() => {
-                // Lấy offset top để điều chỉnh kích thước Grid vừa với màn hình
-                const top = this.gridBody.nativeElement.getBoundingClientRect().top;
-                // const top = $(this.gridBody.nativeElement).offset().top;
-                const bottom = this.gridOption.hideFooter ? 0 : (this.isMobileOrTablet ? 45 : 55);
-                const height = window.innerHeight - top - bottom;
-                this.gridBody.nativeElement.style.height = `${height}px`;
-            }, 1000);
-        }
-    }
-    setHeight(height) {
-        this.gridOption.height = height;
-        this.resize();
-    }
-    // #endregion
-    //#region Import, Export, Config
-    loadConfig(configResult) {
-        this.gridOption.paginate.pageSize = configResult.pageSize;
-        this.gridOption.columns = configResult.columns;
-        this.fixedColumns = configResult.fixedColumns;
-        this.normalColumns = configResult.normalColumns;
-        this.columns = [...this.fixedColumns, ...this.normalColumns];
-        this.initFilter();
-        this.initDictionaryColumnValues();
-        this.reload();
-    }
-    initFilter() {
-        this.gridOption.columns.forEach(column => {
-            var _a;
-            // Gán giá trị filter mặc định cho từng cột
-            this.filter[column.field] = (_a = this.filter[column.field]) !== null && _a !== void 0 ? _a : '';
-        });
-    }
-    initDictionaryColumnValues() {
-        this.gridOption.columns.forEach(column => {
-            if (column.type === 'values') {
-                column.dictionary = {};
-                if (column.values) {
-                    column.values.forEach(e => {
-                        column.dictionary[e.value.toString()] = {
-                            text: e.text,
-                            icon: e.icon,
-                            color: e.color,
-                            backgroundColor: e.backgroundColor
-                        };
-                    });
-                }
-            }
-            if (column.type === 'children') {
-                column.children.forEach(childColumn => {
-                    if (childColumn.type === 'values') {
-                        childColumn.dictionary = {};
-                        if (childColumn.values) {
-                            childColumn.values.forEach(e => {
-                                childColumn.dictionary[e.value.toString()] = {
-                                    text: e.text,
-                                    icon: e.icon,
-                                    color: e.color,
-                                    backgroundColor: e.backgroundColor
-                                };
-                            });
-                        }
-                    }
-                });
-            }
-        });
-    }
-    //#endregion
-    generateEditorHandlers() {
-        this.viewItems.forEach(item => {
-            this.generateEditorHanlder(item);
-        });
-    }
-    generateEditorHanlder(item) {
-        // item.editorHandler = item.editorHandler || {};
-        this.editorVisiblePipe.transform(null, item, this.gridOption);
-    }
-    trackById(index, item) {
-        return item.id;
-    }
-    get isFiltering() {
-        return Object.values(this.filter).some(value => !!value);
-    }
-    onFilterPopup() {
-        var _a;
-        const f1 = JSON.stringify(this.filter);
-        const f2 = JSON.stringify(this.externalFilter);
-        const filter = JSON.parse(f1);
-        const externalFilter = JSON.parse(f2);
-        this.sdGridPopupFilter.open(this.fixedColumns, this.normalColumns, filter, externalFilter, (_a = this.gridOption.filter) === null || _a === void 0 ? void 0 : _a.externalFilters);
-    }
-    get invalidItems() {
-        return this.items.filter(e => { var _a; return (_a = e.editorHandler) === null || _a === void 0 ? void 0 : _a.errorMessage; }).map(e => {
-            const { temporary, originItem, editorHandler, editingStatus, isChecked, subInformation, blinker } = e, item = __rest(e, ["temporary", "originItem", "editorHandler", "editingStatus", "isChecked", "subInformation", "blinker"]);
-            return {
-                item,
-                message: e.editorHandler.errorMessage
-            };
-        });
-    }
-    get gridItems() {
-        return this.items.map(e => {
-            const { temporary, originItem, editorHandler, editingStatus, isChecked, subInformation, blinker } = e, item = __rest(e, ["temporary", "originItem", "editorHandler", "editingStatus", "isChecked", "subInformation", "blinker"]);
-            return item;
-        });
-    }
-}
-_numberOfFooterRows = new WeakMap(), _paginator = new WeakMap(), _subscription = new WeakMap(), _setSelectedItems = new WeakMap();
-SdGrid.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid',
-                template: "<div class=\"clearfix\"></div>\r\n<ng-container *ngIf=\"!isMobileOrTablet && !gridOption?.filter?.disabled\">\r\n  <div class=\"row mx-0 mt-5\">\r\n    <div\r\n      *ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && (!gridOption?.filter?.quickFilterVisibility || gridOption?.filter?.quickFilterVisibility === 'inline')\"\r\n      class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\" style=\"width: 100%;\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedQuickFilter\" (selectionChange)=\"onSelectQuickFilter($event?.value)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option>\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <sd-grid-desktop-inline-filter class=\"c-display-contents\" [columns]=\"gridOption.columns\" [filter]=\"filter\"\r\n      [externalFilter]=\"externalFilter\" (sdChange)=\"updateFilter()\" [inlineExternal]=\"inlineExternal\"\r\n      [inlineColumn]=\"inlineColumn\" [filterOption]=\"gridOption.filter\">\r\n    </sd-grid-desktop-inline-filter>\r\n  </div>\r\n</ng-container>\r\n<div *ngIf=\"!isMobileOrTablet; else elseMobileOrTablet\" class=\"sd-box\"\r\n  [ngClass]=\"{'box-shadow-none': gridOption.hideFooter}\">\r\n  <ng-container *ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n  <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n    <div style=\"display: flex; align-items: center; align-content: space-between;\">\r\n      <div style=\"flex: 1;\">\r\n        <sd-button *ngIf=\"sdGridPopupFilter\" class=\"mr-6\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_list\" size=\"sm\"\r\n          (action)=\"onFilterPopup()\"></sd-button>\r\n        <sd-button *ngIf=\"!gridOption?.hideReload\" class=\"mr-6\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n          size=\"sm\" (action)=\"reload()\"></sd-button>\r\n        <sd-button *ngIf=\"gridOption.onImportExcel\" class=\"mr-6\" [title]=\"'Import' | sdTranslate\" icon=\"publish\"\r\n          size=\"sm\" (action)=\"sdGridImportExcel.open()\"></sd-button>\r\n        <ng-container *ngIf=\"sdGridPopupExportExcel\">\r\n          <sd-button *ngIf=\"!gridOption.key\" class=\"mr-6\" [title]=\"'Export' | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n            (action)=\"sdGridPopupExportExcel.exportDefault()\" [disabled]=\"!viewItems?.length\">\r\n          </sd-button>\r\n          <sd-button *ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Export' | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n            [matMenuTriggerFor]=\"menu\" [disabled]=\"!viewItems?.length\">\r\n          </sd-button>\r\n          <mat-menu #menu=\"matMenu\">\r\n            <button mat-menu-item (click)=\"sdGridPopupExportExcel.exportDefault()\" type=\"button\">\r\n              <mat-icon>get_app</mat-icon>\r\n              <span> {{'Export all columns' | sdTranslate}}</span>\r\n            </button>\r\n            <button mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\">\r\n              <mat-icon>settings</mat-icon>\r\n              <span> {{'Configure' | sdTranslate}}</span>\r\n            </button>\r\n          </mat-menu>\r\n        </ng-container>\r\n        <sd-button *ngIf=\"gridOption.export?.bigExport\" class=\"mr-6\" [title]=\"'Big export' | sdTranslate\" icon=\"get_app\"\r\n          size=\"sm\" (action)=\"bigExport()\" [disabled]=\"!viewItems?.length\">\r\n        </sd-button>\r\n        <sd-button *ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Configure' | sdTranslate\" icon=\"settings\" size=\"sm\"\r\n          (action)=\"sdGridConfig.open()\"></sd-button>\r\n      </div>\r\n      <div style=\"flex: 1;\">\r\n        <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n        </mat-paginator>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ng-template #elseMobileOrTablet>\r\n  <div class=\"sd-box c-mobile-box\">\r\n    <div *ngIf=\"!gridOption?.mobileOrTablet?.useGridView\" class=\"sd-box-body c-mobile-body\"\r\n      [ngClass]=\"{'c-loading': isLoading}\" #gridBody>\r\n      <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-4x fa-spinner fa-pulse c-loading-icon\"></i>\r\n      <ng-container *ngFor=\"let item of viewItems\">\r\n        <div class=\"c-mobile-item\" [ngClass]=\"{'c-mobile-item-selected':item.isChecked}\">\r\n          <sd-grid-mobile-item-view [gridOption]=\"gridOption\" [item]=\"item\" (check)=\"onCheck(item)\">\r\n          </sd-grid-mobile-item-view>\r\n          <div class=\"p-2\" *ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\">\r\n            <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\" [option]=\"gridOption?.subInformation\">\r\n            </sd-grid-sub-information>\r\n          </div>\r\n          <div class=\"c-mobile-command\">\r\n            <div>\r\n              <i *ngIf=\"gridOption?.subInformation && item.subInformation?.isLoading\"\r\n                class=\"fa fa-spinner fa-spin ml-1 c-mobile-action\" (click)=\"expandOrCollapse(item)\"></i>\r\n              <i *ngIf=\"gridOption?.subInformation && !item.subInformation?.isLoading\" class=\"fa ml-1 c-mobile-action\"\r\n                [ngClass]=\"{'fa-plus': !item.subInformation?.isOpened, 'fa-minus': item.subInformation?.isOpened}\"\r\n                (click)=\"expandOrCollapse(item)\"></i>\r\n            </div>\r\n            <ng-container *ngIf=\"gridOption.commands | mobileCommandFilter:item | async; $implicit as filteredCommands\">\r\n              <div *ngIf=\"filteredCommands.length\">\r\n                <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button type=\"button\">\r\n                  <mat-icon>more_vert</mat-icon>\r\n                </button>\r\n                <!-- <i [matMenuTriggerFor]=\"menu\" class=\"fa fa-navicon fa-fw c-mobile-action\"></i> -->\r\n                <mat-menu #menu=\"matMenu\">\r\n                  <button *ngFor=\"let command of filteredCommands\" mat-menu-item (click)=\"command.click(item)\"\r\n                    [disabled]=\"command.disabled | commandDisabled:item\" type=\"button\">\r\n                    <i *ngIf=\"!command.fontSet\" class=\"{{command.icon | commandIcon:item}}\"></i>\r\n                    <mat-icon *ngIf=\"command.fontSet\" [fontSet]=\"command.fontSet\">{{command.icon | commandIcon:item}}\r\n                    </mat-icon>\r\n                    <span> {{command.title | commandTitle:item}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"gridOption?.mobileOrTablet?.useGridView\">\r\n      <ng-container *ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n      <sd-button icon=\"more_horiz\" size=\"sm\" [matMenuTriggerFor]=\"mobileAction\"></sd-button>\r\n      <mat-menu #mobileAction=\"matMenu\">\r\n        <button *ngIf=\"sdGridPopupFilter\" mat-menu-item (click)=\"onFilterPopup()\" type=\"button\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span> {{'Filter' | sdTranslate}}</span>\r\n        </button>\r\n        <button *ngIf=\"!gridOption?.hideReload\" mat-menu-item (click)=\"reload()\" type=\"button\">\r\n          <mat-icon>refresh</mat-icon>\r\n          <span> {{'Reload' | sdTranslate}}</span>\r\n        </button>\r\n        <button *ngIf=\"gridOption.onImportExcel\" mat-menu-item (click)=\"sdGridImportExcel.open()\" type=\"button\">\r\n          <mat-icon>publish</mat-icon>\r\n          <span> {{'Import' | sdTranslate}}</span>\r\n        </button>\r\n        <button *ngIf=\"sdGridPopupExportExcel\" mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\"\r\n          [disabled]=\"!viewItems?.length\">\r\n          <mat-icon>get_app</mat-icon>\r\n          <span> {{'Export' | sdTranslate}}</span>\r\n        </button>\r\n        <button *ngIf=\"gridOption.key\" mat-menu-item (click)=\"sdGridConfig.open()\" type=\"button\">\r\n          <mat-icon>settings</mat-icon>\r\n          <span> {{'Configure' | sdTranslate}}</span>\r\n        </button>\r\n      </mat-menu>\r\n      <ng-container *ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && !gridOption?.filter?.disabled\">\r\n        <sd-button icon=\"filter_list\" size=\"sm\" [matMenuTriggerFor]=\"mobileQuickFilter\"></sd-button>\r\n        <mat-menu #mobileQuickFilter=\"matMenu\">\r\n          <button mat-menu-item *ngFor=\"let quickFilter of quickFilters\" (click)=\"onSelectQuickFilter(quickFilter.code)\"\r\n            type=\"button\" style=\"display:flex; justify-content: space-between\">\r\n            <span>{{quickFilter.code}}</span>\r\n            <div>\r\n              <mat-icon class=\"mr-1\" (click)=\"onEditQuickFilter($event, quickFilter)\">edit</mat-icon>\r\n              <mat-icon class=\"mr-0\" (click)=\"onDeleteQuickFilter($event, quickFilter)\">delete</mat-icon>\r\n            </div>\r\n          </button>\r\n          <button mat-menu-item (click)=\"onCreateQuickFilter($event)\" type=\"button\">\r\n            <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n            <span>{{'Create quick filter' | sdTranslate}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n      <div class=\"row mr-0 ml-0 text-right pull-right\">\r\n        <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n        </mat-paginator>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!-- Modal Configure Grid -->\r\n<sd-grid-config (sdChange)=\"loadConfig($event)\" #sdGridConfig></sd-grid-config>\r\n<sd-grid-popup-editor (save)=\"onSave($event)\" #sdGridPopupEditor></sd-grid-popup-editor>\r\n<!-- Import Excel -->\r\n<sd-grid-import-excel *ngIf=\"gridOption?.onImportExcel\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n  [accept]=\"gridOption?.onImportExcel\" #sdGridImportExcel></sd-grid-import-excel>\r\n<sd-grid-popup-export-excel *ngIf=\"!gridOption.export?.disabled\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n  [extendColumns]=\"gridOption?.export?.columns\" [fileName]=\"gridOption?.export?.fileName\"\r\n  [exportOption]=\"gridOption?.export\" [validator]=\"gridOption?.export?.validator\"\r\n  (exportByTemplate)=\"onExportByTemplate($event)\" #sdGridPopupExportExcel>\r\n</sd-grid-popup-export-excel>\r\n<sd-grid-popup-filter\r\n  *ngIf=\"!gridOption?.filter?.disabled && (isMobileOrTablet || gridOption?.filter?.type === 'popup')\"\r\n  [key]=\"gridOption?.key\" (accept)=\"updateFilter($event)\" [filterOption]=\"gridOption?.filter\" (clear)=\"onClearFilter()\"\r\n  (loadInlineFilter)=\"onFilterConfigurationLoaded($event)\" #sdGridPopupFilter>\r\n</sd-grid-popup-filter>\r\n\r\n<ng-template #gridViewContent>\r\n  <div class=\"sd-box-body p-0\">\r\n    <div class=\"row mx-0\">\r\n      <div [ngClass]=\"{'c-loading': isLoading}\" class=\"table-responsive\" #gridBody style=\"position: relative;\">\r\n        <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-5x fa-spinner fa-pulse c-loading-icon\"></i>\r\n        <table *ngIf=\"gridOption\" class=\"table c-table\"\r\n          [ngClass]=\"{'c-loading-margin': isLoading, 'c-bordered': configuration?.style?.bordered, 'c-stripped': configuration?.style?.bordered}\"\r\n          style=\"border:0!important;\">\r\n          <thead class=\"thead-light\">\r\n            <tr>\r\n              <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\" #fixedHeader>\r\n              </th>\r\n              <th *ngIf=\"configuration?.style?.bordered\" class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"\r\n                #fixedHeader></th>\r\n              <th *ngIf=\"gridOption?.subInformation\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n                style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedHeader>\r\n              </th>\r\n              <th *ngIf=\"gridOption?.subInformation && configuration?.style?.bordered\"\r\n                class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              <th *ngIf=\"gridOption?.checkable && viewItems?.length\"\r\n                class=\"position-sticky c-sticky-all align-middle text-center p-0 w-20\" style=\"width:20px;\" #fixedHeader>\r\n                <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"isCheckedAll\"\r\n                  (change)=\"checkAll(isCheckedAll)\"></mat-checkbox>\r\n              </th>\r\n              <th *ngIf=\"gridOption?.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n                class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              <th *ngIf=\"gridOption?.commands?.length && viewItems?.length\"\r\n                class=\"position-sticky align-middle text-center p-0 c-sticky-all c-w-1\" #fixedHeader>\r\n              </th>\r\n              <th *ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n                class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              <th *ngIf=\"gridOption.editor?.addable || gridOption.editor?.editable\"\r\n                class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n                style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\" #fixedHeader>\r\n                <div *ngIf=\"gridOption.editor.addable\" class=\"align-middle text-center\">\r\n                  <button *ngIf=\"!gridOption.editor.limit || (gridOption.editor.limit > items.length)\" type=\"button\"\r\n                    (click)=\"onCreate()\" aria-label=\"Add\" mat-icon-button type=\"button\">\r\n                    <mat-icon>add</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </th>\r\n              <th *ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n                class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              <th *ngIf=\"gridOption?.numberable\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n                style=\"width:20px;\" #fixedHeader>\r\n                #\r\n              </th>\r\n              <th *ngIf=\"gridOption?.numberable && configuration?.style?.bordered\"\r\n                class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              <ng-container *ngFor=\"let column of fixedColumns\">\r\n                <th class=\"position-sticky align-middle cursor-pointer c-cell c-sticky-all\" #fixedHeader\r\n                  [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width || column.width === 'auto' ? '200px' : column.width}\">\r\n                  <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n                    {{column.title}}\r\n                    <i *ngIf=\"column.type !== 'children' && column.type !== 'image' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n                      class=\"fa fa-sort fa-fw\"></i>\r\n                    <i *ngIf=\"orderBy === column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n                    <i *ngIf=\"orderBy === column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n                  </span>\r\n                  <ng-container\r\n                    *ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] || gridOption?.filter?.type === 'inline')\">\r\n                    <sd-input size=\"sm\"\r\n                      *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'children'\"\r\n                      [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n                    </sd-input>\r\n                    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                      (sdChange)=\"updateFilter()\"\r\n                      [items]=\"[{value: 1, display: column.trueValue || 'TRUE'}, {value: 0, display: column.falseValue || 'FALSE'}]\"\r\n                      valueField=\"value\" displayField=\"display\">\r\n                    </sd-select>\r\n                    <sd-select *ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                      (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n                      [filtered]=\"column?.editor?.autocomplete\">\r\n                    </sd-select>\r\n                    <sd-select *ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                      (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n                      [displayField]=\"column.displayField\">\r\n                    </sd-select>\r\n                    <sd-date-time size=\"sm\"\r\n                      *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n                      [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n                    </sd-date-time>\r\n                  </ng-container>\r\n                </th>\r\n                <th *ngIf=\"configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n              </ng-container>\r\n              <th *ngFor=\"let column of normalColumns\"\r\n                class=\"position-sticky align-middle cursor-pointer border-top-0 border-bottom-0 c-cell c-sticky-top c-normal-column\"\r\n                [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width || column.width === 'auto' ? '200px' : column.width}\">\r\n                <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n                  {{column.title}}\r\n                  <i *ngIf=\"column.type !== 'children' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n                    class=\"fa fa-sort fa-fw\"></i>\r\n                  <i *ngIf=\"orderBy == column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n                  <i *ngIf=\"orderBy == column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n                </span>\r\n                <ng-container\r\n                  *ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] || gridOption?.filter?.type === 'inline')\">\r\n                  <sd-input size=\"sm\"\r\n                    *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'children'\"\r\n                    [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n                  </sd-input>\r\n                  <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                    (sdChange)=\"updateFilter()\"\r\n                    [items]=\"[{value: 1, display: column.trueValue || 'TRUE'}, {value: 0, display: column.falseValue || 'FALSE'}]\"\r\n                    valueField=\"value\" displayField=\"display\">\r\n                  </sd-select>\r\n                  <sd-select *ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                    (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n                    [filtered]=\"column?.editor?.autocomplete\">\r\n                  </sd-select>\r\n                  <sd-select *ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n                    (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n                    [displayField]=\"column.displayField\">\r\n                  </sd-select>\r\n                  <sd-date-time size=\"sm\"\r\n                    *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n                    [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n                  </sd-date-time>\r\n                </ng-container>\r\n              </th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngFor=\"let item of viewItems; index as idx; trackBy: trackById\">\r\n              <tr>\r\n                <td class=\"position-sticky c-sticky-left p-0\"\r\n                  [ngClass]=\"{'c-error': ((gridOption.editor?.type === 'inline' || item.editingStatus) && item.editorHandler?.errorMessage), \r\n                  'c-selected': !((gridOption.editor?.type === 'inline' || item.editingStatus) && item.editorHandler?.errorMessage) && selectedItem === item}\"\r\n                  style=\"width:4px;min-width: 4px;left:0\" matTooltipPosition=\"after\"\r\n                  [matTooltip]=\"item.editingStatus ? item.editorHandler?.errorMessage:''\" #fixedBody>\r\n                </td>\r\n                <td *ngIf=\"configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <td *ngIf=\"gridOption.subInformation\" class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n                  style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n                  <button *ngIf=\"!item.editingStatus\" (click)=\"expandOrCollapse(item)\" type=\"button\" class=\"c-btn-icon\">\r\n                    <i *ngIf=\"item.subInformation?.isLoading\" class=\"fa fa-spinner fa-spin\"></i>\r\n                    <i *ngIf=\"!item.subInformation?.isLoading\" class=\"fa\"\r\n                      [ngClass]=\"{'fa-caret-right': !item.subInformation?.isOpened, 'fa-caret-down': item.subInformation?.isOpened}\"></i>\r\n                  </button>\r\n                </td>\r\n                <td *ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <td *ngIf=\"gridOption.checkable && viewItems?.length\"\r\n                  class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  <div *ngIf=\"!item.editingStatus\" class=\"align-middle text-center w-20\" style=\"width:20px;\">\r\n                    <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"item.isChecked\"\r\n                      (change)=\"onCheck(item, true)\"></mat-checkbox>\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <td *ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n                  class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n                  <div *ngIf=\"!item.editingStatus\" class=\"d-flex align-middle text-center justify-content-center\">\r\n                    <ng-container\r\n                      *ngIf=\"gridOption.commands | commandFilter:item | async; $implicit as filteredCommands\">\r\n                      <section *ngFor=\"let command of filteredCommands\">\r\n                        <ng-container *ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n                          <button *ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n                            class=\"c-btn-icon\" [matTooltip]=\"command.title | commandTitle:item\"\r\n                            [disabled]=\"command.disabled | commandDisabled:item\">\r\n                            <i class=\"{{command.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n                          </button>\r\n                          <button *ngIf=\"command.fontSet\" [matTooltip]=\"command.title | commandTitle:item\"\r\n                            [disabled]=\"command.disabled | commandDisabled:item\" (click)=\"command.click(item)\"\r\n                            type=\"button\" aria-hidden=\"true\" mat-icon-button>\r\n                            <mat-icon [fontSet]=\"command.fontSet\">{{command.icon | commandIcon:item}}</mat-icon>\r\n                          </button>\r\n                        </ng-container>\r\n                        <ng-template #elseCommandChildren>\r\n                          <button *ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n                            [matTooltip]=\"command.title\" [disabled]=\"command.disabled | commandDisabled:item\">\r\n                            <i class=\"{{command.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n                          </button>\r\n                          <button *ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n                            class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n                            [disabled]=\"command.disabled | commandDisabled:item\">\r\n                            <mat-icon>more_vert</mat-icon>\r\n                          </button>\r\n                          <mat-menu #menu=\"matMenu\">\r\n                            <ng-container *ngFor=\"let childCommand of command.children\">\r\n                              <button *ngIf=\"!(item | commandHidden:childCommand | async)\" type=\"button\" mat-menu-item\r\n                                [disabled]=\"childCommand.disabled | commandDisabled:item\"\r\n                                (click)=\"childCommand.click(item)\">\r\n                                <i *ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon | commandIcon:item}}\"></i>\r\n                                <mat-icon *ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n                                  {{childCommand.icon | commandIcon:item}}</mat-icon>\r\n                                <span> {{childCommand.title | commandTitle:item}}</span>\r\n                              </button>\r\n                            </ng-container>\r\n                          </mat-menu>\r\n                        </ng-template>\r\n                      </section>\r\n                    </ng-container>\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <td *ngIf=\"gridOption.editor?.addable || gridOption.editor?.editable\"\r\n                  class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  <div class=\"align-middle text-center\"\r\n                    style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\">\r\n                    <button\r\n                      *ngIf=\"!item.editingStatus && gridOption.editor?.type !== 'inline' && gridOption.editor?.editable\"\r\n                      [disabled]=\"item.editorHandler?.disabled\" (click)=\"onUpdate(item, true)\" aria-label=\"Edit\"\r\n                      type=\"button\" mat-icon-button>\r\n                      <mat-icon>edit</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"item.editingStatus && gridOption.editor?.type !== 'inline'\"\r\n                      [disabled]=\"item.editorHandler?.errorMessage || item.editorHandler?.saving\" (click)=\"onSave(item)\"\r\n                      type=\"button\" aria-label=\"Save\" mat-icon-button>\r\n                      <mat-icon>save</mat-icon>\r\n                    </button>\r\n                    <button *ngIf=\"item.editingStatus || gridOption.editor?.type === 'inline'\" (click)=\"onCancel(item)\"\r\n                      aria-label=\"Cancel\" mat-icon-button\r\n                      [disabled]=\"gridOption.editor?.type === 'inline' && item.editorHandler?.disabled\" type=\"button\">\r\n                      <mat-icon>cancel</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <td *ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  <div *ngIf=\"!item.editingStatus\" class=\"align-middle text-center\" style=\"width:20px;\">\r\n                    <!-- {{gridOption.paginate?.pageSize * (currentPage - 1) + idx + 1}} -->\r\n                    {{idx + 1}}\r\n                  </div>\r\n                </td>\r\n                <td *ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n                  class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n                  <td class=\"position-sticky align-middle c-cell c-sticky-left\"\r\n                    [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n                    [ngStyle]=\"{'width':column.width ? column.width : '','min-width': !column.width || column.width === 'auto' ? '200px' : column.width}\"\r\n                    (click)=\"rowHandler.click(item)\" #fixedBody>\r\n                    <ng-container *ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n                      <ng-container *ngIf=\"item[column.field] | editorHandler:item:gridOption\">\r\n                        <div\r\n                          *ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] | editorValidate:item:gridOption.editor.validate | async)\">\r\n                        </div>\r\n                        <ng-container *ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n                          <div style=\"width: 100%\">\r\n                            <ng-container *ngIf=\"cellEditorDef[column.field]\">\r\n                              <ng-container\r\n                                *ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <sd-grid-desktop-column-edit *ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n                              [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n                            </sd-grid-desktop-column-edit>\r\n                          </div>\r\n                        </ng-container>\r\n                        <ng-template #columnView>\r\n                          <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n                            <ng-container *ngIf=\"cellDef[column.field]\">\r\n                              <ng-container\r\n                                *ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <sd-grid-desktop-column-view *ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n                            </sd-grid-desktop-column-view>\r\n                          </div>\r\n                        </ng-template>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #elseColumnChildren>\r\n                      <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n                      </sd-grid-desktop-column-children-view>\r\n                    </ng-template>\r\n                  </td>\r\n                  <td *ngIf=\"configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                </ng-template>\r\n                <td *ngFor=\"let column of normalColumns\" class=\"align-middle c-cell c-normal-column\"\r\n                  (click)=\"rowHandler.click(item)\"\r\n                  [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n                  (dblclick)=\"rowHandler.dblClick(item)\"\r\n                  [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width': !column.width || column.width === 'auto' ? '200px' : column.width}\">\r\n                  <ng-container *ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n                    <ng-container *ngIf=\"item[column.field] | editorHandler:item:gridOption\">\r\n                      <div\r\n                        *ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] | editorValidate:item:gridOption.editor.validate | async)\">\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n                        <div style=\"width: 100%\">\r\n                          <ng-container *ngIf=\"cellEditorDef[column.field]\">\r\n                            <ng-container\r\n                              *ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n                            </ng-container>\r\n                          </ng-container>\r\n                          <sd-grid-desktop-column-edit *ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n                            [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n                          </sd-grid-desktop-column-edit>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-template #columnView>\r\n                        <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n                          <ng-container *ngIf=\"cellDef[column.field]\">\r\n                            <ng-container\r\n                              *ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n                            </ng-container>\r\n                          </ng-container>\r\n                          <sd-grid-desktop-column-view *ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n                          </sd-grid-desktop-column-view>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <ng-template #elseColumnChildren>\r\n                    <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n                    </sd-grid-desktop-column-children-view>\r\n                  </ng-template>\r\n                </td>\r\n              </tr>\r\n              <tr *ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\" class=\"c-no-hover\">\r\n                <td class=\"p-10\" colspan=\"100\">\r\n                  <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\"\r\n                    [option]=\"gridOption?.subInformation\">\r\n                  </sd-grid-sub-information>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"viewItems?.length\">\r\n              <ng-container *ngFor=\"let footerIndex of footerRows\">\r\n                <tr>\r\n                  <td class=\"position-sticky c-sticky-left p-0\" style=\"width:4px;min-width: 4px;left:0\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <td *ngIf=\"gridOption.subInformation\"\r\n                    class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n                    style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <td *ngIf=\"gridOption.checkable && viewItems?.length\"\r\n                    class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <td *ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n                    class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <td *ngIf=\"gridOption.editor?.addable || gridOption.editor?.editable\"\r\n                    class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <td *ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n                  </td>\r\n                  <td *ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n                    class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n                    <td class=\"position-sticky align-middle p-0 c-sticky-left\" #fixedBody>\r\n                      <ng-container *ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n                        </ng-container>\r\n                      </ng-container>\r\n                    </td>\r\n                    <td *ngIf=\"configuration?.style?.bordered\"\r\n                      class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n                  </ng-template>\r\n                  <td *ngFor=\"let column of normalColumns\" class=\"align-middle p-0 c-normal-column\">\r\n                    <ng-container *ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </ng-container>\r\n            <tr *ngIf=\"!viewItems?.length && !isLoading\">\r\n              <td class=\"c-empty\" colspan=\"100\">\r\n                <mat-icon>cloud_off</mat-icon>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".text-black400{color:#757575}.c-table.table{margin-bottom:5px}.c-table.table td.c-empty,.c-table.table th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table td.c-empty mat-icon,.c-table.table th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered,.c-table.table.c-bordered td,.c-table.table.c-bordered th{border:1px solid #dee2e6!important}.c-table.table.c-bordered td.c-empty,.c-table.table.c-bordered th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table.c-bordered td.c-empty mat-icon,.c-table.table.c-bordered th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered td.c-normal-column,.c-table.table.c-bordered th.c-normal-column{border-left:none!important}.c-table.table.c-bordered td.c-sticky-spliter,.c-table.table.c-bordered th.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;display:table-cell;max-width:1px!important;min-width:1px!important;width:1px!important}.c-table.table.c-bordered td.c-sticky-left,.c-table.table.c-bordered th.c-sticky-left{border-left:0!important;border-right:0!important}.c-table.table.c-bordered td.c-sticky-all,.c-table.table.c-bordered th.c-sticky-all{border:0!important}.c-table.table thead.thead-light th{background-color:#eceff1;border-top:none!important;color:#2f3136;font-size:14px!important;height:40px;min-width:0}.c-table.table thead.thead-light th.c-cell{padding:3px 5px!important}.c-table.table thead.thead-light th .mat-checkbox label{margin-bottom:0}.c-table.table tbody tr:not(.c-no-hover):hover,.c-table.table tbody tr:not(.c-no-hover):hover td.c-sticky-left{background-color:#e3f2fd!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd){background-color:#fafafa}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left{background-color:#fafafa!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n){background-color:#fff}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left{background-color:#fff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody td{font-size:13px!important;min-height:25px;min-width:0}.c-table.table tbody td.c-cell{padding:3px 5px!important}.grid-header{overflow-x:hidden;overflow-y:hidden}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase}.status.c-desktop-status{width:100%}.status.c-align-left{text-align:left!important}.status-success{color:#43a047}.status-danger{color:#f44336}.page-item{cursor:pointer}.sumarize{background-color:#00bcd4;border-radius:10rem;color:#fff;display:inline-block;font-size:12px;font-weight:500;line-height:1;padding:8px 12px;text-align:center;text-transform:uppercase;white-space:normal}.cursor-pointer{cursor:pointer}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{left:0;z-index:20}.c-sticky-all{left:0;top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;z-index:40!important}.c-badge:not(.c-children){border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge.c-children{font-size:14px;font-weight:500;padding:5px!important}.blinker{-webkit-animation:blinker .5s linear infinite;animation:blinker .5s linear infinite;color:#1c87c9;font-weight:500}@-webkit-keyframes blinker{50%{opacity:0}}@keyframes blinker{50%{opacity:0}}.c-loading{opacity:.4}.c-loading-icon{left:calc(50% - 2.5rem);position:-webkit-sticky;position:sticky;top:calc(50% - 2.5rem)}.c-loading-margin{margin-top:-5rem}fieldset.c-fieldset-mobile{border:1px solid #e0e0e0;border-radius:5px;padding:3px 5px}legend.c-legend-mobile{border-bottom:none;font-size:16px;font-weight:500;margin:0 10px;padding:0 5px;width:auto}.c-mobile-box{border-top:none!important;box-shadow:0 0 3px 0 rgba(0,0,0,.3)}.c-mobile-body{margin-bottom:5px;margin-top:5px;overflow-x:auto}.c-mobile-item{border:1px solid #fff;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.3);margin:8px 0;padding:5px}.c-mobile-item.c-mobile-item-selected{border:2px solid #2962ff!important}.c-mobile-item:nth-of-type(odd){background-color:#fafafa}.c-mobile-item:nth-of-type(2n){background-color:#fff}.c-mobile-row{margin-bottom:3px;margin-top:0}.c-desktop-title{font-size:13px;line-height:1.7}.c-desktop-title,.c-mobile-title{color:#212529;font-weight:700;margin-right:3px}.c-mobile-title{font-size:14px}.c-children,.c-mobile-value{color:#212529;font-size:14px;overflow-wrap:break-word}.c-mobile-badge{font-size:14px;font-weight:500;padding:5px!important}.c-mobile-command{align-items:center;border-top:1px solid #f4f4f4;display:flex;justify-content:space-between;padding:5px 3px 0}.c-mobile-action{font-size:18px!important}.c-mobile-checkable{margin:5px 0 5px -5px!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{min-width:1px;width:1px}.c-display-contents{display:contents}.w-20{width:20px!important}.c-btn-icon-30{height:30px;line-height:30px;width:30px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}:host td .mat-icon-button,:host th .mat-icon-button{height:24px;line-height:24px;width:24px}:host td .mat-icon-button .material-icons,:host th .mat-icon-button .material-icons{font-size:20px}:host ::ng-deep .mat-paginator-container{height:32px;min-height:32px}:host ::ng-deep .mat-paginator-container .mat-icon-button{height:28px;line-height:28px;width:28px}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-checkbox label{margin-bottom:0}"]
-            },] }
-];
-SdGrid.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [GRID_CONFIG,] }, { type: Optional }] },
-    { type: ChangeDetectorRef },
-    { type: DeviceDetectorService },
-    { type: HandlerLocal },
-    { type: HandlerDotnet },
-    { type: SdTranslateService },
-    { type: DatePipe },
-    { type: SdLoadingService },
-    { type: SdApiService },
-    { type: SdExcelService },
-    { type: SdNotifyService },
-    { type: EditorHandlerPipe }
-];
-SdGrid.propDecorators = {
-    fixedHeaders: [{ type: ViewChildren, args: ['fixedHeader',] }],
-    fixedBodies: [{ type: ViewChildren, args: ['fixedBody',] }],
-    fixedGridContainer: [{ type: ViewChild, args: ['fixedGridContainer',] }],
-    gridFixedBody: [{ type: ViewChild, args: ['gridFixedBody',] }],
-    gridContainer: [{ type: ViewChild, args: ['gridContainer',] }],
-    gridHeader: [{ type: ViewChild, args: ['gridHeader',] }],
-    gridBody: [{ type: ViewChild, args: ['gridBody',] }],
-    sdGridConfig: [{ type: ViewChild, args: ['sdGridConfig', { static: true },] }],
-    sdGridPopupEditor: [{ type: ViewChild, args: ['sdGridPopupEditor',] }],
-    sdGridPopupFilter: [{ type: ViewChild, args: ['sdGridPopupFilter',] }],
-    matSelect: [{ type: ViewChild, args: ['matSelect',] }],
-    sdGridPopupExportExcel: [{ type: ViewChild, args: ['sdGridPopupExportExcel',] }],
-    sdGridImportExcel: [{ type: ViewChild, args: ['sdGridImportExcel',] }],
-    cellDefs: [{ type: ContentChildren, args: [SdCellDefDirective,] }],
-    cellEditorDefs: [{ type: ContentChildren, args: [SdCellEditorDefDirective,] }],
-    cellFooterDefs: [{ type: ContentChildren, args: [SdCellFooterDevDirective,] }],
-    paginator: [{ type: ViewChild, args: [MatPaginator,] }],
-    option: [{ type: Input }]
-};
-
-class SdDynamicItems {
-    transform(value, dynamicItems) {
-        return dynamicItems;
-    }
-}
-SdDynamicItems.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdDynamicItems'
-            },] }
-];
-
-var _setting, _initDefault;
-class SdGridConfig {
-    constructor(ref, notifyService, settingService, translateService) {
-        this.ref = ref;
-        this.notifyService = notifyService;
-        this.settingService = settingService;
-        this.translateService = translateService;
-        this.sdChange = new EventEmitter();
-        _setting.set(this, void 0);
-        _initDefault.set(this, () => {
-            this.storage = {};
-            this.storage.pageSize = this.option.pageSize;
-            this.storage.columnConfigs = [];
-            this.option.columns.forEach(column => {
-                this.storage.columnConfigs.push({
-                    originColumn: {
-                        field: column.field,
-                        title: column.title,
-                        width: column.width,
-                        fixed: column.fixed
-                    },
-                    hidden: false,
-                    fixed: column.fixed
-                });
-            });
-        });
-    }
-    ngOnInit() {
-    }
-    setOption(option) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.ref.detectChanges();
-            this.option = option;
-            if (this.option.key) {
-                __classPrivateFieldSet(this, _setting, this.settingService.create(this.option.key));
-            }
-            else {
-                __classPrivateFieldSet(this, _setting, null);
-            }
-            yield this.init();
-            this.emitOnChange();
-        });
-    }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (__classPrivateFieldGet(this, _setting)) {
-                const storage = yield __classPrivateFieldGet(this, _setting).get();
-                try {
-                    if (!storage) {
-                        yield __classPrivateFieldGet(this, _setting).remove();
-                        __classPrivateFieldGet(this, _initDefault).call(this);
-                        return;
-                    }
-                    this.storage = storage;
-                    // Loại bỏ những column đã bị xóa khỏi originColumns
-                    this.storage.columnConfigs = this.storage.columnConfigs
-                        .filter(column => this.option.columns.some(e => e.field === column.originColumn.field));
-                    // Thêm những column mới vào storage nếu có
-                    this.option.columns.forEach(column => {
-                        if (!this.storage.columnConfigs.some(e => e.originColumn.field === column.field)) {
-                            this.storage.columnConfigs.push({
-                                originColumn: {
-                                    field: column.field,
-                                    title: column.title,
-                                    width: column.width,
-                                    fixed: column.fixed
-                                },
-                                hidden: false,
-                                fixed: column.fixed
-                            });
-                        }
-                    });
-                    // Cập nhật originColumn
-                    this.storage.columnConfigs.forEach(column => {
-                        const originColumn = this.option.columns.find(e => e.field === column.originColumn.field);
-                        if (originColumn) {
-                            Object.assign(column.originColumn, {
-                                title: originColumn.title,
-                                width: originColumn.width,
-                                fixed: originColumn.fixed
-                            });
-                        }
-                    });
-                }
-                catch (ex) {
-                    __classPrivateFieldGet(this, _setting).remove();
-                    __classPrivateFieldGet(this, _initDefault).call(this);
-                }
-            }
-            else {
-                __classPrivateFieldGet(this, _initDefault).call(this);
-            }
-        });
-    }
-    open() {
-        this.modal.open();
-    }
-    save() {
-        var _a, _b;
-        if (!Number.isSafeInteger(+this.storage.pageSize)) {
-            this.notifyService.notify.warning(this.translateService.translate('Page size must be an integer'));
-            return;
-        }
-        if (this.storage.pageSize > 200) {
-            this.notifyService.notify.warning(this.translateService.translate('Page size is too large'));
-            return;
-        }
-        (_b = (_a = __classPrivateFieldGet(this, _setting)) === null || _a === void 0 ? void 0 : _a.set) === null || _b === void 0 ? void 0 : _b.call(_a, this.storage);
-        this.emitOnChange();
-        this.modal.close();
-        this.ref.detectChanges();
-    }
-    reset() {
-        var _a, _b;
-        (_b = (_a = __classPrivateFieldGet(this, _setting)) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
-        __classPrivateFieldGet(this, _initDefault).call(this);
-        this.emitOnChange();
-        this.modal.close();
-        this.ref.detectChanges();
-    }
-    moveColumnUp(index) {
-        const temp = this.storage.columnConfigs[index];
-        this.storage.columnConfigs[index] = this.storage.columnConfigs[index - 1];
-        this.storage.columnConfigs[index - 1] = temp;
-    }
-    moveColumnDown(index) {
-        const temp = this.storage.columnConfigs[index];
-        this.storage.columnConfigs[index] = this.storage.columnConfigs[index + 1];
-        this.storage.columnConfigs[index + 1] = temp;
-    }
-    emitOnChange() {
-        const pageSize = +this.storage.pageSize || this.option.pageSize;
-        const columns = this.option.columns.filter(column => {
-            // Hidden column theo config
-            // Lấy các thuộc tính Title, Width, Fixed từ config
-            const columnConfig = this.storage.columnConfigs.find(e => e.originColumn.field === column.field);
-            if (columnConfig) {
-                column.title = columnConfig.title || column.title;
-                column.width = columnConfig.width || column.width;
-                column.fixed = columnConfig.fixed;
-                return !columnConfig.hidden;
-            }
-            return true;
-        }).sort((current, next) => {
-            // Sắp xếp theo config
-            const currentIndex = this.storage.columnConfigs.findIndex(e => e.originColumn.field === current.field);
-            const nextIndex = this.storage.columnConfigs.findIndex(e => e.originColumn.field === next.field);
-            return currentIndex - nextIndex;
-        }).filter(column => {
-            // Hidden column theo option truyền vào
-            if (column.hidden === undefined) {
-                return true;
-            }
-            if (typeof (column.hidden) === 'boolean') {
-                return !column.hidden;
-            }
-            if (typeof (column.hidden) === 'function') {
-                return !column.hidden();
-            }
-            return false;
-        });
-        const result = {
-            pageSize,
-            columns,
-            fixedColumns: columns.filter(e => e.fixed),
-            normalColumns: columns.filter(e => !e.fixed)
-        };
-        this.sdChange.emit(result);
-    }
-}
-_setting = new WeakMap(), _initDefault = new WeakMap();
-SdGridConfig.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-config',
-                template: "<sd-modal [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-3 col-6\">\r\n        <sd-input-currency [label]=\"'Page size' | sdTranslate\" [(model)]=\"storage.pageSize\" step=\"1\">\r\n        </sd-input-currency>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th *sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n                <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n                <th class=\"text-uppercase\">{{'Title' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' | sdTranslate}}</th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' | sdTranslate}}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n                    matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n                    class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\" size=\"sm\"></sd-button>\r\n    <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
-                styles: [".c-btn-icon{background:none!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.c-table.table{margin-bottom:5px}"]
-            },] }
-];
-SdGridConfig.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SdNotifyService },
-    { type: SdSettingService },
-    { type: SdTranslateService }
-];
-SdGridConfig.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    sdChange: [{ type: Output }]
-};
-
-class SdGridDesktopColumnEdit {
-    constructor(ref) {
-        this.ref = ref;
-        this.sdChange = new EventEmitter();
-        this.onEditorChange = (column, item, value) => {
-            var _a, _b;
-            if (column.type !== 'children') {
-                (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.call(_a, item, value);
-                this.ref.detectChanges();
-                this.sdChange.emit();
-            }
-        };
-        this.onAutocompleteChange = (item) => {
-            var _a, _b;
-            if (this.column.type === 'string' || this.column.type === 'values') {
-                (_b = (_a = this.column.editor) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.call(_a, this.item, this.item[this.column.field], item);
-                this.ref.detectChanges();
-                this.sdChange.emit();
-            }
-        };
-        this.onSelectionChange = (params) => {
-            var _a, _b;
-            if (this.column.type === 'string' || this.column.type === 'values') {
-                (_b = (_a = this.column.editor) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.call(_a, this.item, params === null || params === void 0 ? void 0 : params.value, (params === null || params === void 0 ? void 0 : params.item) || (params === null || params === void 0 ? void 0 : params.items));
-                this.ref.detectChanges();
-                this.sdChange.emit();
-            }
-        };
-        this.dynamicItems = (value) => __awaiter(this, void 0, void 0, function* () {
-            if ('editor' in this.column && 'item' in this.column.editor) {
-                const items = this.column.editor.item.items || [];
-                if (Array.isArray(items)) {
-                    return items;
-                }
-                const results = items(this.item, value);
-                if (results instanceof Promise) {
-                    return yield results;
-                }
-                return results;
-            }
-            else {
-                return [];
-            }
-        });
-    }
-}
-SdGridDesktopColumnEdit.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-desktop-column-edit',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <sd-input size=\"sm\" *ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n      <sd-input size=\"sm\" *ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-input>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <sd-input-currency size=\"sm\" [(model)]=\"item[column.field]\"\r\n      (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-currency>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n    <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-switch>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseValues\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseValues>\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n      (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-5 ml-5\">\r\n      <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-5\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}"]
-            },] }
-];
-SdGridDesktopColumnEdit.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-SdGridDesktopColumnEdit.propDecorators = {
-    column: [{ type: Input }],
-    item: [{ type: Input }],
-    sdChange: [{ type: Output }]
-};
-
-class SdGridDesktopColumnView {
-    constructor() { }
-}
-SdGridDesktopColumnView.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-desktop-column-view',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n    <div (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'cursor-pointer':column.click}\"\r\n      [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column.htmlTemplate) | safeHtml\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #useDefaultView>\r\n    <div *ngIf=\"column.type === 'string'\">\r\n      <span [className]=\"item[column.field] | cellDesktopClassName:item:column\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n        <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n          (click)=\"column.click(item[column.field], item)\">{{item[column.field] | valueTransform:item:column}}</a>\r\n        <ng-container *ngIf=\"!column.click\">{{item[column.field] | valueTransform:item:column}}</ng-container>\r\n      </span>\r\n      <ng-container *ngIf=\"column.commands | columnCommandFilter:item | async; $implicit as filteredColumnCommands\">\r\n        <button *ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\" type=\"button\"\r\n          class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title | commandTitle:item\">\r\n          <i class=\"{{columnCommand.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'color'\">\r\n      <input disabled=\"true\" type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor.change(item)\">\r\n    </div>\r\n    <div *ngIf=\"column.type === 'number'\">\r\n      <span [className]=\"item[column.field] | cellDesktopClassName:item:column\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n        <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n          (click)=\"column.click(item[column.field], item)\">{{item[column.field] | valueTransform:item:column}}</a>\r\n        <ng-container *ngIf=\"!column.click\">\r\n          {{item[column.field] | valueTransform:item:column}}</ng-container>\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'date'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'datetime'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'time'\" class=\"text-center\">\r\n      {{item[column.field] | date:'HH:mm'}}\r\n    </div>\r\n    <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n      <span *ngIf=\"!item.editorHandler[column.field].visible && item[column.field]\"\r\n        class=\"status status-success\">{{column.trueValue || 'True'}}</span>\r\n      <span *ngIf=\"!item.editorHandler[column.field].visible && !item[column.field]\"\r\n        class=\"status status-danger\">{{column.falseValue || 'False'}}</span>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'values'\">\r\n      <ng-container *ngIf=\"item[column.field] | columnValues:column.values; $implicit as valueData\">\r\n        <div *ngIf=\"valueData.color || valueData.backgroundColor; else elseNoStatus\" class=\"status\"\r\n          [ngStyle]=\"{'color':valueData.color, 'background-color': valueData.backgroundColor}\">\r\n          {{valueData.text}}\r\n        </div>\r\n        <ng-template #elseNoStatus>\r\n          <div class=\"text-left\">\r\n            {{valueData.text}}\r\n          </div>\r\n        </ng-template>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'radio'\">\r\n      {{item[column.field]}}\r\n    </div>\r\n    <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n      <img *ngIf=\"item[column.field]\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n        [height]=\"column.display?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'c-clickable':column.click}\">\r\n      <i *ngIf=\"!item[column.field]\" class=\"fa fa-picture-o fa-fw c-img\" [ngClass]=\"{'c-clickable':column.click}\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\"></i>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>",
-                styles: [".text-black400{color:#757575}.c-badge{border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge a{color:#fff}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase;width:100%}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.c-clickable{cursor:pointer}.c-img{font-size:30px;opacity:.5}.c-img.c-clickable:hover{opacity:.9}"]
-            },] }
-];
-SdGridDesktopColumnView.ctorParameters = () => [];
-SdGridDesktopColumnView.propDecorators = {
-    column: [{ type: Input }],
-    item: [{ type: Input }]
-};
-
-class SdGridDesktopInlineFilter {
-    constructor() {
-        this.columns = [];
-        this.externalFilter = {};
-        this.filter = {};
-        this.inlineExternal = {};
-        this.inlineColumn = {};
-        this.sdChange = new EventEmitter();
-        this.displayKey = 'SDCUSTOM';
-        this.onUpdateFilter = () => {
-            this.sdChange.emit();
-        };
-    }
-}
-SdGridDesktopInlineFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-desktop-inline-filter',
-                template: "<ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n  <ng-container *ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n    <ng-container *ngFor=\"let item of columns\">\r\n      <ng-container\r\n        *ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngIf=\"inlineColumn[item.field] || inlineColumn[item.field] === undefined\">\r\n          <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item?.editor?.autocomplete\" [items]=\"item.values\"\r\n              valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\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)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-date-time>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container\r\n        *ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngFor=\"let childColumn of item.children\">\r\n          <ng-container\r\n            *ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n              <sd-input-currency [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input-currency>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue || 'True' },\r\n            {value:'0',display:childColumn.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n                [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-autocomplete>\r\n              <sd-date-time\r\n                *ngIf=\"childColumn.type === 'date' || childColumn.type === 'datetime' || childColumn.type === 'time'\"\r\n                [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"filterOption?.externalFilters?.length\">\r\n    <ng-container *ngFor=\"let item of filterOption.externalFilters\">\r\n      <ng-container\r\n        *ngIf=\"(inlineExternal[item.field] || inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n        <div *ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n          class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'custom'\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-range>\r\n        </div>\r\n        <ng-template #elseFilterRange>\r\n          <ng-container *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                [maxDate]=\"externalFilter[item.field].to || item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
-                styles: [""]
-            },] }
-];
-SdGridDesktopInlineFilter.ctorParameters = () => [];
-SdGridDesktopInlineFilter.propDecorators = {
-    columns: [{ type: Input }],
-    externalFilter: [{ type: Input }],
-    filter: [{ type: Input }],
-    filterOption: [{ type: Input }],
-    inlineExternal: [{ type: Input }],
-    inlineColumn: [{ type: Input }],
-    sdChange: [{ type: Output }]
-};
-
-class SdGridMobileItemView {
-    constructor() {
-        this.check = new EventEmitter();
-        this.onCheck = (item) => {
-            this.check.emit(item);
-        };
-    }
-}
-SdGridMobileItemView.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-mobile-item-view',
-                template: "<ng-container *ngIf=\"gridOption && item\">\r\n  <ng-container *ngIf=\"gridOption?.mobileOrTablet?.htmlTemplate\">\r\n    <div\r\n      [innerHTML]=\"(item | mobileViewHtmlTempate:gridOption.columns:gridOption?.mobileOrTablet?.htmlTemplate) | safeHtml\"\r\n      (click)=\"onCheck(item)\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!gridOption?.mobileOrTablet?.htmlTemplate\">\r\n    <ng-container *ngFor=\"let column of gridOption.columns | filterMobile:item\">\r\n      <div *ngIf=\"column.type !== 'children'\" class=\"row c-row\" (click)=\"onCheck(item)\">\r\n        <div class=\"col-5\">\r\n          <span class=\"c-title\">\r\n            {{item | columnTitle:column.title:column.dynamicTitle | async}}:\r\n          </span>\r\n        </div>\r\n        <div class=\"col-7\">\r\n          <ng-container *ngIf=\"column.type === 'string'\">\r\n            <span *ngIf=\"!column.htmlTemplate; else elseUseTemplate\"\r\n              [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n              <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n                (click)=\"column.click(item[column.field], item)\">{{item[column.field]}}</a>\r\n              <ng-container *ngIf=\"!column.click\">\r\n                {{item[column.field]}}</ng-container>\r\n            </span>\r\n            <ng-template #elseUseTemplate>\r\n              <span class=\"c-value\"\r\n                [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column.htmlTemplate) | safeHtml\"></span>\r\n            </ng-template>\r\n            <ng-container\r\n              *ngIf=\"column.commands | columnCommandFilter:item | async; $implicit as filteredColumnCommands\">\r\n              <button *ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\"\r\n                type=\"button\" class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title | commandTitle:item\">\r\n                <i class=\"{{columnCommand.icon | commandIcon:item}}\" aria-hidden=\"true\" style=\"font-size: 14px;\"></i>\r\n              </button>\r\n            </ng-container>\r\n          </ng-container>\r\n          <span *ngIf=\"column.type === 'number'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | valueTransform:item:column}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | valueTransform:item:column}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'datetime'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'date'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'dd/MM/yyyy'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'dd/MM/yyyy'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'time'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'HH:mm'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'HH:mm'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'bool'\" [className]=\"item[column.field] | cellMobileClassName:item:column\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">\r\n            <strong *ngIf=\"item[column.field]\"\r\n              class=\"text-success\">{{column.trueValue || 'True'}}</strong>\r\n            <strong *ngIf=\"!item[column.field]\"\r\n              class=\"text-danger\">{{column.falseValue || 'False'}}</strong>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'color'\" class=\"c-value\"><input disabled=\"true\" type=\"color\"\r\n              class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n          <ng-container *ngIf=\"column.type === 'values'\">\r\n            <ng-container *ngIf=\"column?.dictionary[item[column.field]] as dic; else elseNotInDic\">\r\n              <span *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n                [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n                {{dic.text}}\r\n              </span>\r\n              <ng-template #elseNoStatus>\r\n                <span class=\"c-value\">\r\n                  {{dic.text}}\r\n                </span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-template #elseNotInDic>\r\n              <span class=\"c-value\">\r\n                {{item[column.field]}}\r\n              </span>\r\n            </ng-template>\r\n          </ng-container>\r\n          <span *ngIf=\"column.type === 'radio'\" class=\"c-value\">{{item[column.field]}}</span>\r\n          <img *ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n            [height]=\"column.display?.height\" style=\"margin: 5px 0\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <div class=\"row c-row\" *ngFor=\"let childColumn of column.children | filterMobile:item\" (click)=\"onCheck(item)\">\r\n          <div class=\"col-5\">\r\n            <span class=\"c-title\">\r\n              {{childColumn.title}}:\r\n            </span>\r\n          </div>\r\n          <div class=\"col-7\">\r\n            <ng-container *ngIf=\"childColumn.type === 'string'\">\r\n              <span *ngIf=\"!childColumn.htmlTemplate; else elseUseTemplate\"\r\n                [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"><a\r\n                  *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                  (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</a>\r\n                <ng-container *ngIf=\"!childColumn.click\">\r\n                  {{item[childColumn.field]}}</ng-container>\r\n              </span>\r\n              <ng-template #elseUseTemplate>\r\n                <span class=\"c-value\"\r\n                  [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn.htmlTemplate) | safeHtml\"></span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <span *ngIf=\"childColumn.type === 'number'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | valueTransform:item:childColumn}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | valueTransform:item:childColumn}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'datetime'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'date'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | date:'dd/MM/yyyy'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'time'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\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'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'bool'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n              <strong *ngIf=\"item[childColumn.field]\"\r\n                class=\"text-success\">{{childColumn.trueValue || 'True'}}</strong>\r\n              <strong *ngIf=\"!item[childColumn.field]\"\r\n                class=\"text-danger\">{{childColumn.falseValue || 'False'}}</strong>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'color'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n                type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n            <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n              <ng-container *ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n                <span *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n                  [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n                  {{dic.text}}\r\n                </span>\r\n                <ng-template #elseNoStatus>\r\n                  <span class=\"c-value\">\r\n                    {{dic.text}}\r\n                  </span>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-template #elseNotInDic>\r\n                <span class=\"c-value\">\r\n                  {{item[childColumn.field]}}\r\n                </span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <span *ngIf=\"childColumn.type === 'radio'\" class=\"c-value\">{{item[childColumn.field]}}</span>\r\n            <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n              [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n              (click)=\"column.click && column.click(item[column.field], item)\">\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
-                styles: [".c-status{display:inline-block;font-weight:500;text-align:left;text-transform:uppercase}.c-row{margin:0 -8px 3px}.c-title{font-weight:700;margin-right:3px}.c-title,.c-value{color:#212529;font-size:14px}.c-value{overflow-wrap:break-word}.c-badge{font-size:14px;font-weight:500;padding:5px!important}"]
-            },] }
-];
-SdGridMobileItemView.ctorParameters = () => [];
-SdGridMobileItemView.propDecorators = {
-    gridOption: [{ type: Input }],
-    item: [{ type: Input }],
-    check: [{ type: Output }]
-};
-
-class SdGridPopupEditor {
-    constructor() {
-        this.save = new EventEmitter();
-        this.columns = [];
-        this.open = (item, columns, isModified) => {
-            this.item = item;
-            this.isModified = isModified !== null && isModified !== void 0 ? isModified : false;
-            this.columns = [];
-            columns.forEach(column => {
-                var _a;
-                if (column.type !== 'image' && column.type !== 'children') {
-                    this.columns.push(column);
-                }
-                if (column.type === 'children') {
-                    (_a = column.children) === null || _a === void 0 ? void 0 : _a.forEach(childColumn => {
-                        if (childColumn.type !== 'image') {
-                            this.columns.push(childColumn);
-                        }
-                    });
-                }
-            });
-        };
-        this.onCancel = () => {
-            this.modal.close();
-        };
-        this.onSave = () => {
-            this.modal.close();
-            this.save.emit(this.item);
-        };
-    }
-    ngOnInit() {
-    }
-}
-SdGridPopupEditor.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-popup-editor',
-                template: "<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n  <sd-modal-body *ngIf=\"item && columns?.length\">\r\n    <form #formEditor=\"ngForm\">\r\n      <ng-container *ngFor=\"let column of columns\">\r\n        <div *ngIf=\"column | editorPopupVisible:item\" class=\"row\">\r\n          <div class=\"col-12\">\r\n            <sd-input *ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n            <sd-input-currency *ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\">\r\n            </sd-input-currency>\r\n            <sd-select *ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n            <sd-switch *ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n            </sd-switch>\r\n            <sd-select *ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>"
-            },] }
-];
-SdGridPopupEditor.ctorParameters = () => [];
-SdGridPopupEditor.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    save: [{ type: Output }]
-};
-
-class SdGridPopupExportExcel {
-    constructor(ref, loadingService, excelService, notifyService, translateService) {
-        this.ref = ref;
-        this.loadingService = loadingService;
-        this.excelService = excelService;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.prefix = 'Popup Export Excel';
-        this.newExcelConfig = 'fd8fb5db-a7ad-4398-93ac-cb3350261180';
-        this.key = '';
-        this.columns = [];
-        this.extendColumns = [];
-        this.excelConfigs = [];
-        this.exportByTemplate = new EventEmitter();
-        this.tabIndex = 0;
-        this.selectedExcelConfig = {};
-        this.exportableColumns = [];
-        this.selected = {};
-        this.generateExcelColumns = (columns) => {
-            const excelColumns = [];
-            for (const column of columns) {
-                if (column.type === 'children') {
-                    for (const childColumn of column.children) {
-                        if (childColumn.type !== 'image') {
-                            excelColumns.push({
-                                field: childColumn.field,
-                                title: childColumn.title,
-                                description: childColumn.description,
-                                width: childColumn.width
-                            });
-                        }
-                    }
-                }
-                else if (column.type !== 'image') {
-                    excelColumns.push({
-                        field: column.field,
-                        title: column.title,
-                        description: column.description,
-                        width: column.width
-                    });
-                }
-            }
-            return excelColumns;
-        };
-        this.initTemplate = (columns, fileName) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            columns = columns || [];
-            const sheets = [];
-            if (Array.isArray((_a = this.exportOption) === null || _a === void 0 ? void 0 : _a.sheets)) {
-                for (const sheet of this.exportOption.sheets) {
-                    if (sheet.name && sheet.items && sheet.fields) {
-                        if (Array.isArray(sheet.items)) {
-                            sheets.push({
-                                name: sheet.name,
-                                items: sheet.items,
-                                fields: sheet.fields
-                            });
-                        }
-                        else {
-                            sheets.push({
-                                name: sheet.name,
-                                items: yield sheet.items(),
-                                fields: sheet.fields
-                            });
-                        }
-                    }
-                }
-            }
-            return yield this.excelService.generateExcelTemplate({
-                fileName: fileName || this.fileName,
-                columns: this.generateExcelColumns(columns),
-                sheets
-            });
-        });
-        this.initDefaultTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            const extendColumns = this.extendColumns || [];
-            const columns = [...this.columns, ...extendColumns];
-            return yield this.initTemplate(columns);
-        });
-        this.generateTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            this.loadingService.start();
-            const result = yield this.initDefaultTemplate().finally(this.loadingService.stop);
-            if (result === null || result === void 0 ? void 0 : result.filePath) {
-                this.excelService.downloadTemplate(result.filePath, `${this.fileName}.xlsx`);
-            }
-        });
-        this.generateAndUploadTemplate = (columns, fileName) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
-            const sheets = [];
-            if (Array.isArray((_b = this.exportOption) === null || _b === void 0 ? void 0 : _b.sheets)) {
-                for (const sheet of this.exportOption.sheets) {
-                    if (sheet.name && sheet.items && sheet.fields) {
-                        if (Array.isArray(sheet.items)) {
-                            sheets.push({
-                                name: sheet.name,
-                                items: sheet.items,
-                                fields: sheet.fields
-                            });
-                        }
-                        else {
-                            sheets.push({
-                                name: sheet.name,
-                                items: yield sheet.items(),
-                                fields: sheet.fields
-                            });
-                        }
-                    }
-                }
-            }
-            return yield this.excelService.generateAndUploadExcelTemplate(this.fullKey, {
-                fileName: fileName || this.fileName,
-                columns: this.generateExcelColumns(columns),
-                sheets
-            });
-        });
-        this.onExportByTemplate = (excelConfig) => {
-            const extendColumns = this.extendColumns || [];
-            const columns = [...this.columns, ...extendColumns];
-            this.exportByTemplate.emit({
-                excelConfig,
-                excelColumns: this.generateExcelColumns(columns)
-            });
-            this.ref.detectChanges();
-        };
-        this.uploadTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            const excelConfig = yield this.excelService.uploadTemplate(this.fullKey, this.validator);
-            this.excelConfigs.push({
-                name: excelConfig.name,
-                fullPath: excelConfig.fullPath,
-                removable: true
-            });
-            this.ref.detectChanges();
-        });
-        this.downloadTemplate = (excelConfig) => {
-            this.excelService.downloadTemplate(excelConfig.fullPath, excelConfig.name);
-        };
-        this.removeTemplate = (excelConfig) => {
-            this.notifyService.confirm(this.translateService.translate('Remove template')).then(() => __awaiter(this, void 0, void 0, function* () {
-                this.loadingService.start();
-                yield this.excelService.remove(this.fullKey, excelConfig.name).finally(this.loadingService.stop);
-                const idx = this.excelConfigs.indexOf(excelConfig);
-                this.excelConfigs.splice(idx, 1);
-                this.ref.detectChanges();
-            }));
-        };
-        this.exportDefault = () => __awaiter(this, void 0, void 0, function* () {
-            this.loadingService.start();
-            const result = yield this.initDefaultTemplate().finally(this.loadingService.stop);
-            const excelColumns = [];
-            const extendColumns = this.extendColumns || [];
-            const columns = [...this.columns, ...extendColumns];
-            for (const column of columns) {
-                if (column.type === 'children') {
-                    for (const childColumn of column.children) {
-                        if (childColumn.type !== 'image') {
-                            excelColumns.push({
-                                field: childColumn.field,
-                                title: childColumn.title,
-                                width: childColumn.width
-                            });
-                        }
-                    }
-                }
-                else if (column.type !== 'image') {
-                    excelColumns.push({
-                        field: column.field,
-                        title: column.title,
-                        width: column.width
-                    });
-                }
-            }
-            this.exportByTemplate.emit({
-                excelConfig: {
-                    fullPath: result.filePath,
-                    name: `[${this.fullKey}] Default.xlsx`
-                },
-                excelColumns
-            });
-            this.ref.detectChanges();
-        });
-        this.newTemplate = () => {
-            this.notifyService.confirmWithInput(this.translateService.translate('Enter your template name'), {
-                maxlength: 50
-            }).then((fileName) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
-                this.loadingService.start();
-                fileName = fileName + '.xlsx';
-                try {
-                    if ((_a = this.validator) === null || _a === void 0 ? void 0 : _a.call(this, fileName)) {
-                        this.notifyService.notify.warning(this.validator(fileName));
-                        return;
-                    }
-                    let exportableColumns = this.exportableColumns.filter(column => this.selected[column.field]);
-                    if (!exportableColumns.length) {
-                        exportableColumns = this.exportableColumns;
-                    }
-                    const result = yield this.generateAndUploadTemplate(exportableColumns, fileName);
-                    if (result === null || result === void 0 ? void 0 : result.filePath) {
-                        const excelConfig = {
-                            fullPath: result.filePath,
-                            name: result.fileName,
-                            removable: true
-                        };
-                        this.excelConfigs.push(excelConfig);
-                        this.onExportByTemplate(excelConfig);
-                    }
-                }
-                finally {
-                    this.loadingService.stop();
-                }
-            }));
-        };
-        this.onChangeRadio = (matRadioChange) => {
-            const selectedExcelConfig = this.excelConfigs.find(e => e.name === matRadioChange.value);
-            if (!selectedExcelConfig) {
-                this.selectedExcelConfig = {
-                    name: this.newExcelConfig
-                };
-            }
-            else {
-                this.selectedExcelConfig = selectedExcelConfig;
-            }
-            this.exportableColumns = [...this.columns, ...(this.extendColumns || [])].filter(e => e.type !== 'image');
-            this.selected = {};
-        };
-    }
-    get fullKey() {
-        if (!this.key) {
-            return '';
-        }
-        return hash({
-            prefix: this.prefix,
-            key: this.key
-        });
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
-    open() {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.fullKey) {
-                yield this.exportDefault();
-                return;
-            }
-            yield this.loadConfiguration();
-            this.exportableColumns = [...this.columns, ...(this.extendColumns || [])].filter(e => e.type !== 'image');
-            this.selected = {};
-            if (!((_a = this.selectedExcelConfig) === null || _a === void 0 ? void 0 : _a.name)) {
-                if (((_b = this.excelConfigs) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-                    this.selectedExcelConfig = this.excelConfigs[0];
-                }
-                else {
-                    this.selectedExcelConfig = {
-                        name: this.newExcelConfig
-                    };
-                }
-            }
-            this.modal.open();
-            this.ref.detectChanges();
-        });
-    }
-    loadConfiguration() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.excelConfigs = [];
-            this.excelConfigs = yield this.excelService.getFiles(this.fullKey);
-        });
-    }
-}
-SdGridPopupExportExcel.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-popup-export-excel',
-                template: "<sd-modal width=\"sm\" [title]=\"'Export excel' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <mat-radio-group class=\"c-radio-group\" [ngModel]=\"selectedExcelConfig.name\" (change)=\"onChangeRadio($event)\">\r\n      <mat-radio-button class=\"c-radio-button\" *ngFor=\"let excelConfig of excelConfigs\" [value]=\"excelConfig.name\"\r\n        color=\"primary\">\r\n        {{excelConfig.name}}\r\n      </mat-radio-button>\r\n      <mat-radio-button class=\"c-radio-button\" [value]=\"newExcelConfig\" color=\"accent\">\r\n        {{'New template' | sdTranslate}}\r\n      </mat-radio-button>\r\n    </mat-radio-group>\r\n    <div *ngIf=\"selectedExcelConfig.name === newExcelConfig\">\r\n      <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n        <ng-container *ngFor=\"let column of exportableColumns\">\r\n          <mat-chip [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n            {{column.title}}\r\n          </mat-chip>\r\n        </ng-container>\r\n      </mat-chip-list>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <ng-container *sdDesktop>\r\n      <div class=\"float-right\" *ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n        <sd-button *ngIf=\"selectedExcelConfig.removable\" class=\"mr-5\" [title]=\"'Delete' | sdTranslate\" icon=\"delete\"\r\n          (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\">\r\n        </sd-button>\r\n        <sd-button [title]=\"'Export' | sdTranslate\" icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\"\r\n          size=\"sm\" color=\"primary\">\r\n        </sd-button>\r\n      </div>\r\n      <div class=\"float-right\" *ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n        <sd-button class=\"mr-5\" [title]=\"'Add template' | sdTranslate\" icon=\"add\" (action)=\"uploadTemplate()\" size=\"sm\">\r\n        </sd-button>\r\n        <sd-button [title]=\"'Download' | sdTranslate\" icon=\"get_app\" (action)=\"newTemplate()\" size=\"sm\" color=\"primary\">\r\n        </sd-button>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *sdMobileTablet>\r\n      <ng-container *ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n        <sd-button *ngIf=\"selectedExcelConfig.removable\" style=\"flex: 1; padding-right: 5px;\"\r\n          [title]=\"'Delete' | sdTranslate\" icon=\"delete\" (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\"\r\n          width=\"100%\">\r\n        </sd-button>\r\n        <sd-button style=\"flex: 1;\" [ngClass]=\"{'pl-5':selectedExcelConfig.removable}\" [title]=\"'Export' | sdTranslate\"\r\n          icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n        </sd-button>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n        <sd-button style=\"flex: 1; padding-right: 5px;\" [title]=\"'Add template' | sdTranslate\" icon=\"add\"\r\n          (action)=\"uploadTemplate()\" size=\"sm\" width=\"100%\">\r\n        </sd-button>\r\n        <sd-button style=\"flex: 1; padding-left: 5px;\" [title]=\"'Download' | sdTranslate\" icon=\"get_app\"\r\n          (action)=\"newTemplate()\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n        </sd-button>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-footer>\r\n</sd-modal>",
-                styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}"]
-            },] }
-];
-SdGridPopupExportExcel.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SdLoadingService },
-    { type: SdExcelService },
-    { type: SdNotifyService },
-    { type: SdTranslateService }
-];
-SdGridPopupExportExcel.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    key: [{ type: Input }],
-    columns: [{ type: Input }],
-    extendColumns: [{ type: Input }],
-    fileName: [{ type: Input }],
-    validator: [{ type: Input }],
-    exportOption: [{ type: Input }],
-    exportByTemplate: [{ type: Output }]
-};
-
-var _loadConfiguration;
-class SdGridPopupFilter {
-    constructor(ref, deviceService, settingService, notifyService, translateService) {
-        this.ref = ref;
-        this.settingService = settingService;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.keyPrefix = 'PopupFilter';
-        this.displayKey = 'SDCUSTOM';
-        this.isMobileOrTablet = false;
-        this.key = '';
-        this.accept = new EventEmitter();
-        this.clear = new EventEmitter();
-        this.loadInlineFilter = new EventEmitter();
-        this.newQuickFilter = 'e1ef1d43-d689-424f-959e-e6cd154cfee7';
-        this.filter = {};
-        this.externalFilter = {};
-        this.columns = [];
-        this.externalFilters = [];
-        this.quickFilters = [];
-        this.maxQuickFilters = 5;
-        this.inlineExternal = {};
-        this.inlineColumn = {};
-        this.open = (fixedColums, normalColumns, filter, externalFilter, externalFilters) => {
-            this.init(fixedColums, normalColumns, filter, externalFilter, externalFilters);
-            this.modal.open();
-        };
-        this.init = (fixedColums, normalColumns, filter, externalFilter, externalFilters) => {
-            this.columns = [...fixedColums, ...normalColumns].filter(e => { var _a; return !((_a = e.filter) === null || _a === void 0 ? void 0 : _a.disabled) && e.type !== 'image'; });
-            this.columns.forEach(column => {
-                if (column.type === 'children') {
-                    column.children = column.children.filter(e => { var _a; return !((_a = e.filter) === null || _a === void 0 ? void 0 : _a.disabled) && e.type !== 'image'; });
-                }
-            });
-            if (externalFilters) {
-                this.externalFilters = externalFilters.filter(e => !e.disabled);
-            }
-            else {
-                this.externalFilters = [];
-            }
-            this.filter = filter;
-            this.externalFilter = this.initExternalFilter(externalFilters, externalFilter);
-            for (const eFilter of this.externalFilters) {
-                if (this.inlineExternal[eFilter.field] === undefined) {
-                    this.inlineExternal[eFilter.field] = true;
-                }
-            }
-            for (const column of this.columns) {
-                if (this.inlineColumn[column.field] === undefined) {
-                    this.inlineColumn[column.field] = true;
-                }
-            }
-        };
-        this.close = () => {
-            this.modal.close();
-        };
-        _loadConfiguration.set(this, () => __awaiter(this, void 0, void 0, function* () {
-            this.quickFilters = [];
-            if (!this.key) {
-                return;
-            }
-            const { get, has } = this.settingService.create({
-                prefix: this.keyPrefix,
-                key: this.key
-            });
-            if (!(yield has())) {
-                return;
-            }
-            const configuration = yield get();
-            if (Array.isArray(configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters)) {
-                this.quickFilters = configuration.quickFilters;
-            }
-            this.selectedCode = (configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) || '';
-            this.inlineExternal = (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {};
-            this.inlineColumn = (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {};
-            for (const externalFilter of this.externalFilters) {
-                if (this.inlineExternal[externalFilter.field] === undefined) {
-                    this.inlineExternal[externalFilter.field] = true;
-                }
-            }
-            for (const column of this.columns) {
-                if (this.inlineColumn[column.field] === undefined) {
-                    this.inlineColumn[column.field] = true;
-                }
-            }
-        }));
-        this.onSelectionChange = (change) => {
-            const value = (change === null || change === void 0 ? void 0 : change.value) || '';
-            if (value === this.newQuickFilter) {
-                this.selectedCode = '';
-                this.onCreateQuickFilter();
-                this.ref.detectChanges();
-            }
-            else {
-                const quickFilter = this.quickFilters.find(e => e.code === value);
-                if (quickFilter) {
-                    this.onDetailQuickFilter(quickFilter);
-                }
-            }
-        };
-        this.onCreateQuickFilter = (ev) => {
-            var _a;
-            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-            ev === null || ev === void 0 ? void 0 : ev.preventDefault();
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            this.popupQuickFilterDetail.open(this.columns, this.externalFilters);
-        };
-        this.onDetailQuickFilter = (quickFilter) => __awaiter(this, void 0, void 0, function* () {
-            if (quickFilter) {
-                this.selectedCode = quickFilter.code;
-                const f1 = JSON.stringify(quickFilter.filter);
-                const f2 = JSON.stringify(quickFilter.externalFilter);
-                this.filter = JSON.parse(f1);
-                this.externalFilter = this.initExternalFilter(this.externalFilters, JSON.parse(f2));
-                yield this.updateConfiguration();
-            }
-        });
-        this.onEditQuickFilter = (ev, quickFilter) => {
-            var _a;
-            ev.stopPropagation();
-            ev.preventDefault();
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            if (quickFilter) {
-                this.popupQuickFilterDetail.open(this.columns, this.externalFilters, quickFilter.filter, quickFilter.externalFilter, quickFilter.code);
-                this.ref.detectChanges();
-            }
-        };
-        this.onDeleteQuickFilter = (ev, quickFilter) => {
-            var _a;
-            ev.stopPropagation();
-            ev.preventDefault();
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
-            if (quickFilter) {
-                this.notifyService.confirm(this.translateService.translate('Remove filter')).then(() => __awaiter(this, void 0, void 0, function* () {
-                    if (quickFilter.code === this.selectedCode) {
-                        this.selectedCode = '';
-                    }
-                    const idx = this.quickFilters.findIndex(e => e.code === quickFilter.code);
-                    this.quickFilters.splice(idx, 1);
-                    yield this.updateConfiguration();
-                    this.ref.detectChanges();
-                }));
-            }
-        };
-        this.onAcceptQuickFilter = (args) => __awaiter(this, void 0, void 0, function* () {
-            const quickFilter = this.quickFilters.find(e => e.code === args.code);
-            if (!quickFilter) {
-                this.quickFilters.push({
-                    code: args.code,
-                    filter: args.filter,
-                    externalFilter: this.initExternalFilter(this.externalFilters, args.externalFilter)
-                });
-            }
-            else {
-                quickFilter.filter = args.filter;
-                quickFilter.externalFilter = this.initExternalFilter(this.externalFilters, args.externalFilter);
-            }
-            yield this.updateConfiguration();
-        });
-        this.onInlineChange = () => {
-            this.updateConfiguration();
-        };
-        this.initExternalFilter = (externalFilters, externalFilter) => {
-            externalFilter = externalFilter || {};
-            externalFilters = externalFilters || [];
-            externalFilters.forEach(e => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
-                if (e.type === 'string') {
-                    externalFilter[e.field] = (_b = (_a = externalFilter[e.field]) !== null && _a !== void 0 ? _a : e.default) !== null && _b !== void 0 ? _b : '';
-                    return;
-                }
-                if (e.type === 'number') {
-                    externalFilter[e.field] = (_d = (_c = externalFilter[e.field]) !== null && _c !== void 0 ? _c : e.default) !== null && _d !== void 0 ? _d : undefined;
-                    return;
-                }
-                if (e.type === 'daterange') {
-                    externalFilter[e.field] = {
-                        from: (_g = (_f = (_e = externalFilter[e.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : e.defaultFrom) !== null && _g !== void 0 ? _g : undefined,
-                        to: (_k = (_j = (_h = externalFilter[e.field]) === null || _h === void 0 ? void 0 : _h.to) !== null && _j !== void 0 ? _j : e.defaultTo) !== null && _k !== void 0 ? _k : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'numberrange') {
-                    externalFilter[e.field] = {
-                        from: (_o = (_m = (_l = externalFilter[e.field]) === null || _l === void 0 ? void 0 : _l.from) !== null && _m !== void 0 ? _m : e.defaultFrom) !== null && _o !== void 0 ? _o : undefined,
-                        to: (_r = (_q = (_p = externalFilter[e.field]) === null || _p === void 0 ? void 0 : _p.to) !== null && _q !== void 0 ? _q : e.defaultTo) !== null && _r !== void 0 ? _r : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'daterangefull') {
-                    externalFilter[e.field] = {
-                        from: (_u = (_t = (_s = externalFilter[e.field]) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : e.defaultFrom) !== null && _u !== void 0 ? _u : undefined,
-                        to: (_x = (_w = (_v = externalFilter[e.field]) === null || _v === void 0 ? void 0 : _v.to) !== null && _w !== void 0 ? _w : e.defaultTo) !== null && _x !== void 0 ? _x : undefined
-                    };
-                    return;
-                }
-                if (e.type === 'values') { // andn1
-                    externalFilter[e.field] = (_y = (externalFilter[e.field] || e.default)) !== null && _y !== void 0 ? _y : '';
-                    return;
-                }
-            });
-            return externalFilter;
-        };
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    ngOnInit() {
-        __classPrivateFieldGet(this, _loadConfiguration).call(this).then(() => {
-            this.loadInlineFilter.emit({
-                quickFilters: this.quickFilters || [],
-                selectedQuickFilter: this.selectedCode || '',
-                inlineExternal: this.inlineExternal,
-                inlineColumn: this.inlineColumn
-            });
-        });
-    }
-    ngAfterViewInit() {
-    }
-    onAccept() {
-        var _a;
-        if (((_a = this.filterOption) === null || _a === void 0 ? void 0 : _a.multiple) === false) {
-            if (this.selectedField) {
-                if (this.selectedField.startsWith('column')) {
-                    const field = this.selectedField.replace('column', '');
-                    this.accept.emit({
-                        filter: {
-                            [field]: this.filter[field]
-                        },
-                        externalFilter: {}
-                    });
-                }
-                else if (this.selectedField.startsWith('external')) {
-                    const field = this.selectedField.replace('external', '');
-                    this.accept.emit({
-                        filter: {},
-                        externalFilter: this.initExternalFilter(this.externalFilters, {
-                            [field]: this.externalFilter[field]
-                        })
-                    });
-                }
-            }
-        }
-        else {
-            this.accept.emit({
-                filter: this.filter,
-                externalFilter: this.externalFilter
-            });
-        }
-        this.modal.close();
-    }
-    onClear() {
-        delete this.selectedCode;
-        this.clear.emit();
-    }
-    updateConfiguration(selectedQuickFilterCode) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.key) {
-                return;
-            }
-            if (selectedQuickFilterCode !== undefined) {
-                this.selectedCode = selectedQuickFilterCode;
-            }
-            const { set } = this.settingService.create({
-                prefix: this.keyPrefix,
-                key: this.key
-            });
-            yield set({
-                quickFilters: this.quickFilters,
-                selectedQuickFilter: this.selectedCode,
-                inlineExternal: this.inlineExternal,
-                inlineColumn: this.inlineColumn
-            });
-            this.loadInlineFilter.emit({
-                quickFilters: this.quickFilters || [],
-                selectedQuickFilter: this.selectedCode || '',
-                inlineExternal: this.inlineExternal,
-                inlineColumn: this.inlineColumn
-            });
-            this.ref.detectChanges();
-        });
-    }
-}
-_loadConfiguration = new WeakMap();
-SdGridPopupFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-popup-filter',
-                template: "<sd-modal width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div\r\n      *ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility || filterOption?.quickFilterVisibility === 'popup')\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option [value]=\"newQuickFilter\">\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"filterOption?.multiple === false\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>{{'Select field' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedField\">\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n            {{item.title}}\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let item of columns\">\r\n            <mat-option *ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n              {{item.title}}\r\n            </mat-option>\r\n            <ng-container *ngIf=\"item.type === 'children' && item.children?.length\">\r\n              <ng-container *ngFor=\"let childColumn of item.children\">\r\n                <mat-option [value]=\"'column' + childColumn.field\">\r\n                  {{childColumn.title}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters\">\r\n      <div *ngIf=\"filterOption?.multiple !== false || selectedField === 'external' + item.field\"\r\n        class=\"d-flex align-items-baseline\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n                {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n          </sd-input>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\">\r\n          </sd-date-range>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"d-flex align-items-baseline\"\r\n        *ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false || selectedField === 'column' + column.field)\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n            [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <ng-container *ngFor=\"let childColumn of column.children\">\r\n          <div class=\"d-flex align-items-baseline\"\r\n            *ngIf=\"filterOption?.multiple !== false || selectedField === 'column' + childColumn.field\">\r\n            <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n              <div *sdDesktop class=\"c-checkable\">\r\n                <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-switch>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n                {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-autocomplete [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-autocomplete>\r\n              <sd-date-time [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n                childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n              </sd-date-time>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
-                encapsulation: ViewEncapsulation.None,
-                styles: [".c-fa-icon{color:grey;font-size:20px}.c-checkable{width:50px}.c-filterable{flex:1}"]
-            },] }
-];
-SdGridPopupFilter.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DeviceDetectorService },
-    { type: SdSettingService },
-    { type: SdNotifyService },
-    { type: SdTranslateService }
-];
-SdGridPopupFilter.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    popupQuickFilterDetail: [{ type: ViewChild, args: ['popupQuickFilterDetail',] }],
-    matSelect: [{ type: ViewChild, args: ['matSelect',] }],
-    key: [{ type: Input }],
-    filterOption: [{ type: Input }],
-    accept: [{ type: Output }],
-    clear: [{ type: Output }],
-    loadInlineFilter: [{ type: Output }],
-    inlineExternal: [{ type: Input }],
-    inlineColumn: [{ type: Input }]
-};
-
-class SdGridPopupQuickFilterDetail {
-    constructor(deviceService, notifyService, translateService) {
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.displayKey = 'SDCUSTOM';
-        this.isMobileOrTablet = false;
-        this.accept = new EventEmitter();
-        this.fields = [];
-        this.selectableFields = [];
-        this.columns = [];
-        this.externalFilters = [];
-        this.filter = {};
-        this.externalFilter = {};
-        this.selectedField = {};
-        this.page = 1;
-        this.onAccept = () => {
-            const execute = () => {
-                const filter = {};
-                const externalFilter = {};
-                Object.keys(this.filter).forEach(key => {
-                    if (this.filter[key] === undefined || this.filter[key] === null || this.filter[key] === '') {
-                        return;
-                    }
-                    if (!this.fields.some(e => e.group === 'column' && e.code === key)) {
-                        return;
-                    }
-                    filter[key] = this.filter[key];
-                });
-                Object.keys(this.externalFilter).forEach(key => {
-                    if (this.externalFilter[key] === undefined || this.externalFilter[key] === null || this.externalFilter[key] === '') {
-                        return;
-                    }
-                    externalFilter[key] = this.externalFilter[key];
-                });
-                this.accept.emit({
-                    code: this.code,
-                    filter,
-                    externalFilter
-                });
-                this.modal.close();
-            };
-            if (!this.code) {
-                this.notifyService.confirmWithInput('Enter your quick filter name').then((value) => {
-                    var _a;
-                    if (value) {
-                        if ((_a = this.quickFilters) === null || _a === void 0 ? void 0 : _a.some(e => e.code === value)) {
-                            this.notifyService.notify.warning(this.translateService.translate('Code is existed'));
-                            return;
-                        }
-                        this.code = value;
-                        execute();
-                    }
-                });
-            }
-            else {
-                execute();
-            }
-        };
-        this.onCancel = () => {
-            this.modal.close();
-        };
-        this.onSelectField = (values) => {
-            this.fields = this.selectableFields.filter(e => values.some(v => e.code === v));
-            for (const field of this.fields) {
-                if (field.group === 'external' && field.type.includes('range')) {
-                    this.externalFilter[field.code] = this.externalFilter[field.code] || {};
-                }
-            }
-        };
-        this.onSelectFields = () => {
-            this.fields = this.selectableFields.filter(e => this.selectedField[e.id]);
-            for (const field of this.fields) {
-                if (field.group === 'external' && field.type.includes('range')) {
-                    this.externalFilter[field.code] = this.externalFilter[field.code] || {};
-                }
-            }
-        };
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
-    open(columns, externalFilters, filter, externalFilter, code) {
-        this.fields = [];
-        this.filter = {};
-        this.externalFilter = {};
-        this.columns = columns;
-        this.externalFilters = externalFilters;
-        this.code = code;
-        if (filter) {
-            Object.keys(filter).forEach(key => {
-                if (filter[key] === undefined || filter[key] === null || filter[key] === '') {
-                    return;
-                }
-                const column = columns.find(e => e.field === key);
-                if (!column) {
-                    return;
-                }
-                this.filter[key] = filter[key];
-                this.fields.push(Object.assign(Object.assign({}, column), { id: 'column' + column.field, group: 'column', type: column.type, code: column.field, title: column.title }));
-            });
-        }
-        if (externalFilter) {
-            Object.keys(externalFilter).forEach(key => {
-                var _a, _b, _c, _d;
-                if (externalFilter[key] === undefined || externalFilter[key] === null || externalFilter[key] === '') {
-                    return;
-                }
-                if (key.startsWith(this.displayKey)) {
-                    this.externalFilter[key] = externalFilter[key];
-                    return;
-                }
-                const item = externalFilters.find(e => e.field === key);
-                if (!item) {
-                    return;
-                }
-                if (item.type === 'daterange' || item.type === 'numberrange') {
-                    this.externalFilter[key] = Object.assign({}, externalFilter[key]);
-                    if (!((_a = externalFilter[key]) === null || _a === void 0 ? void 0 : _a.from) && !((_b = externalFilter[key]) === null || _b === void 0 ? void 0 : _b.to)) {
-                        return;
-                    }
-                    this.fields.push(Object.assign(Object.assign({}, item), { id: 'external' + item.field, group: 'external', type: item.type, code: item.field, title: item.title, fromTitle: item.fromTitle, toTitle: item.toTitle }));
-                }
-                else if (item.type === 'daterangefull') {
-                    this.externalFilter[key] = Object.assign({}, externalFilter[key]);
-                    if (!((_c = externalFilter[key]) === null || _c === void 0 ? void 0 : _c.from) && !((_d = externalFilter[key]) === null || _d === void 0 ? void 0 : _d.to)) {
-                        return;
-                    }
-                    this.fields.push(Object.assign(Object.assign({}, item), { id: 'external' + item.field, group: 'external', type: item.type, code: item.field, title: item.title }));
-                }
-                else {
-                    this.externalFilter[key] = externalFilter[key];
-                    this.fields.push(Object.assign(Object.assign({}, item), { id: 'external' + item.field, group: 'external', type: item.type, code: item.field, title: item.title }));
-                }
-            });
-        }
-        const externalFields = (externalFilters === null || externalFilters === void 0 ? void 0 : externalFilters.map(e => (Object.assign(Object.assign({}, e), { id: 'external' + e.field, group: 'external', code: e.field, type: e.type, title: e.title })))) || [];
-        const columnFields = [];
-        columns === null || columns === void 0 ? void 0 : columns.filter(e => e.type !== 'image').forEach(column => {
-            var _a;
-            if ('children' in column) {
-                (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => e.type !== 'image').forEach(e => {
-                    columnFields.push(Object.assign(Object.assign({}, e), { id: 'column' + e.field, group: 'column', code: e.field, type: e.type, title: e.title }));
-                });
-            }
-            else {
-                columnFields.push(Object.assign(Object.assign({}, column), { id: 'column' + column.field, group: 'column', code: column.field, type: column.type, title: column.title }));
-            }
-        });
-        this.selectableFields = [...externalFields, ...columnFields];
-        this.selectedField = {};
-        this.fields.forEach(e => this.selectedField[e.id] = true);
-        this.page = this.fields.length > 0 ? 2 : 1;
-        this.modal.open();
-    }
-}
-SdGridPopupQuickFilterDetail.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-popup-quick-filter-detail',
-                template: "<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container *ngIf=\"page === 1\">\r\n        <div *ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n          <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n          </sd-switch>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"page === 2\">\r\n        <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n          <ng-container *ngIf=\"item.group === 'external'\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n              {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <ng-container *ngIf=\"item.type === 'values'\">\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                multiple=\"true\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-autocomplete>\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                filtered=\"true\" multiple=\"true\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-select>\r\n            </ng-container>\r\n            <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n              [(model)]=\"externalFilter[displayKey + item.code]\"\r\n              (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n            </sd-input>\r\n            <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n              type=\"date\">\r\n            </sd-date-time>\r\n            <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n              [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n              [max]=\"item.maxDate\">\r\n            </sd-date-range>\r\n            <ng-container *ngIf=\"item.type ==='daterange'\">\r\n              <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                    [maxDate]=\"externalFilter[item.code].to || item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                    [minDate]=\"item.minDate || externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n                </sd-input>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n                </sd-input>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.group === 'column'\">\r\n            <sd-input *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-input *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-select *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n            {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-date-time *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n            item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n            </sd-date-time>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </sd-modal-body>\r\n  <ng-container *ngIf=\"page === 1\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' | sdTranslate\" color=\"primary\"\r\n        iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n        [title]=\"'Cancel' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n        [title]=\"'Next' | sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"page === 2\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n        [title]=\"'Back' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n        color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n</sd-modal>",
-                styles: [""]
-            },] }
-];
-SdGridPopupQuickFilterDetail.ctorParameters = () => [
-    { type: DeviceDetectorService },
-    { type: SdNotifyService },
-    { type: SdTranslateService }
-];
-SdGridPopupQuickFilterDetail.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    quickFilters: [{ type: Input }],
-    accept: [{ type: Output }]
-};
-
-class SdGridSubInformation {
-    constructor(ref, deviceService) {
-        this.ref = ref;
-        this.height = 'auto';
-        this.subItems = [];
-        this.filter = {};
-        this.onEditorChange = () => {
-            this.ref.detectChanges();
-        };
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
-    updateFilter() {
-    }
-    trackById(index, item) {
-        return item.id;
-    }
-}
-SdGridSubInformation.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-sub-information',
-                template: "<div class=\"clearfix\"></div>\r\n<ng-container *ngIf=\"option?.columns\">\r\n  <div *ngIf=\"!isMobileOrTablet\" class=\"sd-box box-shadow-none\">\r\n    <div class=\"sd-box-body p-0\">\r\n      <div class=\"row mx-0\">\r\n        <div class=\"table-responsive\" style=\"position: relative;\" [ngStyle]=\"{'height': height}\">\r\n          <table class=\"table table-hover table-striped table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\">\r\n                </th>\r\n                <th class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"></th>\r\n                <th *ngIf=\"option?.commands?.length\"\r\n                  class=\"position-sticky align-middle text-center p-0 c-sticky-top c-w-1\">\r\n                </th>\r\n                <th *ngFor=\"let column of option.columns\" class=\"position-sticky c-sticky-top\"\r\n                  [ngStyle]=\"{'width':column.width ? column.width : '','min-width':column.width ? column.width : '300px'}\">\r\n                  <span [title]=\"column.title\" class=\"c-header-title cursor-pointer\"\r\n                    [ngStyle]=\"{'width':column.width ? column.width : ''}\">\r\n                    {{column.title | sdTranslate}}\r\n                  </span>\r\n                </th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <ng-container *ngFor=\"let item of subItems; trackBy: trackById\">\r\n                <tr>\r\n                  <td class=\"position-sticky c-sticky-left p-0\">\r\n                  </td>\r\n                  <td class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\"></td>\r\n                  <td *ngIf=\"option.commands?.length\" class=\"align-middle px-2 py-0 c-w-1\">\r\n                    <div class=\"d-flex align-middle text-center justify-content-center\">\r\n                      <ng-container\r\n                        *ngIf=\"option.commands | commandFilter:item | async; $implicit as filteredCommands\">\r\n                        <section *ngFor=\"let command of filteredCommands\">\r\n                          <ng-container *ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n                            <button *ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n                              class=\"c-btn-icon\" [matTooltip]=\"command.title | commandTitle:item\"\r\n                              [disabled]=\"command.disabled | commandDisabled:item\">\r\n                              <i class=\"{{command.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n                            </button>\r\n                            <button *ngIf=\"command.fontSet\" [matTooltip]=\"command.title | commandTitle:item\"\r\n                              [disabled]=\"command.disabled | commandDisabled:item\" (click)=\"command.click(item)\"\r\n                              aria-hidden=\"true\" mat-icon-button>\r\n                              <mat-icon [fontSet]=\"command.fontSet\">{{command.icon | commandIcon:item}}</mat-icon>\r\n                            </button>\r\n                          </ng-container>\r\n                          <ng-template #elseCommandChildren>\r\n                            <button *ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n                              [matTooltip]=\"command.title\" [disabled]=\"command.disabled | commandDisabled:item\">\r\n                              <i class=\"{{command.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n                            </button>\r\n                            <button *ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n                              class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n                              [disabled]=\"command.disabled | commandDisabled:item\">\r\n                              <mat-icon>more_vert</mat-icon>\r\n                            </button>\r\n                            <mat-menu #menu=\"matMenu\">\r\n                              <ng-container *ngFor=\"let childCommand of command.children\">\r\n                                <button *ngIf=\"!(item | commandHidden:childCommand | async)\" mat-menu-item\r\n                                  [disabled]=\"childCommand.disabled | commandDisabled:item\"\r\n                                  (click)=\"childCommand.click(item)\">\r\n                                  <i *ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon | commandIcon:item}}\"></i>\r\n                                  <mat-icon *ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n                                    {{childCommand.icon | commandIcon:item}}</mat-icon>\r\n                                  <span> {{childCommand.title | commandTitle:item}}</span>\r\n                                </button>\r\n                              </ng-container>\r\n                            </mat-menu>\r\n                          </ng-template>\r\n                        </section>\r\n                      </ng-container>\r\n                    </div>\r\n                  </td>\r\n                  <td *ngFor=\"let column of option.columns\" class=\"align-middle\"\r\n                    [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number', 'text-right': column.type === 'number'}\"\r\n                    [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width':column.width ? column.width : '300px'}\">\r\n                    <ng-container *ngIf=\"!column.children?.length\">\r\n                      <ng-container *ngIf=\"item[column.field] | editorSubInformationHandler:item:option.columns\">\r\n                        <ng-container *ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n                          <sd-grid-desktop-column-edit [column]=\"column\" [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n                          </sd-grid-desktop-column-edit>\r\n                        </ng-container>\r\n                        <ng-template #columnView>\r\n                          <sd-grid-desktop-column-view [column]=\"column\" [item]=\"item\"></sd-grid-desktop-column-view>\r\n                        </ng-template>\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <div *ngIf=\"column.children?.length\" class=\"row mx-0\">\r\n                      <div *ngFor=\"let childColumn of column.children | filterMobile:item\"\r\n                        [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n                        <span class=\"c-mobile-title\">\u2022 {{childColumn.title}}:</span>\r\n                        <span *ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\"\r\n                          [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n                          'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n                          'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n                          'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n                          'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n                          'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n                          'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n                          'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n                          'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n                          'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n                        <span *ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n                          [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n                          'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n                          'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n                          'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n                          'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n                          'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n                          'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n                          'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n                          'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n                          'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] | valueTransform:item:childColumn}}</span>\r\n                        <span *ngIf=\"childColumn.type === 'datetime'\"\r\n                          class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n                        <span *ngIf=\"childColumn.type === 'date'\"\r\n                          class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</span>\r\n                        <span *ngIf=\"childColumn.type === 'time'\"\r\n                          class=\"c-mobile-value\">{{item[childColumn.field] | date:'HH:mm'}}</span>\r\n                        <span *ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n                          <span *ngIf=\"item[childColumn.field]\"\r\n                            class=\"status status-success\">{{childColumn.trueValue || 'True'}}</span>\r\n                          <span *ngIf=\"!item[childColumn.field]\"\r\n                            class=\"status status-danger\">{{childColumn.falseValue || 'False'}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\"\r\n                            type=\"color\" class=\"form-control form-control-sm\"\r\n                            [(ngModel)]=\"item[childColumn.field]\"></span>\r\n                        <span *ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n                          [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n                          {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n                        </span>\r\n                        <span *ngIf=\"childColumn.type === 'radio'\"\r\n                          class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n                        <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n                          [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\"\r\n                          style=\"margin: 5px 0\">\r\n                      </div>\r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              </ng-container>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"isMobileOrTablet\" class=\"sd-box c-mobile-box\">\r\n    <div class=\"sd-box-body c-mobile-body\" [ngStyle]=\"{'height': height}\">\r\n      <ng-container *ngFor=\"let item of subItems\">\r\n        <div class=\"c-mobile-item\">\r\n          <ng-container *ngFor=\"let column of  option.columns | filterMobile:item\">\r\n            <div *ngIf=\"item[column.field]\" class=\"c-mobile-row\">\r\n              <span class=\"c-mobile-title\">\u2022 {{column.title}}:</span>\r\n              <span *ngIf=\"column.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n              'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n              'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n              'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n              'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n              'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n              'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n              'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n              'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n              'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field]}}</span>\r\n              <span *ngIf=\"column.type === 'number'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n              'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n              'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n              'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n              'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n              'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n              'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n              'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n              'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n              'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field] | number : '1.0-2'}}</span>\r\n              <span *ngIf=\"column.type === 'datetime'\"\r\n                class=\"c-mobile-value\">{{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n              <span *ngIf=\"column.type === 'date'\"\r\n                class=\"c-mobile-value\">{{item[column.field] | date:'dd/MM/yyyy'}}</span>\r\n              <span *ngIf=\"column.type === 'time'\" class=\"c-mobile-value\">{{item[column.field] | date:'HH:mm'}}</span>\r\n              <span *ngIf=\"column.type === 'bool'\" class=\"c-mobile-value\">\r\n                <span *ngIf=\"item[column.field]\" class=\"status status-success\">{{column.trueValue || 'True'}}</span>\r\n                <span *ngIf=\"!item[column.field]\" class=\"status status-danger\">{{column.falseValue || 'False'}}</span>\r\n              </span>\r\n              <span *ngIf=\"column.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n                  class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n              <span *ngIf=\"column.type === 'values'\" class=\"status c-mobile-value\"\r\n                [ngStyle]=\"{'color':column?.dictionary[item[column.field]]?.color}\">\r\n                {{!!column?.dictionary[item[column.field]] ? column?.dictionary[item[column.field]]?.text : item[column.field]}}\r\n              </span>\r\n              <span *ngIf=\"column.type === 'radio'\" class=\"c-mobile-value\">{{item[column.field]}}</span>\r\n              <img *ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n                [height]=\"column.display?.height\" style=\"margin: 5px 0\">\r\n            </div>\r\n            <ng-container *ngIf=\"column.children?.length\">\r\n              <div class=\"c-mobile-row\" *ngFor=\"let childColumn of column.children | filterMobile:item\">\r\n                <span class=\"c-mobile-title\">\u2022 {{childColumn.title}}:</span>\r\n                <span *ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n              'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n              'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n              'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n              'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n              'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n              'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n              'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n              'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n              'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n                <span *ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n                  [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n              'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n              'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n              'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n              'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n              'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n              'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n              'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n              'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n              'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] | number : '1.0-2'}}</span>\r\n                <span *ngIf=\"childColumn.type === 'datetime'\"\r\n                  class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n                <span *ngIf=\"childColumn.type === 'date'\"\r\n                  class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</span>\r\n                <span *ngIf=\"childColumn.type === 'time'\"\r\n                  class=\"c-mobile-value\">{{item[childColumn.field] | date:'HH:mm'}}</span>\r\n                <span *ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n                  <span *ngIf=\"item[childColumn.field]\"\r\n                    class=\"status status-success\">{{childColumn.trueValue || 'True'}}</span>\r\n                  <span *ngIf=\"!item[childColumn.field]\"\r\n                    class=\"status status-danger\">{{childColumn.falseValue || 'False'}}</span>\r\n                </span>\r\n                <span *ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n                    class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n                <span *ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n                  [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n                  {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n                </span>\r\n                <span *ngIf=\"childColumn.type === 'radio'\" class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n                <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n                  [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\">\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-container>",
-                styles: [".grid-header{overflow-x:hidden;overflow-y:hidden}.c-table.table{margin-bottom:5px}td,th{font-size:13px;min-width:0;padding:3px 5px}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}thead th{border-top:none;height:auto;min-height:20px;padding:5px}tbody td{height:25px;min-height:25px}.status{border-radius:1.5rem;color:#16759b;display:inline-block;font-weight:500;padding:2px 5px;text-align:center;text-transform:uppercase}.status-success{color:#43a047}.status-danger{color:#f44336}.cursor-pointer{cursor:pointer}label.custom-control.custom-checkbox{margin:0}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-th-xs{height:49px;min-height:49px}.c-td-xs,.c-th-xs{font-size:.8rem;line-height:1.15;min-width:0;padding:.1rem!important}.c-td-xs{height:1.5rem;min-height:1.5rem}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{z-index:20}.c-sticky-all,.c-sticky-left{border-left:none!important;border-right:none!important;left:0!important}.c-sticky-all{top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6;border:none;min-width:1px;width:1px;z-index:40}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-responsive>.table-bordered{border:1px solid #dee2e6!important}.c-badge{border-radius:10rem;display:block!important;font-size:.8rem;font-weight:500;padding:.3rem!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{width:1px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]
-            },] }
-];
-SdGridSubInformation.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DeviceDetectorService }
-];
-SdGridSubInformation.propDecorators = {
-    height: [{ type: Input }],
-    option: [{ type: Input }],
-    subItems: [{ type: Input }]
-};
-
-class GridDesktopColumnChildrenViewComponent {
-    constructor() { }
-}
-GridDesktopColumnChildrenViewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-desktop-column-children-view',
-                template: "<ng-container *ngIf=\"column.children?.length\">\r\n  <div class=\"row mx-n2 c-cell-padding\">\r\n    <div *ngFor=\"let childColumn of column.children | filterMobile:item\" class=\"px-2\"\r\n      [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n      <span class=\"c-title\">\r\n        {{item | columnTitle:childColumn.title:childColumn.dynamicTitle | async}}:\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'string'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n        <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n          (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | valueTransform:item:childColumn}}</a>\r\n        <ng-container *ngIf=\"!childColumn.click\">\r\n          {{item[childColumn.field] | valueTransform:item:childColumn}}</ng-container>\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'number'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n        <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n          (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]  | valueTransform:item:childColumn}}</a>\r\n        <ng-container *ngIf=\"!childColumn.click\">\r\n          {{item[childColumn.field]  | valueTransform:item:childColumn}}\r\n        </ng-container>\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'datetime'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n        <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n          (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.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] | sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.timeDifferent | async}}</span>\r\n        </ng-container>\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'date'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n        <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n          (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | sdTimeDifferent:'dd/MM/yyyy':childColumn.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] | sdTimeDifferent:'dd/MM/yyyy':childColumn.timeDifferent | async}}</span>\r\n        </ng-container>\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'time'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\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        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n        (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n        <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.trueValue || 'True'}}</strong>\r\n        <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.falseValue || 'False'}}</strong>\r\n      </span>\r\n      <span *ngIf=\"childColumn.type === 'color'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n        (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n          type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n      <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n        <ng-container *ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n          <span *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status c-children\"\r\n            [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n            {{dic.text}}\r\n          </span>\r\n          <ng-template #elseNoStatus>\r\n            <span [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n              {{dic.text}}\r\n            </span>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #elseNotInDic>\r\n          <span [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n            [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n            (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n            {{item[childColumn.field]}}\r\n          </span>\r\n        </ng-template>\r\n      </ng-container>\r\n      <span *ngIf=\"childColumn.type === 'radio'\"\r\n        [className]=\"item[childColumn.field] | cellDesktopClassName:item:childColumn:true\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n        (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</span>\r\n      <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\" [width]=\"childColumn.display?.width\"\r\n        [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\">\r\n    </div>\r\n  </div>\r\n</ng-container>",
-                styles: [".text-black400{color:#757575}.c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-badge{border-radius:10rem;color:#212529;display:block!important;font-size:14px;font-weight:500;margin:0 auto;max-width:80%;padding:5px!important}.c-badge a{color:#fff}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:left!important;text-transform:uppercase}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]
-            },] }
-];
-GridDesktopColumnChildrenViewComponent.ctorParameters = () => [];
-GridDesktopColumnChildrenViewComponent.propDecorators = {
-    column: [{ type: Input }],
-    item: [{ type: Input }]
-};
-
-class CellDesktopClassNamePipe {
-    transform(value, rowData, column, isChildren) {
-        const classNames = [];
-        if (column.click) {
-            classNames.push('cursor-pointer');
-        }
-        if (isChildren) {
-            classNames.push('c-children');
-        }
-        if (column.badge) {
-            const badge = column.badge(rowData, value);
-            if (badge) {
-                classNames.push('c-badge');
-                classNames.push('badge');
-                if (badge === 'PRIMARY') {
-                    classNames.push('badge-primary');
-                }
-                else if (badge === 'SECONDARY') {
-                    classNames.push('badge-secondary');
-                }
-                else if (badge === 'WARNING') {
-                    classNames.push('badge-warning');
-                }
-                else if (badge === 'SUCCESS') {
-                    classNames.push('badge-success');
-                }
-                else if (badge === 'DANGER') {
-                    classNames.push('badge-danger');
-                }
-                else if (badge === 'LIGHT') {
-                    classNames.push('badge-light');
-                }
-                else if (badge === 'DARK') {
-                    classNames.push('badge-dark');
-                }
-            }
-        }
-        return classNames.join(' ');
-    }
-}
-CellDesktopClassNamePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'cellDesktopClassName'
-            },] }
-];
-
-class CellMobileClassNamePipe {
-    transform(value, rowData, column) {
-        const classNames = [];
-        if (column.click) {
-            classNames.push('cursor-pointer');
-        }
-        if (column.badge) {
-            const badge = column.badge(rowData, value);
-            if (badge) {
-                classNames.push('badge');
-                classNames.push('c-badge');
-                if (badge === 'PRIMARY') {
-                    classNames.push('badge-primary');
-                }
-                else if (badge === 'SECONDARY') {
-                    classNames.push('badge-secondary');
-                }
-                else if (badge === 'WARNING') {
-                    classNames.push('badge-warning');
-                }
-                else if (badge === 'SUCCESS') {
-                    classNames.push('badge-success');
-                }
-                else if (badge === 'DANGER') {
-                    classNames.push('badge-danger');
-                }
-                else if (badge === 'LIGHT') {
-                    classNames.push('badge-light');
-                }
-                else if (badge === 'DARK') {
-                    classNames.push('badge-dark');
-                }
-            }
-        }
-        return classNames.join(' ');
-    }
-}
-CellMobileClassNamePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'cellMobileClassName'
-            },] }
-];
-
-class ColumnCommandFilterPipe {
-    transform(commands, item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const results = [];
-            if (!commands) {
-                return results;
-            }
-            for (const command of commands) {
-                const { hiddenByItem } = command;
-                if (!hiddenByItem) {
-                    results.push(command);
-                }
-                else {
-                    const hidden = hiddenByItem(item);
-                    if (hidden instanceof Promise) {
-                        if (!(yield hidden)) {
-                            results.push(command);
-                        }
-                    }
-                    else {
-                        if (!hidden) {
-                            results.push(command);
-                        }
-                    }
-                }
-            }
-            return results;
-        });
-    }
-}
-ColumnCommandFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnCommandFilter'
-            },] }
-];
-
-class ColumnHtmlTemplatePipe {
-    constructor(deviceService) {
-        this.isMobileOrTablet = false;
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    transform(value, rowData, htmlTemplate) {
-        if (typeof (htmlTemplate) !== 'function') {
-            return value;
-        }
-        return htmlTemplate(value, rowData, this.isMobileOrTablet);
-    }
-}
-ColumnHtmlTemplatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnHtmlTemplate'
-            },] }
-];
-ColumnHtmlTemplatePipe.ctorParameters = () => [
-    { type: DeviceDetectorService }
-];
-
-class ColumnTitlePipe {
-    transform(item, title, dynamicTitle) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!title) {
-                return '';
-            }
-            if (dynamicTitle) {
-                const result = dynamicTitle(item);
-                if (result instanceof Promise) {
-                    return (yield result) || title;
-                }
-                return result || title;
-            }
-            return title;
-        });
-    }
-}
-ColumnTitlePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnTitle'
-            },] }
-];
-
-class ColumnValuesPipe {
-    constructor(utilityService) {
-        this.utilityService = utilityService;
-    }
-    transform(value, values) {
-        const hashKey = hash(values);
-        if (!ColumnValuesPipe.cache[hashKey]) {
-            ColumnValuesPipe.cache[hashKey] = {
-                values,
-                obj: this.utilityService.arrayToObject(values, 'value')
-            };
-        }
-        if (!ColumnValuesPipe.cache[hashKey].obj[value]) {
-            return {
-                value,
-                text: value
-            };
-        }
-        return ColumnValuesPipe.cache[hashKey].obj[value];
-    }
-}
-ColumnValuesPipe.cache = {};
-ColumnValuesPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnValues'
-            },] }
-];
-ColumnValuesPipe.ctorParameters = () => [
-    { type: SdUtilityService }
-];
-
-class CommandDisabledPipe {
-    transform(disabled, item) {
-        if (!disabled) {
-            return false;
-        }
-        if (typeof (disabled) === 'boolean') {
-            return disabled;
-        }
-        return disabled(item);
-    }
-}
-CommandDisabledPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandDisabled'
-            },] }
-];
-
-class CommandFilterPipe {
-    transform(commands, item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const results = [];
-            if (!commands) {
-                return results;
-            }
-            for (const command of commands) {
-                if ('children' in command) {
-                    let flag = true;
-                    const { hiddenByItem } = command;
-                    if (hiddenByItem) {
-                        const hidden = hiddenByItem(item);
-                        if (hidden instanceof Promise) {
-                            if (yield hidden) {
-                                flag = false;
-                            }
-                        }
-                        else {
-                            if (hidden) {
-                                flag = false;
-                            }
-                        }
-                    }
-                    if (flag) {
-                        const children = [];
-                        for (const childCommand of command.children) {
-                            if (!childCommand.hiddenByItem) {
-                                children.push(childCommand);
-                            }
-                            else {
-                                const hidden = childCommand.hiddenByItem(item);
-                                if (hidden instanceof Promise) {
-                                    if (!(yield hidden)) {
-                                        children.push(childCommand);
-                                    }
-                                }
-                                else {
-                                    if (!hidden) {
-                                        children.push(childCommand);
-                                    }
-                                }
-                            }
-                        }
-                        if (children.length) {
-                            results.push(Object.assign(Object.assign({}, command), { children }));
-                        }
-                    }
-                }
-                else {
-                    const { hiddenByItem } = command;
-                    if (!hiddenByItem) {
-                        results.push(command);
-                    }
-                    else {
-                        const hidden = hiddenByItem(item);
-                        if (hidden instanceof Promise) {
-                            if (!(yield hidden)) {
-                                results.push(command);
-                            }
-                        }
-                        else {
-                            if (!hidden) {
-                                results.push(command);
-                            }
-                        }
-                    }
-                }
-            }
-            return results;
-        });
-    }
-}
-CommandFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandFilter'
-            },] }
-];
-
-class CommandHidden {
-    transform(item, command) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { hidden, hiddenByItem } = command;
-            if (hidden) {
-                return true;
-            }
-            if (hiddenByItem) {
-                const hiddenResult = hiddenByItem(item);
-                if (hiddenResult instanceof Promise) {
-                    if (yield hiddenResult) {
-                        return true;
-                    }
-                }
-                else {
-                    if (hiddenResult) {
-                        return true;
-                    }
-                }
-            }
-            if ('children' in command) {
-                const results = [];
-                for (const childCommand of command.children) {
-                    const { hidden: childHidden, hiddenByItem: childHiddenByItem } = childCommand;
-                    if (!childHidden && !childHiddenByItem) {
-                        results.push(childCommand);
-                    }
-                    else {
-                        if (childHiddenByItem) {
-                            const hiddenResult = childHiddenByItem(item);
-                            if (hiddenResult instanceof Promise) {
-                                if (!(yield hiddenResult)) {
-                                    results.push(childCommand);
-                                }
-                            }
-                            else {
-                                if (!hiddenResult) {
-                                    results.push(childCommand);
-                                }
-                            }
-                        }
-                    }
-                }
-                if (results.length === 0) {
-                    return true;
-                }
-            }
-            return false;
-        });
-    }
-}
-CommandHidden.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandHidden'
-            },] }
-];
-
-class CommandIconPipe {
-    transform(icon, item) {
-        if (!icon) {
-            return '';
-        }
-        if (typeof (icon) === 'string') {
-            return icon;
-        }
-        return icon(item);
-    }
-}
-CommandIconPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandIcon'
-            },] }
-];
-
-class CommandTitlePipe {
-    transform(title, item) {
-        if (!title) {
-            return '';
-        }
-        if (typeof (title) === 'string') {
-            return title;
-        }
-        return title(item);
-    }
-}
-CommandTitlePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandTitle'
-            },] }
-];
-
-class EditorDynamicItemPipe {
-    constructor() {
-        this.previousResults = [];
-        this.delay = 200; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm
-    }
-    transform(value, item, editor) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!editor.dependOnField) {
-                return editor.items || [];
-            }
-            this.previous = new Date();
-            yield new Promise(resolve => setTimeout(resolve, this.delay));
-            const now = new Date();
-            const dif = now.getTime() - this.previous.getTime();
-            if (dif < this.delay) {
-                return this.previousResults;
-            }
-            const items = editor.items || [];
-            if (typeof (items) === 'function') {
-                const results = items(item, value);
-                if (results instanceof Promise) {
-                    this.previousResults = yield results;
-                }
-                else {
-                    this.previousResults = results;
-                }
-            }
-            else {
-                this.previousResults = items;
-            }
-            this.previousResults = this.previousResults || [];
-            return this.previousResults;
-        });
-    }
-}
-EditorDynamicItemPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorDynamicItem'
-            },] }
-];
-
-class EditorSubInformationHandlerPipe {
-    transform(value, item, columns) {
-        const visible = (column) => {
-            if (column.type === 'children') {
-                return false;
-            }
-            let isDisabled = false;
-            // Kiểm tra xem có bị disabled hay không?
-            if (column.editor) {
-                isDisabled = typeof (column.editor.disabled) === 'function' ? column.editor.disabled(item) : column.editor.disabled;
-            }
-            // Nếu bị disabled return false
-            if (isDisabled) {
-                return false;
-            }
-            // Nếu bị disabled return false
-            if (isDisabled) {
-                return false;
-            }
-            // Hiển thị editor nếu dòng đó:
-            // Đang được edit: editingStatus
-            return item.editingStatus
-                // Được thiết lập alwayDisplay
-                || (column.editor && column.editor.alwayDisplay);
-        };
-        item.editorHandler = item.editorHandler || {};
-        for (const column of columns) {
-            item.editorHandler.disabled = false;
-            item.editorHandler[column.field] = {};
-            if (item.editorHandler.disabled) {
-                item.editorHandler[column.field].visible = false;
-            }
-            else {
-                item.editorHandler[column.field].visible = visible(column);
-            }
-        }
-        return true;
-    }
-}
-EditorSubInformationHandlerPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorSubInformationHandler'
-            },] }
-];
-
-class EditorValidatePipe {
-    constructor() {
-        this.delay = 1000; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
-    }
-    transform(value, item, validate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.previous = new Date();
-            yield new Promise(resolve => setTimeout(resolve, this.delay));
-            const now = new Date();
-            const dif = now.getTime() - this.previous.getTime();
-            if (dif < this.delay) {
-                return true;
-            }
-            item.editorHandler = item.editorHandler || {};
-            if (!validate) {
-                item.editorHandler.errorMessage = null;
-                return true;
-            }
-            const result = validate(item);
-            if (result instanceof Promise) {
-                item.editorHandler.errorMessage = yield result;
-                return true;
-            }
-            else {
-                item.editorHandler.errorMessage = result;
-                return true;
-            }
-        });
-    }
-}
-EditorValidatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorValidate'
-            },] }
-];
-
-class FilterMobilePipe {
-    transform(columns, item) {
-        // Những giá trị undefined, null và rỗng sẽ bỏ qua khi hiển thị trên mobile
-        return columns.filter(column => {
-            var _a;
-            return (item[column.field] !== undefined
-                && item[column.field] !== null
-                && item[column.field] !== '')
-                || column.htmlTemplate
-                || column.type === 'children'
-                || (column.type === 'string' && ((_a = column.commands) === null || _a === void 0 ? void 0 : _a.length) > 0);
-        });
-    }
-}
-FilterMobilePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'filterMobile',
-                pure: false
-            },] }
-];
-
-class MobileCommandFilterPipe {
-    transform(commands, item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const results = [];
-            if (!commands) {
-                return results;
-            }
-            for (const command of commands) {
-                if ('children' in command) {
-                    let flag = true;
-                    const { hiddenByItem } = command;
-                    if (hiddenByItem) {
-                        const hidden = hiddenByItem(item);
-                        if (hidden instanceof Promise) {
-                            if (yield hidden) {
-                                flag = false;
-                            }
-                        }
-                        else {
-                            if (hidden) {
-                                flag = false;
-                            }
-                        }
-                    }
-                    if (flag) {
-                        for (const childCommand of command.children) {
-                            if (!childCommand.hiddenByItem) {
-                                results.push(childCommand);
-                            }
-                            else {
-                                const hidden = childCommand.hiddenByItem(item);
-                                if (hidden instanceof Promise) {
-                                    if (!(yield hidden)) {
-                                        results.push(childCommand);
-                                    }
-                                }
-                                else {
-                                    if (!hidden) {
-                                        results.push(childCommand);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                else {
-                    const { hiddenByItem } = command;
-                    if (!hiddenByItem) {
-                        results.push(command);
-                    }
-                    else {
-                        const hidden = hiddenByItem(item);
-                        if (hidden instanceof Promise) {
-                            if (!(yield hidden)) {
-                                results.push(command);
-                            }
-                        }
-                        else {
-                            if (!hidden) {
-                                results.push(command);
-                            }
-                        }
-                    }
-                }
-            }
-            return results;
-        });
-    }
-}
-MobileCommandFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'mobileCommandFilter'
-            },] }
-];
-
-class MobileViewHtmlTemplatePipe {
-    transform(rowData, columns, htmlTemplate) {
-        return htmlTemplate(rowData, columns);
-    }
-}
-MobileViewHtmlTemplatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'mobileViewHtmlTempate'
-            },] }
-];
-
-class ValueTransformPipe {
-    constructor(decimalPipe) {
-        this.decimalPipe = decimalPipe;
-    }
-    transform(value, rowData, column) {
-        if (column.transform) {
-            return column.transform(value, rowData);
-        }
-        else if (column.type === 'number' && Number.isNumber(value)) {
-            return this.decimalPipe.transform(value, '1.0-2');
-        }
-        return value;
-    }
-}
-ValueTransformPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'valueTransform'
-            },] }
-];
-ValueTransformPipe.ctorParameters = () => [
-    { type: DecimalPipe }
-];
-
-class EditorPopupVisiblePipe {
-    transform(column, item) {
-        var _a, _b;
-        if (column.type === 'children') {
-            return false;
-        }
-        if (typeof ((_a = column.editor) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' && column.editor.hidden) {
-            return false;
-        }
-        if (typeof ((_b = column.editor) === null || _b === void 0 ? void 0 : _b.hidden) === 'function' && column.editor.hidden(item)) {
-            return false;
-        }
-        return true;
-    }
-}
-EditorPopupVisiblePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorPopupVisible'
-            },] }
-];
-
-class SdSubHeaderDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdSubHeaderDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdSubHeaderDef]'
-            },] }
-];
-SdSubHeaderDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class SdGridImportExcel {
-    constructor() {
-        this.open = () => {
-            var _a;
-            (_a = this.control) === null || _a === void 0 ? void 0 : _a.open();
-        };
-    }
-    set columns(gridColumns) {
-        const columns = [];
-        gridColumns.forEach(column => {
-            var _a;
-            if (column.ignoreImport) {
-                return;
-            }
-            if (column.type === 'string' || column.type === 'color') {
-                columns.push({
-                    type: 'string',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width
-                });
-            }
-            else if (column.type === 'number') {
-                columns.push({
-                    type: 'number',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width
-                });
-            }
-            else if (column.type === 'bool') {
-                columns.push({
-                    type: 'bool',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width
-                });
-            }
-            else if (column.type === 'date') {
-                columns.push({
-                    type: 'date',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width
-                });
-            }
-            else if (column.type === 'datetime' || column.type === 'time') {
-                columns.push({
-                    type: 'datetime',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width
-                });
-            }
-            else if (column.type === 'values') {
-                columns.push({
-                    type: 'values',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width,
-                    values: column.values.map(e => e.value),
-                });
-            }
-            else if (column.type === 'radio') {
-                columns.push({
-                    type: 'radio',
-                    field: column.field,
-                    title: column.title,
-                    width: column.width,
-                    values: column.values.map(e => e[column.valueField])
-                });
-            }
-            if (column.type === 'children' && ((_a = column.children) === null || _a === void 0 ? void 0 : _a.length)) {
-                column.children.forEach(childColumn => {
-                    if (childColumn.ignoreImport) {
-                        return;
-                    }
-                    if (childColumn.type === 'string' || childColumn.type === 'color') {
-                        columns.push({
-                            type: 'string',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width
-                        });
-                    }
-                    else if (childColumn.type === 'number') {
-                        columns.push({
-                            type: 'number',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width
-                        });
-                    }
-                    else if (childColumn.type === 'bool') {
-                        columns.push({
-                            type: 'bool',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width
-                        });
-                    }
-                    else if (childColumn.type === 'date') {
-                        columns.push({
-                            type: 'date',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width
-                        });
-                    }
-                    else if (childColumn.type === 'datetime' || childColumn.type === 'time') {
-                        columns.push({
-                            type: 'datetime',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width
-                        });
-                    }
-                    else if (childColumn.type === 'values') {
-                        columns.push({
-                            type: 'values',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width,
-                            values: childColumn.values.map(e => e.value),
-                        });
-                    }
-                    else if (childColumn.type === 'radio') {
-                        columns.push({
-                            type: 'radio',
-                            field: childColumn.field,
-                            title: childColumn.title,
-                            width: childColumn.width,
-                            values: childColumn.values.map(e => e[childColumn.valueField])
-                        });
-                    }
-                });
-            }
-        });
-        this.option = {
-            key: `GridImport${this.key}`,
-            columns,
-            onAccept: this.accept
-        };
-    }
-}
-SdGridImportExcel.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-import-excel',
-                template: "<sd-upload-excel *ngIf=\"option\" [option]=\"option\" #control></sd-upload-excel>"
-            },] }
-];
-SdGridImportExcel.ctorParameters = () => [];
-SdGridImportExcel.propDecorators = {
-    key: [{ type: Input }],
-    accept: [{ type: Input }],
-    columns: [{ type: Input }],
-    control: [{ type: ViewChild, args: [SdUploadExcel,] }]
-};
-
-class SdGridModule {
-}
-SdGridModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    MatInputModule,
-                    MatFormFieldModule,
-                    MatPaginatorModule,
-                    MatTableModule,
-                    MatMenuModule,
-                    MatIconModule,
-                    MatButtonModule,
-                    MatTooltipModule,
-                    MatProgressSpinnerModule,
-                    MatChipsModule,
-                    MatRadioModule,
-                    MatSlideToggleModule,
-                    MatSelectModule,
-                    MatCheckboxModule,
-                    SdUploadExcelModule,
-                    SdFormModule,
-                    SdServiceModule
-                ],
-                declarations: [
-                    SdGrid,
-                    SdGridConfig,
-                    SdGridDesktopColumnEdit,
-                    SdGridDesktopColumnView,
-                    SdGridDesktopInlineFilter,
-                    SdGridMobileItemView,
-                    SdGridPopupEditor,
-                    SdGridPopupExportExcel,
-                    SdGridPopupFilter,
-                    SdGridPopupQuickFilterDetail,
-                    SdGridSubInformation,
-                    SdGridImportExcel,
-                    GridDesktopColumnChildrenViewComponent,
-                    CellDesktopClassNamePipe,
-                    CellMobileClassNamePipe,
-                    ColumnCommandFilterPipe,
-                    ColumnHtmlTemplatePipe,
-                    ColumnTitlePipe,
-                    ColumnValuesPipe,
-                    CommandDisabledPipe,
-                    CommandFilterPipe,
-                    CommandHidden,
-                    CommandIconPipe,
-                    CommandTitlePipe,
-                    SdDynamicItems,
-                    EditorDynamicItemPipe,
-                    EditorHandlerPipe,
-                    EditorSubInformationHandlerPipe,
-                    EditorValidatePipe,
-                    FilterMobilePipe,
-                    MobileCommandFilterPipe,
-                    MobileViewHtmlTemplatePipe,
-                    ValueTransformPipe,
-                    EditorPopupVisiblePipe,
-                    SdCellDefDirective,
-                    SdCellEditorDefDirective,
-                    SdCellFooterDevDirective,
-                    SdSubHeaderDefDirective,
-                ],
-                exports: [
-                    SdGrid,
-                    SdCellDefDirective,
-                    SdCellEditorDefDirective,
-                    SdCellFooterDevDirective,
-                    SdSubHeaderDefDirective,
-                ],
-                providers: [
-                    HandlerLocal,
-                    HandlerDotnet,
-                    EditorHandlerPipe
-                ]
-            },] }
-];
-
-class QuickFilter {
-}
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CellDesktopClassNamePipe, CellMobileClassNamePipe, ColumnCommandFilterPipe, ColumnHtmlTemplatePipe, ColumnTitlePipe, ColumnValuesPipe, CommandDisabledPipe, CommandFilterPipe, CommandHidden, CommandIconPipe, CommandTitlePipe, EditorDynamicItemPipe, EditorHandlerPipe, EditorPopupVisiblePipe, EditorSubInformationHandlerPipe, EditorValidatePipe, FilterMobilePipe, GRID_CONFIG, GridDesktopColumnChildrenViewComponent, HandlerDotnet, HandlerLocal, MobileCommandFilterPipe, MobileViewHtmlTemplatePipe, QuickFilter, SdCellDefDirective, SdCellEditorDefDirective, SdCellFooterDevDirective, SdDynamicItems, SdGrid, SdGridConfig, SdGridDesktopColumnEdit, SdGridDesktopColumnView, SdGridDesktopInlineFilter, SdGridImportExcel, SdGridMobileItemView, SdGridModule, SdGridPopupEditor, SdGridPopupExportExcel, SdGridPopupFilter, SdGridPopupQuickFilterDetail, SdGridSubInformation, SdSubHeaderDefDirective, ValueTransformPipe, defaultGridOption };
-//# sourceMappingURL=sd-angular-core-grid.js.map