@sd-angular/core 1.3.105 → 1.3.107

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

@@ -5,10 +5,11 @@ import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/mat
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { v4 } from 'uuid';
-import { Subscription, BehaviorSubject, Subject, isObservable, combineLatest } from 'rxjs';
+import { BehaviorSubject, Subscription, Subject, isObservable, combineLatest } from 'rxjs';
 import { SdNotifyService } from '@sd-angular/core/notify';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { startWith, debounceTime, map, switchMap } from 'rxjs/operators';
+import { startWith, map, debounceTime, switchMap } from 'rxjs/operators';
+import { SdModal } from '@sd-angular/core/modal';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { SdLoadingService } from '@sd-angular/core/loading';
 import { SdTranslateService } from '@sd-angular/core/translate';
@@ -132,7 +133,7 @@ const DEFAULT_GRID_MATERIAL_CONFIG = {
 };
 const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
 
-var _filterRegister, _subscription;
+var _filterRegister;
 class SdPopupFilter {
     constructor(cdRef) {
         this.cdRef = cdRef;
@@ -146,8 +147,15 @@ class SdPopupFilter {
         this.filterDefs = [];
         this.filterDef = {};
         this.inlineFilterDef = {};
-        _subscription.set(this, new Subscription());
         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();
         };
@@ -164,7 +172,7 @@ class SdPopupFilter {
             __classPrivateFieldGet(this, _filterRegister).value.set({
                 columnFilter: this.columnFilter,
                 externalFilter: this.externalFilter,
-                filterDef: this.filterDef
+                filterDef: this.filterDef,
             });
             this.modal.close();
             this.cdRef.markForCheck();
@@ -173,35 +181,19 @@ class SdPopupFilter {
     set filterRegister(value) {
         __classPrivateFieldSet(this, _filterRegister, value);
     }
-    ;
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).configuration.observer.subscribe(configuration => {
-            this.inlineColumn = JSON.parse(JSON.stringify(configuration.inlineColumn));
-            this.inlineExternal = JSON.parse(JSON.stringify(configuration.inlineExternal));
-            this.inlineFilterDef = JSON.parse(JSON.stringify(configuration.inlineFilterDef));
-            this.cdRef.markForCheck();
-        }));
-        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).value.observer.subscribe(filterValue => {
-            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.cdRef.markForCheck();
-        }));
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription).unsubscribe();
-    }
+    ngAfterViewInit() { }
+    ngOnDestroy() { }
     onClear() {
         __classPrivateFieldGet(this, _filterRegister).value.remove();
         this.modal.close();
         this.cdRef.markForCheck();
     }
 }
-_filterRegister = new WeakMap(), _subscription = new WeakMap();
+_filterRegister = new WeakMap();
 SdPopupFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-filter',
-                template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" columnFilter[column.field]\" type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n          {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\" appearance=\"outline\" multiple>\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple>\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\">\r\n            </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef;context:{filterDef:filterDef}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
+                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}"]
             },] }
@@ -210,14 +202,14 @@ SdPopupFilter.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 SdPopupFilter.propDecorators = {
-    modal: [{ type: ViewChild, args: ['modal',] }],
+    modal: [{ type: ViewChild, args: [SdModal,] }],
     filterRegister: [{ type: Input }],
     externalFilters: [{ type: Input }],
     columns: [{ type: Input }],
     filterDefs: [{ type: Input }]
 };
 
