@sd-angular/core 1.3.105 → 1.3.107

package/bundles/sd-angular-core-grid-material.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('object-hash'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer'), require('@sd-angular/core/utility'), require('@sd-angular/core/group')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', 'object-hash', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/setting', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer', '@sd-angular/core/utility', '@sd-angular/core/group'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['grid-material'] = {}), global['sd-angular'].core.common, global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['ngx-device-detector'], global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['object-hash'], global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer'], global['sd-angular'].core.utility, global['sd-angular'].core.group));
-}(this, (function (exports, common, core, paginator, sort, animations, uuid, rxjs, notify, dragDrop, operators, ngxDeviceDetector, loading, translate, hash, _export, forms, setting, quickAction, common$1, formField, icon, input, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer, utility, group) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('object-hash'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer'), require('@sd-angular/core/utility'), require('@sd-angular/core/group')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', 'object-hash', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/setting', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer', '@sd-angular/core/utility', '@sd-angular/core/group'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['grid-material'] = {}), global['sd-angular'].core.common, global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['object-hash'], global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer'], global['sd-angular'].core.utility, global['sd-angular'].core.group));
+}(this, (function (exports, common, core, paginator, sort, animations, uuid, rxjs, notify, dragDrop, operators, modal, ngxDeviceDetector, loading, translate, hash, _export, forms, setting, quickAction, common$1, formField, icon, input, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer, utility, group) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -426,7 +426,7 @@
     };
     var GRID_MATERIAL_CONFIG = new core.InjectionToken('sd-grid-material.configuration');
 
-    var _filterRegister, _subscription;
+    var _filterRegister;
     var SdPopupFilter = /** @class */ (function () {
         function SdPopupFilter(cdRef) {
             var _this = this;
@@ -441,8 +441,15 @@
             this.filterDefs = [];
             this.filterDef = {};
             this.inlineFilterDef = {};
-            _subscription.set(this, new rxjs.Subscription());
             this.open = function () {
+                var 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));
+                var 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();
             };
@@ -459,7 +466,7 @@
                 __classPrivateFieldGet(_this, _filterRegister).value.set({
                     columnFilter: _this.columnFilter,
                     externalFilter: _this.externalFilter,
-                    filterDef: _this.filterDef
+                    filterDef: _this.filterDef,
                 });
                 _this.modal.close();
                 _this.cdRef.markForCheck();
@@ -472,25 +479,8 @@
             enumerable: false,
             configurable: true
         });
-        ;
-        SdPopupFilter.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).configuration.observer.subscribe(function (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(function (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();
-            }));
-        };
-        SdPopupFilter.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription).unsubscribe();
-        };
+        SdPopupFilter.prototype.ngAfterViewInit = function () { };
+        SdPopupFilter.prototype.ngOnDestroy = function () { };
         SdPopupFilter.prototype.onClear = function () {
             __classPrivateFieldGet(this, _filterRegister).value.remove();
             this.modal.close();
@@ -498,11 +488,11 @@
         };
         return SdPopupFilter;
     }());
-    _filterRegister = new WeakMap(), _subscription = new WeakMap();
+    _filterRegister = new WeakMap();
     SdPopupFilter.decorators = [
         { type: core.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: core.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}"]
                 },] }
@@ -511,14 +501,14 @@
         { type: core.ChangeDetectorRef }
     ]; };
     SdPopupFilter.propDecorators = {
-        modal: [{ type: core.ViewChild, args: ['modal',] }],
+        modal: [{ type: core.ViewChild, args: [modal.SdModal,] }],
         filterRegister: [{ type: core.Input }],
         externalFilters: [{ type: core.Input }],
         columns: [{ type: core.Input }],
         filterDefs: [{ type: core.Input }]
     };
 
