@sd-angular/core 1.3.146 → 1.3.148

package/fesm2015/sd-angular-core-table.js

@@ -0,0 +1,2927 @@
+import { SdScrollDirective, SdCommonModule } from '@sd-angular/core/common';
+import { InjectionToken, Directive, TemplateRef, Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, Inject, Optional, Pipe, QueryList, ContentChild, ContentChildren, EventEmitter, HostListener, Output, NgModule } from '@angular/core';
+import { CommonModule, DatePipe, DecimalPipe } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { __classPrivateFieldGet, __classPrivateFieldSet, __awaiter, __rest } 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 { BehaviorSubject, Subscription, Subject, isObservable, combineLatest } from 'rxjs';
+import { SdNotifyService } from '@sd-angular/core/notify';
+import { startWith, map, debounceTime, switchMap } from 'rxjs/operators';
+import { SdModal } from '@sd-angular/core/modal';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { SdExportService } from '@sd-angular/core/export';
+import * as hash from 'object-hash';
+import hash__default from 'object-hash';
+import { SdSettingService } from '@sd-angular/core/setting';
+import { SdQuickAction } from '@sd-angular/core/quick-action';
+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 { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+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 { SdTranslateService } from '@sd-angular/core/translate';
+import { MatListModule } from '@angular/material/list';
+import { MatDividerModule } from '@angular/material/divider';
+import { SdUtilityService } from '@sd-angular/core/utility';
+import { SdGroupModule } from '@sd-angular/core/group';
+
+const DEFAULT_TABLE_CONFIG = {
+    paginate: {
+        pageSize: 50,
+        pages: [50, 100, 200]
+    }
+};
+const TABLE_CONFIG = new InjectionToken('sd-table.configuration');
+
+class SdMaterialCellDefDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+SdMaterialCellDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sdMaterialCellDef]'
+            },] }
+];
+SdMaterialCellDefDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+SdMaterialCellDefDirective.propDecorators = {
+    sdMaterialCellDef: [{ type: Input }]
+};
+
+var _filterRegister;
+class SdPopupFilter {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        _filterRegister.set(this, void 0);
+        this.externalFilters = [];
+        this.externalFilter = {};
+        this.inlineExternal = {};
+        this.columns = [];
+        this.columnFilter = {};
+        this.inlineColumn = {};
+        this.filterDefs = [];
+        this.filterDef = {};
+        this.inlineFilterDef = {};
+        this.open = () => {
+            const configuration = __classPrivateFieldGet(this, _filterRegister).configuration.get();
+            this.inlineColumn = JSON.parse(JSON.stringify(configuration.inlineColumn));
+            this.inlineExternal = JSON.parse(JSON.stringify(configuration.inlineExternal));
+            this.inlineFilterDef = JSON.parse(JSON.stringify(configuration.inlineFilterDef));
+            const filterValue = __classPrivateFieldGet(this, _filterRegister).value.get();
+            this.columnFilter = JSON.parse(JSON.stringify(filterValue.columnFilter));
+            this.externalFilter = JSON.parse(JSON.stringify(filterValue.externalFilter));
+            this.filterDef = JSON.parse(JSON.stringify(filterValue.filterDef));
+            this.modal.open();
+            this.cdRef.markForCheck();
+        };
+        this.close = () => {
+            this.modal.close();
+            this.cdRef.markForCheck();
+        };
+        this.onApply = () => {
+            __classPrivateFieldGet(this, _filterRegister).configuration.set({
+                inlineColumn: this.inlineColumn,
+                inlineExternal: this.inlineExternal,
+                inlineFilterDef: this.inlineFilterDef,
+            });
+            __classPrivateFieldGet(this, _filterRegister).value.set({
+                columnFilter: this.columnFilter,
+                externalFilter: this.externalFilter,
+                filterDef: this.filterDef,
+            });
+            this.modal.close();
+            this.cdRef.markForCheck();
+        };
+    }
+    set filterRegister(value) {
+        __classPrivateFieldSet(this, _filterRegister, value);
+    }
+    ngAfterViewInit() { }
+    ngOnDestroy() { }
+    onClear() {
+        __classPrivateFieldGet(this, _filterRegister).value.remove();
+        this.modal.close();
+        this.cdRef.markForCheck();
+    }
+}
+_filterRegister = new WeakMap();
+SdPopupFilter.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-popup-filter',
+                template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\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\r\n            *ngIf=\"column.type === 'string'\"\r\n            [label]=\"column.title\"\r\n            type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf=\"column.type === 'number'\"\r\n            [label]=\"column.title\"\r\n            type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'bool'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"[\r\n              { value: '1', display: column.trueValue || 'True' },\r\n              { value: '0', display: column.falseValue || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            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\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            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\"> </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 }\"> </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()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></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()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                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: [SdModal,] }],
+    filterRegister: [{ type: Input }],
+    externalFilters: [{ type: Input }],
+    columns: [{ type: Input }],
+    filterDefs: [{ type: Input }]
+};
+
+var _subscription;
+class SdGridFilter {
+    constructor(ref, deviceService) {
+        this.ref = ref;
+        this.deviceService = deviceService;
+        this.columns = [];
+        this.externalFilters = [];
+        this.filterDefs = [];
+        this.filterRegisterChange = new BehaviorSubject(null);
+        this.filterDef = {};
+        this.inlineFilterDef = {};
+        this.columnFilter = {};
+        this.inlineColumn = {};
+        this.externalFilter = {};
+        this.inlineExternal = {};
+        _subscription.set(this, new Subscription());
+        this.onFilter = (item) => {
+            this.filterRegister.value.set({
+                columnFilter: this.columnFilter,
+                externalFilter: this.externalFilter,
+                filterDef: this.filterDef,
+            });
+        };
+        this.updateFilter = () => {
+            this.filterRegister.value.set({
+                columnFilter: this.columnFilter,
+                externalFilter: this.externalFilter,
+                filterDef: this.filterDef,
+                notReload: true
+            });
+        };
+        this.open = () => {
+            this.popupFilter.open();
+        };
+        this.isMobileOrTablet = !this.deviceService.isDesktop();
+        this.ref.markForCheck();
+    }
+    set _filter(filter) {
+        this.filter = filter;
+    }
+    set _externalFilters(value) {
+        this.externalFilters = value || [];
+    }
+    set _filterRegister(value) {
+        this.filterRegister = value;
+        this.filterRegisterChange.next(this.filterRegister);
+    }
+    ngAfterViewInit() {
+        __classPrivateFieldGet(this, _subscription).add(this.filterRegisterChange.pipe(startWith(this.filterRegister)).subscribe(filterRegister => {
+            if (this.filterRegister) {
+                __classPrivateFieldGet(this, _subscription).add(this.filterRegister.configuration.observer.subscribe(configuration => {
+                    const { inlineColumn, inlineExternal, inlineFilterDef } = configuration;
+                    this.inlineColumn = inlineColumn;
+                    this.inlineExternal = inlineExternal;
+                    this.inlineFilterDef = inlineFilterDef;
+                    this.ref.markForCheck();
+                }));
+                __classPrivateFieldGet(this, _subscription).add(this.filterRegister.value.observer.subscribe(value => {
+                    const { columnFilter, externalFilter, filterDef } = value;
+                    this.columnFilter = columnFilter;
+                    this.externalFilter = externalFilter;
+                    this.filterDef = filterDef;
+                    this.ref.markForCheck();
+                }));
+            }
+        }));
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _subscription).unsubscribe();
+    }
+}
+_subscription = new WeakMap();
+SdGridFilter.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-grid-filter',
+                template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0\">\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\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [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\" [displayField]=\"item.option?.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [disabled]=\"item.filter?.disabled\"\r\n          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)\"\r\n          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\"\r\n            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\"\r\n            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 [filterRegister]=\"filterRegister\" [columns]=\"columns\"\r\n      [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;padding-bottom:10px;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
+            },] }
+];
+SdGridFilter.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DeviceDetectorService }
+];
+SdGridFilter.propDecorators = {
+    popupFilter: [{ type: ViewChild, args: [SdPopupFilter,] }],
+    _filter: [{ type: Input, args: ['filter',] }],
+    columns: [{ type: Input }],
+    _externalFilters: [{ type: Input, args: ['externalFilters',] }],
+    filterDefs: [{ type: Input }],
+    _filterRegister: [{ type: Input, args: ['filterRegister',] }]
+};
+
+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 SdMaterialSubInformationDefDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+SdMaterialSubInformationDefDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sdMaterialSubInformationDef]'
+            },] }
+];
+SdMaterialSubInformationDefDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+
+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 }
+];
+
+var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
+class SdTableConfigurationService {
+    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__default({
+                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 => 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));
+        //   }
+        // }
+        this.generateConfigurationResult = (configuration, gridOption, sdSubInformation) => {
+            var _a, _b;
+            const result = {
+                column: {},
+                fixedColumn: {},
+                firstColumns: [],
+                secondColumns: [],
+                firstHeaders: [],
+                secondHeaders: [],
+                displayedColumns: [],
+                displayedFooters: [],
+                multipleHeader: false,
+            };
+            const { selector, commands, group } = gridOption || {};
+            if (selector === null || selector === void 0 ? void 0 : selector.visible) {
+                result.firstHeaders.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
+                result.displayedColumns.push(__classPrivateFieldGet(this, _COLUMNS).SELECTION);
+            }
+            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;
+                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);
+                    result.displayedColumns.push(col.origin.field);
+                    if (column.type === 'children') {
+                        (_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);
+                        });
+                    }
+                }
+            });
+            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();
+SdTableConfigurationService.decorators = [
+    { type: Injectable }
+];
+SdTableConfigurationService.ctorParameters = () => [
+    { type: SdSettingService },
+    { type: undefined, decorators: [{ type: Inject, args: [TABLE_CONFIG,] }, { type: Optional }] }
+];
+
+const MapToSdTableItem = (item) => ({
+    current: JSON.parse(JSON.stringify(item)),
+    origin: item,
+    meta: {
+        id: hash(item),
+        expand: {
+            isExpanding: false,
+            isExpanded: false,
+        },
+        group: {},
+        selector: { actions: [], isSelected: false, selectable: false },
+    },
+});
+
+var _prefix, _cache$1;
+class SdColumnValuesPipe {
+    constructor() {
+        _prefix.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, _f, _g, _h, _j, _k;
+            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 _l = column.option, { items, valueField, displayField, selection } = _l, remain = __rest(_l, ["items", "valueField", "displayField", "selection"]);
+            const key = hash__default({
+                prefix: __classPrivateFieldGet(this, _prefix),
+                valueField,
+                displayField,
+                selection,
+                remain,
+                value
+            });
+            const isMultible = ['MULTIPLE', 'MULTIPLEAUTOCOMPLETE', 'MULTIPLE_EDITOR', 'MULTIPLEAUTOCOMPLETE_EDITOR'].includes(selection);
+            if (typeof (items) === 'function') {
+                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                    const values = yield items(value, true);
+                    let result = '';
+                    if (isMultible && Array.isArray(value)) {
+                        result = ((_e = (_d = values === null || values === void 0 ? void 0 : values.filter(e => value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]))) === null || _d === void 0 ? void 0 : _d.map(e => e === null || e === void 0 ? void 0 : e[displayField])) === null || _e === void 0 ? void 0 : _e.join(', ')) || (value === null || value === void 0 ? void 0 : value.join(', '));
+                    }
+                    else {
+                        result = ((_f = values === null || values === void 0 ? void 0 : values.find(e => (e === null || e === void 0 ? void 0 : e[valueField]) === value)) === null || _f === void 0 ? void 0 : _f[displayField]) || value;
+                    }
+                    __classPrivateFieldGet(this, _cache$1)[key] = {
+                        result
+                    };
+                }
+            }
+            else {
+                if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                    let result = '';
+                    if (isMultible && Array.isArray(value)) {
+                        result = (_j = (_h = (_g = items === null || items === void 0 ? void 0 : items.filter(e => value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]))) === null || _g === void 0 ? void 0 : _g.map(e => e === null || e === void 0 ? void 0 : e[displayField])) === null || _h === void 0 ? void 0 : _h.join(', ')) !== null && _j !== void 0 ? _j : value === null || value === void 0 ? void 0 : value.join(', ');
+                    }
+                    else {
+                        result = ((_k = items === null || items === void 0 ? void 0 : items.find(e => (e === null || e === void 0 ? void 0 : e[valueField]) === value)) === null || _k === void 0 ? void 0 : _k[displayField]) || value;
+                    }
+                    __classPrivateFieldGet(this, _cache$1)[key] = {
+                        result
+                    };
+                }
+            }
+            return __classPrivateFieldGet(this, _cache$1)[key].result;
+        });
+    }
+}
+_prefix = new WeakMap(), _cache$1 = new WeakMap();
+SdColumnValuesPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'columnValues'
+            },] }
+];
+
+var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
+class SdTableFilterService {
+    constructor(settingService) {
+        this.settingService = settingService;
+        _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
+        _filterValue.set(this, 'GRID-FILTER-VALUE');
+        _cache$2.set(this, {});
+        this.register = (filter, args) => {
+            let cacheSession = false;
+            const { id, columns, externalFilters } = args;
+            const tempKey = hash__default({
+                id,
+                columns: (columns === null || columns === void 0 ? void 0 : columns.map(e => e.field).filter(field => !!field)) || [],
+                externalFilters: (externalFilters === null || externalFilters === void 0 ? void 0 : externalFilters.map(e => e.field).filter(field => !!field)) || [],
+            });
+            const key = (filter === null || filter === void 0 ? void 0 : filter.key) || tempKey;
+            if (!(filter === null || filter === void 0 ? void 0 : filter.key)) {
+                cacheSession = true; // Nếu không có key thì chỉ lưu theo session
+            }
+            if (!__classPrivateFieldGet(this, _cache$2)[key]) {
+                // Setting của filter configuration
+                const filterConfiguration = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterConfiguration),
+                    key,
+                }, {
+                    default: __classPrivateFieldGet(this, _defaultConfiguration).call(this, args),
+                    type: cacheSession ? 'session' : undefined,
+                });
+                // Lấy giá trị configuration merge với giá trị defaultShowing của args nếu như args có thay đổi
+                filterConfiguration.set(__classPrivateFieldGet(this, _initConfiguration).call(this, args, filterConfiguration.get()));
+                // Setting của filter value
+                const filterValue = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterValue),
+                    key: !(filter === null || filter === void 0 ? void 0 : filter.cacheFilter) ? tempKey : key,
+                }, {
+                    default: __classPrivateFieldGet(this, _defaultValue).call(this, args),
+                    type: cacheSession || !(filter === null || filter === void 0 ? void 0 : filter.cacheFilter) ? 'session' : undefined,
+                });
+                // Lấy giá trị value merge với giá trị default của args nếu như args có thay đổi
+                filterValue.set(__classPrivateFieldGet(this, _initValue).call(this, args, filterValue.get()));
+                __classPrivateFieldGet(this, _cache$2)[key] = {
+                    configuration: {
+                        get: () => {
+                            return filterConfiguration.get();
+                        },
+                        set: (configuration) => {
+                            const { inlineColumn, inlineExternal, inlineFilterDef } = configuration;
+                            filterConfiguration.set({
+                                inlineColumn,
+                                inlineExternal,
+                                inlineFilterDef,
+                            });
+                            return {
+                                inlineColumn,
+                                inlineExternal,
+                                inlineFilterDef,
+                            };
+                        },
+                        remove: () => {
+                            filterConfiguration.set(__classPrivateFieldGet(this, _defaultConfiguration).call(this, args));
+                        },
+                        observer: filterConfiguration.observer.pipe(startWith(filterConfiguration.get()), 
+                        // Sử dụng mặc định nếu bị reset
+                        map(configuration => configuration || __classPrivateFieldGet(this, _defaultConfiguration).call(this, args))),
+                    },
+                    value: {
+                        get: () => {
+                            return filterValue.get();
+                        },
+                        set: (value) => {
+                            const keys = Object.keys(value || {});
+                            const current = filterValue.get();
+                            const { columnOperator, columnFilter, externalFilter, filterDef, notReload } = current;
+                            const updatedFilter = {
+                                // Filter column
+                                columnOperator: keys.includes('columnOperator') ? (value === null || value === void 0 ? void 0 : value.columnOperator) || {} : columnOperator,
+                                columnFilter: keys.includes('columnFilter') ? (value === null || value === void 0 ? void 0 : value.columnFilter) || {} : columnFilter,
+                                // Filter external
+                                externalFilter: keys.includes('externalFilter') ? (value === null || value === void 0 ? void 0 : value.externalFilter) || {} : externalFilter,
+                                // Filter def
+                                filterDef: keys.includes('filterDef') ? (value === null || value === void 0 ? void 0 : value.filterDef) || {} : filterDef,
+                                // Force
+                                notReload: !!notReload,
+                            };
+                            filterValue.set(updatedFilter);
+                            return updatedFilter;
+                        },
+                        remove: () => {
+                            filterValue.set(__classPrivateFieldGet(this, _defaultValue).call(this, args));
+                        },
+                        observer: filterValue.observer.pipe(startWith(filterValue.get()), 
+                        // Sử dụng mặc định nếu bị reset
+                        map(value => value || __classPrivateFieldGet(this, _defaultValue).call(this, args))),
+                    },
+                };
+            }
+            return __classPrivateFieldGet(this, _cache$2)[key];
+        };
+        _defaultConfiguration.set(this, (args) => {
+            var _a;
+            const { columns, externalFilters, filterDefs } = args;
+            const inlineColumn = {};
+            const inlineExternal = {};
+            const inlineFilterDef = {};
+            // Filter column
+            for (const item of columns || []) {
+                inlineColumn[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.defaultShowing;
+            }
+            // Filter external
+            for (const item of externalFilters || []) {
+                inlineExternal[item.field] = item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            // Filter def
+            for (const item of filterDefs || []) {
+                inlineFilterDef[item.sdMaterialFilterDef] = item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            return {
+                // Filter column
+                inlineColumn,
+                // Filter external
+                inlineExternal,
+                // Filter def
+                inlineFilterDef,
+            };
+        });
+        _defaultValue.set(this, (args) => {
+            var _a;
+            const columnFilter = {};
+            const externalFilter = {};
+            const filterDef = {};
+            const { columns, externalFilters, filterDefs } = args;
+            // Filter column
+            for (const item of columns || []) {
+                columnFilter[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.default;
+            }
+            // Filter external
+            for (const item of externalFilters || []) {
+                externalFilter[item.field] = item === null || item === void 0 ? void 0 : item.default;
+            }
+            // Filter def
+            for (const item of filterDefs || []) {
+                filterDef[item.sdMaterialFilterDef] = undefined;
+            }
+            return {
+                // Filter column
+                columnFilter,
+                // Filter external
+                externalFilter,
+                // Filter def
+                filterDef,
+            };
+        });
+        _initConfiguration.set(this, (args, configuration) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const { columns, externalFilters, filterDefs } = args;
+            const inlineColumn = {};
+            const inlineExternal = {};
+            const inlineFilterDef = {};
+            // Filter column
+            for (const item of columns || []) {
+                inlineColumn[item.field] = (_b = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.defaultShowing;
+            }
+            // Filter external
+            for (const item of externalFilters || []) {
+                inlineExternal[item.field] = (_e = (_d = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _d === void 0 ? void 0 : _d[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            // Filter def
+            for (const item of filterDefs || []) {
+                inlineFilterDef[item.sdMaterialFilterDef] = (_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _f === void 0 ? void 0 : _f[item.sdMaterialFilterDef]) !== null && _g !== void 0 ? _g : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            return {
+                // Filter column
+                inlineColumn,
+                // Filter external
+                inlineExternal,
+                // Filter def
+                inlineFilterDef,
+            };
+        });
+        _initValue.set(this, (args, value) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const columnFilter = {};
+            const externalFilter = {};
+            const filterDef = {};
+            const { columns, externalFilters, filterDefs } = args;
+            // Filter column
+            for (const item of columns || []) {
+                columnFilter[item.field] = (_b = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.default;
+            }
+            // Filter external
+            for (const item of externalFilters || []) {
+                if (item.type === 'daterange') {
+                    externalFilter[item.field] = {
+                        from: (_f = (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : (_g = item.default) === null || _g === void 0 ? void 0 : _g.from,
+                        to: (_k = (_j = (_h = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _h === void 0 ? void 0 : _h[item.field]) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : (_l = item.default) === null || _l === void 0 ? void 0 : _l.to,
+                    };
+                }
+                else {
+                    externalFilter[item.field] = (_o = (_m = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _m === void 0 ? void 0 : _m[item.field]) !== null && _o !== void 0 ? _o : item === null || item === void 0 ? void 0 : item.default;
+                }
+            }
+            // Filter def
+            for (const item of filterDefs || []) {
+                filterDef[item.sdMaterialFilterDef] = (_q = (_p = value === null || value === void 0 ? void 0 : value.filterDef) === null || _p === void 0 ? void 0 : _p[item.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : undefined;
+            }
+            return {
+                // Filter column
+                columnFilter,
+                // Filter external
+                externalFilter,
+                // Filter def
+                filterDef,
+            };
+        });
+    }
+}
+_filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _defaultConfiguration = new WeakMap(), _defaultValue = new WeakMap(), _initConfiguration = new WeakMap(), _initValue = new WeakMap();
+SdTableFilterService.decorators = [
+    { type: Injectable }
+];
+SdTableFilterService.ctorParameters = () => [
+    { type: SdSettingService }
+];
+
+var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems;
+class SdTable {
+    constructor(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService) {
+        this.ref = ref;
+        this.configuration = configuration;
+        this.gridConfigurationService = gridConfigurationService;
+        this.exportService = exportService;
+        this.notifyService = notifyService;
+        this.columnValuesPipe = columnValuesPipe;
+        this.gridFilterService = gridFilterService;
+        _gridId.set(this, v4());
+        this.key = v4();
+        _optionChanges.set(this, new Subject());
+        _localItems.set(this, []);
+        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.columnOperator = {};
+        this.columnFilter = {};
+        // Subcription
+        _subscription$1.set(this, new Subscription());
+        _reload.set(this, new Subject());
+        this.isExporting = false;
+        this.isSelectAll = false;
+        this.exportTitle = 'Export';
+        _loadCompleted.set(this, false);
+        _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;
+            const { columnOperator, columnFilter, externalFilter, filterDef } = this.filterRegister.value.get();
+            return {
+                columnOperator: columnOperator || {},
+                rawColumnFilter: columnFilter || {},
+                rawExternalFilter: externalFilter || {},
+                rawFilterDef: filterDef || {},
+                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                pageNumber,
+                pageSize,
+                isExported: true,
+            };
+        });
+        _initConfiguration$1.set(this, (option) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+            // Init pagination
+            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_TABLE_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_TABLE_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,
+            };
+            for (const column of option.columns || []) {
+                if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
+                    if (column.type === 'string') {
+                        column.filter.operator.list = ((_y = (_x = (_w = this.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
+                    }
+                    if (column.type === 'number') {
+                        column.filter.operator.list = ((_1 = (_0 = (_z = this.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                    }
+                    if (column.type === 'values') {
+                        column.filter.operator.list = ((_4 = (_3 = (_2 = this.configuration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
+                    }
+                    if (column.type === 'date' || column.type === 'datetime') {
+                        column.filter.operator.list = ((_7 = (_6 = (_5 = this.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
+                    }
+                }
+            }
+            return option;
+        });
+        _loadFilterRegister.set(this, () => {
+            var _a, _b, _c, _d;
+            // Init filter
+            if (this.gridOption) {
+                if (!this.filterRegister) {
+                    this.filterRegister = this.gridFilterService.register((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter, {
+                        id: __classPrivateFieldGet(this, _gridId),
+                        columns: (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.columns,
+                        externalFilters: (_d = (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.externalFilters,
+                        filterDefs: this.filterDefs,
+                    });
+                    __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.value.observer
+                        .pipe(debounceTime(500), map(filterValue => {
+                        const { columnOperator, columnFilter, notReload } = filterValue;
+                        this.columnOperator = columnOperator;
+                        this.columnFilter = columnFilter;
+                        if (!notReload) {
+                            __classPrivateFieldGet(this, _paginator).pageIndex = 0;
+                            __classPrivateFieldGet(this, _reload).next({
+                                force: false,
+                            });
+                        }
+                    }))
+                        .subscribe());
+                }
+            }
+        });
+        _filterLocal.set(this, (localItems, filterInfo) => {
+            const { columns } = this.gridOption;
+            const { rawColumnFilter, orderBy, orderDirection, pageSize, pageNumber } = filterInfo;
+            const items = localItems.filter(tableItem => {
+                var _a, _b, _c, _d;
+                const item = tableItem.current;
+                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;
+                                }
+                                const columnTime = new Date(columnValue).getTime();
+                                const fromDateTime = (fromDate === null || fromDate === void 0 ? void 0 : fromDate.getTime()) || null;
+                                const toDateTime = (toDate === null || toDate === void 0 ? void 0 : toDate.getTime()) || null;
+                                if (fromDateTime && fromDateTime > columnTime) {
+                                    return false;
+                                }
+                                if (toDateTime && columnTime > toDateTime) {
+                                    return false;
+                                }
+                            }
+                        }
+                    }
+                }
+                return true;
+            });
+            // Sort
+            if (orderBy && orderDirection) {
+                const column = columns.find(e => e.field === orderBy);
+                if (column) {
+                    const { type, field } = column;
+                    items.sort((tableItemCurrent, tableItemNext) => {
+                        const current = tableItemCurrent.current;
+                        const next = tableItemNext.current;
+                        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;
+            const { columnOperator, columnFilter, externalFilter, filterDef } = this.filterRegister.value.get();
+            return {
+                columnOperator: columnOperator || {},
+                rawColumnFilter: columnFilter || {},
+                rawExternalFilter: externalFilter || {},
+                rawFilterDef: filterDef || {},
+                orderBy: ((_a = __classPrivateFieldGet(this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                orderDirection: ((_b = __classPrivateFieldGet(this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                pageNumber: ((_c = __classPrivateFieldGet(this, _paginator)) === null || _c === void 0 ? void 0 : _c.pageIndex) || 0,
+                pageSize: ((_d = __classPrivateFieldGet(this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50,
+            };
+        });
+        _load$1.set(this, (filterReq, force = true) => __awaiter(this, void 0, void 0, function* () {
+            this.isLoading = true;
+            if (this.gridOption.type === 'server') {
+                const { items } = this.gridOption;
+                const data = yield items(filterReq).catch(err => {
+                    this.notifyService.notify.warning('Có lỗi xảy ra');
+                    console.error(err);
+                    return {
+                        items: [],
+                        total: 0,
+                    };
+                });
+                this.isLoading = false;
+                return {
+                    items: (data === null || data === void 0 ? void 0 : data.items.map(MapToSdTableItem)) || [],
+                    total: (data === null || data === void 0 ? void 0 : data.total) || 0,
+                };
+            }
+            if (force) {
+                const { items } = this.gridOption;
+                const results = items();
+                let data = [];
+                if (results instanceof Promise) {
+                    data = yield results.catch(err => {
+                        this.notifyService.notify.warning('Có lỗi xảy ra');
+                        console.error(err);
+                        return [];
+                    });
+                }
+                else {
+                    data = results;
+                }
+                if (!Array.isArray(data)) {
+                    this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
+                    data = [];
+                }
+                __classPrivateFieldSet(this, _localItems, data.map(MapToSdTableItem));
+                this.isLoading = false;
+            }
+            return __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq);
+        }));
+        _render.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            (_a = this.sdScroll) === null || _a === void 0 ? void 0 : _a.scrollTop();
+            this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
+            this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
+            yield ((_d = (_c = (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.reload) === null || _c === void 0 ? void 0 : _c.onReload) === null || _d === void 0 ? void 0 : _d.call(_c, this.items));
+            this.isSelectAll = this.items.every(e => e.meta.selector.isSelected);
+            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
+        }));
+        this.reload = (force = true) => __awaiter(this, void 0, void 0, function* () {
+            var _e, _f;
+            (_f = (_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
+            const data = yield __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force);
+            __classPrivateFieldGet(this, _render).call(this, data);
+        });
+        _exportedItems.set(this, (pageNumber = 0, pageSize = 10000) => __awaiter(this, void 0, void 0, function* () {
+            var _g, _h;
+            if ((_g = this.gridOption.export) === null || _g === void 0 ? void 0 : _g.items) {
+                // const exportedItems = this.gridOption.export?.items(this.#filterExportInfo(pageNumber, pageSize));
+                let result = (_h = this.gridOption.export) === null || _h === void 0 ? void 0 : _h.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);
+                    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;
+                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 => {
+                        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, (isCSV) => __awaiter(this, void 0, void 0, function* () {
+            var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            try {
+                let columns = __classPrivateFieldGet(this, _getExportColumns).call(this);
+                const pageSize = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
+                const batch = ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.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, _x;
+                            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 === 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, {
+                                    isExport: true,
+                                });
+                                if (transform instanceof Promise) {
+                                    obj[column.field] = yield transform;
+                                }
+                                else {
+                                    obj[column.field] = transform;
+                                }
+                                obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
+                            }
+                            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] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnTrue) || 'True';
+                                }
+                                else if (obj[column.field] !== undefined && obj[column.field] !== null) {
+                                    obj[column.field] = ((_x = column.option) === null || _x === void 0 ? void 0 : _x.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 (isCSV) {
+                    yield this.exportService.exportCSV({
+                        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;
+            }
+            finally {
+                this.isExporting = false;
+                this.exportTitle = `Export`;
+                this.ref.detectChanges();
+            }
+        }));
+        _getExportColumns.set(this, () => {
+            var _a, _b;
+            const columns = [
+                ...this.gridOption.columns.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }),
+                ...(((_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); })) || []),
+            ];
+            return columns;
+        });
+        this.exportExcel = () => {
+            __classPrivateFieldGet(this, _onExport).call(this);
+        };
+        this.exportCSV = () => {
+            __classPrivateFieldGet(this, _onExport).call(this, true);
+        };
+        this.onFilterChange = () => {
+            var _a, _b, _c, _d;
+            (_b = (_a = this.gridFilter) === null || _a === void 0 ? void 0 : _a.updateFilter) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if ((_d = (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.inlineColumn) {
+                this.filterRegister.value.set({
+                    columnOperator: this.columnOperator,
+                    columnFilter: this.columnFilter,
+                });
+            }
+            else {
+                this.filterRegister.value.set({});
+            }
+        };
+        this.onExpand = (rowData) => __awaiter(this, void 0, void 0, function* () {
+            var _y, _z, _0, _1, _2;
+            if ((_y = this.gridOption.expand) === null || _y === void 0 ? void 0 : _y.always) {
+                return;
+            }
+            if (rowData.meta.expand.isExpanding) {
+                return;
+            }
+            if (rowData.meta.expand.isExpanded) {
+                rowData.meta.expand.isExpanded = false;
+                return;
+            }
+            const data = (_1 = (_0 = (_z = this.gridOption) === null || _z === void 0 ? void 0 : _z.expand) === null || _0 === void 0 ? void 0 : _0.onExpand) === null || _1 === void 0 ? void 0 : _1.call(_0, rowData.current);
+            if (!((_2 = this.gridOption.expand) === null || _2 === void 0 ? void 0 : _2.multiple)) {
+                this.items.forEach(item => (item.meta.expand.isExpanding = item.meta.expand.isExpanded = false));
+            }
+            if (data instanceof Promise) {
+                rowData.meta.expand.isExpanding = true;
+                data
+                    .then(res => {
+                    rowData.meta.expand.data = res;
+                    rowData.meta.expand.isExpanded = true;
+                })
+                    .finally(() => (rowData.meta.expand.isExpanding = false));
+            }
+            else {
+                rowData.meta.expand.data = data;
+                rowData.meta.expand.isExpanded = true;
+            }
+        });
+        this.onSelect = (rowData) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if ((_b = (_a = rowData.meta.group) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) {
+                rowData.meta.group.items.forEach(e => (e.meta.selector.isSelected = rowData.meta.selector.isSelected));
+                (_d = (_c = this.gridOption.selector) === null || _c === void 0 ? void 0 : _c.onSelect) === null || _d === void 0 ? void 0 : _d.call(_c, rowData.current, this.items.filter(e => e.meta.selector.isSelected).map(e => e.current));
+                this.isSelectAll = this.items.every(e => e.meta.selector.isSelected);
+                __classPrivateFieldGet(this, _updateSelectedItems).call(this);
+            }
+            else {
+                if ((_e = this.gridOption.selector) === null || _e === void 0 ? void 0 : _e.single) {
+                    this.items.filter(e => e !== rowData).forEach(e => (e.meta.selector.isSelected = false));
+                    __classPrivateFieldGet(this, _updateSelectedItems).call(this);
+                    return;
+                }
+                (_g = (_f = this.gridOption.selector) === null || _f === void 0 ? void 0 : _f.onSelect) === null || _g === void 0 ? void 0 : _g.call(_f, rowData.current, this.items.filter(e => e.meta.selector.isSelected).map(e => e.current));
+                this.isSelectAll = this.items.every(e => e.meta.selector.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.meta.selector.selectable && (!((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.selector) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.meta.selector.actions) === null || _d === void 0 ? void 0 : _d.length))) {
+                    e.meta.selector.isSelected = this.isSelectAll;
+                }
+            });
+            (_c = (_b = this.gridOption.selector) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, this.items.filter(e => e.meta.selector.isSelected).map(e => e.current));
+            __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.meta.selector.isSelected = false));
+            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
+        };
+        _updateSelectedItems.set(this, () => {
+            this.selectedItems = this.items.filter(item => item.meta.selector.isSelected).map(item => item.current);
+            this.ref.detectChanges();
+        });
+        this.clearFilter = () => {
+            this.filterRegister.value.remove();
+        };
+        this.setFilter = (args) => {
+            var _a, _b;
+            const { columnFilter, externalFilter, filterDef } = args || {};
+            if (((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) && columnFilter) {
+                this.columnFilter = columnFilter;
+            }
+            this.filterRegister.value.set({
+                columnFilter,
+                externalFilter,
+                filterDef,
+            });
+        };
+        this.detectChanges = () => this.ref.detectChanges();
+    }
+    set _gridFilter(gridFilter) {
+        if (gridFilter && this.gridFilter !== gridFilter) {
+            this.gridFilter = gridFilter;
+            // this.#subscription.add(gridFilter.filterChange.pipe(
+            //   filter(reload => reload),
+            //   debounceTime(500),
+            //   map(() => {
+            //     this.#paginator.pageIndex = 0;
+            //     this.#reload.next({
+            //       force: false,
+            //       source: 'FILTER'
+            //     });
+            //   }),
+            // ).subscribe());
+        }
+    }
+    set option(option) {
+        if (option) {
+            option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
+            this.gridOption = option;
+            __classPrivateFieldSet(this, _loadCompleted, false);
+            const configuration = this.gridConfigurationService.init(this.key, this.gridOption);
+            this.gridConfigurationObserver = configuration.observer;
+            configuration.load();
+            __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
+        }
+    }
+    set paginator(paginator) {
+        if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
+            __classPrivateFieldSet(this, _paginator, paginator);
+            __classPrivateFieldGet(this, _subscription$1).add(paginator.page
+                .pipe(map(() => {
+                __classPrivateFieldGet(this, _reload).next({
+                    force: false,
+                });
+            }))
+                .subscribe());
+        }
+    }
+    set sort(sort) {
+        if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
+            __classPrivateFieldSet(this, _sort, sort);
+            __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange
+                .pipe(map(() => {
+                __classPrivateFieldGet(this, _reload).next({
+                    force: false,
+                });
+            }))
+                .subscribe());
+        }
+    }
+    ngOnInit() {
+        __classPrivateFieldGet(this, _initCellDef).call(this);
+    }
+    ngAfterViewInit() {
+        __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(debounceTime(200), switchMap((data) => __awaiter(this, void 0, void 0, function* () {
+            const filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
+            const result = yield __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force);
+            __classPrivateFieldSet(this, _loadCompleted, true);
+            return result;
+        })))
+            .subscribe(__classPrivateFieldGet(this, _render)));
+        __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(combineLatest([
+            __classPrivateFieldGet(this, _optionChanges).pipe(startWith(this.gridOption)),
+            this.sdFilterDefs.changes.pipe(startWith(this.filterDefs)),
+        ]).subscribe(() => {
+            __classPrivateFieldGet(this, _loadFilterRegister).call(this);
+        }));
+        __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).subscribe(() => {
+            if (this.filterRegister) {
+                __classPrivateFieldGet(this, _reload).next({
+                    force: true,
+                });
+            }
+        }));
+        this.ref.detectChanges();
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _subscription$1).unsubscribe();
+    }
+    get gridItems() {
+        return this.items.map(item => item.current);
+    }
+}
+_gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = 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(), _getExportColumns = new WeakMap(), _updateSelectedItems = new WeakMap();
+SdTable.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-table',
+                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n    <sd-grid-filter\r\n      *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n      [filterRegister]=\"filterRegister\"\r\n      [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\"\r\n      [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n      [filterDefs]=\"filterDefs\"\r\n      #gridFilter>\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container\">\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\r\n            class=\"c-table\"\r\n            sdScroll\r\n            [ngStyle]=\"{\r\n              'max-height': gridOption?.style?.maxHeight,\r\n              'min-height': gridOption?.style?.minHeight\r\n            }\">\r\n            <table\r\n              *ngIf=\"items?.length; else elseEmpty\"\r\n              mat-table\r\n              [dataSource]=\"groupedItems\"\r\n              matSort\r\n              [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n              multiTemplateDataRows>\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?.expand?.always; else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </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=\"sdSubInformation.templateRef; context: { item: item }\"> </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\r\n                  class=\"p-0\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button\r\n                    *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n                    mat-icon-button\r\n                    aria-label=\"Expand & Collapse\"\r\n                    (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\r\n                  class=\"text-center px-15\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n                    <mat-checkbox\r\n                      *ngIf=\"!gridOption.selector?.single\"\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\"\r\n                      (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\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?.selector\">\r\n                    <mat-checkbox\r\n                      class=\"c-selection\"\r\n                      color=\"primary\"\r\n                      [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\"\r\n                      [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n                    </mat-checkbox>\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\r\n                  class=\"px-8 py-8\"\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container\r\n                *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\"\r\n                [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th\r\n                  mat-header-cell\r\n                  *matHeaderCellDef\r\n                  cdkDrag\r\n                  class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                  [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                  <div>\r\n                    <div\r\n                      aria-hidden=\"false\"\r\n                      role=\"presentation\"\r\n                      mat-sort-header\r\n                      [disabled]=\"!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\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    *ngIf=\"!item?.sdGroup\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                    <sd-column-inline-filter\r\n                      *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\r\n                      [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\r\n                    class=\"d-block px-8\"\r\n                    [sdId]=\"item.meta.id\"\r\n                    [key]=\"key\"\r\n                    [value]=\"item[column.field]\"\r\n                    [column]=\"column\"\r\n                    [item]=\"item\"\r\n                    [idx]=\"i\"\r\n                    [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n              </ng-container>\r\n              <tr\r\n                mat-row\r\n                *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n                matRipple\r\n                class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\"></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\r\n                    class=\"px-15\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    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=\"sdCommand\">\r\n                  <th\r\n                    class=\"px-8\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    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\r\n                    class=\"p-0\"\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    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\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.columns\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div\r\n                      [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th\r\n                    mat-header-cell\r\n                    *matHeaderCellDef\r\n                    class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                    [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                    <div>\r\n                      <div\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\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn && columnOperator\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\">\r\n                      </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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div\r\n                        [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                      <sd-column-inline-filter\r\n                        *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [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\"></tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></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\r\n              *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button\r\n              *ngIf=\"gridOption.reload?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Reload' | sdTranslate\"\r\n              icon=\"refresh\"\r\n              size=\"sm\"\r\n              (action)=\"reload()\"\r\n              [disabled]=\"!items?.length\"\r\n              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\" size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button\r\n                  class=\"mr-10\"\r\n                  [title]=\"exportTitle | sdTranslate\"\r\n                  icon=\"get_app\"\r\n                  size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\"\r\n                  type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t excel</span>\r\n                </button>\r\n                <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> Xu\u1EA5t CSV</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button\r\n              *ngIf=\"gridOption.config?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\"\r\n              size=\"sm\"\r\n              (action)=\"popupGridConfiguration.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator\r\n            [class.d-none]=\"gridOption.paginate?.hidden\"\r\n            [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\"\r\n            [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\" (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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}@-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\")}"]
+            },] }
+];
+SdTable.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: undefined, decorators: [{ type: Inject, args: [TABLE_CONFIG,] }, { type: Optional }] },
+    { type: SdTableConfigurationService },
+    { type: SdExportService },
+    { type: SdNotifyService },
+    { type: SdColumnValuesPipe },
+    { type: SdTableFilterService }
+];
+SdTable.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,] }],
+    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.current[column.field] | cellView : item : column : gridOption | async as view\">\r\n  <ng-container *ngIf=\"view.display.hasHtml; else useValue\">\r\n    <div\r\n      *ngIf=\"view.click\"\r\n      (click)=\"view.click()\"\r\n      class=\"text-break cursor-pointer\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n    <div\r\n      *ngIf=\"!view.click\"\r\n      class=\"text-break\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n  </ng-container>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge\r\n        *ngIf=\"view.display.value\"\r\n        [type]=\"view.badge.type\"\r\n        [title]=\"view.display.value\"\r\n        [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\"\r\n        [tooltip]=\"view.tooltip\"\r\n        (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <div\r\n        class=\"text-break\"\r\n        [class.text-center]=\"view.display.align === 'center'\"\r\n        [class.text-right]=\"view.display.align === 'right'\"\r\n        [matTooltip]=\"view.tooltip\">\r\n        <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.display.value }}</a>\r\n        <ng-container *ngIf=\"!view.click\">{{ view.display.value }} </ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n",
+                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 === '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'
+            },] }
+];
+
+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 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) {
+        const a = this.gridConfigurationService.generateConfigurationResult(configuration, gridOption, sdSubInformation);
+        console.log(a);
+        return a;
+    }
+}
+SdGridConfigurationResultPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'sdGridConfigurationResult'
+            },] }
+];
+SdGridConfigurationResultPipe.ctorParameters = () => [
+    { type: SdTableConfigurationService }
+];
+
+var _cache$3;
+class SdPopupGridConfiguration {
+    constructor(ref, notifyService, translateService, gridConfigurationService) {
+        this.ref = ref;
+        this.notifyService = notifyService;
+        this.translateService = translateService;
+        this.gridConfigurationService = gridConfigurationService;
+        this.changes = new EventEmitter();
+        _cache$3.set(this, void 0);
+        this.isCreatingColumn = false;
+        this.selected = {};
+        this.disabledDrag = true;
+        this.open = () => __awaiter(this, void 0, void 0, function* () {
+            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
+            this.configuration = yield __classPrivateFieldGet(this, _cache$3).get();
+            this.modal.open();
+        });
+        this.onSave = () => {
+            __classPrivateFieldGet(this, _cache$3).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$3).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',
+            };
+            this.configuration.columns.push(generatedColumn);
+            this.configuration = __classPrivateFieldGet(this, _cache$3).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$3 = 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: SdTableConfigurationService }
+];
+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__default(childAction);
+                        if (selectedItems.every(e => e.meta.selector.actions.includes(key))) {
+                            children.push(childAction);
+                        }
+                    }
+                    if (children.length > 0) {
+                        results.push(Object.assign(Object.assign({}, action), { children }));
+                    }
+                }
+                else {
+                    const key = hash__default(action);
+                    if (selectedItems.every(e => e.meta.selector.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.meta.selector.selectable = true;
+                    return false;
+                }
+                rowData.meta.selector.selectable = !disabled(rowData, selectedItems);
+                return !rowData.meta.selector.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__default(childAction);
+                        if (selectedItems.every(e => e.meta.selector.actions.includes(key))) {
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+                else {
+                    const key = hash__default(action);
+                    return selectedItems.every(e => e.meta.selector.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.meta.selector.actions.includes(hash__default(childAction))) {
+                            return false;
+                        }
+                    }
+                }
+                else {
+                    if (rowData.meta.selector.actions.includes(hash__default(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.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length; });
+            if (first) {
+                for (const action of first.meta.selector.actions) {
+                    if (items.filter(t => { var _a; return (_a = t.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length; }).every(e => e.meta.selector.actions.includes(action))) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        });
+    }
+}
+SdSelectionVisibleSelectAllPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'selectionVisibleSelectAll'
+            },] }
+];
+
+class SdDesktopCell {
+    constructor() {
+        this.cellDef = {};
+    }
+}
+SdDesktopCell.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-desktop-cell',
+                template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n  <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item, column: column, idx: idx }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n  *ngIf=\"!cellDef[column.field]\"\r\n  [sdId]=\"item.meta.id\"\r\n  [key]=\"key\"\r\n  [column]=\"column\"\r\n  [gridOption]=\"gridOption\"\r\n  [item]=\"item\">\r\n</sd-desktop-cell-view>\r\n",
+                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 }]
+};
+
+const SdFilterOperators = [
+    {
+        value: 'EQUAL',
+        symbol: '=',
+        display: 'Bằng',
+    },
+    {
+        value: 'NOT_EQUAL',
+        symbol: '≠',
+        display: 'Không bằng',
+    },
+    {
+        value: 'GREATER_THAN',
+        symbol: '>',
+        display: 'Lớn hơn',
+    },
+    {
+        value: 'LESS_THAN',
+        symbol: '<',
+        display: 'Nhỏ hơn',
+    },
+    {
+        value: 'GREATER_OR_EQUAL',
+        symbol: '≥',
+        display: 'Lớn hơn, hoặc bằng'
+    },
+    {
+        value: 'LESS_OR_EQUAL',
+        symbol: '≤',
+        display: 'Nhỏ hơn, hoặc bằng'
+    },
+    {
+        value: 'CONTAIN',
+        symbol: 'join_inner',
+        display: 'Chứa',
+    },
+    {
+        value: 'NOT_CONTAIN',
+        symbol: 'join',
+        display: 'Không chứa',
+    },
+    {
+        value: 'START_WITH',
+        symbol: 'line_start_circle',
+        display: 'Bắt đầu bởi'
+    },
+    {
+        value: 'END_WITH',
+        symbol: 'line_end_circle',
+        display: 'Kết thúc bởi'
+    },
+    {
+        value: 'IN',
+        symbol: 'checklist_rtl',
+        display: 'Nằm trong'
+    },
+    {
+        value: 'NOT_IN',
+        symbol: 'event_list',
+        display: 'Không nằm trong'
+    },
+];
+
+var _inlineOperator_1, _valueChanges, _subcription;
+class SdColumnInlineFilter {
+    constructor(ref) {
+        this.ref = ref;
+        this.inlineSymbol = 'filter_alt';
+        _inlineOperator_1.set(this, void 0);
+        this.inlineOperatorChange = new EventEmitter();
+        this.columnFilter = {};
+        this.operators = [];
+        this.filterChange = new EventEmitter();
+        _valueChanges.set(this, new Subject());
+        _subcription.set(this, new Subscription());
+        this.onFilterChange = () => {
+            this.filterChange.emit();
+        };
+        this.onChangeOperator = (operator) => {
+            if (operator) {
+                __classPrivateFieldSet(this, _inlineOperator_1, operator.value);
+                this.inlineSymbol = operator.symbol;
+            }
+            else {
+                __classPrivateFieldSet(this, _inlineOperator_1, null);
+                this.inlineSymbol = 'filter_alt';
+            }
+            this.inlineOperatorChange.emit(__classPrivateFieldGet(this, _inlineOperator_1));
+            this.ref.markForCheck();
+        };
+    }
+    _value(value) {
+        this.value = value;
+        __classPrivateFieldGet(this, _valueChanges).next();
+    }
+    set _inlineOperator(inlineOperator) {
+        var _a, _b;
+        if (__classPrivateFieldGet(this, _inlineOperator_1) !== inlineOperator) {
+            __classPrivateFieldSet(this, _inlineOperator_1, inlineOperator);
+            this.inlineSymbol = (_b = (_a = SdFilterOperators.find(e => e.value === inlineOperator)) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : 'filter_alt';
+        }
+    }
+    set _columnFilter(columnFilter) {
+        this.columnFilter = columnFilter || {};
+        __classPrivateFieldGet(this, _valueChanges).next();
+    }
+    set _column(column) {
+        var _a, _b, _c;
+        this.column = column;
+        if (!((_a = column === null || column === void 0 ? void 0 : column.filter) === null || _a === void 0 ? void 0 : _a.disabled) && ((_c = (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.operator) === null || _c === void 0 ? void 0 : _c.enable)) {
+            this.operators = SdFilterOperators.filter(e => { var _a, _b; return (_b = (_a = column.filter.operator.list) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, e.value); });
+        }
+        else {
+            this.operators = [];
+        }
+    }
+    ngOnInit() {
+        __classPrivateFieldGet(this, _subcription).add(__classPrivateFieldGet(this, _valueChanges).pipe(startWith(this.columnFilter)).subscribe(() => {
+            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,
+                    };
+                }
+            }
+        }));
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _subcription).unsubscribe();
+    }
+}
+_inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription = new WeakMap();
+SdColumnInlineFilter.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-column-inline-filter',
+                template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *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    \">\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n      [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (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'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (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\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [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>\r\n",
+                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 = () => [
+    { type: ChangeDetectorRef }
+];
+SdColumnInlineFilter.propDecorators = {
+    _value: [{ type: Input, args: ['value',] }],
+    _inlineOperator: [{ type: Input, args: ['inlineOperator',] }],
+    inlineOperatorChange: [{ type: Output }],
+    _columnFilter: [{ type: Input, args: ['columnFilter',] }],
+    _column: [{ type: Input, args: ['column',] }],
+    filterChange: [{ type: Output }]
+};
+
+class SdSelectionVisiblePipe {
+    constructor() {
+        this.transform = (rowData, selection) => {
+            var _a, _b, _c;
+            const { actions } = selection;
+            const groupedActions = [];
+            rowData.meta.selector.actions = rowData.meta.selector.actions || [];
+            if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
+                rowData.meta.selector.selectable = true;
+                return rowData.meta.selector.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__default(childAction);
+                        if (isGrouped) {
+                            hasGroup = true;
+                        }
+                        if (typeof (hidden) === 'function') {
+                            if (!hidden(rowData)) {
+                                flag = true;
+                                rowData.meta.selector.actions.push(key);
+                                if (isGrouped) {
+                                    groupedActions.push(key);
+                                }
+                            }
+                        }
+                        else if (!hidden) {
+                            flag = true;
+                            rowData.meta.selector.actions.push(key);
+                            if (isGrouped) {
+                                groupedActions.push(key);
+                            }
+                        }
+                    }
+                    if (flag) {
+                        rowData.meta.selector.actions.push(hash__default(action));
+                        if (hasGroup) {
+                            groupedActions.push(hash__default(action));
+                        }
+                    }
+                }
+                else {
+                    const { hidden, isGrouped } = action;
+                    const key = hash__default(action);
+                    if (typeof (hidden) === 'function') {
+                        if (!hidden(rowData)) {
+                            rowData.meta.selector.actions.push(key);
+                            if (isGrouped) {
+                                groupedActions.push(key);
+                            }
+                        }
+                    }
+                    else if (!hidden) {
+                        rowData.meta.selector.actions.push(key);
+                        if (isGrouped) {
+                            groupedActions.push(key);
+                        }
+                    }
+                }
+            }
+            rowData.meta.selector.selectable = !!((_a = rowData.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length);
+            if (!rowData.meta.selector.selectable || !groupedActions.length || ((_c = (_b = rowData === null || rowData === void 0 ? void 0 : rowData.meta.group) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length)) {
+                return rowData.meta.selector.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.meta.selector.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?.selector?.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?.selector?.message || 'd\u1EEF li\u1EC7u \u0111\u01B0\u1EE3c ch\u1ECDn' }}</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, tableItem, column, gridOption) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const { displayOnEmpty } = gridOption;
+            const rowData = tableItem.current;
+            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__default(obj);
+            if (!groupItem[key]) {
+                groupItem[key] = [];
+            }
+            groupItem[key].push(item);
+        }
+        const results = [];
+        for (const key of Object.keys(groupItem)) {
+            const result = MapToSdTableItem({});
+            result.meta.group.items = groupItem[key];
+            result.meta.group.htmlTemplate = htmlTemplate(groupItem[key]);
+            results.push(result);
+            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 SdTableModule {
+}
+SdTableModule.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,
+                    SdGroupModule,
+                ],
+                declarations: [
+                    SdGridQuickAction,
+                    SdDesktopCell,
+                    SdDesktopCellView,
+                    SdDesktopCommand,
+                    SdColumnInlineFilter,
+                    SdTable,
+                    SdMaterialFooterDefDirective,
+                    SdMaterialCellDefDirective,
+                    SdMaterialFilterDefDirective,
+                    SdMaterialSubInformationDefDirective,
+                    SdMaterialEmptyDataDefDirective,
+                    SdPopupGridConfiguration,
+                    SdGridFilter,
+                    SdPopupFilter,
+                    // Pipes
+                    SdGridConfigurationResultPipe,
+                    SdColumnChildrenFilterPipe,
+                    SdCommandFilterPipe,
+                    SdCommandDisablePipe,
+                    SdCommandIconPipe,
+                    SdCommandTitlePipe,
+                    SdColumnValuesPipe,
+                    SdColumnHtmlTemplatePipe,
+                    SdColumnTransformPipe,
+                    SdColumnTooltipPipe,
+                    SdColumnBadgePipe,
+                    SdFilterColumnPipe,
+                    SdFilterExternalPipe,
+                    SdSelectionActionFilterPipe,
+                    SdSelectionVisiblePipe,
+                    SdSelectionDisablePipe,
+                    SdSelectionVisibleSelectAllPipe,
+                    SdCellViewPipe,
+                    SdGroupPipe,
+                ],
+                exports: [
+                    SdTable,
+                    SdMaterialFooterDefDirective,
+                    SdMaterialCellDefDirective,
+                    SdMaterialFilterDefDirective,
+                    SdMaterialEmptyDataDefDirective,
+                    SdMaterialSubInformationDefDirective,
+                ],
+                providers: [
+                    DatePipe,
+                    DecimalPipe,
+                    CdkColumnDef,
+                    SdTableFilterService,
+                    SdTableConfigurationService,
+                    SdColumnValuesPipe,
+                    {
+                        provide: MatPaginatorIntl,
+                        useClass: MatPaginatorIntlCro,
+                    },
+                ],
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MatPaginatorIntlCro, SdFilterOperators, SdTable, SdTableModule, SdGridQuickAction as ɵa, SdDesktopCell as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionVisiblePipe as ɵbf, SdSelectionDisablePipe as ɵbg, SdSelectionVisibleSelectAllPipe as ɵbh, SdCellViewPipe as ɵbi, SdGroupPipe as ɵbj, SdDesktopCellView as ɵc, SdDesktopCommand as ɵd, SdColumnInlineFilter as ɵe, SdGridFilter as ɵf, SdPopupFilter as ɵg, SdMaterialSubInformationDefDirective as ɵh, SdMaterialEmptyDataDefDirective as ɵi, SdMaterialCellDefDirective as ɵj, SdMaterialFooterDefDirective as ɵk, SdMaterialFilterDefDirective as ɵl, TABLE_CONFIG as ɵn, SdTableConfigurationService as ɵo, SdColumnValuesPipe as ɵp, SdTableFilterService as ɵq, SdPopupGridConfiguration as ɵr, SdGridConfigurationResultPipe as ɵs, SdColumnChildrenFilterPipe as ɵt, SdCommandFilterPipe as ɵu, SdCommandDisablePipe as ɵv, SdCommandIconPipe as ɵw, SdCommandTitlePipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
+//# sourceMappingURL=sd-angular-core-table.js.map