@sd-angular/core 1.3.92 → 1.3.94

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('object-hash'), require('@sd-angular/core/setting'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@sd-angular/core/export'), require('@angular/forms'), 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', 'object-hash', '@sd-angular/core/setting', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', '@sd-angular/core/export', '@angular/forms', '@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['object-hash'], global['sd-angular'].core.setting, global['ngx-device-detector'], global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['sd-angular'].core.export, global.ng.forms, 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, hash, setting, ngxDeviceDetector, loading, translate, _export, forms, 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('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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -426,10 +426,12 @@
     };
     var GRID_MATERIAL_CONFIG = new core.InjectionToken('sd-grid-material.configuration');
 
+    var _filterRegister, _subscription;
     var SdPopupFilter = /** @class */ (function () {
         function SdPopupFilter(cdRef) {
             var _this = this;
             this.cdRef = cdRef;
+            _filterRegister.set(this, void 0);
             this.externalFilters = [];
             this.externalFilter = {};
             this.inlineExternal = {};
@@ -439,16 +441,8 @@
             this.filterDefs = [];
             this.filterDef = {};
             this.inlineFilterDef = {};
-            this.changeFilter = new core.EventEmitter();
-            this.clearFilter = new core.EventEmitter();
-            this.open = function (args) {
-                var inlineColumn = args.inlineColumn, columnFilter = args.columnFilter, inlineExternal = args.inlineExternal, externalFilter = args.externalFilter, inlineFilterDef = args.inlineFilterDef, filterDef = args.filterDef;
-                _this.inlineColumn = JSON.parse(JSON.stringify(inlineColumn || {}));
-                _this.columnFilter = JSON.parse(JSON.stringify(columnFilter || {}));
-                _this.inlineExternal = JSON.parse(JSON.stringify(inlineExternal || {}));
-                _this.externalFilter = JSON.parse(JSON.stringify(externalFilter || {}));
-                _this.inlineFilterDef = JSON.parse(JSON.stringify(inlineFilterDef || {}));
-                _this.filterDef = JSON.parse(JSON.stringify(filterDef || {}));
+            _subscription.set(this, new rxjs.Subscription());
+            this.open = function () {
                 _this.modal.open();
                 _this.cdRef.markForCheck();
             };
@@ -457,25 +451,70 @@
                 _this.cdRef.markForCheck();
             };
             this.onApply = function () {
-                _this.changeFilter.emit({
-                    inlineColumn: _this.inlineColumn || {},
-                    columnFilter: _this.columnFilter || {},
-                    inlineExternal: _this.inlineExternal || {},
-                    externalFilter: _this.externalFilter || {},
-                    inlineFilterDef: _this.inlineFilterDef || {},
-                    filterDef: _this.filterDef || {}
+                _this.filterRegister.set({
+                    inlineColumn: _this.inlineColumn,
+                    columnFilter: _this.columnFilter,
+                    inlineExternal: _this.inlineExternal,
+                    externalFilter: _this.externalFilter,
+                    inlineFilterDef: _this.inlineFilterDef,
+                    filterDef: _this.filterDef
                 });
+                // this.changeFilter.emit({
+                //   inlineColumn: this.inlineColumn || {},
+                //   columnFilter: this.columnFilter || {},
+                //   inlineExternal: this.inlineExternal || {},
+                //   externalFilter: this.externalFilter || {},
+                //   inlineFilterDef: this.inlineFilterDef || {},
+                //   filterDef: this.filterDef || {}
+                // });
                 _this.modal.close();
                 _this.cdRef.markForCheck();
             };
         }
+        Object.defineProperty(SdPopupFilter.prototype, "filterRegister", {
+            set: function (value) {
+                __classPrivateFieldSet(this, _filterRegister, value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        SdPopupFilter.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            // this.#subscription.add(this.#filterOptionChanges.pipe(startWith(this.filter)).subscribe(() => {
+            //   if (this.filter?.disabled) {
+            //     this.filterChange.next(true);
+            //     return;
+            //   }
+            //   this.externalFilters = this.filter?.externalFilters || [];
+            //   const configuration = this.gridFilterService.get(this.filter?.key);
+            //   this.inlineColumn = configuration.inlineColumn;
+            //   this.inlineExternal = configuration.inlineExternal;
+            //   this.inlineFilterDef = configuration.inlineFilterDef;
+            //   this.#loadDefault();
+            //   this.filterChange.next(true);
+            //   this.ref.markForCheck();
+            // }));
+            __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).observer.subscribe(function (configuration) {
+                _this.inlineColumn = JSON.parse(JSON.stringify(configuration.inlineColumn));
+                _this.columnFilter = JSON.parse(JSON.stringify(configuration.columnFilter));
+                _this.inlineExternal = JSON.parse(JSON.stringify(configuration.inlineExternal));
+                _this.externalFilter = JSON.parse(JSON.stringify(configuration.externalFilter));
+                _this.inlineFilterDef = JSON.parse(JSON.stringify(configuration.inlineFilterDef));
+                _this.filterDef = JSON.parse(JSON.stringify(configuration.filterDef));
+            }));
+        };
+        SdPopupFilter.prototype.ngOnDestroy = function () {
+            __classPrivateFieldGet(this, _subscription).unsubscribe();
+        };
         SdPopupFilter.prototype.onClear = function () {
-            this.clearFilter.emit();
+            this.filterRegister.remove();
             this.modal.close();
             this.cdRef.markForCheck();
         };
         return SdPopupFilter;
     }());
+    _filterRegister = new WeakMap(), _subscription = new WeakMap();
     SdPopupFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-filter',
@@ -489,87 +528,22 @@
     ]; };
     SdPopupFilter.propDecorators = {
         modal: [{ type: core.ViewChild, args: ['modal',] }],
+        filterRegister: [{ type: core.Input }],
         externalFilters: [{ type: core.Input }],
         columns: [{ type: core.Input }],
-        filterDefs: [{ type: core.Input }],
-        changeFilter: [{ type: core.Output }],
-        clearFilter: [{ type: core.Output }]
+        filterDefs: [{ type: core.Input }]
     };
 
-    var _prefix;
-    var SdGridFilterService = /** @class */ (function () {
-        function SdGridFilterService(settingService) {
-            var _this = this;
-            this.settingService = settingService;
-            _prefix.set(this, '61d22e8e-eee8-4aad-8e1c-044a532fea91');
-            this.get = function (key) {
-                var _a;
-                if (!key) {
-                    return {
-                        selectedQuickFilter: null,
-                        quickFilters: [],
-                        inlineExternal: {},
-                        inlineColumn: {},
-                        inlineFilterDef: {}
-                    };
-                }
-                var get = _this.settingService.create({
-                    prefix: __classPrivateFieldGet(_this, _prefix),
-                    key: key
-                }).get;
-                var configuration = get();
-                return {
-                    selectedQuickFilter: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) !== null && _a !== void 0 ? _a : null,
-                    quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
-                    inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
-                    inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
-                    inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
-                };
-            };
-            this.set = function (key, configuration) {
-                configuration = {
-                    selectedQuickFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) || null,
-                    quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
-                    inlineExternal: configuration.inlineExternal || {},
-                    inlineColumn: configuration.inlineColumn || {},
-                    inlineFilterDef: configuration.inlineFilterDef || {}
-                };
-                if (!key) {
-                    return configuration;
-                }
-                var set = _this.settingService.create({
-                    prefix: __classPrivateFieldGet(_this, _prefix),
-                    key: key
-                }).set;
-                key = hash__default['default']({
-                    prefix: __classPrivateFieldGet(_this, _prefix),
-                    key: key
-                });
-                set(configuration);
-                return configuration;
-            };
-        }
-        return SdGridFilterService;
-    }());
-    _prefix = new WeakMap();
-    SdGridFilterService.decorators = [
-        { type: core.Injectable }
-    ];
-    SdGridFilterService.ctorParameters = function () { return [
-        { type: setting.SdSettingService }
-    ]; };
-
-    var _filterOptionChanges, _subscription, _loadDefault, _clearFilter;
+    var _filterOptionChanges, _subscription$1;
     var SdGridFilter = /** @class */ (function () {
-        function SdGridFilter(ref, deviceService, gridFilterService) {
+        function SdGridFilter(ref, deviceService) {
             var _this = this;
             this.ref = ref;
             this.deviceService = deviceService;
-            this.gridFilterService = gridFilterService;
             _filterOptionChanges.set(this, new rxjs.Subject());
             this.columns = [];
             this.filterDefs = [];
-            this.filterChange = new rxjs.BehaviorSubject(false);
+            this.filterRegisterChange = new rxjs.BehaviorSubject(null);
             this.filterDef = {};
             this.inlineFilterDef = {};
             this.columnFilter = {};
@@ -577,178 +551,20 @@
             this.externalFilters = [];
             this.externalFilter = {};
             this.inlineExternal = {};
-            _subscription.set(this, new rxjs.Subscription());
-            _loadDefault.set(this, function () {
-                var e_1, _r, e_2, _s, e_3, _t;
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-                try {
-                    for (var _u = __values(_this.columns), _v = _u.next(); !_v.done; _v = _u.next()) {
-                        var column = _v.value;
-                        _this.inlineColumn[column.field] = (_a = _this.inlineColumn[column.field]) !== null && _a !== void 0 ? _a : (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.defaultShowing;
-                        _this.columnFilter[column.field] = (_c = _this.columnFilter[column.field]) !== null && _c !== void 0 ? _c : (_d = column === null || column === void 0 ? void 0 : column.filter) === null || _d === void 0 ? void 0 : _d.default;
-                    }
-                }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
-                    }
-                    finally { if (e_1) throw e_1.error; }
-                }
-                try {
-                    for (var _w = __values(_this.externalFilters), _x = _w.next(); !_x.done; _x = _w.next()) {
-                        var externalFilter = _x.value;
-                        _this.inlineExternal[externalFilter.field] = (_e = _this.inlineExternal[externalFilter.field]) !== null && _e !== void 0 ? _e : externalFilter === null || externalFilter === void 0 ? void 0 : externalFilter.defaultShowing;
-                        if (externalFilter.type === 'daterange') {
-                            _this.externalFilter[externalFilter.field] = {
-                                from: (_j = (_g = (_f = _this.externalFilter[externalFilter.field]) === null || _f === void 0 ? void 0 : _f.from) !== null && _g !== void 0 ? _g : (_h = externalFilter.default) === null || _h === void 0 ? void 0 : _h.from) !== null && _j !== void 0 ? _j : undefined,
-                                to: (_o = (_l = (_k = _this.externalFilter[externalFilter.field]) === null || _k === void 0 ? void 0 : _k.to) !== null && _l !== void 0 ? _l : (_m = externalFilter.default) === null || _m === void 0 ? void 0 : _m.to) !== null && _o !== void 0 ? _o : undefined
-                            };
-                        }
-                        else {
-                            _this.externalFilter[externalFilter.field] = (_p = _this.externalFilter[externalFilter.field]) !== null && _p !== void 0 ? _p : externalFilter.default;
-                        }
-                    }
-                }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                finally {
-                    try {
-                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
-                    }
-                    finally { if (e_2) throw e_2.error; }
-                }
-                try {
-                    for (var _y = __values(_this.filterDefs), _z = _y.next(); !_z.done; _z = _y.next()) {
-                        var filterDef = _z.value;
-                        _this.inlineFilterDef[filterDef.sdMaterialFilterDef] = (_q = _this.inlineFilterDef[filterDef.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : filterDef === null || filterDef === void 0 ? void 0 : filterDef.defaultShowing;
-                    }
-                }
-                catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                finally {
-                    try {
-                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
-                    }
-                    finally { if (e_3) throw e_3.error; }
-                }
-            });
-            _clearFilter.set(this, function () {
-                var e_4, _r;
-                _this.columnFilter = {};
-                _this.externalFilter = {};
-                _this.filterDef = {};
-                try {
-                    for (var _s = __values(_this.externalFilters), _t = _s.next(); !_t.done; _t = _s.next()) {
-                        var externalFilter = _t.value;
-                        if (externalFilter.type === 'daterange') {
-                            _this.externalFilter[externalFilter.field] = {
-                                from: undefined,
-                                to: undefined
-                            };
-                        }
-                    }
-                }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                finally {
-                    try {
-                        if (_t && !_t.done && (_r = _s.return)) _r.call(_s);
-                    }
-                    finally { if (e_4) throw e_4.error; }
-                }
-                _this.ref.markForCheck();
-            });
+            _subscription$1.set(this, new rxjs.Subscription());
             this.onFilter = function (item) {
-                _this.filterChange.next(true);
-            };
-            this.open = function () {
-                _this.popupFilter.open({
+                _this.filterRegister.set({
                     columnFilter: _this.columnFilter,
                     externalFilter: _this.externalFilter,
-                    filterDef: _this.filterDef,
-                    inlineColumn: _this.inlineColumn,
-                    inlineExternal: _this.inlineExternal,
-                    inlineFilterDef: _this.inlineFilterDef
+                    filterDef: _this.filterDef
                 });
+                // this.filterChange.next(true);
             };
-            this.onChangeFilter = function (args) {
-                var _a;
-                var inlineColumn = args.inlineColumn, columnFilter = args.columnFilter, inlineExternal = args.inlineExternal, externalFilter = args.externalFilter, inlineFilterDef = args.inlineFilterDef, filterDef = args.filterDef;
-                _this.inlineColumn = inlineColumn;
-                _this.columnFilter = columnFilter;
-                _this.inlineExternal = inlineExternal;
-                _this.externalFilter = externalFilter;
-                _this.inlineFilterDef = inlineFilterDef;
-                _this.filterDef = filterDef;
-                _this.gridFilterService.set((_a = _this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                    inlineColumn: inlineColumn,
-                    inlineExternal: inlineExternal,
-                    quickFilters: [],
-                    inlineFilterDef: inlineFilterDef,
-                    selectedQuickFilter: null
-                });
-                _this.filterChange.next(true);
+            this.open = function () {
+                _this.popupFilter.open();
             };
             this.onReset = function () {
-                var _a;
-                _this.inlineColumn = {};
-                _this.columnFilter = {};
-                _this.inlineExternal = {};
-                _this.externalFilter = {};
-                _this.inlineFilterDef = {};
-                _this.filterDef = {};
-                __classPrivateFieldGet(_this, _loadDefault).call(_this);
-                _this.gridFilterService.set((_a = _this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                    inlineColumn: _this.inlineColumn,
-                    inlineExternal: _this.columnFilter,
-                    inlineFilterDef: _this.inlineFilterDef,
-                    quickFilters: [],
-                    selectedQuickFilter: null
-                });
-                _this.filterChange.next(true);
-                _this.ref.markForCheck();
-            };
-            this.onClearFilter = function () {
-                var _a;
-                __classPrivateFieldGet(_this, _clearFilter).call(_this);
-                _this.gridFilterService.set((_a = _this.filter) === null || _a === void 0 ? void 0 : _a.key, {
-                    inlineColumn: _this.inlineColumn,
-                    inlineExternal: _this.columnFilter,
-                    inlineFilterDef: _this.inlineFilterDef,
-                    quickFilters: [],
-                    selectedQuickFilter: null
-                });
-                _this.filterChange.next(true);
-            };
-            this.setFilter = function (args) {
-                var e_5, _r;
-                var _a, _b, _c, _d;
-                var columnFilter = args.columnFilter, externalFilter = args.externalFilter, filterDef = args.filterDef;
-                if (columnFilter) {
-                    _this.columnFilter = columnFilter;
-                }
-                if (externalFilter) {
-                    _this.externalFilter = externalFilter;
-                }
-                if (filterDef) {
-                    _this.filterDef = filterDef;
-                }
-                try {
-                    for (var _s = __values(_this.externalFilters), _t = _s.next(); !_t.done; _t = _s.next()) {
-                        var exFilter = _t.value;
-                        if (exFilter.type === 'daterange') {
-                            _this.externalFilter[exFilter.field] = {
-                                from: (_b = (_a = _this.externalFilter[exFilter.field]) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : undefined,
-                                to: (_d = (_c = _this.externalFilter[exFilter.field]) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : undefined
-                            };
-                        }
-                    }
-                }
-                catch (e_5_1) { e_5 = { error: e_5_1 }; }
-                finally {
-                    try {
-                        if (_t && !_t.done && (_r = _s.return)) _r.call(_s);
-                    }
-                    finally { if (e_5) throw e_5.error; }
-                }
+                _this.filterRegister.remove();
                 _this.ref.markForCheck();
             };
             this.isMobileOrTablet = !this.deviceService.isDesktop();
@@ -762,48 +578,91 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SdGridFilter.prototype, "_filterRegister", {
+            set: function (value) {
+                this.filterRegister = value;
+                this.filterRegisterChange.next(this.filterRegister);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         SdGridFilter.prototype.ngAfterViewInit = function () {
             var _this = this;
-            __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterOptionChanges).pipe(operators.startWith(this.filter)).subscribe(function () {
-                var _a, _b, _c;
-                if ((_a = _this.filter) === null || _a === void 0 ? void 0 : _a.disabled) {
-                    _this.filterChange.next(true);
-                    return;
+            // this.#subscription.add(this.#filterOptionChanges.pipe(startWith(this.filter)).subscribe(() => {
+            //   if (this.filter?.disabled) {
+            //     this.filterChange.next(true);
+            //     return;
+            //   }
+            //   this.externalFilters = this.filter?.externalFilters || [];
+            //   const configuration = this.gridFilterService.get(this.filter?.key);
+            //   this.inlineColumn = configuration.inlineColumn;
+            //   this.inlineExternal = configuration.inlineExternal;
+            //   this.inlineFilterDef = configuration.inlineFilterDef;
+            //   this.#loadDefault();
+            //   this.filterChange.next(true);
+            //   this.ref.markForCheck();
+            // }));
+            __classPrivateFieldGet(this, _subscription$1).add(this.filterRegisterChange.subscribe(function () {
+                if (_this.filterRegister) {
+                    __classPrivateFieldGet(_this, _subscription$1).add(_this.filterRegister.observer.subscribe(function (configuration) {
+                        _this.inlineColumn = configuration.inlineColumn;
+                        _this.columnFilter = configuration.columnFilter;
+                        _this.inlineExternal = configuration.inlineExternal;
+                        _this.externalFilter = configuration.externalFilter;
+                        _this.inlineFilterDef = configuration.inlineFilterDef;
+                        _this.filterDef = configuration.filterDef;
+                    }));
+                    _this.ref.markForCheck();
                 }
-                _this.externalFilters = ((_b = _this.filter) === null || _b === void 0 ? void 0 : _b.externalFilters) || [];
-                var configuration = _this.gridFilterService.get((_c = _this.filter) === null || _c === void 0 ? void 0 : _c.key);
-                _this.inlineColumn = configuration.inlineColumn;
-                _this.inlineExternal = configuration.inlineExternal;
-                _this.inlineFilterDef = configuration.inlineFilterDef;
-                __classPrivateFieldGet(_this, _loadDefault).call(_this);
-                _this.filterChange.next(true);
-                _this.ref.markForCheck();
+                ;
             }));
         };
+        // #loadDefault = () => {
+        //   for (const column of this.columns) {
+        //     this.inlineColumn[column.field] = this.inlineColumn[column.field] ?? column?.filter?.defaultShowing;
+        //     this.columnFilter[column.field] = this.columnFilter[column.field] ?? column?.filter?.default;
+        //   }
+        //   for (const externalFilter of this.externalFilters) {
+        //     this.inlineExternal[externalFilter.field] = this.inlineExternal[externalFilter.field] ?? externalFilter?.defaultShowing;
+        //     if (externalFilter.type === 'daterange') {
+        //       this.externalFilter[externalFilter.field] = {
+        //         from: this.externalFilter[externalFilter.field]?.from ?? externalFilter.default?.from ?? undefined,
+        //         to: this.externalFilter[externalFilter.field]?.to ?? externalFilter.default?.to ?? undefined
+        //       };
+        //     } else {
+        //       this.externalFilter[externalFilter.field] = this.externalFilter[externalFilter.field] ?? externalFilter.default;
+        //     }
+        //   }
+        //   for (const filterDef of this.filterDefs) {
+        //     this.inlineFilterDef[filterDef.sdMaterialFilterDef] =
+        //       this.inlineFilterDef[filterDef.sdMaterialFilterDef] ?? filterDef?.defaultShowing;
+        //   }
+        // }
         SdGridFilter.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription).unsubscribe();
+            __classPrivateFieldGet(this, _subscription$1).unsubscribe();
         };
         return SdGridFilter;
     }());
-    _filterOptionChanges = new WeakMap(), _subscription = new WeakMap(), _loadDefault = new WeakMap(), _clearFilter = new WeakMap();
+    _filterOptionChanges = new WeakMap(), _subscription$1 = new WeakMap();
     SdGridFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-filter',
-                    template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0 pb-10\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\r\n          <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n            <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"externalFilters?.length\">\r\n            <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor=\"let item of filterDefs\">\r\n            <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n              class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n              <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterColumn let-item=\"item\">\r\n      <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [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 [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n      (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
+                    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 pb-10\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\r\n          <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n            <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"externalFilters?.length\">\r\n            <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor=\"let item of filterDefs\">\r\n            <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n              class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n              <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterColumn let-item=\"item\">\r\n      <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [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-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
     ];
     SdGridFilter.ctorParameters = function () { return [
         { type: core.ChangeDetectorRef },
-        { type: ngxDeviceDetector.DeviceDetectorService },
-        { type: SdGridFilterService }
+        { type: ngxDeviceDetector.DeviceDetectorService }
     ]; };
     SdGridFilter.propDecorators = {
         popupFilter: [{ type: core.ViewChild, args: [SdPopupFilter,] }],
         _filter: [{ type: core.Input, args: ['filter',] }],
         columns: [{ type: core.Input }],
-        filterDefs: [{ type: core.Input }]
+        filterDefs: [{ type: core.Input }],
+        _filterRegister: [{ type: core.Input, args: ['filterRegister',] }]
     };
 
     var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
@@ -1678,11 +1537,11 @@
         { type: undefined, decorators: [{ type: core.Inject, args: [GRID_MATERIAL_CONFIG,] }, { type: core.Optional }] }
     ]; };
 
-    var _prefix$1, _cache$1;
+    var _prefix, _cache$1;
     var SdColumnValuesPipe = /** @class */ (function () {
         function SdColumnValuesPipe() {
             var _this = this;
-            _prefix$1.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
+            _prefix.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
             _cache$1.set(this, {});
             this.transform = function (value, column) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, items, valueField, displayField, selection, remain, key, isMultible, values, result, result;
@@ -1694,7 +1553,7 @@
                             }
                             _l = column.option, items = _l.items, valueField = _l.valueField, displayField = _l.displayField, selection = _l.selection, remain = __rest(_l, ["items", "valueField", "displayField", "selection"]);
                             key = hash__default['default']({
-                                prefix: __classPrivateFieldGet(this, _prefix$1),
+                                prefix: __classPrivateFieldGet(this, _prefix),
                                 valueField: valueField,
                                 displayField: displayField,
                                 selection: selection,
@@ -1740,7 +1599,7 @@
         }
         return SdColumnValuesPipe;
     }());
-    _prefix$1 = new WeakMap(), _cache$1 = new WeakMap();
+    _prefix = new WeakMap(), _cache$1 = new WeakMap();
     SdColumnValuesPipe.decorators = [
         { type: core.Pipe, args: [{
                     name: 'columnValues'
@@ -1827,17 +1686,211 @@
         { type: core.NgZone }
     ]; };
 
-    var _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
+    var _prefix$1, _loadDefault;
+    var SdGridFilterService = /** @class */ (function () {
+        function SdGridFilterService(settingService) {
+            var _this = this;
+            this.settingService = settingService;
+            _prefix$1.set(this, '61d22e8e-eee8-4aad-8e1c-044a532fea91');
+            this.register = function (key, args) {
+                var cacheSession = false;
+                if (!key) {
+                    key = uuid.v4();
+                    cacheSession = true; // Nếu không có key thì chỉ lưu theo session
+                }
+                var _r = _this.settingService.create({
+                    prefix: __classPrivateFieldGet(_this, _prefix$1),
+                    key: key
+                }, {
+                    default: __classPrivateFieldGet(_this, _loadDefault).call(_this, args),
+                    type: cacheSession ? 'session' : undefined
+                }), get = _r.get, set = _r.set, remove = _r.remove, subject = _r.subject, observer = _r.observer;
+                return {
+                    get: function () {
+                        var _a;
+                        var configuration = get();
+                        return {
+                            selectedQuickFilter: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) !== null && _a !== void 0 ? _a : null,
+                            quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
+                            // Filter column
+                            inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
+                            columnFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {},
+                            // Filter external
+                            inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
+                            externalFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {},
+                            // Filter def
+                            inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
+                            filterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}
+                        };
+                    },
+                    set: function (configuration) {
+                        var keys = Object.keys(configuration || {});
+                        var current = get();
+                        var selectedQuickFilter = current.selectedQuickFilter, quickFilters = current.quickFilters, inlineColumn = current.inlineColumn, columnFilter = current.columnFilter, inlineExternal = current.inlineExternal, externalFilter = current.externalFilter, inlineFilterDef = current.inlineFilterDef, filterDef = current.filterDef;
+                        var updatedConfiguration = {
+                            selectedQuickFilter: keys.includes('selectedQuickFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) || null) : selectedQuickFilter,
+                            quickFilters: keys.includes('quickFilters') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || []) : quickFilters,
+                            // Filter column
+                            inlineColumn: keys.includes('inlineColumn') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {}) : inlineColumn,
+                            columnFilter: keys.includes('columnFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {}) : columnFilter,
+                            // Filter external
+                            inlineExternal: keys.includes('inlineExternal') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {}) : inlineExternal,
+                            externalFilter: keys.includes('externalFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {}) : externalFilter,
+                            // Filter def
+                            inlineFilterDef: keys.includes('inlineFilterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {}) : inlineFilterDef,
+                            filterDef: keys.includes('filterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}) : filterDef,
+                        };
+                        set(updatedConfiguration);
+                        return updatedConfiguration;
+                    },
+                    remove: function () {
+                        remove();
+                    },
+                    subject: subject,
+                    observer: observer
+                };
+            };
+            _loadDefault.set(this, function (args) {
+                var e_1, _r, e_2, _s, e_3, _t;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
+                var inlineColumn = {};
+                var columnFilter = {};
+                var inlineExternal = {};
+                var externalFilter = {};
+                var inlineFilterDef = {};
+                var filterDef = {};
+                try {
+                    // Filter column
+                    for (var _u = __values((columns || [])), _v = _u.next(); !_v.done; _v = _u.next()) {
+                        var item = _v.value;
+                        inlineColumn[item.field] = (_a = inlineColumn[item.field]) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.filter) === null || _b === void 0 ? void 0 : _b.defaultShowing;
+                        columnFilter[item.field] = (_c = columnFilter[item.field]) !== null && _c !== void 0 ? _c : (_d = item === null || item === void 0 ? void 0 : item.filter) === null || _d === void 0 ? void 0 : _d.default;
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                try {
+                    // Filter external
+                    for (var _w = __values((externalFilters || [])), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var item = _x.value;
+                        inlineExternal[item.field] = (_e = inlineExternal[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
+                        if (item.type === 'daterange') {
+                            externalFilter[item.field] = {
+                                from: (_j = (_g = (_f = externalFilter[item.field]) === null || _f === void 0 ? void 0 : _f.from) !== null && _g !== void 0 ? _g : (_h = item.default) === null || _h === void 0 ? void 0 : _h.from) !== null && _j !== void 0 ? _j : undefined,
+                                to: (_o = (_l = (_k = externalFilter[item.field]) === null || _k === void 0 ? void 0 : _k.to) !== null && _l !== void 0 ? _l : (_m = item.default) === null || _m === void 0 ? void 0 : _m.to) !== null && _o !== void 0 ? _o : undefined
+                            };
+                        }
+                        else {
+                            externalFilter[item.field] = (_p = externalFilter[item.field]) !== null && _p !== void 0 ? _p : item.default;
+                        }
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+                try {
+                    // Filter def
+                    for (var _y = __values((filterDefs || [])), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
+                        inlineFilterDef[item.sdMaterialFilterDef] = (_q = inlineFilterDef[item.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : item === null || item === void 0 ? void 0 : item.defaultShowing;
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+                return {
+                    quickFilters: [],
+                    selectedQuickFilter: null,
+                    inlineColumn: inlineColumn,
+                    columnFilter: columnFilter,
+                    inlineExternal: inlineExternal,
+                    externalFilter: externalFilter,
+                    inlineFilterDef: inlineFilterDef,
+                    filterDef: filterDef,
+                };
+            });
+            this.get = function (key) {
+                var _a;
+                if (!key) {
+                    return {
+                        selectedQuickFilter: null,
+                        quickFilters: [],
+                        inlineExternal: {},
+                        inlineColumn: {},
+                        inlineFilterDef: {}
+                    };
+                }
+                var get = _this.settingService.create({
+                    prefix: __classPrivateFieldGet(_this, _prefix$1),
+                    key: key
+                }).get;
+                var configuration = get();
+                return {
+                    selectedQuickFilter: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) !== null && _a !== void 0 ? _a : null,
+                    quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
+                    inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
+                    inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
+                    inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
+                };
+            };
+            this.set = function (key, configuration) {
+                configuration = {
+                    selectedQuickFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.selectedQuickFilter) || null,
+                    quickFilters: (configuration === null || configuration === void 0 ? void 0 : configuration.quickFilters) || [],
+                    inlineExternal: configuration.inlineExternal || {},
+                    inlineColumn: configuration.inlineColumn || {},
+                    inlineFilterDef: configuration.inlineFilterDef || {}
+                };
+                if (!key) {
+                    return configuration;
+                }
+                var set = _this.settingService.create({
+                    prefix: __classPrivateFieldGet(_this, _prefix$1),
+                    key: key
+                }).set;
+                key = hash__default['default']({
+                    prefix: __classPrivateFieldGet(_this, _prefix$1),
+                    key: key
+                });
+                set(configuration);
+                return configuration;
+            };
+        }
+        return SdGridFilterService;
+    }());
+    _prefix$1 = new WeakMap(), _loadDefault = new WeakMap();
+    SdGridFilterService.decorators = [
+        { type: core.Injectable }
+    ];
+    SdGridFilterService.ctorParameters = function () { return [
+        { type: setting.SdSettingService }
+    ]; };
+
+    var _localItems, _paginator, _sort, _subscription$2, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
     var SdGridMaterial = /** @class */ (function () {
-        function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, columnValuesPipe, editorHandlerColumnPipe) {
+        function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService, editorHandlerColumnPipe) {
             var _this = this;
             this.ref = ref;
             this.configuration = configuration;
             this.gridConfigurationService = gridConfigurationService;
             this.exportService = exportService;
             this.notifyService = notifyService;
-            this.translateService = translateService;
             this.columnValuesPipe = columnValuesPipe;
+            this.gridFilterService = gridFilterService;
             this.editorHandlerColumnPipe = editorHandlerColumnPipe;
             this.key = uuid.v4();
             _localItems.set(this, []);
@@ -1863,7 +1916,7 @@
             // Filter
             this.columnFilter = {};
             // Subcription
-            _subscription$1.set(this, new rxjs.Subscription());
+            _subscription$2.set(this, new rxjs.Subscription());
             _reload.set(this, new rxjs.BehaviorSubject({
                 force: true
             }));
@@ -1906,6 +1959,7 @@
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
+                __classPrivateFieldGet(_this, _loadFilterRegister).call(_this);
             });
             _initFooterDef.set(this, function () {
                 var e_3, _3;
@@ -1929,13 +1983,14 @@
                 }
             });
             _filterExportInfo.set(this, function (pageNumber, pageSize) {
-                var _a, _b, _c, _d, _e, _f, _g;
+                var _a, _b;
+                var _3 = _this.filterRegister.get(), columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
                 return {
-                    rawColumnFilter: (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) ? _this.columnFilter : (_c = _this.gridFilter) === null || _c === void 0 ? void 0 : _c.columnFilter) || {},
-                    rawExternalFilter: ((_d = _this.gridFilter) === null || _d === void 0 ? void 0 : _d.externalFilter) || {},
-                    rawFilterDef: ((_e = _this.gridFilter) === null || _e === void 0 ? void 0 : _e.filterDef) || {},
-                    orderBy: ((_f = __classPrivateFieldGet(_this, _sort)) === null || _f === void 0 ? void 0 : _f.active) || '',
-                    orderDirection: ((_g = __classPrivateFieldGet(_this, _sort)) === null || _g === void 0 ? void 0 : _g.direction) || '',
+                    rawColumnFilter: columnFilter || {},
+                    rawExternalFilter: externalFilter || {},
+                    rawFilterDef: filterDef || {},
+                    orderBy: ((_a = __classPrivateFieldGet(_this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                    orderDirection: ((_b = __classPrivateFieldGet(_this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
                     pageNumber: pageNumber,
                     pageSize: pageSize,
                     isExported: true
@@ -1943,6 +1998,7 @@
             });
             _initConfiguration.set(this, function (option) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                // Init pagination
                 option.paginate = {
                     hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
                     pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = _this.configuration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
@@ -1951,6 +2007,22 @@
                 };
                 return option;
             });
+            _loadFilterRegister.set(this, function () {
+                var _a, _b, _c, _d, _e;
+                // Init filter
+                _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
+                });
+                __classPrivateFieldGet(_this, _subscription$2).add(_this.filterRegister.observer.pipe(operators.debounceTime(500), operators.map(function (configuration) {
+                    _this.columnFilter = configuration.columnFilter;
+                    __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
+                    __classPrivateFieldGet(_this, _reload).next({
+                        force: false,
+                    });
+                })).subscribe());
+            });
             _filterLocal.set(this, function (localItems, filterInfo) {
                 var columns = _this.gridOption.columns;
                 var rawColumnFilter = filterInfo.rawColumnFilter, orderBy = filterInfo.orderBy, orderDirection = filterInfo.orderDirection, pageSize = filterInfo.pageSize, pageNumber = filterInfo.pageNumber;
@@ -2079,16 +2151,17 @@
                 };
             });
             _getFilter.set(this, function () {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                return ({
-                    rawColumnFilter: (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) ? _this.columnFilter : (_c = _this.gridFilter) === null || _c === void 0 ? void 0 : _c.columnFilter) || {},
-                    rawExternalFilter: ((_d = _this.gridFilter) === null || _d === void 0 ? void 0 : _d.externalFilter) || {},
-                    rawFilterDef: ((_e = _this.gridFilter) === null || _e === void 0 ? void 0 : _e.filterDef) || {},
-                    orderBy: ((_f = __classPrivateFieldGet(_this, _sort)) === null || _f === void 0 ? void 0 : _f.active) || '',
-                    orderDirection: ((_g = __classPrivateFieldGet(_this, _sort)) === null || _g === void 0 ? void 0 : _g.direction) || '',
-                    pageNumber: ((_h = __classPrivateFieldGet(_this, _paginator)) === null || _h === void 0 ? void 0 : _h.pageIndex) || 0,
-                    pageSize: ((_j = __classPrivateFieldGet(_this, _paginator)) === null || _j === void 0 ? void 0 : _j.pageSize) || ((_l = (_k = _this.gridOption) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pageSize) || 50
-                });
+                var _a, _b, _c, _d, _e, _f;
+                var _3 = _this.filterRegister.get(), columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
+                return {
+                    rawColumnFilter: columnFilter || {},
+                    rawExternalFilter: externalFilter || {},
+                    rawFilterDef: filterDef || {},
+                    orderBy: ((_a = __classPrivateFieldGet(_this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                    orderDirection: ((_b = __classPrivateFieldGet(_this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                    pageNumber: ((_c = __classPrivateFieldGet(_this, _paginator)) === null || _c === void 0 ? void 0 : _c.pageIndex) || 0,
+                    pageSize: ((_d = __classPrivateFieldGet(_this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = _this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50
+                };
             });
             _load$1.set(this, function (filterReq, force) {
                 if (force === void 0) { force = true; }
@@ -2713,18 +2786,23 @@
                 _this.ref.detectChanges();
             });
             this.clearFilter = function () {
-                var _a, _b, _c;
-                if ((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) {
-                    _this.columnFilter = {};
-                }
-                (_c = _this.gridFilter) === null || _c === void 0 ? void 0 : _c.onClearFilter();
+                _this.filterRegister.remove();
+                // if (this.gridOption?.filter?.inlineColumn) {
+                //   this.columnFilter = {};
+                // }
+                // this.gridFilter?.onClearFilter();
             };
             this.setFilter = function (args) {
-                var _a, _b, _c;
-                if (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) && (args === null || args === void 0 ? void 0 : args.columnFilter)) {
-                    _this.columnFilter = args.columnFilter;
-                }
-                (_c = _this.gridFilter) === null || _c === void 0 ? void 0 : _c.setFilter(args);
+                var _3 = args || {}, columnFilter = _3.columnFilter, externalFilter = _3.externalFilter, filterDef = _3.filterDef;
+                _this.filterRegister.set({
+                    columnFilter: columnFilter,
+                    externalFilter: externalFilter,
+                    filterDef: filterDef
+                });
+                // if (this.gridOption?.filter?.inlineColumn && args?.columnFilter) {
+                //   this.columnFilter = args.columnFilter;
+                // }
+                // this.gridFilter?.setFilter(args);
             };
             this.onCreate = function () {
                 var _a, _b;
@@ -2951,16 +3029,19 @@
         }
         Object.defineProperty(SdGridMaterial.prototype, "_gridFilter", {
             set: function (gridFilter) {
-                var _this = this;
                 if (gridFilter && this.gridFilter !== gridFilter) {
                     this.gridFilter = gridFilter;
-                    __classPrivateFieldGet(this, _subscription$1).add(gridFilter.filterChange.pipe(operators.filter(function (reload) { return reload; }), operators.debounceTime(500), operators.map(function () {
-                        __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
-                        __classPrivateFieldGet(_this, _reload).next({
-                            force: false,
-                            source: 'FILTER'
-                        });
-                    })).subscribe());
+                    // this.#subscription.add(gridFilter.filterChange.pipe(
+                    //   filter(reload => reload),
+                    //   debounceTime(500),
+                    //   map(() => {
+                    //     this.#paginator.pageIndex = 0;
+                    //     this.#reload.next({
+                    //       force: false,
+                    //       source: 'FILTER'
+                    //     });
+                    //   }),
+                    // ).subscribe());
                 }
             },
             enumerable: false,
@@ -2968,22 +3049,14 @@
         });
         Object.defineProperty(SdGridMaterial.prototype, "option", {
             set: function (option) {
-                var _this = this;
-                var _a;
                 if (option) {
                     option = __classPrivateFieldGet(this, _initConfiguration).call(this, option);
                     this.gridOption = option;
+                    __classPrivateFieldGet(this, _loadFilterRegister).call(this);
                     __classPrivateFieldSet(this, _loadCompleted, false);
-                    __classPrivateFieldGet(this, _reload).next({
-                        force: true,
-                        source: 'INITIALIZE'
-                    });
-                    (_a = option === null || option === void 0 ? void 0 : option.columns) === null || _a === void 0 ? void 0 : _a.forEach(function (col) {
-                        var _a;
-                        if ((_a = col.filter) === null || _a === void 0 ? void 0 : _a.default) {
-                            _this.columnFilter[col.field] = col.filter.default;
-                        }
-                    });
+                    // this.#reload.next({
+                    //   force: true,
+                    // });
                     var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
                     this.gridConfigurationObserver = configuration.observer;
                     configuration.load();
@@ -2997,7 +3070,7 @@
                 var _this = this;
                 if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
                     __classPrivateFieldSet(this, _paginator, paginator);
-                    __classPrivateFieldGet(this, _subscription$1).add(paginator.page.pipe(operators.map(function () {
+                    __classPrivateFieldGet(this, _subscription$2).add(paginator.page.pipe(operators.map(function () {
                         __classPrivateFieldGet(_this, _reload).next({
                             force: false
                         });
@@ -3012,7 +3085,7 @@
                 var _this = this;
                 if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
                     __classPrivateFieldSet(this, _sort, sort);
-                    __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange.pipe(operators.map(function () {
+                    __classPrivateFieldGet(this, _subscription$2).add(sort.sortChange.pipe(operators.map(function () {
                         __classPrivateFieldGet(_this, _reload).next({
                             force: false
                         });
@@ -3027,18 +3100,7 @@
         };
         SdGridMaterial.prototype.ngAfterViewInit = function () {
             var _this = this;
-            __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), 
-            // startWith(this.#reload.value),
-            operators.filter(function (data) {
-                var _a, _b;
-                if (__classPrivateFieldGet(_this, _loadCompleted)) {
-                    return true;
-                }
-                if (!((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                    return data.source === 'FILTER';
-                }
-                return data.source === 'INITIALIZE';
-            }), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
+            __classPrivateFieldGet(this, _subscription$2).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) {
@@ -3052,9 +3114,9 @@
                     }
                 });
             }); })).subscribe(__classPrivateFieldGet(this, _render)));
-            __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$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)));
             // this.#subscription.add(this.#optionChanges.pipe(
             //   debounceTime(200),
             //   startWith({}),
@@ -3064,7 +3126,7 @@
             this.ref.detectChanges();
         };
         SdGridMaterial.prototype.ngOnDestroy = function () {
-            __classPrivateFieldGet(this, _subscription$1).unsubscribe();
+            __classPrivateFieldGet(this, _subscription$2).unsubscribe();
         };
         SdGridMaterial.prototype.drop = function (event, columns) {
             dragDrop.moveItemInArray(columns, event.previousIndex, event.currentIndex);
@@ -3123,11 +3185,11 @@
         });
         return SdGridMaterial;
     }());
-    _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = 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();
+    _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 = 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',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <sd-grid-filter *ngIf=\"!gridOption.filter?.disabled\" [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\"\r\n        (export)=\"onExport($event)\" #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <sd-grid-filter *ngIf=\"!gridOption.filter?.disabled && filterRegister\" [filterRegister]=\"filterRegister\" [filter]=\"gridOption?.filter\"\r\n      [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\" #gridFilter>\r\n    </sd-grid-filter>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\"\r\n        (export)=\"onExport($event)\" #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                     animations: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -3144,8 +3206,8 @@
         { type: SdGridConfigurationService },
         { type: _export.SdExportService },
         { type: notify.SdNotifyService },
-        { type: translate.SdTranslateService },
         { type: SdColumnValuesPipe },
+        { type: SdGridFilterService },
         { type: SdEditorHandlerColumnPipe }
     ]; };
     SdGridMaterial.propDecorators = {
@@ -4140,7 +4202,7 @@
         { type: setting.SdSettingService }
     ]; };
 
-    var _subscription$2;
+    var _subscription$3;
     var SdDynamicColumn = /** @class */ (function () {
         function SdDynamicColumn(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
             var _this = this;
@@ -4149,7 +4211,7 @@
             this.notifyService = notifyService;
             this.translateService = translateService;
             this.gridConfigurationService = gridConfigurationService;
-            _subscription$2.set(this, new rxjs.Subscription());
+            _subscription$3.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;
@@ -4194,23 +4256,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$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(function (columns) {
+                (_b = __classPrivateFieldGet(this, _subscription$3)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(function (columns) {
                     _this.systemColumns = columns;
                 }));
             }
             if (setting) {
-                (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(function (columns) {
+                (_c = __classPrivateFieldGet(this, _subscription$3)) === 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$2).unsubscribe();
+            __classPrivateFieldGet(this, _subscription$3).unsubscribe();
         };
         return SdDynamicColumn;
     }());
-    _subscription$2 = new WeakMap();
+    _subscription$3 = new WeakMap();
     SdDynamicColumn.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-dynamic-column',
@@ -5128,11 +5190,11 @@
     exports.ɵbp = SdCellViewPipe;
     exports.ɵbq = SdGroupPipe;
     exports.ɵc = SdPopupFilter;
-    exports.ɵd = SdGridFilterService;
-    exports.ɵe = SdPopupExport;
-    exports.ɵg = GRID_MATERIAL_CONFIG;
-    exports.ɵh = SdGridConfigurationService;
-    exports.ɵi = SdColumnValuesPipe;
+    exports.ɵd = SdPopupExport;
+    exports.ɵf = GRID_MATERIAL_CONFIG;
+    exports.ɵg = SdGridConfigurationService;
+    exports.ɵh = SdColumnValuesPipe;
+    exports.ɵi = SdGridFilterService;
     exports.ɵj = SdEditorHandlerColumnPipe;
     exports.ɵk = SdGridQuickAction;
     exports.ɵl = SdDesktopCell;