@sd-angular/core 1.2.98 → 1.3.0

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

@@ -0,0 +1,3935 @@
+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