@sd-angular/core 1.3.0 → 1.3.2

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

@@ -1,3740 +0,0 @@
-import { SdScrollDirective, SdCommonModule } from '@sd-angular/core/common';
-import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Output, Injectable, Inject, Optional, Pipe, NgZone, QueryList, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
-import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
-import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { v4 } from 'uuid';
-import { Subject, Subscription, isObservable } from 'rxjs';
-import { SdNotifyService } from '@sd-angular/core/notify';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { startWith, debounceTime, map, switchMap } from 'rxjs/operators';
-import hash from 'object-hash';
-import { SdSettingService } from '@sd-angular/core/setting';
-import { DeviceDetectorService } from 'ngx-device-detector';
-import { SdLoadingService } from '@sd-angular/core/loading';
-import { SdTranslateService } from '@sd-angular/core/translate';
-import { SdExportService } from '@sd-angular/core/export';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { SdQuickAction } from '@sd-angular/core/quick-action';
-import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatTableModule } from '@angular/material/table';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSliderModule } from '@angular/material/slider';
-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 { SdFormModule } from '@sd-angular/core/form';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatListModule } from '@angular/material/list';
-import { MatDividerModule } from '@angular/material/divider';
-import { SdSideDrawer } from '@sd-angular/core/side-drawer';
-import { SdUtilityService } from '@sd-angular/core/utility';
-
-class SdMaterialCellDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdMaterialCellDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdMaterialCellDef]'
-            },] }
-];
-SdMaterialCellDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdMaterialCellDefDirective.propDecorators = {
-    sdMaterialCellDef: [{ type: Input }]
-};
-
-class SdMaterialFilterDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    set showing(val) {
-        this.defaultShowing = (val === '') || val;
-    }
-}
-SdMaterialFilterDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdMaterialFilterDef]'
-            },] }
-];
-SdMaterialFilterDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdMaterialFilterDefDirective.propDecorators = {
-    sdMaterialFilterDef: [{ type: Input }],
-    showing: [{ type: Input, args: ['defaultShowing',] }]
-};
-
-class SdMaterialFooterDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdMaterialFooterDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdMaterialFooterDef]'
-            },] }
-];
-SdMaterialFooterDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SdMaterialFooterDefDirective.propDecorators = {
-    sdMaterialFooterDef: [{ type: Input }]
-};
-
-class SdMaterialEmptyDataDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdMaterialEmptyDataDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdMaterialEmptyDataDef]'
-            },] }
-];
-SdMaterialEmptyDataDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-class SdMaterialSubInformationDefDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-SdMaterialSubInformationDefDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[sdMaterialSubInformationDef]'
-            },] }
-];
-SdMaterialSubInformationDefDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-
-const DEFAULT_GRID_MATERIAL_CONFIG = {
-    paginate: {
-        pageSize: 50,
-        pages: [50, 100, 200]
-    }
-};
-const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
-
-class SdPopupFilter {
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        this.externalFilters = [];
-        this.externalFilter = {};
-        this.inlineExternal = {};
-        this.columns = [];
-        this.columnFilter = {};
-        this.inlineColumn = {};
-        this.filterDefs = [];
-        this.filterDef = {};
-        this.inlineFilterDef = {};
-        this.changeFilter = new EventEmitter();
-        this.clearFilter = new EventEmitter();
-        this.open = (args) => {
-            const { inlineColumn, columnFilter, inlineExternal, externalFilter, inlineFilterDef, filterDef } = args;
-            this.inlineColumn = JSON.parse(JSON.stringify(inlineColumn || {}));
-            this.columnFilter = JSON.parse(JSON.stringify(columnFilter || {}));
-            this.inlineExternal = JSON.parse(JSON.stringify(inlineExternal || {}));
-            this.externalFilter = JSON.parse(JSON.stringify(externalFilter || {}));
-            this.inlineFilterDef = JSON.parse(JSON.stringify(inlineFilterDef || {}));
-            this.filterDef = JSON.parse(JSON.stringify(filterDef || {}));
-            this.modal.open();
-            this.cdRef.markForCheck();
-        };
-        this.close = () => {
-            this.modal.close();
-            this.cdRef.markForCheck();
-        };
-        this.onApply = () => {
-            this.changeFilter.emit({
-                inlineColumn: this.inlineColumn || {},
-                columnFilter: this.columnFilter || {},
-                inlineExternal: this.inlineExternal || {},
-                externalFilter: this.externalFilter || {},
-                inlineFilterDef: this.inlineFilterDef || {},
-                filterDef: this.filterDef || {}
-            });
-            this.modal.close();
-            this.cdRef.markForCheck();
-        };
-    }
-    onClear() {
-        this.clearFilter.emit();
-        this.modal.close();
-        this.cdRef.markForCheck();
-    }
-}
-SdPopupFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-popup-filter',
-                template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\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)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\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' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\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)]=\" columnFilter[column.field]\" type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\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]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n          {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\" appearance=\"outline\" multiple>\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple>\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\">\r\n            </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef;context:{filterDef:filterDef}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\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)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | 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)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
-            },] }
-];
-SdPopupFilter.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-SdPopupFilter.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    externalFilters: [{ type: Input }],
-    columns: [{ type: Input }],
-    filterDefs: [{ type: Input }],
-    changeFilter: [{ type: Output }],
-    clearFilter: [{ type: Output }]
-};
-
-var _prefix;
-class SdGridFilterService {
-    constructor(settingService) {
-        this.settingService = settingService;
-        _prefix.set(this, '61d22e8e-eee8-4aad-8e1c-044a532fea91');
-        this.get = (key) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!key) {
-                return {
-                    selectedQuickFilter: null,
-                    quickFilters: [],
-                    inlineExternal: {},
-                    inlineColumn: {},
-                    inlineFilterDef: {}
-                };
-            }
-            const { get } = this.settingService.create({
-                prefix: __classPrivateFieldGet(this, _prefix),
-                key
-            });
-            const configuration = yield get();
-            return {
-                selectedQuickFilter: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) !== null && _a !== void 0 ? _a : null,
-                quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
-                inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
-                inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
-                inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
-            };
-        });
-        this.set = (key, configuration) => __awaiter(this, void 0, void 0, function* () {
-            configuration = {
-                selectedQuickFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) || null,
-                quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
-                inlineExternal: configuration.inlineExternal || {},
-                inlineColumn: configuration.inlineColumn || {},
-                inlineFilterDef: configuration.inlineFilterDef || {}
-            };
-            if (!key) {
-                return configuration;
-            }
-            const { set } = this.settingService.create({
-                prefix: __classPrivateFieldGet(this, _prefix),
-                key
-            });
-            key = hash({
-                prefix: __classPrivateFieldGet(this, _prefix),
-                key
-            });
-            yield set(configuration);
-            return configuration;
-        });
-    }
-}
-_prefix = new WeakMap();
-SdGridFilterService.decorators = [
-    { type: Injectable }
-];
-SdGridFilterService.ctorParameters = () => [
-    { type: SdSettingService }
-];
-
-var _filterOptionChanges, _subscription, _loadDefault, _clearFilter;
-class SdGridFilter {
-    constructor(ref, deviceService, gridFilterService) {
-        this.ref = ref;
-        this.deviceService = deviceService;
-        this.gridFilterService = gridFilterService;
-        this.isVisible = true;
-        _filterOptionChanges.set(this, new Subject());
-        this.columns = [];
-        this.filterDefs = [];
-        this.filterDef = {};
-        this.inlineFilterDef = {};
-        this.filterChange = new EventEmitter();
-        _subscription.set(this, new Subscription());
-        this.columnFilter = {};
-        this.inlineColumn = {};
-        this.externalFilters = [];
-        this.externalFilter = {};
-        this.inlineExternal = {};
-        _loadDefault.set(this, () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            for (const column of this.columns) {
-                this.inlineColumn[column.field] = (_a = this.inlineColumn[column.field]) !== null && _a !== void 0 ? _a : (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.defaultShowing;
-                this.columnFilter[column.field] = (_c = this.columnFilter[column.field]) !== null && _c !== void 0 ? _c : (_d = column === null || column === void 0 ? void 0 : column.filter) === null || _d === void 0 ? void 0 : _d.default;
-            }
-            for (const externalFilter of this.externalFilters) {
-                this.inlineExternal[externalFilter.field] = (_e = this.inlineExternal[externalFilter.field]) !== null && _e !== void 0 ? _e : externalFilter === null || externalFilter === void 0 ? void 0 : externalFilter.defaultShowing;
-                if (externalFilter.type === 'daterange') {
-                    this.externalFilter[externalFilter.field] = {
-                        from: (_j = (_g = (_f = this.externalFilter[externalFilter.field]) === null || _f === void 0 ? void 0 : _f.from) !== null && _g !== void 0 ? _g : (_h = externalFilter.default) === null || _h === void 0 ? void 0 : _h.from) !== null && _j !== void 0 ? _j : undefined,
-                        to: (_o = (_l = (_k = this.externalFilter[externalFilter.field]) === null || _k === void 0 ? void 0 : _k.to) !== null && _l !== void 0 ? _l : (_m = externalFilter.default) === null || _m === void 0 ? void 0 : _m.to) !== null && _o !== void 0 ? _o : undefined
-                    };
-                }
-                else {
-                    this.externalFilter[externalFilter.field] = (_p = this.externalFilter[externalFilter.field]) !== null && _p !== void 0 ? _p : externalFilter.default;
-                }
-            }
-            for (const filterDef of this.filterDefs) {
-                this.inlineFilterDef[filterDef.sdMaterialFilterDef] = (_q = this.inlineFilterDef[filterDef.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : filterDef === null || filterDef === void 0 ? void 0 : filterDef.defaultShowing;
-            }
-        });
-        _clearFilter.set(this, () => {
-            this.columnFilter = {};
-            this.externalFilter = {};
-            this.filterDef = {};
-            for (const externalFilter of this.externalFilters) {
-                if (externalFilter.type === 'daterange') {
-                    this.externalFilter[externalFilter.field] = {
-                        from: undefined,
-                        to: undefined
-                    };
-                }
-            }
-        });
-        this.onFilter = (item) => {
-            this.filterChange.emit();
-        };
-        this.open = () => {
-            this.popupFilter.open({
-                columnFilter: this.columnFilter,
-                externalFilter: this.externalFilter,
-                filterDef: this.filterDef,
-                inlineColumn: this.inlineColumn,
-                inlineExternal: this.inlineExternal,
-                inlineFilterDef: this.inlineFilterDef
-            });
-        };
-        this.onChangeFilter = (args) => {
-            var _a;
-            const { inlineColumn, columnFilter, inlineExternal, externalFilter, inlineFilterDef, filterDef } = args;
-            this.inlineColumn = inlineColumn;
-            this.columnFilter = columnFilter;
-            this.inlineExternal = inlineExternal;
-            this.externalFilter = externalFilter;
-            this.inlineFilterDef = inlineFilterDef;
-            this.filterDef = filterDef;
-            this.gridFilterService.set((_a = this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                inlineColumn,
-                inlineExternal,
-                quickFilters: [],
-                inlineFilterDef,
-                selectedQuickFilter: null
-            });
-            this.filterChange.emit();
-        };
-        this.onReset = () => {
-            var _a;
-            this.inlineColumn = {};
-            this.columnFilter = {};
-            this.inlineExternal = {};
-            this.externalFilter = {};
-            this.inlineFilterDef = {};
-            this.filterDef = {};
-            __classPrivateFieldGet(this, _loadDefault).call(this);
-            this.gridFilterService.set((_a = this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                inlineColumn: this.inlineColumn,
-                inlineExternal: this.columnFilter,
-                inlineFilterDef: this.inlineFilterDef,
-                quickFilters: [],
-                selectedQuickFilter: null
-            });
-            this.filterChange.emit();
-            this.ref.markForCheck();
-        };
-        this.onClearFilter = () => {
-            var _a;
-            __classPrivateFieldGet(this, _clearFilter).call(this);
-            this.gridFilterService.set((_a = this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                inlineColumn: this.inlineColumn,
-                inlineExternal: this.columnFilter,
-                inlineFilterDef: this.inlineFilterDef,
-                quickFilters: [],
-                selectedQuickFilter: null
-            });
-            this.filterChange.emit();
-        };
-        this.setFilter = (args) => {
-            var _a, _b, _c, _d;
-            const { columnFilter, externalFilter, filterDef } = args;
-            if (columnFilter) {
-                this.columnFilter = columnFilter;
-            }
-            if (externalFilter) {
-                this.externalFilter = externalFilter;
-            }
-            if (filterDef) {
-                this.filterDef = filterDef;
-            }
-            for (const externalFilter of this.externalFilters) {
-                if (externalFilter.type === 'daterange') {
-                    this.externalFilter[externalFilter.field] = {
-                        from: (_b = (_a = this.externalFilter[externalFilter.field]) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : undefined,
-                        to: (_d = (_c = this.externalFilter[externalFilter.field]) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : undefined
-                    };
-                }
-            }
-            this.ref.markForCheck();
-        };
-        this.isMobileOrTablet = !this.deviceService.isDesktop();
-        this.ref.markForCheck();
-    }
-    set _filter(filter) {
-        var _a;
-        this.filter = filter;
-        this.isVisible = !((_a = this.filter) === null || _a === void 0 ? void 0 : _a.disabled);
-        __classPrivateFieldGet(this, _filterOptionChanges).next(this.filter);
-    }
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterOptionChanges).pipe(startWith(this.filter)).subscribe(() => {
-            var _a, _b;
-            if (!this.isVisible) {
-                this.filterChange.emit();
-                return;
-            }
-            this.externalFilters = ((_a = this.filter) === null || _a === void 0 ? void 0 : _a.externalFilters) || [];
-            this.gridFilterService.get((_b = this.filter) === null || _b === void 0 ? void 0 : _b.key).then(configuration => {
-                this.inlineColumn = configuration.inlineColumn;
-                this.inlineExternal = configuration.inlineExternal;
-                this.inlineFilterDef = configuration.inlineFilterDef;
-                __classPrivateFieldGet(this, _loadDefault).call(this);
-                this.filterChange.emit();
-            });
-            this.ref.markForCheck();
-        }));
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription).unsubscribe();
-    }
-}
-_filterOptionChanges = new WeakMap(), _subscription = new WeakMap(), _loadDefault = new WeakMap(), _clearFilter = new WeakMap();
-SdGridFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-filter',
-                template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input>\r\n      <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input-number>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" appearance=\"outline\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\" appearance=\"outline\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input>\r\n      <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input-number>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" appearance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" appearance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
-            },] }
-];
-SdGridFilter.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DeviceDetectorService },
-    { type: SdGridFilterService }
-];
-SdGridFilter.propDecorators = {
-    popupFilter: [{ type: ViewChild, args: [SdPopupFilter,] }],
-    _filter: [{ type: Input, args: ['filter',] }],
-    columns: [{ type: Input }],
-    filterDefs: [{ type: Input }],
-    filterChange: [{ type: Output }]
-};
-
-var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
-class SdPopupExport {
-    constructor(ref, loadingService, exportService, notifyService, translateService) {
-        this.ref = ref;
-        this.loadingService = loadingService;
-        this.exportService = exportService;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.columns = [];
-        this.groups = [];
-        this.enableCreating = false;
-        this.selected = {};
-        this.files = [];
-        this.export = new EventEmitter();
-        this.form = new FormGroup({});
-        _getExportableColumns.set(this, () => {
-            return [...this.gridColumns, ...this.additionalColumns];
-        });
-        _getExportableGroups.set(this, () => {
-            var _a, _b, _c;
-            return ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.groups) === null || _c === void 0 ? void 0 : _c.filter(e => {
-                const permission = e.permission;
-                if (typeof (permission) === 'function') {
-                    return permission();
-                }
-                return permission;
-            })) || [];
-        });
-        this.open = () => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            if (!this.key) {
-                this.exportDefault();
-                return;
-            }
-            if (this.groups.length === 1 && ((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.hideMyTemplates)) {
-                this.loadFiles(this.groups[0].code);
-            }
-            else {
-                this.loadFiles(null);
-            }
-            this.selected = {};
-            this.modal.open();
-            this.ref.detectChanges();
-        });
-        _getExportColumns.set(this, () => {
-            if (this.configuration) {
-                const columns = [...this.gridColumns];
-                const { firstColumns, secondColumns } = this.configuration;
-                const displayColumns = [...firstColumns, ...secondColumns].reduce((first, next) => {
-                    const column = this.gridOption.columns.find(e => e.field === next.field);
-                    if (!column) {
-                        return first;
-                    }
-                    if (column.type !== 'children' && column.type !== 'children-col') {
-                        return [...first, column];
-                    }
-                    const children = column.children.filter(e1 => e1.type !== 'image');
-                    return [...first, ...children];
-                }, []);
-                const results = displayColumns.map(e => (Object.assign(Object.assign({}, e), { data: columns.find(e1 => e1.field === e.field) }))).filter(e => !!e.data)
-                    .map(e => e.data);
-                return [...results, ...this.additionalColumns];
-            }
-            else {
-                return this.columns;
-            }
-        });
-        this.exportDefault = () => {
-            this.export.emit({
-                file: null,
-                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
-                isCSV: false
-            });
-        };
-        this.exportCSV = () => {
-            this.export.emit({
-                file: null,
-                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
-                isCSV: true
-            });
-        };
-        this.exportRaw = () => {
-            this.export.emit({
-                file: null,
-                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
-                isRaw: true
-            });
-        };
-        this.loadFiles = (group = null) => __awaiter(this, void 0, void 0, function* () {
-            this.selectedGroup = this.groups.find(e => e.code === group);
-            this.files = yield this.exportService.filesInFolder({
-                key: this.key,
-                group
-            });
-            this.ref.markForCheck();
-        });
-        _initTemplate.set(this, (fileName) => __awaiter(this, void 0, void 0, function* () {
-            var _c, _d, _e, _f;
-            const sheets = [];
-            if (Array.isArray((_d = (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.sheets)) {
-                for (const sheet of this.gridOption.export.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.exportService.generateTemplate({
-                fileName: fileName || ((_f = (_e = this.gridOption) === null || _e === void 0 ? void 0 : _e.export) === null || _f === void 0 ? void 0 : _f.fileName),
-                columns: this.columns,
-                sheets
-            });
-        }));
-        this.generateTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            this.loadingService.start();
-            yield __classPrivateFieldGet(this, _initTemplate).call(this).finally(this.loadingService.stop);
-        });
-        this.generateAndUploadTemplate = (fileName) => __awaiter(this, void 0, void 0, function* () {
-            var _g, _h, _j, _k, _l, _m, _o;
-            const sheets = [];
-            if (Array.isArray((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.sheets)) {
-                for (const sheet of (_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.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.exportService.generateUploadTemplate({
-                key: this.key,
-                template: {
-                    fileName: fileName || ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName),
-                    columns: this.columns.filter(e => this.selected[e.field]),
-                    sheets
-                },
-                group: (_o = this.selectedGroup) === null || _o === void 0 ? void 0 : _o.code
-            });
-        });
-        this.onExport = (file) => {
-            this.export.emit({
-                file,
-                columns: this.columns
-            });
-            this.ref.detectChanges();
-        };
-        this.uploadTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            var _p, _q, _r;
-            const file = yield this.exportService.uploadTemplate({
-                key: this.key,
-                group: (_p = this.selectedGroup) === null || _p === void 0 ? void 0 : _p.code,
-                validator: (_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.validators
-            });
-            if (file) {
-                this.files = [...this.files, file];
-                this.ref.detectChanges();
-            }
-        });
-        this.removeFile = (file) => {
-            this.notifyService.confirm(this.translateService.translate('Remove template')).then(() => {
-                var _a;
-                this.exportService.removeFile({
-                    key: this.key,
-                    fileName: file.fileName,
-                    group: ((_a = this.selectedGroup) === null || _a === void 0 ? void 0 : _a.code) || null
-                });
-                const idx = this.files.indexOf(file);
-                this.files.splice(idx, 1);
-                this.files = [...this.files];
-                this.ref.detectChanges();
-            });
-        };
-        this.createTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            var _s, _t, _u, _v, _w;
-            const { translate } = this.translateService;
-            if (this.form.invalid) {
-                this.form.markAllAsTouched();
-                return;
-            }
-            if (!this.columns.some(e => this.selected[e.field])) {
-                this.notifyService.notify.warning(translate('Please select columns'));
-                return;
-            }
-            this.loadingService.start();
-            const fileName = this.templateName + '.xlsx';
-            try {
-                if ((_u = (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.validators) === null || _u === void 0 ? void 0 : _u.call(_t, fileName)) {
-                    this.notifyService.notify.warning((_w = (_v = this.gridOption) === null || _v === void 0 ? void 0 : _v.export) === null || _w === void 0 ? void 0 : _w.validators(fileName));
-                    return;
-                }
-                const result = yield this.generateAndUploadTemplate(fileName);
-                if (result === null || result === void 0 ? void 0 : result.filePath) {
-                    const file = {
-                        filePath: result.filePath,
-                        fileName: result.fileName
-                    };
-                    this.onExport(file);
-                    this.templateName = null;
-                    this.enableCreating = false;
-                    this.files = [...this.files, file];
-                    this.ref.detectChanges();
-                }
-            }
-            finally {
-                this.loadingService.stop();
-            }
-        });
-        this.onChangeGroup = () => {
-            var _a, _b, _c;
-            this.loadFiles((_c = (_b = (_a = this.listGroups) === null || _a === void 0 ? void 0 : _a.selectedOptions) === null || _b === void 0 ? void 0 : _b.selected[0]) === null || _c === void 0 ? void 0 : _c.value);
-        };
-        this.validatorTemplateName = (val) => {
-            const { translate } = this.translateService;
-            const regex = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
-            if (!val) {
-                return translate('Please enter your template name');
-            }
-            if (val.length > 50) {
-                return translate('Template name is too long');
-            }
-            if (!regex.test(val)) {
-                return translate('Template name only contains letters, numbers and spaces');
-            }
-            return null;
-        };
-    }
-    set _gridOption(option) {
-        this.gridOption = option;
-        this.columns = __classPrivateFieldGet(this, _getExportableColumns).call(this);
-        this.groups = __classPrivateFieldGet(this, _getExportableGroups).call(this);
-    }
-    get key() {
-        var _a, _b, _c, _d;
-        const prefix = '93889e78-f971-4a1d-8c73-fe2321af9233';
-        if (!((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.export) === null || _b === void 0 ? void 0 : _b.key)) {
-            return null;
-        }
-        return hash({
-            prefix,
-            key: (_d = (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.export) === null || _d === void 0 ? void 0 : _d.key
-        });
-    }
-    get gridColumns() {
-        const columns = [];
-        this.gridOption.columns.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(column => {
-            var _a, _b;
-            if (column.type === 'image') {
-                return;
-            }
-            if (column.type === 'children') {
-                (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                    if (childColumn.type === 'image') {
-                        return;
-                    }
-                    columns.push(childColumn);
-                });
-                return;
-            }
-            if (column.type === 'children-col') {
-                (_b = column.children) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                    if (childColumn.type === 'image') {
-                        return;
-                    }
-                    columns.push(childColumn);
-                });
-                return;
-            }
-            columns.push(column);
-        });
-        return columns.map(e => ({
-            field: e.field,
-            title: e.title,
-            description: e.description,
-            width: e.width
-        }));
-    }
-    get additionalColumns() {
-        var _a, _b;
-        return (((_b = (_a = this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []).map(e => ({
-            field: e.field,
-            title: e.title,
-            description: e.description,
-            width: e.width
-        }));
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-    }
-}
-_getExportableColumns = new WeakMap(), _getExportableGroups = new WeakMap(), _getExportColumns = new WeakMap(), _initTemplate = new WeakMap();
-SdPopupExport.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-popup-export',
-                template: "<sd-modal width=\"907px\" [title]=\"'Exported template' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container\r\n        *ngIf=\"groups?.length > 1 || (groups?.length === 1 && !gridOption?.export?.hideMyTemplates); else noSelection\">\r\n        <div class=\"col-9\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n          <mat-selection-list [multiple]=\"false\" #listGroups>\r\n            <mat-list-option *ngIf=\"!gridOption?.export?.hideMyTemplates\" [value]=\"\" (click)=\"loadFiles()\">\r\n              <div mat-line>{{'My templates' | sdTranslate}}</div>\r\n            </mat-list-option>\r\n            <mat-list-option [value]=\"group.code\" *ngFor=\"let group of groups\" (click)=\"loadFiles(group.code)\">\r\n              <div mat-line>{{group.title}}</div>\r\n            </mat-list-option>\r\n          </mat-selection-list>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSelection>\r\n        <div class=\"col-12\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #content>\r\n        <div class=\"row\">\r\n          <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n            <div class=\"c-empty\">\r\n              <img class=\"c-empty-image\">\r\n              <div class=\"T14R\">{{'There are no exported templates' | sdTranslate}}</div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"files?.length\">\r\n            <div class=\"col-12\">\r\n              <div class=\"c-table\" style=\"max-height:50vh\">\r\n                <table mat-table [dataSource]=\"files\">\r\n                  <ng-container matColumnDef=\"stt\">\r\n                    <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n                    </th>\r\n                    <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                      {{idx + 1}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"fileName\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'File name' | sdTranslate}}\r\n                    </th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n                      {{item.fileName}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"action\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">\r\n                    </th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n                      <div class=\"d-flex\">\r\n                        <button *ngIf=\"!selectedGroup || selectedGroup?.permission === 'delete'\" mat-icon-button\r\n                          aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                          <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                          <mat-icon>download</mat-icon>\r\n                        </button>\r\n                      </div>\r\n                    </td>\r\n                  </ng-container>\r\n                  <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\">\r\n                  </tr>\r\n                  <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action'];\"></tr>\r\n                </table>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"files.length < 5 && (!selectedGroup || selectedGroup?.permission === 'add' || selectedGroup?.permission === 'delete')\"\r\n              class=\"col-12 mt-10\">\r\n              <sd-button class=\"mr-5\" [title]=\"'New template' | sdTranslate\" (action)=\"enableCreating = true\"\r\n                color=\"info\" [disabled]=\"enableCreating\">\r\n              </sd-button>\r\n              <sd-button *ngIf=\"gridOption?.export?.enableUpload\" [title]=\"'Upload template' | sdTranslate\"\r\n                (action)=\"uploadTemplate()\" type=\"outline\">\r\n              </sd-button>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(enableCreating || !files?.length) && (!selectedGroup || selectedGroup?.permission === 'add' || selectedGroup?.permission === 'delete')\">\r\n            <div class=\"col-12 mt-20\">\r\n              <div class=\"T14R\">{{'Select columns for creating template' | sdTranslate}}:</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n                <ng-container *ngFor=\"let column of columns\">\r\n                  <mat-chip [selected]=\"selected[column.field]\"\r\n                    (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            <div class=\"col-12 row\">\r\n              <div class=\"col-10\">\r\n                <sd-input [form]=\"form\" [label]=\"'Template name' | sdTranslate\" [(model)]=\"templateName\"\r\n                  [validator]=\"validatorTemplateName\"></sd-input>\r\n              </div>\r\n              <div class=\"col-2 mt-7\">\r\n                <sd-button width=\"100%\" [title]=\"'Save' | sdTranslate\" color=\"info\" (action)=\"createTemplate()\">\r\n                </sd-button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </sd-modal-body>\r\n</sd-modal>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{align-items:center;background:#f6f6f6;border-radius:4px;display:flex;flex-direction:column;height:116px;justify-content:center;position:static}.c-empty .c-empty-image{content:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA6CAYAAAAHkoFsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABCiSURBVHgB7VtLj2VVFV5rn0tXJ902ktjppgEJ0iRAGgUsiQk/wJGPhBgxxJg4ZqYDRjqXmSMTTRyYGGYOYODE+AiI4RFaIDSgNII8BIzBQDdQdc/eru/71j637IKuOt0VGegJ1H2cffbda+31+Na3dpv9D18+Z/BzL/ztgeJezVrlw+6ju7XW8J21Ev/74GNreF+ae6utlFpiiHsZMRLj4k8tHvcLn6uYI2aL9xXjqtX4HA+55q14P8Rv4YePHL7sB7ZHV5k1urVSaxtClKFhyRYSNPOQqcQfzOUhSugHklSv8eq1hjSx8rEOLcfEg6XGBFAN1sA5+B7ThK4KNyVkj9fCNeZvzFzvngoP4WgrDYvighqFxTZCiFbGWHwbsVESqPK1lgKVSIgh9FZiOBRQugI0c0tB43PlZ/d8vmqtsyx1p2sxZ3CV9p37CxXQnOObkBsbWmH1xt2yOjbIi+3HomND427RW6v42nkDCqBjwNLhH6HPQv+pUFAMbXARTApr2tOdnyW8aefhudxFp7O6XDoExcqrVDMaNELDraM83cpQESwaNtPo5iWUJl+GKcQOx/8GN+dGw/fxeaB6EGagoT28ZmkSPie/azTxlr6o19ji2GvohP6JjY3Fj3ABbiq3daDS4vka30FYrzLnUBGMJuag2dM9sPvQUxgNrKqEWe2p2c8Sfuw+Df+GAuCvGayoBAaxSj+t8dpk2V6pkDpIga7flE+UDJaDy6ocOoxnOabRZaDHSkVWxYePR/jC5TnN03KxtgpEIQOc06kU7DwUYHSPVIBTKORCOLAr8EthfL5qp+M/KcD73IXPtmofn89nqsrYBi/gZ4bkBveGsTZleVf+dqXAijAHJw/rQS432QNiABwizCJdpUIBYfs1LWTU9wwEggJ7eM3SZO15GoENPtlo/hBZPmraTZ/SYCtENyMDuLcRO+9KX9BgSxwAK2lKldzlWrs7wVUKf0dZ4+NLdZYBzpiQw3rh1Q05nvmvNQXDZkJ0RjeA7RcMcw0IU5aVM9lVWAQxY9FfGk7MVQb4PIBCGldBuPHy6t//+U0bI5kMgfowehzasC/ySHxVLsFr7ELce9vG315z2WVv753wkJWmzhjN5Cw7Z9av2lG8tUHhypnFYgeZ+Og4sf3IgM3p7EiN0AJArf6LXF7g8sQJSvNIngOgBTa/1i8KW0SCGDHY2rhc1sEXdbm5iYfquLT6yYWdjJXsnfAnbrjm9o+6d+rUi1+Kff0uBG7KxonYGoVrehmRtgaaiQXSa2NxVQCNtUBtiWAz3zvDQ5q9AR0ZjQQ6M6ZFwYJwrbaEvTTrGGIX11yzP+9MLr81bbFkQPBHmuPeKlUQAQ0DANvkAo0WAMkR81AWuaocai1HxLeR6xn1VAtI1tAJiyT4T1yqBj74wHeMD3uWOkbspqv4YLbi3C1jBHe+EMgA9FIjLA9dGUFZP9MEdr3AdbdiBSbaQtDU06B3HCDADaeIaYZMw2s7r5k7/+ifnr9jKHas5X5RpQXRB3Vc/K0joSj8C86r71W2ItIUjBn9OBbBHI6QlTYsw6XDwk0htECq2+99sfhj24y3i/Kt2LHDwv0AzBjIsFmqfIJRsbE8gOw95aJm0HjgAMKAZYxZxI3Y+l0JH0PviJ+9DUiiCWHTbyu3I0EoLJkbUSs3DWuB7rU+eaSxXqnafcQ9onMnOHGG7FGI3n9x/Nor7tuyjkdffOn178fENwApsRqkAvhf7HNTUQhRWSF2nTR9QA5GRoEXML/A9PbvJHtGFxN0JH7OnGsTblfJyZRGM1bezRInc7PL+1jPZzmjWrynRiE4Exw+eHC4/9yFbLy//BWiP/ACY0cFlHYWC6I7BIUrEWRVOazwD+MqQp1V6HOXMJiDaiPoSojKEFJyAgkkNMfXSSkt8f2U+5172zokxULHRgJD5EWCnmZnjx49embbQvYvzoypKMQOhf3qElKECHF+romvtAzGhMKCqKr2xRo2fJdm/4Wbr7/zw24+/uRzP4+XdbmoiJUqLTBvmTSHH2PC0VMZ5wV7K7muFUQFkj10nvUwwEFiU+mL6E7YI0KjCGOTPfAqXsW6myjNoK4IlaztIuLtkOpo5hmdhc6xtCw89F4hjfVqU2nGIM7B2nU5g1xli5L+84qAe6BWoZia2YLQP+gvHxD8iYURiSsTuog/mBPrBlQD/Mx44GVj3LjYVMfbg2I7zTEBCbF5WZWySFFczfR58nU9W7zHivjuqdOnj5z7S3X0g5ZulySPu3d+IPg/YyxiLcD3I0KiqkE+z7K4V4O7Y3zOu/MBx34dOPVVMUgByYahMhu3JcGLq7r7chMMk2lzh13oQ0rBnhC+qQD4cIWP4xKIBgLTymhPoL4Y44HwQ1jWC8Iywr5GkNfEmvK3m4kls7WLNPvbbr7+Z7bDdfLpP38VLpkpZqBCalJ6hPp671vK4QN2YNs8IcKRpMSg3crYJkUxpIDjCBRfwgfAi4ESQ5ir4PVKYmH+Qk2mdxd5fg8Qnq8Y1/yiqTpzxQxXJphcoJXNzTNHz52lKnoTzeIZlcONmJjIMZFgY5wrSYsrtYrybtAKMwvl2gXCu3jhnWGu1+ODan4WsBTUJrzgSqOx2E3fjrtDqoNSFOBqh68r/6+ir8UbgNCFKZDhxe+OA+MBUmOmQd/YGdsv/vDY0/fHsKtcPHRVR0bbkGlbqE2lEv28JWifIKx4nJqkvq/YXWYmRm68xsAxarrim+3y+O7k1oXEHh9so6XiVAor6QFMZoLn91n1YUlJ65Y2+RYCBuolkoI7Ch+ruzqevKqJYBO8laMKhUfZ2Yi5CaWIevN+5fuqGOwENy4YwNRHNm6UBVgnbrBLiYPOMaBkaPkuKbLUYFM9LCuoYjcR/xDaWlNJS+RLnkThx5CkdhReCEwkBcGMfoZKSG6CqdSFL1pidu6tLN6yAccFqvuWnkiUqCissqwogFfb/MS5C4l21uUmEzcyQ6KHxI2QBof+AzIOnJx231haBQzO4sZVBWA/2rLsnOcj2pcHYqGHsgYXiaQqBZ5Fc2aGZpFlX7dONIq3ZLGuDcoGjGeN2RIMc1uFUJCbaSXDsE141SQZqQkjgOqiBHYVS5a1vXBAIw9QiuU6eEfFkGjvmG7fTrLb4vbbTtxju7weeeLUNxKlJd6nZFRR5y9SMUo6GpP5vxbhAlrD9skVQFwZrhVtv2pHcj/UkIhBlQrNROwwR0hgkmAqh31jVzs/42IxTm7WBKwoLxk6RSBx71tr+aaWnhAvZWSf79h24e1yuEkwB9huo9sRtNAmGYCtyCssLW2UGRDzTqoRDbQrjntWqmuryk8VXa8AFR3RVioKGFwAU4WnwpLe7qnvim1z13aI3UimjTZVjknJ4b1gNudadYY8sUDOOzBFRGj4sHR67jWvaYFNqdNhAsQHILrRlMeFwtMpO0RNX9YDMgJY5fpTz7x45003XnPfgw8++4lLP7X2nZD+UFOl1oVF7TJ2qtyI3RIoSeqsElV9gQNk5TSORJn7bPj86dMvH14sIqYPi3h+E+LS+t56ffnE+voVZ3eRDVfXw48/8yYZSBL2wleyUJKNLTGCgqQoCAhDfKNqT2mU6QuLLcO/FDD9oEpeYQcJRrWNptzZdF/PMQiqN9DH1twJzp8ltubSWhq6QPLbAu3ce+WVh5+ftfPMbuzHtSxNyTB7hmntBCkNyyRoQ0sqjDFA5JYWKNR2qYIg7cV6m1suLYvKcjixj2hsdsfUKMweHwBRtr+b+ELSf+L8yTq2mmxA6GBjY+Smz2xXRe+AdJKL3sruaptaTQxrGROMWASfGQOyHFZDw89sbtj3Pnvjteub7218zW34yRZKLPF9L4lZJbpgbOvtsdLHk8z0zjoJGtYV1+H9iIwSr2Dc2prS4IXw9lidNlboTTuWJ4kUryxrfiYAQmYOK9r30MK96zdf9xtMduut178WLz998tQL6zHvLdluyCRBMxtJJzeb4HTr7LC4MyFLKaTyOEgDgbv2ww/2LV/aXw9wynf55x1O/o93Ns7OF55mbIC7QbwgGKmfLOrIhQOT3LLOffEgQuJCpiOva4vxsW0aNXsg/tyqeCkd51EMlmyijUnSjr1uVyJI2iz5gsq1lGCuz7533aevfut84syv6trq0JAnm5tdSgKQ1qaSdlXVCaeL7Y3Fvbe8ZHuqMzsk8kNjV6xwm5hhmhGrutZPb6ha3DJe5wPCzPftAuHZjItaVTBr7DWJtMnslqQqF0SezbrAxoajD3qWTNDdMfjbfd5nn3352Pvjxl1qy7RsSfI8nwm7svE5kaJlRZnBFB4KP363yapiKDqcUdVVO7OTPLNS3UOPPHkmC5XVAcJeAdLsVAxNZS8/l57ueuqr2a1+Jeb4ZXwO7s6/EvcP9BppSmtEjyhcfUqDlu1x08A6LvbfddNnjrxhF3DNPIqm4tEY9FzkqXIubrvQ15SYkn3uZaqAUPbVoKirIvvc7dmSYDoUkNEeKp8zixoPPqA8ZkIDjixZWbqfnYdVLlj4rNOKyljV6TRjVsS8WbNXHynRxuz+qANWehZQ4ZOEY2+KmKCwdGwKdROaEx+g0po/Amhbyjjxgv8N4bPaShJWS9bBLBZUJfnmmpmQqYcmnvW4MoJqfMSPPHZpyR2YpfX0EO4EOCqhPeHxxA6nhYUE95x67q/o2SEOTa6ByQa1xVmBiOgY2QxCxh2GxTsXcAhRHRpXAKviywVlmYoyBzMgdfJWPt97dWQgkzBJgpNrhdmjTzcqbppMW2rPAichtXgVnVFzuwXfLRWNx3ym6fgeTURssDNtVHFMESvq8o3ZB5JUybXs8WUPPg8NaXfYRBy2NC4S7ZlITu9HCnqzg4C4HyoW38fU2KZGaaa1KWXKwwRmeppzz9jAA495zndilvMV+LrqwCRMbT62Fz8HUmmQGRPDVnHuHKOgZRJKNE+b/DurPzUfkqdSuuQW9XYW6STP4BIvr8Wsr/qAI72eZ12kGZrAwDjCswTOiMiQRO2RjZJVWslCTAGlvjlPeB2uLy3VbHmKyjM6p2JIPIhl6s0KT2ImfXdCcbKAPHuraC7UUFdpHcPK/Z87ce2PbY+vuYcQk05KvxdVCdOrna7KbncR9d3HswK0pLLp8+w2KrwL7QdfF9oaOU6dX0v0XPPgzp5fcwNep5BobVXAg7Ekd6tMMVlMpmVWaKvEnGnCLOtYpbgkUFOBxMia01YNgb2+Zk36u4dPtu0zuFAb9zfRH4ELdZPkg6KvkCpeV0jQtvwzE5XrBAFj8tdVvL29Ek70ik+nllipM21ZnvLhOR4SfUoUPix/dOL48b+cT56LP4omn83jVMQB6fsANiXJTXUUrBMevSTN/n3juTpGdbIwaHjCBTxpz/j6yrh/DIQCMbPpdI6zR6HUVdnBUHBzxeODOy19VqrzZGC72NP3mQXykFDJlgboE36u6vErU/QssOXcDxWoNEgyZCJI4rlsgGbj0voZoTyZrfP7OceQVSZ1ttzcawJzatgkLN2iF5PatfuyXxmEmnRjVny975b4RznReBZDViLBrJOiSVpSK/zHFkxbaowk2LEt1T8tjuTRJbvw6Hlm77a1D6OFKwAKbabdmdJ9dl5cDKzUlv8mR2J0lKas0HRnalqo6dfzRcg75leyPxVMiZrZuWHATbbHl9ELtv9fH339G/7DwlISq4BTAAAAAElFTkSuQmCC\")}.c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}"]
-            },] }
-];
-SdPopupExport.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SdLoadingService },
-    { type: SdExportService },
-    { type: SdNotifyService },
-    { type: SdTranslateService }
-];
-SdPopupExport.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    listGroups: [{ type: ViewChild, args: ['listGroups',] }],
-    export: [{ type: Output }],
-    _gridOption: [{ type: Input, args: ['gridOption',] }],
-    configuration: [{ type: Input }]
-};
-
-var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
-class SdGridConfigurationService {
-    constructor(settingService, gridMaterialConfiguration) {
-        this.settingService = settingService;
-        this.gridMaterialConfiguration = gridMaterialConfiguration;
-        _COLUMNS.set(this, {
-            EDITORVALIDATION: 'sdEditorValidation',
-            EDITOR: 'sdEditor',
-            SUBINFORMATION: 'sdSubInformationAction',
-            COMMAND: 'sdCommand',
-            SELECTION: 'sdSelection',
-            GROUP: 'sdGroup'
-        });
-        _cache.set(this, {});
-        this.init = (key, gridOption) => {
-            if (!__classPrivateFieldGet(this, _cache)[key]) {
-                const subject = new Subject();
-                __classPrivateFieldGet(this, _cache)[key] = {
-                    load: __classPrivateFieldGet(this, _load).call(this, gridOption, subject),
-                    get: __classPrivateFieldGet(this, _get).call(this, gridOption),
-                    set: (configuration) => {
-                        configuration = __classPrivateFieldGet(this, _set).call(this, gridOption, configuration);
-                        subject.next(Object.assign({}, configuration));
-                        return configuration;
-                    },
-                    remove: () => {
-                        __classPrivateFieldGet(this, _remove).call(this, gridOption)();
-                        subject.next(__classPrivateFieldGet(this, _default).call(this, gridOption));
-                    },
-                    observer: subject
-                };
-            }
-            return __classPrivateFieldGet(this, _cache)[key];
-        };
-        _getKey.set(this, (gridOption) => {
-            var _a, _b;
-            const prefix = 'c9e94836-6ace-4aeb-b148-4f0be63589ee';
-            if (!((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.key) && !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
-                return null;
-            }
-            return hash({
-                prefix,
-                key: ((_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.key) || !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)
-            });
-        });
-        _default.set(this, (gridOption) => {
-            var _a;
-            const columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(e => !e.hidden).map(e => ({
-                origin: {
-                    field: e.field,
-                    title: e.title,
-                    width: e.width,
-                    invisible: e.invisible
-                },
-                invisible: e.invisible,
-                fixed: false
-            }))) || [];
-            return {
-                columns
-            };
-        });
-        _load.set(this, (gridOption, subject) => {
-            return () => __awaiter(this, void 0, void 0, function* () {
-                const get = __classPrivateFieldGet(this, _get).call(this, gridOption);
-                const configuration = yield get();
-                subject.next(Object.assign({}, configuration));
-            });
-        });
-        _get.set(this, (gridOption) => {
-            return () => __awaiter(this, void 0, void 0, function* () {
-                const key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
-                if (!key) {
-                    return __classPrivateFieldGet(this, _default).call(this, gridOption);
-                }
-                const { columns, config } = gridOption;
-                let configuration;
-                if ((config === null || config === void 0 ? void 0 : config.storage) === 'server') {
-                    const { get, remove } = this.settingService.createServer(key, {
-                        args: config === null || config === void 0 ? void 0 : config.args
-                    });
-                    configuration = yield get().catch(() => undefined);
-                    if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                        remove().catch(console.error);
-                        return __classPrivateFieldGet(this, _default).call(this, gridOption);
-                    }
-                }
-                else {
-                    const { get, remove } = this.settingService.create(key, {
-                        type: config === null || config === void 0 ? void 0 : config.storage,
-                        args: config === null || config === void 0 ? void 0 : config.args
-                    });
-                    configuration = get();
-                    if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
-                        remove();
-                        return __classPrivateFieldGet(this, _default).call(this, gridOption);
-                    }
-                }
-                configuration.columns = configuration.columns
-                    .filter(column => column.isGeneratedColumn || columns.some(e => !e.hidden && e.field === column.origin.field));
-                // Thêm những column mới vào storage nếu có
-                columns.forEach(column => {
-                    const col = configuration.columns.find(e => { var _a; return ((_a = e.origin) === null || _a === void 0 ? void 0 : _a.field) === column.field; });
-                    if (!col) {
-                        configuration.columns.push({
-                            origin: {
-                                field: column.field,
-                                title: column.title,
-                                width: column.width,
-                                invisible: column.invisible,
-                            },
-                            invisible: column.invisible,
-                            fixed: false
-                        });
-                    }
-                    else {
-                        col.origin = {
-                            field: column.field,
-                            title: column.title,
-                            width: column.width,
-                            invisible: column.invisible
-                        };
-                    }
-                });
-                return configuration;
-            });
-        });
-        _set.set(this, (gridOption, configuration) => {
-            var _a, _b, _c, _d;
-            const key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
-            if (key) {
-                if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
-                    const { set } = this.settingService.createServer(key, {
-                        args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args
-                    });
-                    set(configuration);
-                }
-                else {
-                    const { set } = this.settingService.create(key, {
-                        type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
-                        args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args
-                    });
-                    set(configuration);
-                }
-            }
-            return JSON.parse(JSON.stringify(configuration));
-        });
-        _remove.set(this, (gridOption) => {
-            return () => {
-                var _a, _b, _c, _d;
-                const key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
-                if (key) {
-                    if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
-                        const { remove } = this.settingService.createServer(key, {
-                            args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args
-                        });
-                        remove();
-                    }
-                    else {
-                        const { remove } = this.settingService.create(key, {
-                            type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
-                            args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args
-                        });
-                        remove();
-                    }
-                }
-            };
-        }
-        // get = async (gridOption: SdGridMaterialOption): Promise<SdGridConfiguration> => {
-        //   if (!gridOption?.key) {
-        //     return this.#getDefaultConfiguration(gridOption);
-        //   }
-        //   const { key, columns } = gridOption;
-        //   const configuration: SdGridConfiguration = await this.settingService.get(this.#getKey(key)).catch(() => undefined);
-        //   if (!configuration?.columns) {
-        //     this.settingService.remove(this.#getKey(key)).catch(console.error);
-        //     return this.#getDefaultConfiguration(gridOption);
-        //   }
-        //   configuration.columns = configuration.columns
-        //     .filter(column => columns.some(e => !e.hidden && e.field === column.origin.field));
-        //   // Thêm những column mới vào storage nếu có
-        //   columns.forEach(column => {
-        //     const col = configuration.columns.find(e => e.origin?.field === column.field);
-        //     if (!col) {
-        //       configuration.columns.push({
-        //         origin: {
-        //           field: column.field,
-        //           title: column.title,
-        //           width: column.width,
-        //           invisible: column.invisible,
-        //         },
-        //         invisible: column.invisible,
-        //         fixed: false
-        //       });
-        //     } else {
-        //       col.origin = {
-        //         field: column.field,
-        //         title: column.title,
-        //         width: column.width,
-        //         invisible: column.invisible
-        //       };
-        //     }
-        //   });
-        //   return configuration;
-        // }
-        // set = async (key: string, configuration: SdGridConfiguration): Promise<SdGridConfiguration> => {
-        //   if (key) {
-        //     this.settingService.set(this.#getKey(key), configuration);
-        //   }
-        //   return configuration;
-        // }
-        // remove = (key: string) => {
-        //   if (key) {
-        //     this.settingService.remove(this.#getKey(key));
-        //   }
-        // }
-        );
-        // get = async (gridOption: SdGridMaterialOption): Promise<SdGridConfiguration> => {
-        //   if (!gridOption?.key) {
-        //     return this.#getDefaultConfiguration(gridOption);
-        //   }
-        //   const { key, columns } = gridOption;
-        //   const configuration: SdGridConfiguration = await this.settingService.get(this.#getKey(key)).catch(() => undefined);
-        //   if (!configuration?.columns) {
-        //     this.settingService.remove(this.#getKey(key)).catch(console.error);
-        //     return this.#getDefaultConfiguration(gridOption);
-        //   }
-        //   configuration.columns = configuration.columns
-        //     .filter(column => columns.some(e => !e.hidden && e.field === column.origin.field));
-        //   // Thêm những column mới vào storage nếu có
-        //   columns.forEach(column => {
-        //     const col = configuration.columns.find(e => e.origin?.field === column.field);
-        //     if (!col) {
-        //       configuration.columns.push({
-        //         origin: {
-        //           field: column.field,
-        //           title: column.title,
-        //           width: column.width,
-        //           invisible: column.invisible,
-        //         },
-        //         invisible: column.invisible,
-        //         fixed: false
-        //       });
-        //     } else {
-        //       col.origin = {
-        //         field: column.field,
-        //         title: column.title,
-        //         width: column.width,
-        //         invisible: column.invisible
-        //       };
-        //     }
-        //   });
-        //   return configuration;
-        // }
-        // set = async (key: string, configuration: SdGridConfiguration): Promise<SdGridConfiguration> => {
-        //   if (key) {
-        //     this.settingService.set(this.#getKey(key), configuration);
-        //   }
-        //   return configuration;
-        // }
-        // remove = (key: string) => {
-        //   if (key) {
-        //     this.settingService.remove(this.#getKey(key));
-        //   }
-        // }
-        this.generateConfigurationResult = (configuration, gridOption, sdSubInformation) => {
-            var _a, _b;
-            const result = {
-                column: {},
-                fixedColumn: {},
-                firstColumns: [],
-                secondColumns: [],
-                firstHeaders: [],
-                secondHeaders: [],
-                displayedColumns: [],
-                displayedFooters: [],
-                multipleHeader: false
-            };
-            const { selection, commands, editor, group } = gridOption || {};
-            if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && ((editor === null || editor === void 0 ? void 0 : editor.removable) || typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function' || !(editor === null || editor === void 0 ? void 0 : editor.disabled)))
-                || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function' || !(editor === null || editor === void 0 ? void 0 : editor.disabled)))) {
-                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).EDITORVALIDATION);
-                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).EDITORVALIDATION);
-            }
-            if (selection === null || selection === void 0 ? void 0 : selection.visible) {
-                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
-                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
-            }
-            if (!(editor === null || editor === void 0 ? void 0 : editor.hidden)) {
-                if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && ((editor === null || editor === void 0 ? void 0 : editor.removable) || typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function' || !(editor === null || editor === void 0 ? void 0 : editor.disabled)))
-                    || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function' || !(editor === null || editor === void 0 ? void 0 : editor.disabled)))
-                    || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'popup' && (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function' || !(editor === null || editor === void 0 ? void 0 : editor.disabled)))) {
-                    result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
-                    result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).EDITOR);
-                }
-            }
-            if (commands === null || commands === void 0 ? void 0 : commands.length) {
-                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
-                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).COMMAND);
-            }
-            if ((_a = group === null || group === void 0 ? void 0 : group.fields) === null || _a === void 0 ? void 0 : _a.length) {
-                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).GROUP);
-                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).GROUP);
-            }
-            (_b = configuration === null || configuration === void 0 ? void 0 : configuration.columns) === null || _b === void 0 ? void 0 : _b.filter(col => !col.invisible).forEach(col => {
-                var _a;
-                if (col.isGeneratedColumn) {
-                    result.column[col.origin.field] = {
-                        title: col.title || col.origin.title,
-                        width: col.width || col.origin.width,
-                    };
-                    if (col.fixed) {
-                        result.fixedColumn[col.origin.field] = {
-                            title: col.title || col.origin.title,
-                            width: col.width || col.origin.width,
-                        };
-                    }
-                    const generatedColumn = {
-                        type: 'children',
-                        field: col.origin.field,
-                        title: col.origin.title,
-                        children: []
-                    };
-                    for (const subColumn of gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns.filter(e1 => col.generatedColumns.includes(e1.field))) {
-                        if (subColumn.type === 'children' || subColumn.type === 'children-col') {
-                            for (const childColumn of subColumn.children) {
-                                generatedColumn.children.push(Object.assign(Object.assign({}, childColumn), { colSpan: 2 }));
-                            }
-                        }
-                        else {
-                            generatedColumn.children.push(Object.assign(Object.assign({}, subColumn), { colSpan: 2 }));
-                        }
-                    }
-                    result.firstColumns.push(Object.assign(Object.assign({}, generatedColumn), { title: col.title || col.origin.title, width: col.width || col.origin.width }));
-                    result.firstHeaders.push(col.origin.field);
-                    result.displayedColumns.push(col.origin.field);
-                    return;
-                }
-                const column = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns.find(e => e.field === col.origin.field);
-                if (column) {
-                    result.column[col.origin.field] = {
-                        title: col.title || col.origin.title,
-                        width: col.width || col.origin.width,
-                    };
-                    if (col.fixed) {
-                        result.fixedColumn[col.origin.field] = {
-                            title: col.title || col.origin.title,
-                            width: col.width || col.origin.width,
-                        };
-                    }
-                    result.firstColumns.push(Object.assign(Object.assign({}, column), { title: col.title || col.origin.title, width: col.width || col.origin.width }));
-                    result.firstHeaders.push(col.origin.field);
-                    if (column.type === 'children-col') {
-                        (_a = column.children) === null || _a === void 0 ? void 0 : _a.forEach(childColumn => {
-                            result.secondColumns.push(childColumn);
-                            result.secondHeaders.push(childColumn.field);
-                            result.displayedColumns.push(childColumn.field);
-                        });
-                    }
-                    else {
-                        result.displayedColumns.push(col.origin.field);
-                    }
-                }
-            });
-            if (sdSubInformation === null || sdSubInformation === void 0 ? void 0 : sdSubInformation.templateRef) {
-                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SUBINFORMATION);
-                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SUBINFORMATION);
-            }
-            result.multipleHeader = result.secondHeaders.length > 0;
-            // Sub infomation không thể có footer
-            result.displayedFooters = result.displayedColumns.filter(val => val !== __classPrivateFieldGet(this, _COLUMNS).SUBINFORMATION);
-            return result;
-        };
-    }
-}
-_COLUMNS = new WeakMap(), _cache = new WeakMap(), _getKey = new WeakMap(), _default = new WeakMap(), _load = new WeakMap(), _get = new WeakMap(), _set = new WeakMap(), _remove = new WeakMap();
-SdGridConfigurationService.decorators = [
-    { type: Injectable }
-];
-SdGridConfigurationService.ctorParameters = () => [
-    { type: SdSettingService },
-    { type: undefined, decorators: [{ type: Inject, args: [GRID_MATERIAL_CONFIG,] }, { type: Optional }] }
-];
-
-var _prefix$1, _cache$1;
-class SdColumnValuesPipe {
-    constructor() {
-        _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
-        _cache$1.set(this, {});
-        this.transform = (value, column) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e;
-            if (column.type !== 'values' || !((_a = column.option) === null || _a === void 0 ? void 0 : _a.items) || !((_b = column.option) === null || _b === void 0 ? void 0 : _b.valueField) || !((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayField)) {
-                return value;
-            }
-            const _f = column.option, { items, valueField, displayField } = _f, remain = __rest(_f, ["items", "valueField", "displayField"]);
-            const key = hash({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                valueField,
-                displayField,
-                remain,
-                value
-            });
-            if (typeof (items) === 'function') {
-                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
-                    const values = yield items(value, true);
-                    __classPrivateFieldGet(this, _cache$1)[key] = {
-                        result: ((_d = values === null || values === void 0 ? void 0 : values.find(e => (e === null || e === void 0 ? void 0 : e[valueField]) === value)) === null || _d === void 0 ? void 0 : _d[displayField]) || value
-                    };
-                }
-            }
-            else {
-                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
-                    __classPrivateFieldGet(this, _cache$1)[key] = {
-                        result: ((_e = items === null || items === void 0 ? void 0 : items.find(e => (e === null || e === void 0 ? void 0 : e[valueField]) === value)) === null || _e === void 0 ? void 0 : _e[displayField]) || value
-                    };
-                }
-            }
-            return __classPrivateFieldGet(this, _cache$1)[key].result;
-        });
-    }
-}
-_prefix$1 = new WeakMap(), _cache$1 = new WeakMap();
-SdColumnValuesPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnValues'
-            },] }
-];
-
-const CalculateSdId = (item) => {
-    const { sdId, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, sdGroup, selectable, actions, groupedActions, originItem, editorErrorMessage, editorHandlerRow } = item, remain = __rest(item, ["sdId", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "sdGroup", "selectable", "actions", "groupedActions", "originItem", "editorErrorMessage", "editorHandlerRow"]);
-    return hash(remain);
-};
-
-var _visible;
-class SdEditorHandlerColumnPipe {
-    constructor(zone) {
-        this.zone = zone;
-        _visible.set(this, (col, item) => {
-            if (col.type === 'children' || col.type === 'children-col') {
-                return false;
-            }
-            // Kiểm tra xem có bị disabled hay không?
-            if (col.editor) {
-                const isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
-                if (isDisabled) {
-                    return false;
-                }
-            }
-            return true;
-        });
-    }
-    transform(value, item, gridOption) {
-        const key = CalculateSdId(item);
-        if (item.sdId === key && item.editorHandlerColumn) {
-            return true;
-        }
-        item.editorHandlerColumn = item.editorHandlerColumn || {};
-        const { columns } = gridOption;
-        for (const col of columns) {
-            if (col.type === 'children-col') {
-                for (const childCol of col.children) {
-                    item.editorHandlerColumn[childCol.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[childCol.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, childCol, item) });
-                }
-            }
-            else {
-                item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, col, item) });
-            }
-        }
-        this.zone.run(() => {
-            item.sdId = CalculateSdId(item);
-        });
-        item.sdId = key;
-        return true;
-    }
-}
-_visible = new WeakMap();
-SdEditorHandlerColumnPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdEditorHandlerColumn'
-            },] },
-    { type: Injectable }
-];
-SdEditorHandlerColumnPipe.ctorParameters = () => [
-    { type: NgZone }
-];
-
-var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
-class SdGridMaterial {
-    constructor(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, columnValuesPipe, editorHandlerColumnPipe) {
-        this.ref = ref;
-        this.configuration = configuration;
-        this.gridConfigurationService = gridConfigurationService;
-        this.exportService = exportService;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.columnValuesPipe = columnValuesPipe;
-        this.editorHandlerColumnPipe = editorHandlerColumnPipe;
-        this.key = v4();
-        this.localItems = [];
-        this.items = [];
-        this.selectedItems = [];
-        // Loading
-        this.isLoading = false;
-        // Paginate
-        this.isHiddenPaginator = false;
-        _paginator.set(this, void 0);
-        // Sorting
-        _sort.set(this, void 0);
-        // Cell Def
-        this.sdCellDefs = new QueryList();
-        this.cellDef = {};
-        // Footer Def
-        this.sdFooterDefs = new QueryList();
-        this.footerDef = {};
-        this.hasFooter = false;
-        // Filter Def
-        this.sdFilterDefs = new QueryList();
-        this.filterDefs = [];
-        // Filter
-        this.columnFilter = {};
-        // Subcription
-        _subscription$1.set(this, new Subscription());
-        _optionChanges.set(this, new EventEmitter());
-        this.isExporting = false;
-        this.isSelectAll = false;
-        this.exportTitle = 'Export';
-        _initCellDef.set(this, () => {
-            this.cellDef = {};
-            for (const cellDef of this.sdCellDefs) {
-                if (cellDef.sdMaterialCellDef) {
-                    this.cellDef[cellDef.sdMaterialCellDef] = cellDef;
-                }
-            }
-        });
-        _initFilterDef.set(this, () => {
-            this.filterDefs = [];
-            for (const filterDef of this.sdFilterDefs) {
-                this.filterDefs.push(filterDef);
-            }
-        });
-        _initFooterDef.set(this, () => {
-            this.footerDef = {};
-            this.hasFooter = false;
-            for (const footerDef of this.sdFooterDefs) {
-                if (footerDef.sdMaterialFooterDef) {
-                    this.hasFooter = true;
-                    this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
-                }
-            }
-        });
-        _filterExportInfo.set(this, (pageNumber, pageSize) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return {
-                rawColumnFilter: (((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) ? this.columnFilter : (_c = this.gridFilter) === null || _c === void 0 ? void 0 : _c.columnFilter) || {},
-                rawExternalFilter: ((_d = this.gridFilter) === null || _d === void 0 ? void 0 : _d.externalFilter) || {},
-                rawFilterDef: ((_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.filterDef) || {},
-                orderBy: ((_f = __classPrivateFieldGet(this, _sort)) === null || _f === void 0 ? void 0 : _f.active) || '',
-                orderDirection: ((_g = __classPrivateFieldGet(this, _sort)) === null || _g === void 0 ? void 0 : _g.direction) || '',
-                pageNumber,
-                pageSize,
-                isExported: true
-            };
-        });
-        _initConfiguration.set(this, (option) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            option.paginate = {
-                hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
-                pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = this.configuration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
-                pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
-                showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false
-            };
-            return option;
-        });
-        _filterLocal.set(this, (localItems, filterInfo) => {
-            const { columns } = this.gridOption;
-            const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
-            const items = localItems.filter(item => {
-                var _a, _b, _c, _d;
-                for (const column of columns) {
-                    const { field, type } = column;
-                    const filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
-                    const columnValue = (item[field] || '').toString().trim().toLowerCase();
-                    if (filterValue) {
-                        if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
-                            return false;
-                        }
-                        if (type === 'string') {
-                            if (columnValue.indexOf(filterValue) === -1) {
-                                return false;
-                            }
-                        }
-                        else if (type === 'values') {
-                            if (columnValue !== filterValue) {
-                                return false;
-                            }
-                        }
-                        else if (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 (type === 'bool') {
-                            if (filterValue === '1' && columnValue !== '1' && columnValue !== 'true') {
-                                return false;
-                            }
-                            else if (filterValue === '0' && columnValue !== '0' && columnValue !== 'false') {
-                                return false;
-                            }
-                        }
-                        else if (type === 'datetime' || type === 'date' || type === 'time') {
-                            const from = (_b = (_a = rawColumnFilter[field]) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : rawColumnFilter[field];
-                            const to = (_d = (_c = rawColumnFilter[field]) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : rawColumnFilter[field];
-                            const fromDate = Date.begin(from);
-                            const toDate = Date.end(to);
-                            if (fromDate && toDate) {
-                                if (!columnValue) {
-                                    return false;
-                                }
-                                if (new Date(columnValue).getTime() < fromDate.getTime() || new Date(columnValue).getTime() >= toDate.getTime()) {
-                                    return false;
-                                }
-                            }
-                        }
-                    }
-                }
-                return true;
-            });
-            // Sort
-            if (orderBy && orderDirection) {
-                const column = columns.find(e => e.field === 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 (orderDirection === 'desc') {
-                        items.reverse();
-                    }
-                }
-            }
-            return {
-                items: items.filter((item, index) => {
-                    return index >= pageNumber * pageSize
-                        && index < (pageNumber + 1) * pageSize;
-                }),
-                total: items.length
-            };
-        });
-        _getFilter.set(this, () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return ({
-                rawColumnFilter: (((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) ? this.columnFilter : (_c = this.gridFilter) === null || _c === void 0 ? void 0 : _c.columnFilter) || {},
-                rawExternalFilter: ((_d = this.gridFilter) === null || _d === void 0 ? void 0 : _d.externalFilter) || {},
-                rawFilterDef: ((_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.filterDef) || {},
-                orderBy: ((_f = __classPrivateFieldGet(this, _sort)) === null || _f === void 0 ? void 0 : _f.active) || '',
-                orderDirection: ((_g = __classPrivateFieldGet(this, _sort)) === null || _g === void 0 ? void 0 : _g.direction) || '',
-                pageNumber: ((_h = __classPrivateFieldGet(this, _paginator)) === null || _h === void 0 ? void 0 : _h.pageIndex) || 0,
-                pageSize: ((_j = __classPrivateFieldGet(this, _paginator)) === null || _j === void 0 ? void 0 : _j.pageSize) || ((_l = (_k = this.gridOption) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pageSize) || 50
-            });
-        });
-        _load$1.set(this, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
-            this.isLoading = true;
-            try {
-                if (this.gridOption.type === 'server') {
-                    let result = this.gridOption.items(filterReq);
-                    if (isObservable(result)) {
-                        result = result.toPromise();
-                    }
-                    return yield result;
-                }
-                else {
-                    if (force) {
-                        const results = this.gridOption.items();
-                        if (results instanceof Promise) {
-                            this.localItems = yield results;
-                        }
-                        else {
-                            this.localItems = results;
-                        }
-                    }
-                    return __classPrivateFieldGet(this, _filterLocal).call(this, this.localItems, filterReq);
-                }
-            }
-            catch (error) {
-                this.notifyService.handle.error(error);
-            }
-            finally {
-                this.isLoading = false;
-                this.ref.detectChanges();
-            }
-        }));
-        _render.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
-            this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
-            // this.isHiddenPaginator = this.filterInfo.pageNumber === 0 && this.total <= this.filterInfo.pageSize;
-            this.items.forEach((item) => {
-                item.originItem = Object.assign({}, item);
-            });
-            yield ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items));
-            this.isSelectAll = this.items.every(e => e.isSelected);
-            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-        }));
-        this.reload = (force = true) => __awaiter(this, void 0, void 0, function* () {
-            var _d;
-            const data = yield __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force);
-            (_d = this.sdScroll) === null || _d === void 0 ? void 0 : _d.scrollTop();
-            __classPrivateFieldGet(this, _render).call(this, data);
-        });
-        _exportedItems.set(this, (pageNumber = 0, pageSize = 10000) => __awaiter(this, void 0, void 0, function* () {
-            var _e, _f;
-            if ((_e = this.gridOption.export) === null || _e === void 0 ? void 0 : _e.items) {
-                // const exportedItems = this.gridOption.export?.items(this.#filterExportInfo(pageNumber, pageSize));
-                let result = (_f = this.gridOption.export) === null || _f === void 0 ? void 0 : _f.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
-                if (Array.isArray(result)) {
-                    return result;
-                }
-                if (isObservable(result)) {
-                    result = result.toPromise();
-                }
-                if (isObservable(result)) {
-                    result = result.toPromise();
-                }
-                return yield result;
-            }
-            else {
-                const filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
-                if (this.gridOption.type === 'server') {
-                    let result = this.gridOption.items(filterInfo);
-                    if (isObservable(result)) {
-                        result = result.toPromise();
-                    }
-                    return yield result;
-                }
-                else {
-                    let exportedItems = [];
-                    if (typeof (this.gridOption.items) === 'function') {
-                        const results = this.gridOption.items();
-                        if (results instanceof Promise) {
-                            exportedItems = yield results;
-                        }
-                        else {
-                            exportedItems = results;
-                        }
-                    }
-                    else {
-                        exportedItems = this.gridOption.items;
-                    }
-                    return __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo);
-                }
-            }
-        }));
-        _allColumns.set(this, () => {
-            const columns = [];
-            this.gridOption.columns.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(column => {
-                var _a, _b;
-                if (column.type === 'image') {
-                    return;
-                }
-                if (column.type === 'children') {
-                    (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                        if (childColumn.type === 'image') {
-                            return;
-                        }
-                        columns.push(childColumn);
-                    });
-                    return;
-                }
-                if (column.type === 'children-col') {
-                    (_b = column.children) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(childColumn => {
-                        if (childColumn.type === 'image') {
-                            return;
-                        }
-                        columns.push(childColumn);
-                    });
-                    return;
-                }
-                columns.push(column);
-            });
-            return columns;
-        });
-        _allExportedColumns.set(this, () => {
-            var _a, _b;
-            return ((_b = (_a = this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
-        });
-        _onExport.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
-            var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-            try {
-                const { file, isCSV, isRaw } = args;
-                let { columns } = args;
-                const pageSize = ((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.maxItemsPerRequest) || 1000;
-                const batch = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.batch) || 1;
-                let total = this.total;
-                let pageNumber = 0;
-                let exportItems = [];
-                this.isExporting = true;
-                const items = [];
-                let promises = [];
-                const handleData = () => __awaiter(this, void 0, void 0, function* () {
-                    var _u;
-                    const results = yield Promise.all(promises);
-                    promises = [];
-                    exportItems = [];
-                    for (const result of results) {
-                        if ('items' in result) {
-                            exportItems = [...exportItems, ...result.items];
-                            total = result.total;
-                        }
-                        else {
-                            exportItems = [...exportItems, ...result];
-                        }
-                    }
-                    if ((_u = this.gridOption.export) === null || _u === void 0 ? void 0 : _u.mapping) {
-                        const results = this.gridOption.export.mapping(exportItems);
-                        if (results instanceof Promise) {
-                            exportItems = yield results;
-                        }
-                        else {
-                            exportItems = results;
-                        }
-                    }
-                    const totalPage = total / pageSize;
-                    const percent = Math.round((pageNumber - 1) * 100.0 / totalPage);
-                    this.exportTitle = `Exporting...${percent}%`;
-                    const allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
-                    const allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
-                    for (const item of exportItems) {
-                        const obj = {};
-                        const handle = (exportColumn) => __awaiter(this, void 0, void 0, function* () {
-                            var _v, _w;
-                            obj[exportColumn.field] = item[exportColumn.field];
-                            const column = allColumns.find(e => e.field === exportColumn.field);
-                            const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
-                            if (exportedColumn === null || exportedColumn === void 0 ? void 0 : exportedColumn.transform) {
-                                obj[exportedColumn.field] = exportedColumn.transform(item[exportedColumn.field], item);
-                                return;
-                            }
-                            if (!column) {
-                                return;
-                            }
-                            if (column.type === 'children' || column.type === 'children-col') {
-                                column === null || column === void 0 ? void 0 : column.children.forEach(childColumn => handle(childColumn));
-                                return;
-                            }
-                            if (!columns.some(e => e.field === column.field)) {
-                                return;
-                            }
-                            if (column.transform) {
-                                const transform = column.transform(item[column.field], item);
-                                if (transform instanceof Promise) {
-                                    obj[column.field] = yield transform;
-                                }
-                                else {
-                                    obj[column.field] = transform;
-                                }
-                            }
-                            else if (item[column.field] === undefined || item[column.field] === null || item[column.field] === '') {
-                                obj[column.field] = '';
-                            }
-                            else if (column.type === 'string' || column.type === 'number') {
-                                // 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] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnTrue) || 'True';
-                                }
-                                else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                    obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnFalse) || 'False';
-                                }
-                            }
-                            else if (column.type === 'date') {
-                                let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
-                                // Nếu là date thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
-                            }
-                            else if (column.type === 'datetime') {
-                                let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
-                                // Nếu là datetime thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
-                            }
-                            else if (column.type === 'time') {
-                                let date = item[column.field];
-                                const { transformDate } = column;
-                                if (transformDate) {
-                                    date = transformDate(date, item);
-                                }
-                                // Nếu là time thì convert theo đúng format
-                                obj[column.field] = Date.toFormat(date, 'HH:mm');
-                            }
-                            else if (column.type === 'values') {
-                                // Nếu là values thì lấy giá trị của value được chọn
-                                obj[column.field] = yield this.columnValuesPipe.transform(item[column.field], column);
-                            }
-                            else {
-                                obj[column.field] = item[column.field];
-                            }
-                        });
-                        // this.gridOption.columns.forEach(handle);
-                        for (const exportColumn of columns) {
-                            yield handle(exportColumn);
-                        }
-                        items.push(obj);
-                    }
-                });
-                while (pageNumber * pageSize < total) {
-                    promises.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber, pageSize));
-                    pageNumber++;
-                    if (promises.length < batch) {
-                        continue;
-                    }
-                    yield handleData();
-                }
-                if (promises.length > 0) {
-                    yield handleData();
-                }
-                if (!(file === null || file === void 0 ? void 0 : file.filePath)) {
-                    if (isCSV) {
-                        yield this.exportService.exportCSV({
-                            columns,
-                            items,
-                            fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName
-                        });
-                        return;
-                    }
-                    if (isRaw) {
-                        yield this.exportService.exportExcelRaw({
-                            columns,
-                            items,
-                            fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName
-                        });
-                        return;
-                    }
-                    const sheets = [];
-                    if (Array.isArray((_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) {
-                        for (const sheet of this.gridOption.export.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
-                                    });
-                                }
-                            }
-                        }
-                    }
-                    yield this.exportService.export({
-                        columns,
-                        items,
-                        fileName: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
-                        sheets
-                    });
-                    return;
-                }
-                yield this.exportService.exportByTemplate({
-                    filePath: file.filePath,
-                    fileName: file.fileName,
-                    columns,
-                    items
-                });
-            }
-            finally {
-                this.isExporting = false;
-                this.exportTitle = `Export`;
-                this.ref.detectChanges();
-            }
-        }));
-        this.onExport = (args) => __awaiter(this, void 0, void 0, function* () {
-            const { translate } = this.translateService;
-            if (!args.isCSV && this.gridOption.export.max && this.total > this.gridOption.export.max) {
-                args.isRaw = true;
-                __classPrivateFieldGet(this, _onExport).call(this, args);
-                // this.notifyService.confirm(translate(`Total rows reach limit, do you want to export CSV`)).then(() => {
-                //   args.isCSV = true;
-                //   this.#onExport(args);
-                // });
-                return;
-            }
-            __classPrivateFieldGet(this, _onExport).call(this, args);
-        });
-        this.onFilterChange = () => {
-            __classPrivateFieldGet(this, _paginator).pageIndex = 0;
-            this.reload(false);
-        };
-        this.onExpand = (rowData) => __awaiter(this, void 0, void 0, function* () {
-            var _x, _y, _z, _0, _1;
-            if ((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.always) {
-                return;
-            }
-            if (rowData.isExpanding) {
-                return;
-            }
-            if (rowData.isExpanded) {
-                rowData.isExpanded = false;
-                return;
-            }
-            const data = (_0 = (_z = (_y = this.gridOption) === null || _y === void 0 ? void 0 : _y.subInformation) === null || _z === void 0 ? void 0 : _z.onExpand) === null || _0 === void 0 ? void 0 : _0.call(_z, rowData);
-            if (!((_1 = this.gridOption.subInformation) === null || _1 === void 0 ? void 0 : _1.multiple)) {
-                this.items.forEach(item => item.isExpanding = item.isExpanded = false);
-            }
-            if (data instanceof Promise) {
-                rowData.isExpanding = true;
-                data.then(res => {
-                    rowData.expandDetail = res;
-                    rowData.isExpanded = true;
-                }).finally(() => rowData.isExpanding = false);
-            }
-            else {
-                rowData.expandDetail = data;
-                rowData.isExpanded = true;
-            }
-        });
-        this.onSelect = (rowData) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if ((_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) {
-                (_c = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _c === void 0 ? void 0 : _c.items.forEach(e => e.isSelected = rowData.isSelected);
-                (_e = (_d = this.gridOption.selection) === null || _d === void 0 ? void 0 : _d.onSelect) === null || _e === void 0 ? void 0 : _e.call(_d, rowData, this.items.filter(e => e.isSelected));
-                this.isSelectAll = this.items.every(e => e.isSelected);
-                __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-            }
-            else {
-                if ((_f = this.gridOption.selection) === null || _f === void 0 ? void 0 : _f.single) {
-                    this.items.filter(e => e !== rowData).forEach(e => e.isSelected = false);
-                    __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-                    return;
-                }
-                (_h = (_g = this.gridOption.selection) === null || _g === void 0 ? void 0 : _g.onSelect) === null || _h === void 0 ? void 0 : _h.call(_g, rowData, this.items.filter(e => e.isSelected));
-                this.isSelectAll = this.items.every(e => e.isSelected);
-                __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-            }
-        };
-        this.onSelectAll = () => {
-            var _a, _b, _c;
-            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach(e => {
-                var _a, _b, _c, _d;
-                if (e.selectable && (!((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.actions) === null || _d === void 0 ? void 0 : _d.length))) {
-                    e.isSelected = this.isSelectAll;
-                }
-            });
-            (_c = (_b = this.gridOption.selection) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, this.items.filter(e => e.isSelected));
-            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-        };
-        this.onClearSelection = (items) => {
-            items = items || this.items;
-            this.isSelectAll = false;
-            items === null || items === void 0 ? void 0 : items.forEach(e => e.isSelected = false);
-            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
-        };
-        _updateSelectedItems.set(this, () => {
-            this.selectedItems = this.items.filter(item => item.isSelected)
-                .map(item => {
-                const { isSelected, isExpanded, isExpanding, expandDetail, editorErrorMessage, editorHandlerColumn, editorHandlerRow, editorStatus, originItem, sdId, sdVersion } = item, 
-                // Giữ lại các trường thông tin cho selectable (action, groupedAction, sdGroup, selectable)
-                result = __rest(item, ["isSelected", "isExpanded", "isExpanding", "expandDetail", "editorErrorMessage", "editorHandlerColumn", "editorHandlerRow", "editorStatus", "originItem", "sdId", "sdVersion"]);
-                return result;
-            });
-            this.ref.detectChanges();
-        });
-        this.clearFilter = () => {
-            var _a;
-            (_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.onClearFilter();
-        };
-        this.setFilter = (args) => {
-            var _a;
-            (_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.setFilter(args);
-        };
-        this.onCreate = () => {
-            var _a, _b;
-            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;
-                }
-            });
-            if (type === 'local') {
-                (_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item, this.localItems);
-            }
-            else {
-                (_b = editor.onAdd) === null || _b === void 0 ? void 0 : _b.call(editor, item, this.items);
-            }
-            // Đưa item lên dòng đầu tiên nếu type khác popup
-            if (editor.type !== 'popup') {
-                if (editor.addToLast) {
-                    if (type === 'local') {
-                        this.localItems = [...this.localItems, item];
-                    }
-                    this.items = [...this.items, item];
-                }
-                else {
-                    if (type === 'local') {
-                        this.localItems = [item, ...this.localItems];
-                    }
-                    this.items = [item, ...this.items];
-                }
-            }
-            item.editorStatus = 'create';
-            item.editorHandlerRow = {
-                temporary: Object.assign({}, item)
-            };
-        };
-        this.onUpdate = (item) => {
-            const { editor } = this.gridOption;
-            item.editorStatus = 'update';
-            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { temporary: Object.assign({}, item) });
-            // this.generateEditorHanlder(item);
-            if (editor.type === 'popup') {
-                // Xử lý case popup
-                // this.sdGridPopupEditor.open(item, columns, isModified);
-            }
-            this.ref.detectChanges();
-        };
-        this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
-            if (item.editorHandlerRow.saving) {
-                return;
-            }
-            const { editor } = this.gridOption;
-            try {
-                item.editorHandlerRow.saving = true;
-                if (editor.validate) {
-                    const result = editor.validate(item, this.items.indexOf(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.editorStatus === 'create' && editor.type === 'popup') {
-                    if (this.gridOption.type === 'local') {
-                        this.items.splice(0, 0, item);
-                    }
-                    // this.viewItems.splice(0, 0, item);
-                }
-                item.editorStatus = undefined;
-                // this.generateEditorHanlder(item);
-            }
-            catch (err) {
-                this.notifyService.notify.warning(err);
-            }
-            finally {
-                item.editorHandlerRow.saving = false;
-                this.ref.detectChanges();
-            }
-        });
-        this.onCancel = (item) => {
-            var _a, _b;
-            const { editor } = this.gridOption;
-            if (editor.type === 'inline') {
-                if (this.gridOption.type === 'local') {
-                    const idx2 = this.localItems.indexOf(item);
-                    this.localItems.splice(idx2, 1);
-                    this.localItems = [...this.localItems];
-                }
-                const idx1 = this.items.indexOf(item);
-                this.items.splice(idx1, 1);
-                this.items = [...this.items];
-                if (this.gridOption.type === 'local') {
-                    (_a = editor === null || editor === void 0 ? void 0 : editor.onCancel) === null || _a === void 0 ? void 0 : _a.call(editor, item, this.localItems);
-                }
-                else {
-                    (_b = editor === null || editor === void 0 ? void 0 : editor.onCancel) === null || _b === void 0 ? void 0 : _b.call(editor, item, this.items);
-                }
-                this.ref.detectChanges();
-                return;
-            }
-            if (editor.type === 'focus') {
-                if (item.editorStatus === 'create') {
-                    if (this.gridOption.type === 'local') {
-                        const idx2 = this.localItems.indexOf(item);
-                        this.localItems.splice(idx2, 1);
-                        this.localItems = [...this.localItems];
-                    }
-                    const idx1 = this.items.indexOf(item);
-                    this.items.splice(idx1, 1);
-                    this.items = [...this.items];
-                }
-                else {
-                    Object.assign(item, item.editorHandlerRow.temporary);
-                }
-            }
-            item.editorStatus = undefined;
-            this.ref.detectChanges();
-        };
-        this.onRemove = (item) => {
-            var _a, _b;
-            const { editor } = this.gridOption;
-            if (editor.type === 'inline') {
-                if (this.gridOption.type === 'local') {
-                    const idx2 = this.localItems.indexOf(item);
-                    this.localItems.splice(idx2, 1);
-                    this.localItems = [...this.localItems];
-                }
-                const idx1 = this.items.indexOf(item);
-                this.items.splice(idx1, 1);
-                this.items = [...this.items];
-                if (this.gridOption.type === 'local') {
-                    (_a = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _a === void 0 ? void 0 : _a.call(editor, item, this.localItems);
-                }
-                else {
-                    (_b = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _b === void 0 ? void 0 : _b.call(editor, item, this.items);
-                }
-                this.ref.detectChanges();
-                return;
-            }
-        };
-        this.add = (idx, item) => {
-            if (this.items.length > idx) {
-                this.items.splice(idx, 0, item);
-                this.items = [...this.items];
-            }
-            else {
-                this.items = [...this.items, item];
-            }
-        };
-        this.update = (idx, item) => {
-            if (this.items[idx]) {
-                Object.assign(this.items[idx], item);
-                this.items = [...this.items];
-            }
-        };
-        this.remove = (idx) => {
-            if (this.items[idx]) {
-                this.items.splice(idx, 1);
-                this.items = [...this.items];
-            }
-        };
-        this.refreshItem = (idx) => {
-            const item = this.items[idx];
-            this.editorHandlerColumnPipe.transform(item.sdVersion, item, this.gridOption);
-        };
-        this.detectChanges = () => this.ref.detectChanges();
-    }
-    set _gridFilter(gridFilter) {
-        if (gridFilter && this.gridFilter !== gridFilter) {
-            this.gridFilter = gridFilter;
-            __classPrivateFieldGet(this, _subscription$1).add(gridFilter.filterChange.pipe(debounceTime(200), map(() => {
-                __classPrivateFieldGet(this, _paginator).pageIndex = 0;
-                return __classPrivateFieldGet(this, _getFilter).call(this);
-            }), switchMap(filterInfo => __classPrivateFieldGet(this, _load$1).call(this, filterInfo, false))).subscribe(__classPrivateFieldGet(this, _render)));
-        }
-    }
-    set option(option) {
-        var _a;
-        if (option) {
-            option = __classPrivateFieldGet(this, _initConfiguration).call(this, option);
-            this.gridOption = option;
-            __classPrivateFieldGet(this, _optionChanges).emit();
-            (_a = option === null || option === void 0 ? void 0 : option.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
-                var _a;
-                if ((_a = col.filter) === null || _a === void 0 ? void 0 : _a.default) {
-                    this.columnFilter[col.field] = col.filter.default;
-                }
-            });
-            const configuration = this.gridConfigurationService.init(this.key, this.gridOption);
-            this.gridConfigurationObserver = configuration.observer;
-            configuration.load();
-        }
-    }
-    set paginator(paginator) {
-        if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
-            __classPrivateFieldSet(this, _paginator, paginator);
-            __classPrivateFieldGet(this, _subscription$1).add(paginator.page.pipe(debounceTime(200), map(__classPrivateFieldGet(this, _getFilter)), switchMap(filterInfo => __classPrivateFieldGet(this, _load$1).call(this, filterInfo, false))).subscribe(__classPrivateFieldGet(this, _render)));
-        }
-    }
-    set sort(sort) {
-        if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
-            __classPrivateFieldSet(this, _sort, sort);
-            __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange.pipe(debounceTime(200), map(__classPrivateFieldGet(this, _getFilter)), switchMap(filterInfo => __classPrivateFieldGet(this, _load$1).call(this, filterInfo, false))).subscribe(__classPrivateFieldGet(this, _render)));
-        }
-    }
-    ngOnInit() {
-        __classPrivateFieldGet(this, _initCellDef).call(this);
-    }
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription$1).add(this.sdCellDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
-        __classPrivateFieldGet(this, _subscription$1).add(this.sdFooterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
-        __classPrivateFieldGet(this, _subscription$1).add(this.sdFilterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
-        __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).pipe(startWith({}), debounceTime(200), map(__classPrivateFieldGet(this, _getFilter)), switchMap(filterInfo => __classPrivateFieldGet(this, _load$1).call(this, filterInfo, true))).subscribe(__classPrivateFieldGet(this, _render)));
-        this.ref.detectChanges();
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription$1).unsubscribe();
-    }
-    drop(event, columns) {
-        moveItemInArray(columns, event.previousIndex, event.currentIndex);
-    }
-    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 { editorStatus, editorHandlerRow, editorHandlerColumn, editorErrorMessage, expandDetail, isExpanded, isExpanding, isSelected, originItem, sdId, sdVersion, selectable, actions, groupedActions, sdGroup, temporary } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "editorErrorMessage", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem", "sdId", "sdVersion", "selectable", "actions", "groupedActions", "sdGroup", "temporary"]);
-            return Object.assign(Object.assign({}, result), { editorErrorMessage });
-        });
-    }
-    get gridItems() {
-        return this.items.map(item => {
-            const { editorStatus, editorHandlerRow, editorHandlerColumn, expandDetail, isExpanded, isExpanding, isSelected, originItem, sdId, sdVersion, selectable, actions, groupedActions, sdGroup, temporary } = item, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem", "sdId", "sdVersion", "selectable", "actions", "groupedActions", "sdGroup", "temporary"]);
-            return result;
-        });
-    }
-    get isEditing() {
-        return this.items.some(e => e.editorStatus !== undefined);
-    }
-}
-_paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
-SdGridMaterial.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-material',
-                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleExcelRaw !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportRaw()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel raw\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">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.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
-                animations: [
-                    trigger('detailExpand', [
-                        state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
-                        state('expanded', style({ height: '*', visibility: 'visible' })),
-                        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-                    ]),
-                ],
-                styles: [".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]
-            },] }
-];
-SdGridMaterial.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: undefined, decorators: [{ type: Inject, args: [GRID_MATERIAL_CONFIG,] }, { type: Optional }] },
-    { type: SdGridConfigurationService },
-    { type: SdExportService },
-    { type: SdNotifyService },
-    { type: SdTranslateService },
-    { type: SdColumnValuesPipe },
-    { type: SdEditorHandlerColumnPipe }
-];
-SdGridMaterial.propDecorators = {
-    sdScroll: [{ type: ViewChild, args: [SdScrollDirective,] }],
-    quickAction: [{ type: ViewChild, args: [SdQuickAction,] }],
-    _gridFilter: [{ type: ViewChild, args: [SdGridFilter,] }],
-    option: [{ type: Input }],
-    paginator: [{ type: ViewChild, args: [MatPaginator,] }],
-    sort: [{ type: ViewChild, args: [MatSort,] }],
-    sdPopupExport: [{ type: ViewChild, args: [SdPopupExport,] }],
-    sdSubInformation: [{ type: ContentChild, args: [SdMaterialSubInformationDefDirective,] }],
-    sdEmptyData: [{ type: ContentChild, args: [SdMaterialEmptyDataDefDirective,] }],
-    sdCellDefs: [{ type: ContentChildren, args: [SdMaterialCellDefDirective,] }],
-    sdFooterDefs: [{ type: ContentChildren, args: [SdMaterialFooterDefDirective,] }],
-    sdFilterDefs: [{ type: ContentChildren, args: [SdMaterialFilterDefDirective,] }]
-};
-
-class SdCommandFilterPipe {
-    transform(item, commands) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const results = [];
-            if (!commands) {
-                return results;
-            }
-            for (const command of commands) {
-                let flag = false;
-                const { hidden } = command;
-                if (hidden === undefined) {
-                    flag = true;
-                }
-                else if (typeof (hidden) === 'boolean') {
-                    if (!hidden) {
-                        flag = true;
-                    }
-                }
-                else {
-                    const isHidden = hidden(item);
-                    if (isHidden instanceof Promise) {
-                        if (!(yield isHidden)) {
-                            flag = true;
-                        }
-                    }
-                    else {
-                        if (!isHidden) {
-                            flag = true;
-                        }
-                    }
-                }
-                if (flag) {
-                    if ('children' in command) {
-                        const children = [];
-                        for (const childCommand of command.children) {
-                            const { hidden } = childCommand;
-                            if (hidden === undefined) {
-                                children.push(childCommand);
-                            }
-                            else if (typeof (hidden) === 'boolean') {
-                                if (!hidden) {
-                                    children.push(childCommand);
-                                }
-                            }
-                            else {
-                                const isHidden = hidden(item);
-                                if (isHidden instanceof Promise) {
-                                    if (!(yield isHidden)) {
-                                        children.push(childCommand);
-                                    }
-                                }
-                                else {
-                                    if (!isHidden) {
-                                        children.push(childCommand);
-                                    }
-                                }
-                            }
-                        }
-                        if (children.length > 0) {
-                            results.push(Object.assign(Object.assign({}, command), { children }));
-                        }
-                    }
-                    else {
-                        results.push(command);
-                    }
-                }
-            }
-            return results;
-        });
-    }
-}
-SdCommandFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandFilter'
-            },] }
-];
-
-class SdCommandDisablePipe {
-    transform(item, command) {
-        if (!(command === null || command === void 0 ? void 0 : command.disabled)) {
-            return false;
-        }
-        if (typeof (command.disabled) === 'boolean') {
-            return command.disabled;
-        }
-        return command.disabled(item);
-    }
-}
-SdCommandDisablePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandDisable'
-            },] }
-];
-
-class SdCommandIconPipe {
-    transform(command, item) {
-        if (!(command === null || command === void 0 ? void 0 : command.icon)) {
-            return '';
-        }
-        if (typeof (command.icon) === 'string') {
-            return command.icon;
-        }
-        return command.icon(item);
-    }
-}
-SdCommandIconPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandIcon'
-            },] }
-];
-
-class SdCommandTitlePipe {
-    transform(command, item) {
-        if (!(command === null || command === void 0 ? void 0 : command.title)) {
-            return '';
-        }
-        if (typeof (command.title) === 'string') {
-            return command.title;
-        }
-        return command.title(item);
-    }
-}
-SdCommandTitlePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'commandTitle'
-            },] }
-];
-
-class SdColumnHtmlTemplatePipe {
-    constructor(deviceService) {
-        this.isMobileOrTablet = false;
-        this.isMobileOrTablet = !deviceService.isDesktop();
-    }
-    transform(value, rowData, column) {
-        if (typeof (column === null || column === void 0 ? void 0 : column.htmlTemplate) !== 'function') {
-            return value;
-        }
-        return column === null || column === void 0 ? void 0 : column.htmlTemplate(value, rowData, this.isMobileOrTablet);
-    }
-}
-SdColumnHtmlTemplatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnHtmlTemplate'
-            },] }
-];
-SdColumnHtmlTemplatePipe.ctorParameters = () => [
-    { type: DeviceDetectorService }
-];
-
-class SdDesktopCellView {
-    constructor() { }
-}
-SdDesktopCellView.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-cell-view',
-                template: "<ng-container *ngIf=\"item[column.field] | cellView:item:column:gridOption:key | async as view\">\r\n  <ng-container *ngIf=\"view.display.hasHtml;else useValue\">\r\n    <div *ngIf=\"view.click\" (click)=\"view.click()\" class=\"text-break cursor-pointer\" [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\" [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\">\r\n    </div>\r\n    <div *ngIf=\"!view.click\" class=\"text-break\" [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\" [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge *ngIf=\"view.display.value\" [type]=\"view.badge.type\" [title]=\"view.display.value\" [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\" [tooltip]=\"view.tooltip\" (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <ng-container *ngIf=\"column.type !== 'children'; else childrenView\">\r\n        <div *ngIf=\"column.type !== 'image'\" class=\"text-break\" [class.text-center]=\"view.display.align === 'center'\"\r\n          [class.text-right]=\"view.display.align === 'right'\" [matTooltip]=\"view.tooltip\">\r\n          <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{view.display.value}}</a>\r\n          <ng-container *ngIf=\"!view.click\">{{view.display.value}}\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n          <img *ngIf=\"view.display.value\" [src]=\"view.display.value\" [width]=\"column.option?.width\"\r\n            [height]=\"column.option?.height\" class=\"c-image\" (click)=\"!!view.click && view.click()\"\r\n            [class.cursor-pointer]=\"!!view.click\">\r\n          <mat-icon *ngIf=\"!view.display.value\" class=\"c-img\" [class.cursor-pointer]=\"!!view.click\"\r\n            (click)=\"!!view.click && view.click()\">\r\n            image</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #childrenView>\r\n        <sd-desktop-cell-children-view [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n        </sd-desktop-cell-children-view>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
-            },] }
-];
-SdDesktopCellView.ctorParameters = () => [];
-SdDesktopCellView.propDecorators = {
-    sdId: [{ type: Input }],
-    key: [{ type: Input }],
-    column: [{ type: Input }],
-    item: [{ type: Input }],
-    gridOption: [{ type: Input }]
-};
-
-class SdColumnTransformPipe {
-    constructor(columnValuesPipe) {
-        this.columnValuesPipe = columnValuesPipe;
-    }
-    transform(value, rowData, column, key) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (column === null || column === void 0 ? void 0 : column.transform) {
-                return column.transform(value, rowData);
-            }
-            if (column.type === 'values') {
-                return yield this.columnValuesPipe.transform(value, column);
-            }
-            if (column.type === 'number' && Number.isNumber(value)) {
-                return Number.toVNCurrency(value); // this.decimalPipe.transform(value, '1.0-2');
-            }
-            if (column.type === 'bool') {
-                return value === true ? (((_a = column.option) === null || _a === void 0 ? void 0 : _a.displayOnTrue) || 'True') : (((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False');
-            }
-            return value;
-        });
-    }
-}
-SdColumnTransformPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnTransform'
-            },] }
-];
-SdColumnTransformPipe.ctorParameters = () => [
-    { type: SdColumnValuesPipe }
-];
-
-class SdFilterExternalPipe {
-    transform(externalFilters, field) {
-        const results = [];
-        if (!externalFilters) {
-            return results;
-        }
-        for (const filter of externalFilters) {
-            results.push(filter);
-        }
-        return results.filter(e => !field || e.field === field);
-    }
-}
-SdFilterExternalPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdFilterExternal'
-            },] }
-];
-
-class SdFilterColumnPipe {
-    transform(columns, field) {
-        var _a, _b;
-        const results = [];
-        if (!columns) {
-            return results;
-        }
-        for (const column of columns) {
-            if (column.type === 'image') {
-                continue;
-            }
-            if (column.type === 'children') {
-                for (const columnChildren of column === null || column === void 0 ? void 0 : column.children) {
-                    if (!((_a = columnChildren.filter) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                        results.push(columnChildren);
-                    }
-                }
-                continue;
-            }
-            if (!((_b = column.filter) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                results.push(column);
-            }
-        }
-        return results.filter(e => !field || e.field === field);
-    }
-}
-SdFilterColumnPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdFilterColumn'
-            },] }
-];
-
-class SdDesktopCellChildrenView {
-    constructor() { }
-}
-SdDesktopCellChildrenView.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-cell-children-view',
-                template: "<ng-container *ngIf=\"column.children?.length\">\r\n  <div class=\"row mx-0\">\r\n    <div *ngFor=\"let childColumn of column.children | columnChildrenFilter:item\" class=\"px-2\"\r\n      [ngClass]=\"{'col-6': childColumn?.colSpan === 1, 'col-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n      <span class=\"c-title\">\r\n        {{item | columnTitle:childColumn | async}}:\r\n      </span>\r\n      <ng-container *ngIf=\"childColumn.htmlTemplate;else useDefaultView\">\r\n        <div (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"\r\n          style=\"display:inline-block ;overflow-wrap: break-word;\" [ngClass]=\"{'cursor-pointer':childColumn.click}\"\r\n          [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn) | safeHtml\">\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #useDefaultView>\r\n        <span *ngIf=\"childColumn.type === 'string'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'number'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            columnTransform:item:childColumn | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | columnTransform:item:childColumn | async}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'datetime'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'date'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] |\r\n            sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            <span matTooltipPosition=\"above\"\r\n              [matTooltip]=\"item[childColumn.field] | date:'dd/MM/yyyy'\">{{item[childColumn.field] |\r\n              sdTimeDifferent:'dd/MM/yyyy':childColumn.option?.timeDifferent | async}}</span>\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'time'\">\r\n          <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n            (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n          <ng-container *ngIf=\"!childColumn.click\">\r\n            {{item[childColumn.field] | date:'HH:mm'}}\r\n          </ng-container>\r\n        </span>\r\n        <span *ngIf=\"childColumn.type === 'bool'\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n          <strong *ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.option?.displayOnTrue ||\r\n            'True'}}</strong>\r\n          <strong *ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.option?.displayOnFalse ||\r\n            'False'}}</strong>\r\n        </span>\r\n        <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n          <ng-container *ngIf=\"childColumn.transform\">{{item[childColumn.field] | columnTransform:item:childColumn | async}}</ng-container>\r\n          <ng-container *ngIf=\"!childColumn.transform\">\r\n            {{item[childColumn.field] | columnValues:childColumn | async}}\r\n            <!-- <ng-container *ngIf=\"item[childColumn.field] | columnValues:childColumn | async; $implicit as valueData\">\r\n              <div\r\n                *ngIf=\"valueData[childColumn.option?.colorField] || valueData[childColumn.option?.backgroundColorField]; else elseNoStatus\"\r\n                [ngStyle]=\"{'color':valueData[childColumn.option?.colorField], 'background-color': valueData[childColumn.option?.backgroundColorField]}\">\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </div>\r\n              <ng-template #elseNoStatus>\r\n                {{valueData[childColumn.option?.displayField]}}\r\n              </ng-template>\r\n            </ng-container> -->\r\n          </ng-container>\r\n          \r\n        </ng-container>\r\n        <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field] | columnTransform:item:childColumn | async\" [width]=\"childColumn.display?.width\"\r\n          [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n          (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</ng-container>",
-                styles: [".c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}"]
-            },] }
-];
-SdDesktopCellChildrenView.ctorParameters = () => [];
-SdDesktopCellChildrenView.propDecorators = {
-    key: [{ type: Input }],
-    column: [{ type: Input }],
-    item: [{ type: Input }]
-};
-
-var _isMobileOrTablet;
-class SdColumnChildrenFilterPipe {
-    constructor(deviceService) {
-        _isMobileOrTablet.set(this, false);
-        __classPrivateFieldSet(this, _isMobileOrTablet, !deviceService.isDesktop());
-    }
-    transform(columns, item) {
-        return columns.filter(column => {
-            var _a, _b;
-            const value = item === null || item === void 0 ? void 0 : item[column.field];
-            const transformValue = (_a = column.transform) === null || _a === void 0 ? void 0 : _a.call(column, item[column.field], item);
-            const templateValue = (_b = column.htmlTemplate) === null || _b === void 0 ? void 0 : _b.call(column, item[column.field], item, __classPrivateFieldGet(this, _isMobileOrTablet));
-            return (value !== undefined && value !== null && value !== '')
-                || (transformValue !== undefined && transformValue !== null && transformValue !== '')
-                || (templateValue !== undefined && templateValue !== null && templateValue !== '');
-        });
-    }
-}
-_isMobileOrTablet = new WeakMap();
-SdColumnChildrenFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnChildrenFilter'
-            },] }
-];
-SdColumnChildrenFilterPipe.ctorParameters = () => [
-    { type: DeviceDetectorService }
-];
-
-class SdColumnTitlePipe {
-    transform(item, column) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!(column === null || column === void 0 ? void 0 : column.title)) {
-                return '';
-            }
-            const result = (_a = column === null || column === void 0 ? void 0 : column.dynamicTitle) === null || _a === void 0 ? void 0 : _a.call(column, item);
-            if (result instanceof Promise) {
-                return (yield result) || (column === null || column === void 0 ? void 0 : column.title);
-            }
-            return result || (column === null || column === void 0 ? void 0 : column.title);
-        });
-    }
-}
-SdColumnTitlePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnTitle'
-            },] }
-];
-
-class SdDesktopCommand {
-    constructor() {
-        this.commands = [];
-    }
-}
-SdDesktopCommand.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-command',
-                template: "<ng-container *ngIf=\"item | commandFilter:commands | async; $implicit as filteredCommands\">\r\n  <ng-container *ngFor=\"let command of filteredCommands\">\r\n    <ng-container *ngIf=\"command?.click; else elseChildren\">\r\n      <button (click)=\"command.click(item)\" [matTooltip]=\"command | commandTitle:item\" aria-hidden=\"true\"\r\n        [disabled]=\"item | commandDisable:command\" mat-icon-button>\r\n        <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n    <ng-template #elseChildren>\r\n      <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\r\n        <mat-icon *ngIf=\"command?.icon\" class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!command?.icon\" class=\"c-icon\">more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <span>\r\n          <button *ngFor=\"let childCommand of command.children\" mat-menu-item (click)=\"childCommand.click(item)\"\r\n            [disabled]=\"item | commandDisable:childCommand\">\r\n            <ng-container *ngIf=\"!childCommand.htmlTemplate\">\r\n              <mat-icon [fontSet]=\"command.fontSet\" class=\"c-icon\">{{childCommand | commandIcon:item}}\r\n              </mat-icon>\r\n              <span> {{childCommand | commandTitle:item}}</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"childCommand.htmlTemplate\">\r\n              <div [innerHTML]=\"childCommand.htmlTemplate(item)\"></div>\r\n            </ng-container>\r\n          </button>\r\n        </span>\r\n      </mat-menu>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{align-items:center;display:flex}mat-icon.c-icon{color:rgba(0,0,0,.54)!important}"]
-            },] }
-];
-SdDesktopCommand.ctorParameters = () => [];
-SdDesktopCommand.propDecorators = {
-    item: [{ type: Input }],
-    commands: [{ type: Input }]
-};
-
-class SdColumnBadgePipe {
-    constructor() { }
-    transform(value, rowData, column) {
-        var _a, _b, _c;
-        if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
-            return {
-                type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                color: column.badge(value, rowData),
-                icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
-            };
-        }
-        if (column.type === 'number' && (column === null || column === void 0 ? void 0 : column.badge)) {
-            return {
-                type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                color: column.badge(value, rowData),
-                icon: (_b = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _b === void 0 ? void 0 : _b.call(column, value, rowData)
-            };
-        }
-        if (column.type === 'bool') {
-            return {
-                type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                color: !!value ? 'success' : 'danger',
-                icon: null
-            };
-        }
-        if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
-            return {
-                type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                color: column.badge(value, rowData),
-                icon: (_c = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _c === void 0 ? void 0 : _c.call(column, value, rowData)
-            };
-        }
-        return null;
-    }
-}
-SdColumnBadgePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnBadge'
-            },] }
-];
-SdColumnBadgePipe.ctorParameters = () => [];
-
-class SdGridConfigurationResultPipe {
-    constructor(gridConfigurationService) {
-        this.gridConfigurationService = gridConfigurationService;
-    }
-    transform(configuration, gridOption, sdSubInformation) {
-        return this.gridConfigurationService.generateConfigurationResult(configuration, gridOption, sdSubInformation);
-    }
-}
-SdGridConfigurationResultPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdGridConfigurationResult'
-            },] }
-];
-SdGridConfigurationResultPipe.ctorParameters = () => [
-    { type: SdGridConfigurationService }
-];
-
-var _cache$2;
-class SdPopupGridConfiguration {
-    constructor(ref, notifyService, translateService, gridConfigurationService) {
-        this.ref = ref;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.gridConfigurationService = gridConfigurationService;
-        this.changes = new EventEmitter();
-        _cache$2.set(this, void 0);
-        this.isCreatingColumn = false;
-        this.selected = {};
-        this.disabledDrag = true;
-        this.open = () => __awaiter(this, void 0, void 0, function* () {
-            __classPrivateFieldSet(this, _cache$2, this.gridConfigurationService.init(this.key, this.gridOption));
-            this.configuration = yield __classPrivateFieldGet(this, _cache$2).get();
-            this.modal.open();
-        });
-        this.onSave = () => {
-            __classPrivateFieldGet(this, _cache$2).set(this.configuration);
-            this.modal.close();
-            this.ref.detectChanges();
-        };
-        this.onReset = () => __awaiter(this, void 0, void 0, function* () {
-            const { translate } = this.translateService;
-            this.notifyService.confirm(translate('Reset grid configuration to default')).then(() => {
-                __classPrivateFieldGet(this, _cache$2).remove();
-                this.modal.close();
-                this.ref.detectChanges();
-            });
-        });
-        this.createColumn = () => __awaiter(this, void 0, void 0, function* () {
-            this.selected = {};
-            this.isCreatingColumn = true;
-        });
-        this.confirm = () => __awaiter(this, void 0, void 0, function* () {
-            const generatedColumn = {
-                origin: {
-                    field: v4(),
-                    title: 'Generated',
-                    width: '300px'
-                },
-                fixed: false,
-                invisible: false,
-                title: 'Generated',
-                width: '300px',
-                isGeneratedColumn: true,
-                generatedColumns: this.configuration.columns.filter(e => { var _a; return this.selected[(_a = e.origin) === null || _a === void 0 ? void 0 : _a.field]; }).map(e => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.field; })
-            };
-            this.configuration.columns.push(generatedColumn);
-            this.configuration = __classPrivateFieldGet(this, _cache$2).set(this.configuration);
-            this.isCreatingColumn = false;
-        });
-    }
-    ngOnInit() {
-    }
-    mouseUp(event) {
-        this.disabledDrag = true;
-    }
-    dropTable(event) {
-        moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
-        this.table.renderRows();
-    }
-    handleMouseDown() {
-        this.disabledDrag = false;
-    }
-    handleMouseUp() {
-        this.disabledDrag = true;
-    }
-}
-_cache$2 = new WeakMap();
-SdPopupGridConfiguration.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-popup-grid-configuration',
-                template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height:70vh\">\r\n        <table #table mat-table [dataSource]=\"configuration.columns\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"configuration.columns\"\r\n        (cdkDropListDropped)=\"dropTable($event)\">\r\n        >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown) = \"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">{{'Width' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <!-- <span>{{item.width}}</span>\r\n              <mat-slider\r\n                  step=\"1\"\r\n                  min=\"0\"\r\n                  [max]=\"+item?.origin?.width*3\"\r\n                  [(ngModel)]=\"+item.width\"\r\n                  aria-label=\"units\">\r\n                </mat-slider> -->\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Hidden' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n              </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Freeze' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isCreatingColumn\">\r\n      <div class=\"c-table\" style=\"max-height:50vh\">\r\n        <table mat-table [dataSource]=\"configuration.columns\">\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <ng-container *ngIf=\"!isCreatingColumn\">\r\n      <!-- <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button> -->\r\n      <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isCreatingColumn\">\r\n      <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n  </sd-modal-footer>\r\n</sd-modal>",
-                styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
-            },] }
-];
-SdPopupGridConfiguration.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SdNotifyService },
-    { type: SdTranslateService },
-    { type: SdGridConfigurationService }
-];
-SdPopupGridConfiguration.propDecorators = {
-    gridOption: [{ type: Input }],
-    key: [{ type: Input }],
-    modal: [{ type: ViewChild, args: ['modal',] }],
-    table: [{ type: ViewChild, args: ['table',] }],
-    mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
-};
-
-class SdColumnTooltipPipe {
-    constructor() { }
-    transform(value, rowData, column) {
-        if (column === null || column === void 0 ? void 0 : column.tooltip) {
-            return column.tooltip(value, rowData);
-        }
-        return null;
-    }
-}
-SdColumnTooltipPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'columnTooltip'
-            },] }
-];
-SdColumnTooltipPipe.ctorParameters = () => [];
-
-var _convert;
-class SdSelectionActionFilterPipe {
-    constructor() {
-        _convert.set(this, (action) => {
-            if ('children' in action) {
-                return {
-                    title: action.title,
-                    icon: action.icon,
-                    fontSet: action.fontSet,
-                    tooltip: action.tooltip,
-                    color: action.color,
-                    type: action.type,
-                    children: action.children.map(e => ({
-                        title: e.title,
-                        icon: e.icon,
-                        color: action.color,
-                        type: action.type,
-                        fontSet: e.fontSet,
-                        tooltip: e.tooltip,
-                        click: e.click
-                    }))
-                };
-            }
-            return {
-                title: action.title,
-                icon: action.icon,
-                color: action.color,
-                type: action.type,
-                fontSet: action.fontSet,
-                tooltip: action.tooltip,
-                click: action.click
-            };
-        });
-        this.transform = (selectedItems, actions) => {
-            const results = [];
-            if (!(actions === null || actions === void 0 ? void 0 : actions.length) || !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)) {
-                return [];
-            }
-            for (const action of actions) {
-                if ('children' in action) {
-                    const children = [];
-                    for (const childAction of action.children) {
-                        const key = hash(childAction);
-                        if (selectedItems.every(e => e.actions.includes(key))) {
-                            children.push(childAction);
-                        }
-                    }
-                    if (children.length > 0) {
-                        results.push(Object.assign(Object.assign({}, action), { children }));
-                    }
-                }
-                else {
-                    const key = hash(action);
-                    if (selectedItems.every(e => e.actions.includes(key))) {
-                        results.push(action);
-                    }
-                }
-            }
-            return results.map(result => __classPrivateFieldGet(this, _convert).call(this, result));
-        };
-    }
-}
-_convert = new WeakMap();
-SdSelectionActionFilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'selectionActionFilter'
-            },] }
-];
-
-class SdSelectionDisablePipe {
-    constructor() {
-        this.transform = (selectedItems, rowData, selection) => {
-            const { disabled, actions } = selection;
-            if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
-                if (!disabled) {
-                    rowData.selectable = true;
-                    return false;
-                }
-                rowData.selectable = !disabled(rowData, selectedItems);
-                return !rowData.selectable;
-            }
-            // Lọc các action theo selectedItems hiện tại
-            const availableActions = actions.filter(action => {
-                if ('children' in action) {
-                    for (const childAction of action.children) {
-                        const key = hash(childAction);
-                        if (selectedItems.every(e => e.actions.includes(key))) {
-                            return true;
-                        }
-                    }
-                    return false;
-                }
-                else {
-                    const key = hash(action);
-                    return selectedItems.every(e => e.actions.includes(key));
-                }
-            });
-            // Kiểm tra rowData có action nào thỏa hay ko, nếu ko thì disabled
-            for (const action of availableActions) {
-                if ('children' in action) {
-                    for (const childAction of action.children) {
-                        if (rowData.actions.includes(hash(childAction))) {
-                            return false;
-                        }
-                    }
-                }
-                else {
-                    if (rowData.actions.includes(hash(action))) {
-                        return false;
-                    }
-                }
-            }
-            return true;
-        };
-    }
-}
-SdSelectionDisablePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'selectionDisable'
-            },] }
-];
-
-class SdSelectionVisibleSelectAllPipe {
-    constructor() {
-        this.transform = (items, selection) => __awaiter(this, void 0, void 0, function* () {
-            const { actions } = selection;
-            if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
-                return true;
-            }
-            if (!items.length) {
-                return false;
-            }
-            if (actions.some(e => ('children' in e && e.children.some(e1 => e1.isGrouped)) || e.isGrouped)) {
-                return false;
-            }
-            yield new Promise(resolve => setTimeout(resolve, 500));
-            const first = items.find(t => { var _a; return (_a = t.actions) === null || _a === void 0 ? void 0 : _a.length; });
-            if (first) {
-                for (const action of first.actions) {
-                    if (items.filter(t => { var _a; return (_a = t.actions) === null || _a === void 0 ? void 0 : _a.length; }).every(e => e.actions.includes(action))) {
-                        return true;
-                    }
-                }
-            }
-            return false;
-        });
-    }
-}
-SdSelectionVisibleSelectAllPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'selectionVisibleSelectAll'
-            },] }
-];
-
-var _cache$3;
-class SdGeneratedColumnService {
-    constructor(settingService) {
-        this.settingService = settingService;
-        _cache$3.set(this, {});
-        this.load = (configuration) => {
-            if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
-                return null;
-            }
-            const key = hash({
-                prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
-                key: configuration.key
-            });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
-                if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
-                        args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
-                        default: []
-                    });
-                }
-                else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
-                        type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
-                        args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
-                        default: []
-                    });
-                }
-            }
-            return __classPrivateFieldGet(this, _cache$3)[key];
-        };
-        this.loadSystem = (configuration) => {
-            var _a, _b;
-            if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
-                return null;
-            }
-            if (!(configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn)) {
-                return null;
-            }
-            const key = hash({
-                prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
-                key: configuration.key
-            });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
-                if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
-                        args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
-                        default: []
-                    });
-                }
-                else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
-                        type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
-                        args: (_b = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _b === void 0 ? void 0 : _b.args,
-                        default: []
-                    });
-                }
-            }
-            return __classPrivateFieldGet(this, _cache$3)[key];
-        };
-    }
-}
-_cache$3 = new WeakMap();
-SdGeneratedColumnService.decorators = [
-    { type: Injectable }
-];
-SdGeneratedColumnService.ctorParameters = () => [
-    { type: SdSettingService }
-];
-
-var _subscription$2;
-class SdDynamicColumn {
-    constructor(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
-        this.ref = ref;
-        this.generatedColumnService = generatedColumnService;
-        this.notifyService = notifyService;
-        this.translateService = translateService;
-        this.gridConfigurationService = gridConfigurationService;
-        _subscription$2.set(this, new Subscription());
-        this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
-        this.form = new FormGroup({});
-        this.isDetail = false;
-        this.originColumns = [];
-        this.onDetail = (column) => {
-            this.detail = column || {
-                field: v4(),
-                title: '',
-                type: 'string',
-                isSystem: false,
-                useTemplate: false
-            };
-            this.form.markAsUntouched();
-            this.form.markAsPristine();
-            this.isDetail = true;
-        };
-        this.onSave = () => {
-            var _a;
-            const systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
-            const setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
-            if (this.detail.isSystem) {
-                if (!this.detail.id) {
-                    systemSetting.set([...this.systemColumns, Object.assign(Object.assign({}, this.detail), { id: v4() })]);
-                }
-                else {
-                    systemSetting.set([...this.systemColumns]);
-                }
-            }
-            else {
-                if (!this.detail.id) {
-                    setting.set([...this.columns, Object.assign(Object.assign({}, this.detail), { id: v4() })]);
-                }
-                else {
-                    setting.set([...this.columns]);
-                }
-            }
-        };
-    }
-    ngOnInit() {
-        var _a, _b, _c;
-        const systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
-        const setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
-        if (systemSetting) {
-            (_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(columns => {
-                this.systemColumns = columns;
-            }));
-        }
-        if (setting) {
-            (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(columns => {
-                this.columns = columns;
-            }));
-        }
-        this.originColumns = this.gridOption.columns.filter(e => e.type !== 'children' && e.type !== 'children-col');
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription$2).unsubscribe();
-    }
-}
-_subscription$2 = new WeakMap();
-SdDynamicColumn.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-dynamic-column',
-                template: "<sd-side-drawer width=\"400px\">\r\n  <div sdTitle>{{'Manage dynamic column' | sdTranslate}}</div>\r\n  <ng-container sdBody>\r\n    <ng-container *ngIf=\"!isDetail\">\r\n      <ng-container *ngIf=\"systemColumns\">\r\n        <div *ngFor=\"let column of systemColumns\" (click)=\"onDetail(column)\">\r\n          {{column.title}}\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"columns\">\r\n        <div *ngFor=\"let column of columns\" (click)=\"onDetail(column)\">\r\n          {{column.title}}\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isDetail\">\r\n      <sd-select [form]=\"form\" [label]=\"'Apply for' | sdTranslate\" [(model)]=\"detail.isSystem\"\r\n        [items]=\"[{code: true, name: 'All users'},{code: false, name: 'Only me'}]\" [disabled]=\"!!detail.id\" required></sd-select>\r\n      <sd-input [form]=\"form\" [label]=\"'Column field' | sdTranslate\" [(model)]=\"detail.field\" [disabled]=\"!!detail.id\"\r\n        required></sd-input>\r\n      <sd-input [form]=\"form\" [label]=\"'Column title' | sdTranslate\" [(model)]=\"detail.title\" required></sd-input>\r\n      <sd-input-number [form]=\"form\" [label]=\"'Column width' | sdTranslate\" [(model)]=\"detail.width\" required>\r\n        <ng-template sdInputSuffix>px</ng-template>\r\n      </sd-input-number>\r\n      <sd-select [form]=\"form\" [label]=\"'Column type' | sdTranslate\" [(model)]=\"detail.type\" [items]=\"columnTypes\"\r\n        [disabled]=\"!!detail.id\" required></sd-select>\r\n      <sd-select *ngIf=\"detail.type === 'children' || detail.type === 'children-col'\" [form]=\"form\"\r\n        [label]=\"'Column fields' | sdTranslate\" [(model)]=\"detail.fields\" [items]=\"originColumns\" valueField=\"field\"\r\n        displayField=\"title\" multiple></sd-select>\r\n      <sd-select [form]=\"form\" [label]=\"'Use template' | sdTranslate\" [(model)]=\"detail.useTemplate\"\r\n        [items]=\"[{code: true, name: 'Yes'},{code: false, name: 'No'}]\" required></sd-select>\r\n      <sd-editor *ngIf=\"detail.useTemplate\" [form]=\"form\" [label]=\"'Html template' | sdTranslate\" [(model)]=\"detail.template\">\r\n      </sd-editor>\r\n    </ng-container>\r\n  </ng-container>\r\n  <div class=\"d-flex align-items-center justify-content-end\" sdFooter>\r\n    <sd-button [title]=\"'Close' | sdTranslate\" (action)=\"sideDrawer.close()\"> </sd-button>\r\n    <sd-button *ngIf=\"!isDetail\" [title]=\"'Create column' | sdTranslate\" color=\"primary\" class=\"mx-8\"\r\n      (action)=\"onDetail()\">\r\n    </sd-button>\r\n    <sd-button *ngIf=\"isDetail\" [title]=\"'Save' | sdTranslate\" color=\"success\" class=\"mx-8\" (action)=\"onSave()\">\r\n    </sd-button>\r\n  </div>\r\n</sd-side-drawer>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
-            },] }
-];
-SdDynamicColumn.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SdGeneratedColumnService },
-    { type: SdNotifyService },
-    { type: SdTranslateService },
-    { type: SdGridConfigurationService }
-];
-SdDynamicColumn.propDecorators = {
-    sideDrawer: [{ type: ViewChild, args: [SdSideDrawer,] }],
-    gridOption: [{ type: Input }]
-};
-
-class SdDesktopCell {
-    constructor() {
-        this.cellDef = {};
-    }
-}
-SdDesktopCell.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-cell',
-                template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"item.editorHandlerRow?.visible;else useView\">\r\n    <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:gridOption\">\r\n      <ng-container *ngIf=\"item.editorHandlerColumn && item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n        <ng-container *ngIf=\"cellDef[column.field]\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              cellDef[column.field].templateRef;\r\n              context: { item: item, column: column, idx: idx, isEdited: true }\r\n            \">\r\n          </ng-container>\r\n        </ng-container>\r\n        <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n        </sd-desktop-cell-editor>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #useView>\r\n    <ng-container *ngIf=\"cellDef[column.field]\">\r\n      <ng-container *ngTemplateOutlet=\"\r\n          cellDef[column.field].templateRef;\r\n          context: { item: item, column: column, idx: idx }\r\n        \">\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [gridOption]=\"gridOption\" [item]=\"item\">\r\n    </sd-desktop-cell-view>\r\n  </ng-template>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-SdDesktopCell.ctorParameters = () => [];
-SdDesktopCell.propDecorators = {
-    sdId: [{ type: Input }],
-    value: [{ type: Input }],
-    key: [{ type: Input }],
-    column: [{ type: Input }],
-    item: [{ type: Input }],
-    gridOption: [{ type: Input }],
-    cellDef: [{ type: Input }],
-    idx: [{ type: Input }]
-};
-
-class SdDesktopCellEditor {
-    constructor() {
-        this.onChange = (selected) => {
-            var _a, _b, _c;
-            if (this.column.type === 'children' || this.column.type === 'children-col') {
-                return;
-            }
-            (_c = (_b = (_a = this.column) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.change) === null || _c === void 0 ? void 0 : _c.call(_b, this.item, selected);
-        };
-        this.editorOnAdd = () => {
-            var _a, _b;
-            if (this.column.type === 'children' || this.column.type === 'children-col') {
-                return;
-            }
-            if (this.column.type === 'values') {
-                (_b = (_a = this.column.editor) === null || _a === void 0 ? void 0 : _a.add) === null || _b === void 0 ? void 0 : _b.call(_a, this.item);
-            }
-        };
-        this.editorOnEdit = (option) => {
-            var _a, _b;
-            if (this.column.type === 'children' || this.column.type === 'children-col') {
-                return;
-            }
-            if (this.column.type === 'values') {
-                (_b = (_a = this.column.editor) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, option, this.item);
-            }
-        };
-        this.editorOnDelete = (option) => {
-            var _a, _b;
-            if (this.column.type === 'children' || this.column.type === 'children-col') {
-                return;
-            }
-            if (this.column.type === 'values') {
-                (_b = (_a = this.column.editor) === null || _a === void 0 ? void 0 : _a.delete) === null || _b === void 0 ? void 0 : _b.call(_a, option, this.item);
-            }
-        };
-    }
-}
-SdDesktopCellEditor.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-cell-editor',
-                template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\"\r\n  (sdChange)=\"onChange($event)\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input-number *ngIf=\"column.type === 'number'\" size=\"sm\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange($event)\"\r\n  [min]=\"column?.editor?.minValue\" [max]=\"column?.editor?.maxValue\" disableErrorMessage>\r\n</sd-input-number>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n    { value: true, display: column.option?.displayOnTrue || 'True' },\r\n    { value: false, display: column.option?.displayOnFalse || 'False' }\r\n  ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdSelection)=\"onChange($event)\"\r\n  disableErrorMessage>\r\n</sd-select>\r\n<sd-date-time *ngIf=\"\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  \" size=\"sm\" [(model)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange($event)\" disableErrorMessage>\r\n</sd-date-time>\r\n\r\n<ng-container *ngIf=\"column.type === 'values'\">\r\n  <sd-select *ngIf=\"!column?.option?.selection\" size=\"sm\" [items]=\"column.option.items\"\r\n    [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\"\r\n    (sdSelection)=\"onChange($event)\" disableErrorMessage></sd-select>\r\n    <sd-select *ngIf=\"\r\n      column?.option?.selection === 'MULTIPLE' ||\r\n      column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n    \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdSelection)=\"onChange($event)\"\r\n      [multiple]=\"\r\n      column?.option?.selection === 'MULTIPLE' ||\r\n      column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n    \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n      column?.option?.selection === 'AUTOCOMPLETE'\r\n    \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange($event)\"\r\n      disableErrorMessage>\r\n    </sd-autocomplete>\r\n\r\n    <!-- EDITOR -->\r\n    <sd-select-editor *ngIf=\"\r\n      column?.option?.selection === 'AUTOCOMPLETE_EDITOR'\r\n    \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdSelection)=\"onChange($event)\"\r\n      filtered disableErrorMessage [addable]=\"column?.editor?.add\" [editable]=\"column?.editor?.edit\"\r\n      [deletable]=\"column?.editor?.delete\" (sdAdd)=\"editorOnAdd()\" (sdEdit)=\"editorOnEdit($event)\"\r\n      (sdDelete)=\"editorOnDelete($event)\">\r\n    </sd-select-editor>\r\n    <sd-select-editor *ngIf=\"\r\n      column?.option?.selection === 'MULTIPLE_EDITOR'\r\n    \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdSelection)=\"onChange($event)\"\r\n      multiple disableErrorMessage [addable]=\"column?.editor?.add\" [editable]=\"column?.editor?.edit\"\r\n      [deletable]=\"column?.editor?.delete\" (sdAdd)=\"editorOnAdd()\" (sdEdit)=\"editorOnEdit($event)\"\r\n      (sdDelete)=\"editorOnDelete($event)\">\r\n    </sd-select-editor>\r\n    <sd-select-editor *ngIf=\"\r\n      column?.option?.selection === 'MULTIPLEAUTOCOMPLETE_EDITOR'\r\n    \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdSelection)=\"onChange($event)\"\r\n      multiple filtered disableErrorMessage [addable]=\"column?.editor?.add\" [editable]=\"column?.editor?.edit\"\r\n      [deletable]=\"column?.editor?.delete\" (sdAdd)=\"editorOnAdd()\" (sdEdit)=\"editorOnEdit($event)\"\r\n      (sdDelete)=\"editorOnDelete($event)\">\r\n    </sd-select-editor>\r\n    <!-- END EDITOR -->\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-SdDesktopCellEditor.ctorParameters = () => [];
-SdDesktopCellEditor.propDecorators = {
-    sdId: [{ type: Input }],
-    column: [{ type: Input }],
-    item: [{ type: Input }]
-};
-
-var _visible$1;
-class SdEditorHandlerRowPipe {
-    constructor(zone) {
-        this.zone = zone;
-        _visible$1.set(this, (col, item) => {
-            if (col.type === 'children' || col.type === 'children-col') {
-                return false;
-            }
-            // Kiểm tra xem có bị disabled hay không?
-            if (col.editor) {
-                const isDisabled = typeof (col.editor.disabled) === 'function' ? col.editor.disabled(item) : col.editor.disabled;
-                if (isDisabled) {
-                    return false;
-                }
-            }
-            return true;
-        });
-    }
-    transform(status, item, gridOption) {
-        const { editor } = gridOption;
-        if (!editor) {
-            return null;
-        }
-        let isDisabled = false;
-        if (typeof (editor === null || editor === void 0 ? void 0 : editor.disabled) === 'function') {
-            isDisabled = editor.disabled(item);
-        }
-        else {
-            isDisabled = editor === null || editor === void 0 ? void 0 : editor.disabled;
-        }
-        if (editor.type === 'inline') {
-            const removable = editor.removable;
-            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !isDisabled, editable: false, removable: status !== 'create' && (typeof (removable) === 'function' ? removable(item) : removable), savable: false, cancelable: !isDisabled && status === 'create' });
-        }
-        else if (editor.type === 'focus') {
-            if (isDisabled) {
-                return null;
-            }
-            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: !status, removable: false, savable: !!status, cancelable: !!status });
-        }
-        else if (editor.type === 'popup') {
-            if (isDisabled) {
-                return null;
-            }
-            item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status, removable: false, savable: false, cancelable: false });
-        }
-        item.editorHandlerColumn = item.editorHandlerColumn || {};
-        const { columns } = gridOption;
-        for (const col of columns) {
-            if (col.type === 'children-col') {
-                for (const childCol of col.children) {
-                    item.editorHandlerColumn[childCol.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[childCol.field]), { visible: __classPrivateFieldGet(this, _visible$1).call(this, childCol, item) });
-                }
-            }
-            else {
-                item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible$1).call(this, col, item) });
-            }
-        }
-        this.zone.run(() => {
-            item.sdId = CalculateSdId(item);
-        });
-        return item.editorHandlerRow;
-    }
-}
-_visible$1 = new WeakMap();
-SdEditorHandlerRowPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdEditorHandlerRow'
-            },] }
-];
-SdEditorHandlerRowPipe.ctorParameters = () => [
-    { type: NgZone }
-];
-
-var _previous, _delay;
-class SdEditorValidatePipe {
-    constructor() {
-        _previous.set(this, void 0);
-        _delay.set(this, 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 validate
-    }
-    transform(sdId, item, items, gridOption) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { editor } = gridOption;
-            if (!editor.validate) {
-                item.editorErrorMessage = null;
-                return;
-            }
-            if (editor.type === 'popup') {
-                item.editorErrorMessage = null;
-                return;
-            }
-            if (editor.type === 'focus' && !item.editorStatus) {
-                item.editorErrorMessage = null;
-                return;
-            }
-            __classPrivateFieldSet(this, _previous, new Date());
-            yield new Promise(resolve => setTimeout(resolve, __classPrivateFieldGet(this, _delay)));
-            const now = new Date();
-            const dif = now.getTime() - __classPrivateFieldGet(this, _previous).getTime();
-            if (dif < __classPrivateFieldGet(this, _delay)) {
-                return;
-            }
-            const result = editor.validate(item, items === null || items === void 0 ? void 0 : items.indexOf(item));
-            if (result instanceof Promise) {
-                item.editorErrorMessage = yield result;
-                return;
-            }
-            else {
-                item.editorErrorMessage = result;
-                return;
-            }
-        });
-    }
-}
-_previous = new WeakMap(), _delay = new WeakMap();
-SdEditorValidatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdEditorValidate'
-            },] }
-];
-
-class SdStyleRowCss {
-    transform(item, gridOption) {
-        var _a, _b;
-        return ((_b = (_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.style) === null || _a === void 0 ? void 0 : _a.rowCss) === null || _b === void 0 ? void 0 : _b.call(_a, item)) || {};
-    }
-}
-SdStyleRowCss.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdStyleRowCss'
-            },] }
-];
-
-class SdDesktopEditorValidation {
-    constructor() { }
-}
-SdDesktopEditorValidation.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-desktop-editor-validation',
-                template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:items:gridOption | async\">\r\n  <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n    [matTooltip]=\"item.editorErrorMessage\">\r\n  </div>\r\n</ng-container>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".text-black400{color:#757575}:host{height:100%;left:0;padding:12px 0;position:absolute;top:0}:host .c-editor-validation{border-bottom-right-radius:2px;border-top-right-radius:2px;height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
-            },] }
-];
-SdDesktopEditorValidation.ctorParameters = () => [];
-SdDesktopEditorValidation.propDecorators = {
-    sdId: [{ type: Input }],
-    item: [{ type: Input }],
-    items: [{ type: Input }],
-    gridOption: [{ type: Input }]
-};
-
-class SdColumnInlineFilter {
-    constructor() {
-        this.columnFilter = {};
-        this.filterChange = new EventEmitter();
-        this.onFilterChange = () => {
-            this.filterChange.emit();
-        };
-    }
-    ngOnInit() {
-        var _a, _b;
-        if (this.column.type === 'date' || this.column.type === 'time' || this.column.type === 'datetime') {
-            if (!((_b = (_a = this.column) === null || _a === void 0 ? void 0 : _a.option) === null || _b === void 0 ? void 0 : _b.useFilterDate)) {
-                this.columnFilter[this.column.field] = this.columnFilter[this.column.field] || {
-                    from: null,
-                    to: null
-                };
-            }
-        }
-    }
-}
-SdColumnInlineFilter.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-column-inline-filter',
-                template: "<div class=\"c-inline-column\">\r\n  <ng-container *ngIf=\"\r\n  column.type === 'string' ||\r\n  column.type === 'number' ||\r\n  column.type === 'bool' ||\r\n  column.type === 'values' ||\r\n  column.type === 'date' ||\r\n  column.type === 'datetime' ||\r\n  column.type === 'time';\r\n  else noFilter\">\r\n    <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number *ngIf=\"column.type === 'number'\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\">\r\n        </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\">\r\n        </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n        column?.option?.selection === 'MULTIPLE' ||\r\n        column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n      \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"\r\n        column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n      \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range *ngIf=\"!column.option?.useFilterDate\" size=\"sm\" [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time *ngIf=\"column.option?.useFilterDate\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
-            },] }
-];
-SdColumnInlineFilter.ctorParameters = () => [];
-SdColumnInlineFilter.propDecorators = {
-    value: [{ type: Input }],
-    columnFilter: [{ type: Input }],
-    column: [{ type: Input }],
-    filterChange: [{ type: Output }]
-};
-
-class SdSelectionVisiblePipe {
-    constructor() {
-        this.transform = (rowData, selection) => {
-            var _a, _b;
-            const { actions } = selection;
-            const groupedActions = [];
-            rowData.actions = rowData.actions || [];
-            if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
-                rowData.selectable = true;
-                return rowData.selectable;
-            }
-            for (const action of actions) {
-                if ('children' in action) {
-                    let flag = false;
-                    let hasGroup = false;
-                    for (const childAction of action.children) {
-                        const { hidden, isGrouped } = childAction;
-                        const key = hash(childAction);
-                        if (isGrouped) {
-                            hasGroup = true;
-                        }
-                        if (typeof (hidden) === 'function') {
-                            if (!hidden(rowData)) {
-                                flag = true;
-                                rowData.actions.push(key);
-                                if (isGrouped) {
-                                    groupedActions.push(key);
-                                }
-                            }
-                        }
-                        else if (!hidden) {
-                            flag = true;
-                            rowData.actions.push(key);
-                            if (isGrouped) {
-                                groupedActions.push(key);
-                            }
-                        }
-                    }
-                    if (flag) {
-                        rowData.actions.push(hash(action));
-                        if (hasGroup) {
-                            groupedActions.push(hash(action));
-                        }
-                    }
-                }
-                else {
-                    const { hidden, isGrouped } = action;
-                    const key = hash(action);
-                    if (typeof (hidden) === 'function') {
-                        if (!hidden(rowData)) {
-                            rowData.actions.push(key);
-                            if (isGrouped) {
-                                groupedActions.push(key);
-                            }
-                        }
-                    }
-                    else if (!hidden) {
-                        rowData.actions.push(key);
-                        if (isGrouped) {
-                            groupedActions.push(key);
-                        }
-                    }
-                }
-            }
-            rowData.selectable = !!rowData.actions.length;
-            if (!rowData.selectable || !groupedActions.length || ((_b = (_a = rowData === null || rowData === void 0 ? void 0 : rowData.sdGroup) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length)) {
-                return rowData.selectable;
-            }
-            // Đối với trường hợp grouped, tuy selectable là true nhưng vẫn ẩn đi checkbox
-            // nếu các action đều thuộc groupedActions và rowData ko phải là dòng group
-            return rowData.actions.some(action => !groupedActions.includes(action));
-        };
-    }
-}
-SdSelectionVisiblePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'selectionVisible'
-            },] }
-];
-
-class SdGridQuickAction {
-    constructor() {
-        this.clear = new EventEmitter();
-        this.onClear = () => {
-            this.clear.emit();
-        };
-    }
-}
-SdGridQuickAction.decorators = [
-    { type: Component, args: [{
-                selector: 'sd-grid-quick-action',
-                template: "<sd-quick-action *ngIf=\"selectedItems | selectionActionFilter: gridOption?.selection?.actions as actions\"\r\n  [isOpened]=\"actions?.length\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedItems.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">{{ gridOption?.selection?.message || (\"selected items\" | sdTranslate) }}</div>\r\n  </div>\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n      (action)=\"onClear()\" width=\"35px\"></sd-button>\r\n  </div>\r\n</sd-quick-action>",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;min-width:48px;padding:12px 8px;position:static;top:0;width:auto}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;min-width:32px;text-align:center;top:12px;width:auto}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]
-            },] }
-];
-SdGridQuickAction.ctorParameters = () => [];
-SdGridQuickAction.propDecorators = {
-    gridOption: [{ type: Input }],
-    selectedItems: [{ type: Input }],
-    clear: [{ type: Output }]
-};
-
-var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
-class SdCellViewPipe {
-    constructor(deviceService, utilityService, columnValuesPipe) {
-        this.utilityService = utilityService;
-        this.columnValuesPipe = columnValuesPipe;
-        _maxSecond.set(this, 60);
-        _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
-        _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
-        _maxDay.set(this, __classPrivateFieldGet(this, _maxHour) * 30);
-        _maxMonth.set(this, __classPrivateFieldGet(this, _maxHour) * 365);
-        _isMobileOrTablet$1.set(this, false);
-        __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
-    }
-    transform(value, rowData, column, gridOption, key) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const { displayOnEmpty } = gridOption;
-            const { align, click, tooltip, htmlTemplate, transform } = column;
-            const result = {
-                badge: null,
-                tooltip: null,
-                display: {
-                    align: align || (column.type === 'number' ? 'right' : 'left'),
-                    value
-                },
-                click: null
-            };
-            // Display
-            if (typeof (htmlTemplate) === 'function') {
-                result.display.hasHtml = true;
-                result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
-            }
-            else {
-                if (column.type === 'datetime' || column.type === 'date' || column.type === 'time') {
-                    const { transformDate } = column;
-                    if (transformDate) {
-                        value = transformDate(value, rowData);
-                    }
-                }
-                if (typeof (transform) === 'function') {
-                    const val = transform(value, rowData);
-                    if (val instanceof Promise) {
-                        result.display.value = yield val;
-                    }
-                    else {
-                        result.display.value = val;
-                    }
-                }
-                else {
-                    if (column.type === 'date' || column.type === 'datetime') {
-                        const { option } = column;
-                        const seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
-                        if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'month' && seconds < __classPrivateFieldGet(this, _maxMonth)) {
-                            result.display.value = this.utilityService.timeDifference(value);
-                            result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                        }
-                        else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'day' && seconds < __classPrivateFieldGet(this, _maxDay)) {
-                            result.display.value = this.utilityService.timeDifference(value);
-                            result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                        }
-                        else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'hour' && seconds < __classPrivateFieldGet(this, _maxHour)) {
-                            result.display.value = this.utilityService.timeDifference(value);
-                            result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                        }
-                        else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'minute' && seconds < __classPrivateFieldGet(this, _maxMinute)) {
-                            result.display.value = this.utilityService.timeDifference(value);
-                            result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                        }
-                        else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'second' && seconds < __classPrivateFieldGet(this, _maxSecond)) {
-                            result.display.value = this.utilityService.timeDifference(value);
-                            result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
-                        }
-                        else {
-                            const date = Date.toFormat(value, 'dd/MM/yyyy');
-                            const time = Date.toFormat(value, 'HH:mm');
-                            const dateTime = Date.toFormat(value, 'HH:mm');
-                            if (column.type === 'datetime' && time && time !== '00:00') {
-                                result.display.value = dateTime;
-                                result.display.hasHtml = true;
-                                result.display.html = `<span class="d-block T14R text-black400">${Date.toFormat(value, 'HH:mm')}</span><span class="d-block T14R">${Date.toFormat(value, 'dd/MM/yyyy')}</span>`;
-                            }
-                            else {
-                                result.display.value = date;
-                            }
-                        }
-                    }
-                    if (column.type === 'time') {
-                        result.display.value = Date.toFormat(value, 'HH:mm');
-                    }
-                    if (column.type === 'values') {
-                        result.display.value = yield this.columnValuesPipe.transform(value, column);
-                    }
-                    else if (column.type === 'number' && Number.isNumber(value)) {
-                        result.display.value = Number.toVNCurrency(value);
-                    }
-                    if (column.type === 'bool') {
-                        const { option } = column;
-                        if (value !== undefined && value !== null && value !== '') {
-                            result.display.value = value === true ? ((option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True') : ((option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False');
-                        }
-                        else {
-                            result.display.value = null;
-                        }
-                    }
-                }
-                if (displayOnEmpty) {
-                    let values = [null, undefined, ''];
-                    if (typeof (displayOnEmpty) === 'object') {
-                        const { display, emptyValues } = displayOnEmpty;
-                        values = [null, undefined, '', ...emptyValues];
-                        if (values.includes(result.display.value)) {
-                            if (typeof (display) === 'function') {
-                                result.display.hasHtml = true;
-                                result.display.html = display(rowData, column);
-                            }
-                            else {
-                                result.display.hasHtml = true;
-                                result.display.html = `<div class="T16R text-black400">--</div>`;
-                            }
-                        }
-                    }
-                    else {
-                        if (values.includes(result.display.value)) {
-                            if (typeof (displayOnEmpty) === 'function') {
-                                result.display.hasHtml = true;
-                                result.display.html = displayOnEmpty(rowData, column);
-                            }
-                            else {
-                                result.display.hasHtml = true;
-                                result.display.html = `<div class="T16R text-black400">--</div>`;
-                            }
-                        }
-                    }
-                }
-            }
-            // Badge
-            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
-                result.badge = {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: column.badge(value, rowData),
-                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
-                };
-            }
-            else if (column.type === 'bool') {
-                result.badge = {
-                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
-                    color: !!value ? 'success' : 'danger',
-                    icon: null
-                };
-            }
-            // Tooltip
-            if (typeof (tooltip) === 'function') {
-                result.tooltip = tooltip(value, rowData);
-            }
-            // Clickable
-            if (typeof (click) === 'function') {
-                result.click = () => click(value, rowData);
-            }
-            return result;
-        });
-    }
-}
-_maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet$1 = new WeakMap();
-SdCellViewPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'cellView'
-            },] }
-];
-SdCellViewPipe.ctorParameters = () => [
-    { type: DeviceDetectorService },
-    { type: SdUtilityService },
-    { type: SdColumnValuesPipe }
-];
-
-class SdGroupPipe {
-    transform(items, gridOption) {
-        var _a;
-        const { group } = gridOption;
-        if (!group) {
-            return items;
-        }
-        const { fields, htmlTemplate } = group;
-        if (!(fields === null || fields === void 0 ? void 0 : fields.length)) {
-            return items;
-        }
-        const groupItem = {};
-        for (const item of items) {
-            let obj = {};
-            for (const field of fields) {
-                obj = Object.assign(Object.assign({}, obj), ((_a = item[field]) !== null && _a !== void 0 ? _a : { [field]: item[field] }));
-            }
-            const key = hash(obj);
-            if (!groupItem[key]) {
-                groupItem[key] = [];
-            }
-            groupItem[key].push(item);
-        }
-        const results = [];
-        for (const key of Object.keys(groupItem)) {
-            results.push({
-                sdGroup: {
-                    items: groupItem[key],
-                    htmlTemplate: htmlTemplate(groupItem[key])
-                }
-            });
-            for (const item of groupItem[key]) {
-                results.push(item);
-            }
-        }
-        return results;
-    }
-}
-SdGroupPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'sdGroup'
-            },] }
-];
-
-class MatPaginatorIntlCro extends MatPaginatorIntl {
-    constructor() {
-        super(...arguments);
-        this.firstPageLabel = 'Trang đầu';
-        this.lastPageLabel = 'Trang cuối';
-        this.itemsPerPageLabel = 'Kích thước trang';
-        this.nextPageLabel = 'Trang sau';
-        this.previousPageLabel = 'Trang trước';
-        this.getRangeLabel = (page, pageSize, length) => {
-            if (length === 0 || pageSize === 0) {
-                return '';
-            }
-            const from = page * pageSize + 1;
-            const to = from + (length - page * pageSize > pageSize ? pageSize : length - page * pageSize) - 1;
-            return `${from}-${to} trên ${length}`;
-        };
-    }
-}
-MatPaginatorIntlCro.decorators = [
-    { type: Injectable }
-];
-class SdGridMaterialModule {
-}
-SdGridMaterialModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    MatInputModule,
-                    MatFormFieldModule,
-                    MatSortModule,
-                    MatPaginatorModule,
-                    MatTableModule,
-                    MatMenuModule,
-                    MatIconModule,
-                    MatButtonModule,
-                    MatTooltipModule,
-                    MatProgressSpinnerModule,
-                    MatChipsModule,
-                    MatRadioModule,
-                    MatSlideToggleModule,
-                    MatCheckboxModule,
-                    MatListModule,
-                    MatDividerModule,
-                    CdkTableModule,
-                    DragDropModule,
-                    SdFormModule,
-                    SdServiceModule,
-                    MatSliderModule,
-                    ScrollingModule,
-                    SdCommonModule
-                ],
-                declarations: [
-                    SdGridQuickAction,
-                    SdDesktopCell,
-                    SdDesktopCellEditor,
-                    SdDesktopEditorValidation,
-                    SdDesktopCellView,
-                    SdDesktopCellChildrenView,
-                    SdDesktopCommand,
-                    SdColumnInlineFilter,
-                    SdGridMaterial,
-                    SdMaterialFooterDefDirective,
-                    SdMaterialCellDefDirective,
-                    SdMaterialFilterDefDirective,
-                    SdMaterialSubInformationDefDirective,
-                    SdMaterialEmptyDataDefDirective,
-                    SdPopupExport,
-                    SdPopupGridConfiguration,
-                    SdGridFilter,
-                    SdPopupFilter,
-                    SdDynamicColumn,
-                    // Pipes
-                    SdGridConfigurationResultPipe,
-                    SdColumnChildrenFilterPipe,
-                    SdColumnTitlePipe,
-                    SdCommandFilterPipe,
-                    SdCommandDisablePipe,
-                    SdCommandIconPipe,
-                    SdCommandTitlePipe,
-                    SdColumnValuesPipe,
-                    SdColumnHtmlTemplatePipe,
-                    SdColumnTransformPipe,
-                    SdColumnTooltipPipe,
-                    SdColumnBadgePipe,
-                    SdFilterColumnPipe,
-                    SdFilterExternalPipe,
-                    SdSelectionActionFilterPipe,
-                    SdSelectionVisiblePipe,
-                    SdSelectionDisablePipe,
-                    SdSelectionVisibleSelectAllPipe,
-                    SdEditorHandlerRowPipe,
-                    SdEditorHandlerColumnPipe,
-                    SdEditorValidatePipe,
-                    SdStyleRowCss,
-                    SdCellViewPipe,
-                    SdGroupPipe
-                ],
-                exports: [
-                    SdGridMaterial,
-                    SdMaterialFooterDefDirective,
-                    SdMaterialCellDefDirective,
-                    SdMaterialFilterDefDirective,
-                    SdMaterialEmptyDataDefDirective,
-                    SdMaterialSubInformationDefDirective
-                ],
-                providers: [
-                    DatePipe,
-                    DecimalPipe,
-                    CdkColumnDef,
-                    SdGridFilterService,
-                    SdGridConfigurationService,
-                    SdGeneratedColumnService,
-                    SdColumnValuesPipe,
-                    SdEditorHandlerColumnPipe,
-                    {
-                        provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro
-                    }
-                ]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandIconPipe as ɵba, SdCommandTitlePipe as ɵbb, SdColumnHtmlTemplatePipe as ɵbc, SdColumnTransformPipe as ɵbd, SdColumnTooltipPipe as ɵbe, SdColumnBadgePipe as ɵbf, SdFilterColumnPipe as ɵbg, SdFilterExternalPipe as ɵbh, SdSelectionActionFilterPipe as ɵbi, SdSelectionVisiblePipe as ɵbj, SdSelectionDisablePipe as ɵbk, SdSelectionVisibleSelectAllPipe as ɵbl, SdEditorHandlerRowPipe as ɵbm, SdEditorValidatePipe as ɵbn, SdStyleRowCss as ɵbo, SdCellViewPipe as ɵbp, SdGroupPipe as ɵbq, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdColumnValuesPipe as ɵi, SdEditorHandlerColumnPipe as ɵj, SdGridQuickAction as ɵk, SdDesktopCell as ɵl, SdDesktopCellEditor as ɵm, SdDesktopEditorValidation as ɵn, SdDesktopCellView as ɵo, SdDesktopCellChildrenView as ɵp, SdDesktopCommand as ɵq, SdColumnInlineFilter as ɵr, SdPopupGridConfiguration as ɵs, SdDynamicColumn as ɵt, SdGeneratedColumnService as ɵu, SdGridConfigurationResultPipe as ɵv, SdColumnChildrenFilterPipe as ɵw, SdColumnTitlePipe as ɵx, SdCommandFilterPipe as ɵy, SdCommandDisablePipe as ɵz };
-//# sourceMappingURL=sd-angular-core-grid-material.js.map