-    var _subscription$1;
+    var _subscription;
     var SdGridFilter = /** @class */ (function () {
         function SdGridFilter(ref, deviceService) {
             var _this = this;
@@ -534,7 +524,7 @@
             this.inlineColumn = {};
             this.externalFilter = {};
             this.inlineExternal = {};
-            _subscription$1.set(this, new rxjs.Subscription());
+            _subscription.set(this, new rxjs.Subscription());
             this.onFilter = function (item) {
                 _this.filterRegister.value.set({
                     columnFilter: _this.columnFilter,
@@ -572,30 +562,34 @@
         });
         SdGridFilter.prototype.ngAfterViewInit = function () {
             var _this = this;
-            __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.configuration.observer.subscribe(function (configuration) {
-                var inlineColumn = configuration.inlineColumn, inlineExternal = configuration.inlineExternal, inlineFilterDef = configuration.inlineFilterDef;
-                _this.inlineColumn = inlineColumn;
-                _this.inlineExternal = inlineExternal;
-                _this.inlineFilterDef = inlineFilterDef;
-                _this.ref.markForCheck();
-            }));
-            __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.value.observer.subscribe(function (value) {
-                var columnFilter = value.columnFilter, externalFilter = value.externalFilter, filterDef = value.filterDef;
-                _this.columnFilter = columnFilter;
-                _this.externalFilter = externalFilter;
-                _this.filterDef = filterDef;
-                _this.ref.markForCheck();
+            __classPrivateFieldGet(this, _subscription).add(this.filterRegisterChange.pipe(operators.startWith(this.filterRegister)).subscribe(function (filterRegister) {
+                if (_this.filterRegister) {
+                    __classPrivateFieldGet(_this, _subscription).add(_this.filterRegister.configuration.observer.subscribe(function (configuration) {
+                        var inlineColumn = configuration.inlineColumn, inlineExternal = configuration.inlineExternal, inlineFilterDef = configuration.inlineFilterDef;
+                        _this.inlineColumn = inlineColumn;
+                        _this.inlineExternal = inlineExternal;
+                        _this.inlineFilterDef = inlineFilterDef;
+                        _this.ref.markForCheck();
+                    }));
+                    __classPrivateFieldGet(_this, _subscription).add(_this.filterRegister.value.observer.subscribe(function (value) {
+                        var columnFilter = value.columnFilter, externalFilter = value.externalFilter, filterDef = value.filterDef;
+                        _this.columnFilter = columnFilter;
+                        _this.externalFilter = externalFilter;
+                        _this.filterDef = filterDef;
+                        _this.ref.markForCheck();
+                    }));
+                }
             }));
         };
         SdGridFilter.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription$1).unsubscribe();
+            __classPrivateFieldGet(this, _subscription).unsubscribe();
         };
         return SdGridFilter;
     }());
-    _subscription$1 = new WeakMap();
+    _subscription = new WeakMap();
     SdGridFilter.decorators = [
         { type: core.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: core.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}"]
@@ -607,11 +601,11 @@
     ]; };
     SdGridFilter.propDecorators = {
         popupFilter: [{ type: core.ViewChild, args: [SdPopupFilter,] }],
-        _filter: [{ type: core.Input, args: ["filter",] }],
+        _filter: [{ type: core.Input, args: ['filter',] }],
         columns: [{ type: core.Input }],
-        _externalFilters: [{ type: core.Input, args: ["externalFilters",] }],
+        _externalFilters: [{ type: core.Input, args: ['externalFilters',] }],
         filterDefs: [{ type: core.Input }],
-        _filterRegister: [{ type: core.Input, args: ["filterRegister",] }]
+        _filterRegister: [{ type: core.Input, args: ['filterRegister',] }]
     };
 
     var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
@@ -1640,8 +1634,8 @@
         function SdGridFilterService(settingService) {
             var _this = this;
             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 = function (key, args) {
                 var cacheSession = false;
@@ -1660,7 +1654,7 @@
                         key: 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_1.set(__classPrivateFieldGet(_this, _initConfiguration).call(_this, args, filterConfiguration_1.get()));
@@ -1670,7 +1664,7 @@
                         key: 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_1.set(__classPrivateFieldGet(_this, _initValue).call(_this, args, filterValue_1.get()));
@@ -1693,39 +1687,37 @@
                                 };
                             },
                             remove: function () {
-                                filterConfiguration_1.remove();
+                                filterConfiguration_1.set(__classPrivateFieldGet(_this, _defaultConfiguration).call(_this, args));
                             },
-                            observer: filterConfiguration_1.observer.pipe(operators.startWith(filterConfiguration_1.get())),
+                            observer: filterConfiguration_1.observer.pipe(operators.startWith(filterConfiguration_1.get()), 
+                            // Sử dụng mặc định nếu bị reset
+                            operators.map(function (configuration) { return configuration || __classPrivateFieldGet(_this, _defaultConfiguration).call(_this, args); })),
                         },
                         value: {
                             get: function () {
                                 return filterValue_1.get();
                             },
-                            set: function (configuration) {
-                                var keys = Object.keys(configuration || {});
+                            set: function (value) {
+                                var keys = Object.keys(value || {});
                                 var current = filterValue_1.get();
                                 var columnFilter = current.columnFilter, externalFilter = current.externalFilter, filterDef = current.filterDef;
                                 var 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_1.set(updatedConfiguration);
                                 return updatedConfiguration;
                             },
                             remove: function () {
-                                filterValue_1.remove();
+                                filterValue_1.set(__classPrivateFieldGet(_this, _defaultValue).call(_this, args));
                             },
-                            observer: filterValue_1.observer.pipe(operators.startWith(filterValue_1.get())),
+                            observer: filterValue_1.observer.pipe(operators.debounceTime(200), operators.startWith(filterValue_1.get()), 
+                            // Sử dụng mặc định nếu bị reset
+                            operators.map(function (value) { return value || __classPrivateFieldGet(_this, _defaultValue).call(_this, args); })),
                         },
                     };
                 }