-var _subscription$1;
+var _subscription;
 class SdGridFilter {
     constructor(ref, deviceService) {
         this.ref = ref;
@@ -232,7 +224,7 @@ class SdGridFilter {
         this.inlineColumn = {};
         this.externalFilter = {};
         this.inlineExternal = {};
-        _subscription$1.set(this, new Subscription());
+        _subscription.set(this, new Subscription());
         this.onFilter = (item) => {
             this.filterRegister.value.set({
                 columnFilter: this.columnFilter,
@@ -257,29 +249,33 @@ class SdGridFilter {
         this.filterRegisterChange.next(this.filterRegister);
     }
     ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription$1).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$1).add(this.filterRegister.value.observer.subscribe((value) => {
-            const { columnFilter, externalFilter, filterDef } = value;
-            this.columnFilter = columnFilter;
-            this.externalFilter = externalFilter;
-            this.filterDef = filterDef;
-            this.ref.markForCheck();
+        __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$1).unsubscribe();
+        __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
 }
-_subscription$1 = new WeakMap();
+_subscription = new WeakMap();
 SdGridFilter.decorators = [
     { type: Component, args: [{
-                selector: "sd-grid-filter",
+                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}"]
@@ -291,11 +287,11 @@ SdGridFilter.ctorParameters = () => [
 ];
 SdGridFilter.propDecorators = {
     popupFilter: [{ type: ViewChild, args: [SdPopupFilter,] }],
-    _filter: [{ type: Input, args: ["filter",] }],
+    _filter: [{ type: Input, args: ['filter',] }],
     columns: [{ type: Input }],
-    _externalFilters: [{ type: Input, args: ["externalFilters",] }],
+    _externalFilters: [{ type: Input, args: ['externalFilters',] }],
     filterDefs: [{ type: Input }],
-    _filterRegister: [{ type: Input, args: ["filterRegister",] }]
+    _filterRegister: [{ type: Input, args: ['filterRegister',] }]
 };
 
 var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
@@ -1133,8 +1129,8 @@ var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaul
 class SdGridFilterService {
     constructor(settingService) {
         this.settingService = settingService;
-        _filterConfiguration.set(this, "GRID-FILTER-CONFIGURATION");
-        _filterValue.set(this, "GRID-FILTER-VALUE");
+        _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
+        _filterValue.set(this, 'GRID-FILTER-VALUE');
         _cache$2.set(this, {});
         this.register = (key, args) => {
             let cacheSession = false;
@@ -1153,7 +1149,7 @@ class SdGridFilterService {
                     key,
                 }, {
                     default: __classPrivateFieldGet(this, _defaultConfiguration).call(this, args),
-                    type: cacheSession ? "session" : undefined,
+                    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()));
@@ -1163,7 +1159,7 @@ class SdGridFilterService {
                     key,
                 }, {
                     default: __classPrivateFieldGet(this, _defaultValue).call(this, args),
-                    type: cacheSession ? "session" : undefined,
+                    type: cacheSession ? '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()));
@@ -1186,39 +1182,37 @@ class SdGridFilterService {
                             };
                         },
                         remove: () => {
-                            filterConfiguration.remove();
+                            filterConfiguration.set(__classPrivateFieldGet(this, _defaultConfiguration).call(this, args));
                         },
-                        observer: filterConfiguration.observer.pipe(startWith(filterConfiguration.get())),
+                        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: (configuration) => {
-                            const keys = Object.keys(configuration || {});
+                        set: (value) => {
+                            const keys = Object.keys(value || {});
                             const current = filterValue.get();
                             const { columnFilter, externalFilter, filterDef } = current;
                             const updatedConfiguration = {
                                 // Filter column
-                                columnFilter: keys.includes("columnFilter")
-                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {}
-                                    : columnFilter,
+                                columnFilter: keys.includes('columnFilter') ? (value === null || value === void 0 ? void 0 : value.columnFilter) || {} : columnFilter,
                                 // Filter external
-                                externalFilter: keys.includes("externalFilter")
-                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {}
-                                    : externalFilter,
+                                externalFilter: keys.includes('externalFilter') ? (value === null || value === void 0 ? void 0 : value.externalFilter) || {} : externalFilter,
                                 // Filter def
-                                filterDef: keys.includes("filterDef")
-                                    ? (configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}
-                                    : filterDef,
+                                filterDef: keys.includes('filterDef') ? (value === null || value === void 0 ? void 0 : value.filterDef) || {} : filterDef,
                             };
                             filterValue.set(updatedConfiguration);
                             return updatedConfiguration;
                         },
                         remove: () => {
-                            filterValue.remove();
+                            filterValue.set(__classPrivateFieldGet(this, _defaultValue).call(this, args));
                         },
-                        observer: filterValue.observer.pipe(startWith(filterValue.get())),
+                        observer: filterValue.observer.pipe(debounceTime(200), startWith(filterValue.get()), 
+                        // Sử dụng mặc định nếu bị reset
+                        map(value => value || __classPrivateFieldGet(this, _defaultValue).call(this, args))),
                     },
                 };
             }
@@ -1317,7 +1311,7 @@ class SdGridFilterService {
             }
             // Filter external
             for (const item of externalFilters || []) {
-                if (item.type === "daterange") {
+                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,
@@ -1350,7 +1344,7 @@ SdGridFilterService.ctorParameters = () => [
     { type: SdSettingService }
 ];
 
-var _optionChanges, _localItems, _paginator, _sort, _subscription$2, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
+var _optionChanges, _localItems, _paginator, _sort, _subscription$1, _subcriptionFilterRegister, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
 class SdGridMaterial {
     constructor(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService, editorHandlerColumnPipe) {
         this.ref = ref;
@@ -1386,7 +1380,8 @@ class SdGridMaterial {
         // Filter
         this.columnFilter = {};
         // Subcription
-        _subscription$2.set(this, new Subscription());
+        _subscription$1.set(this, new Subscription());
+        _subcriptionFilterRegister.set(this, new Subscription());
         _reload.set(this, new Subject());
         this.isExporting = false;
         this.isSelectAll = false;
@@ -1445,29 +1440,23 @@ class SdGridMaterial {
             var _a, _b, _c, _d, _e;
             // Init filter
             if (this.gridOption) {
-                const hasRegister = !!this.filterRegister;
                 this.filterRegister = this.gridFilterService.register((_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.key, {
                     columns: (_c = this.gridOption) === null || _c === void 0 ? void 0 : _c.columns,
                     externalFilters: (_e = (_d = this.gridOption) === null || _d === void 0 ? void 0 : _d.filter) === null || _e === void 0 ? void 0 : _e.externalFilters,
                     filterDefs: this.filterDefs,
                 });
-                if (!hasRegister) {
-                    __classPrivateFieldGet(this, _subscription$2).add(this.filterRegister.value.observer
-                        .pipe(debounceTime(500), map(filterValue => {
-                        const { columnFilter } = filterValue;
-                        this.columnFilter = columnFilter;
-                        __classPrivateFieldGet(this, _paginator).pageIndex = 0;
-                        __classPrivateFieldGet(this, _reload).next({
-                            force: false,
-                        });
-                    }))
-                        .subscribe());
-                }
-                else {
+                __classPrivateFieldGet(this, _subcriptionFilterRegister).unsubscribe();
+                __classPrivateFieldSet(this, _subcriptionFilterRegister, this.filterRegister.value.observer
+                    .pipe(debounceTime(500), map(filterValue => {
+                    const { columnFilter } = filterValue;
+                    this.columnFilter = columnFilter;
+                    __classPrivateFieldGet(this, _paginator).pageIndex = 0;
                     __classPrivateFieldGet(this, _reload).next({
-                        force: true,
+                        force: false,
                     });
-                }
+                }))
+                    .subscribe());
+                __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _subcriptionFilterRegister));
             }
         });
         _filterLocal.set(this, (localItems, filterInfo) => {
@@ -2280,7 +2269,7 @@ class SdGridMaterial {
     set paginator(paginator) {
         if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
             __classPrivateFieldSet(this, _paginator, paginator);
-            __classPrivateFieldGet(this, _subscription$2).add(paginator.page
+            __classPrivateFieldGet(this, _subscription$1).add(paginator.page
                 .pipe(map(() => {
                 __classPrivateFieldGet(this, _reload).next({
                     force: false,
@@ -2292,7 +2281,7 @@ class SdGridMaterial {
     set sort(sort) {
         if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
             __classPrivateFieldSet(this, _sort, sort);
-            __classPrivateFieldGet(this, _subscription$2).add(sort.sortChange
+            __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange
                 .pipe(map(() => {
                 __classPrivateFieldGet(this, _reload).next({
                     force: false,
@@ -2305,26 +2294,33 @@ class SdGridMaterial {
         __classPrivateFieldGet(this, _initCellDef).call(this);
     }
     ngAfterViewInit() {
-        __classPrivateFieldGet(this, _subscription$2).add(__classPrivateFieldGet(this, _reload).pipe(debounceTime(200), switchMap((data) => __awaiter(this, void 0, void 0, function* () {
+        __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$2).add(this.sdCellDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
-        __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
-        __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes.pipe(startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
-        __classPrivateFieldGet(this, _subscription$2).add(combineLatest([
+        __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$2).unsubscribe();
+        __classPrivateFieldGet(this, _subscription$1).unsubscribe();
     }
     drop(event, columns) {
         moveItemInArray(columns, event.previousIndex, event.currentIndex);
@@ -2364,7 +2360,7 @@ class SdGridMaterial {
         return this.items.some(e => e.editorStatus !== undefined);
     }
 }
-_optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$2 = 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(), _updateSelectedItems = new WeakMap();
+_optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _subcriptionFilterRegister = 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(), _updateSelectedItems = new WeakMap();
 SdGridMaterial.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-material',
@@ -3129,7 +3125,7 @@ SdGeneratedColumnService.ctorParameters = () => [
     { type: SdSettingService }
 ];
 
-var _subscription$3;
+var _subscription$2;
 class SdDynamicColumn {
     constructor(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
         this.ref = ref;
@@ -3137,7 +3133,7 @@ class SdDynamicColumn {
         this.notifyService = notifyService;
         this.translateService = translateService;
         this.gridConfigurationService = gridConfigurationService;
-        _subscription$3.set(this, new Subscription());
+        _subscription$2.set(this, new Subscription());
         this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
         this.form = new FormGroup({});
         this.isDetail = false;
@@ -3181,22 +3177,22 @@ class SdDynamicColumn {
         const systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
         const setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
         if (systemSetting) {
-            (_b = __classPrivateFieldGet(this, _subscription$3)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(columns => {
+            (_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(columns => {
                 this.systemColumns = columns;
             }));
         }
         if (setting) {
-            (_c = __classPrivateFieldGet(this, _subscription$3)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(columns => {
+            (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(columns => {
                 this.columns = columns;
             }));
         }
         this.originColumns = this.gridOption.columns.filter(e => e.type !== 'children' && e.type !== 'children-col');
     }
     ngOnDestroy() {
-        __classPrivateFieldGet(this, _subscription$3).unsubscribe();
+        __classPrivateFieldGet(this, _subscription$2).unsubscribe();
     }
 }
-_subscription$3 = new WeakMap();
+_subscription$2 = new WeakMap();
 SdDynamicColumn.decorators = [
     { type: Component, args: [{
                 selector: 'sd-dynamic-column',