@sd-angular/core 1.2.94 → 1.2.97

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

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