@@ -1930,7 +1922,7 @@
                     // Filter external
                     for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
                         var item = _x.value;
-                        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,
@@ -1982,7 +1974,7 @@
         { type: setting.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;
     var SdGridMaterial = /** @class */ (function () {
         function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService, editorHandlerColumnPipe) {
             var _this = this;
@@ -2019,7 +2011,8 @@
             // Filter
             this.columnFilter = {};
             // Subcription
-            _subscription$2.set(this, new rxjs.Subscription());
+            _subscription$1.set(this, new rxjs.Subscription());
+            _subcriptionFilterRegister.set(this, new rxjs.Subscription());
             _reload.set(this, new rxjs.Subject());
             this.isExporting = false;
             this.isSelectAll = false;
@@ -2111,29 +2104,23 @@
                 var _a, _b, _c, _d, _e;
                 // Init filter
                 if (_this.gridOption) {
-                    var 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(operators.debounceTime(500), operators.map(function (filterValue) {
-                            var columnFilter = filterValue.columnFilter;
-                            _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(operators.debounceTime(500), operators.map(function (filterValue) {
+                        var columnFilter = filterValue.columnFilter;
+                        _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, function (localItems, filterInfo) {
@@ -3185,7 +3172,7 @@
                 var _this = this;
                 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(operators.map(function () {
                         __classPrivateFieldGet(_this, _reload).next({
                             force: false,
@@ -3202,7 +3189,7 @@
                 var _this = this;
                 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(operators.map(function () {
                         __classPrivateFieldGet(_this, _reload).next({
                             force: false,
@@ -3219,7 +3206,7 @@
         };
         SdGridMaterial.prototype.ngAfterViewInit = function () {
             var _this = this;
-            __classPrivateFieldGet(this, _subscription$2).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
+            __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
                 var filterInfo, result;
                 return __generator(this, function (_3) {
                     switch (_3.label) {
@@ -3234,19 +3221,26 @@
                 });
             }); }))
                 .subscribe(__classPrivateFieldGet(this, _render)));
-            __classPrivateFieldGet(this, _subscription$2).add(this.sdCellDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
-            __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
-            __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
-            __classPrivateFieldGet(this, _subscription$2).add(rxjs.combineLatest([
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdCellDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdFooterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdFilterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(rxjs.combineLatest([
                 __classPrivateFieldGet(this, _optionChanges).pipe(operators.startWith(this.gridOption)),
                 this.sdFilterDefs.changes.pipe(operators.startWith(this.filterDefs)),
             ]).subscribe(function () {
                 __classPrivateFieldGet(_this, _loadFilterRegister).call(_this);
             }));
+            __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).subscribe(function () {
+                if (_this.filterRegister) {
+                    __classPrivateFieldGet(_this, _reload).next({
+                        force: true,
+                    });
+                }
+            }));
             this.ref.detectChanges();
         };
         SdGridMaterial.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription$2).unsubscribe();
+            __classPrivateFieldGet(this, _subscription$1).unsubscribe();
         };
         SdGridMaterial.prototype.drop = function (event, columns) {
             dragDrop.moveItemInArray(columns, event.previousIndex, event.currentIndex);
@@ -3307,7 +3301,7 @@
         });
         return SdGridMaterial;
     }());
-    _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: core.Component, args: [{
                     selector: 'sd-grid-material',
@@ -4324,7 +4318,7 @@
         { type: setting.SdSettingService }
     ]; };
 
-    var _subscription$3;
+    var _subscription$2;
     var SdDynamicColumn = /** @class */ (function () {
         function SdDynamicColumn(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
             var _this = this;
@@ -4333,7 +4327,7 @@
             this.notifyService = notifyService;
             this.translateService = translateService;
             this.gridConfigurationService = gridConfigurationService;
-            _subscription$3.set(this, new rxjs.Subscription());
+            _subscription$2.set(this, new rxjs.Subscription());
             this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
             this.form = new forms.FormGroup({});
             this.isDetail = false;
@@ -4378,23 +4372,23 @@
             var systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
             var 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(function (columns) {
+                (_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(function (columns) {
                     _this.systemColumns = columns;
                 }));
             }
             if (setting) {
-                (_c = __classPrivateFieldGet(this, _subscription$3)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(function (columns) {
+                (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(function (columns) {
                     _this.columns = columns;
                 }));
             }
             this.originColumns = this.gridOption.columns.filter(function (e) { return e.type !== 'children' && e.type !== 'children-col'; });
         };
         SdDynamicColumn.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription$3).unsubscribe();
+            __classPrivateFieldGet(this, _subscription$2).unsubscribe();
         };
         return SdDynamicColumn;
     }());
-    _subscription$3 = new WeakMap();
+    _subscription$2 = new WeakMap();
     SdDynamicColumn.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-dynamic-column',