@sd-angular/core 1.3.98 → 1.3.100

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

@@ -8,7 +8,7 @@ import { v4 } from 'uuid';
 import { Subscription, BehaviorSubject, Subject, isObservable, combineLatest } from 'rxjs';
 import { SdNotifyService } from '@sd-angular/core/notify';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { startWith, debounceTime, map, switchMap } from 'rxjs/operators';
+import { debounceTime, map, switchMap, startWith } from 'rxjs/operators';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { SdLoadingService } from '@sd-angular/core/loading';
 import { SdTranslateService } from '@sd-angular/core/translate';
@@ -156,22 +156,16 @@ class SdPopupFilter {
             this.cdRef.markForCheck();
         };
         this.onApply = () => {
-            __classPrivateFieldGet(this, _filterRegister).set({
+            __classPrivateFieldGet(this, _filterRegister).configuration.set({
                 inlineColumn: this.inlineColumn,
-                columnFilter: this.columnFilter,
                 inlineExternal: this.inlineExternal,
-                externalFilter: this.externalFilter,
                 inlineFilterDef: this.inlineFilterDef,
+            });
+            __classPrivateFieldGet(this, _filterRegister).value.set({
+                columnFilter: this.columnFilter,
+                externalFilter: this.externalFilter,
                 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();
         };
@@ -181,27 +175,16 @@ class SdPopupFilter {
     }
     ;
     ngAfterViewInit() {
-        // 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(configuration => {
+        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).configuration.observer.subscribe(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));
+            this.cdRef.markForCheck();
+        }));
+        __classPrivateFieldGet(this, _subscription).add(__classPrivateFieldGet(this, _filterRegister).value.observer.subscribe(filterValue => {
+            this.columnFilter = JSON.parse(JSON.stringify(filterValue.columnFilter));
+            this.externalFilter = JSON.parse(JSON.stringify(filterValue.externalFilter));
+            this.filterDef = JSON.parse(JSON.stringify(filterValue.filterDef));
             this.cdRef.markForCheck();
         }));
     }
@@ -209,7 +192,7 @@ class SdPopupFilter {
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
     onClear() {
-        __classPrivateFieldGet(this, _filterRegister).remove();
+        __classPrivateFieldGet(this, _filterRegister).value.remove();
         this.modal.close();
         this.cdRef.markForCheck();
     }
@@ -251,79 +234,43 @@ class SdGridFilter {
         this.inlineExternal = {};
         _subscription$1.set(this, new Subscription());
         this.onFilter = (item) => {
-            this.filterRegister.set({
+            this.filterRegister.value.set({
                 columnFilter: this.columnFilter,
                 externalFilter: this.externalFilter,
                 filterDef: this.filterDef
             });
-            // this.filterChange.next(true);
         };
         this.open = () => {
             this.popupFilter.open();
         };
-        this.onReset = () => {
-            this.filterRegister.remove();
-            this.ref.markForCheck();
-        };
         this.isMobileOrTablet = !this.deviceService.isDesktop();
         this.ref.markForCheck();
     }
     set _filter(filter) {
         this.filter = filter;
     }
+    set _externalFilters(value) {
+        this.externalFilters = value || [];
+    }
     set _filterRegister(value) {
         this.filterRegister = value;
         this.filterRegisterChange.next(this.filterRegister);
     }
     ;
     ngAfterViewInit() {
-        // 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.pipe(startWith(this.filterRegister)).subscribe(() => {
-            __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.observer.subscribe(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();
-            }));
+        __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.configuration.observer.subscribe(configuration => {
+            this.inlineColumn = configuration.inlineColumn;
+            this.inlineExternal = configuration.inlineExternal;
+            this.inlineFilterDef = configuration.inlineFilterDef;
+            this.ref.markForCheck();
+        }));
+        __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.value.observer.subscribe(value => {
+            this.columnFilter = value.columnFilter;
+            this.externalFilter = value.externalFilter;
+            this.filterDef = value.filterDef;
+            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;
-    //   }
-    // }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _subscription$1).unsubscribe();
     }
@@ -345,7 +292,7 @@ SdGridFilter.propDecorators = {
     popupFilter: [{ type: ViewChild, args: [SdPopupFilter,] }],
     _filter: [{ type: Input, args: ['filter',] }],
     columns: [{ type: Input }],
-    externalFilters: [{ type: Input }],
+    _externalFilters: [{ type: Input, args: ['externalFilters',] }],
     filterDefs: [{ type: Input }],
     _filterRegister: [{ type: Input, args: ['filterRegister',] }]
 };
@@ -1181,160 +1128,163 @@ SdEditorHandlerColumnPipe.ctorParameters = () => [
     { type: NgZone }
 ];
 
-var _prefix$1, _loadDefault;
+var _filterConfiguration, _filterValue, _cache$2, _loadDefaultConfiguration, _loadDefaultValue;
 class SdGridFilterService {
     constructor(settingService) {
         this.settingService = settingService;
-        _prefix$1.set(this, 'GRID-FILTER');
+        _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
+        _filterValue.set(this, 'GRID-FILTER-VALUE');
+        _cache$2.set(this, {});
         this.register = (key, args) => {
             let cacheSession = false;
             if (!key) {
-                key = v4();
+                const { columns, externalFilters } = args;
+                key = hash({
+                    columns,
+                    externalFilters
+                });
                 cacheSession = true; // Nếu không có key thì chỉ lưu theo session
             }
-            const { get, set, remove, subject, observer } = this.settingService.create({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                key
-            }, {
-                default: __classPrivateFieldGet(this, _loadDefault).call(this, args),
-                type: cacheSession ? 'session' : undefined
-            });
-            return {
-                get: () => {
-                    var _a;
-                    const 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: (configuration) => {
-                    const keys = Object.keys(configuration || {});
-                    const current = get();
-                    const { selectedQuickFilter, quickFilters, inlineColumn, columnFilter, inlineExternal, externalFilter, inlineFilterDef, filterDef } = current;
-                    const 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: () => {
-                    remove();
-                },
-                subject,
-                observer
-            };
+            if (!__classPrivateFieldGet(this, _cache$2)[key]) {
+                const filterConfiguration = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterConfiguration),
+                    key
+                }, {
+                    default: __classPrivateFieldGet(this, _loadDefaultConfiguration).call(this, args),
+                    type: cacheSession ? 'session' : undefined
+                });
+                const filterValue = this.settingService.create({
+                    prefix: __classPrivateFieldGet(this, _filterValue),
+                    key
+                }, {
+                    default: __classPrivateFieldGet(this, _loadDefaultValue).call(this, args),
+                    type: cacheSession ? 'session' : undefined
+                });
+                __classPrivateFieldGet(this, _cache$2)[key] = {
+                    configuration: {
+                        get: () => {
+                            const configuration = filterConfiguration.get();
+                            return {
+                                // Filter column
+                                inlineColumn: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {},
+                                // Filter external
+                                inlineExternal: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {},
+                                // Filter def
+                                inlineFilterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {},
+                            };
+                        },
+                        set: (configuration) => {
+                            const keys = Object.keys(configuration || {});
+                            const current = filterConfiguration.get();
+                            const { inlineColumn, inlineExternal, inlineFilterDef } = current;
+                            const updatedConfiguration = {
+                                // Filter column
+                                inlineColumn: keys.includes('inlineColumn') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) || {}) : inlineColumn,
+                                // Filter external
+                                inlineExternal: keys.includes('inlineExternal') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) || {}) : inlineExternal,
+                                // Filter def
+                                inlineFilterDef: keys.includes('inlineFilterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) || {}) : inlineFilterDef,
+                            };
+                            filterConfiguration.set(updatedConfiguration);
+                            return updatedConfiguration;
+                        },
+                        remove: () => {
+                            filterConfiguration.remove();
+                        },
+                        observer: filterConfiguration.observer
+                    },
+                    value: {
+                        get: () => {
+                            const configuration = filterValue.get();
+                            return {
+                                // Filter column
+                                columnFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {},
+                                // Filter external
+                                externalFilter: (configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {},
+                                // Filter def
+                                filterDef: (configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}
+                            };
+                        },
+                        set: (configuration) => {
+                            const keys = Object.keys(configuration || {});
+                            const current = filterValue.get();
+                            const { columnFilter, externalFilter, filterDef } = current;
+                            const updatedConfiguration = {
+                                // Filter column
+                                columnFilter: keys.includes('columnFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.columnFilter) || {}) : columnFilter,
+                                // Filter external
+                                externalFilter: keys.includes('externalFilter') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.externalFilter) || {}) : externalFilter,
+                                // Filter def
+                                filterDef: keys.includes('filterDef') ? ((configuration === null || configuration === void 0 ? void 0 : configuration.filterDef) || {}) : filterDef,
+                            };
+                            filterValue.set(updatedConfiguration);
+                            return updatedConfiguration;
+                        },
+                        remove: () => {
+                            filterValue.remove();
+                        },
+                        observer: filterValue.observer
+                    }
+                };
+            }
+            return __classPrivateFieldGet(this, _cache$2)[key];
         };
-        _loadDefault.set(this, (args) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        _loadDefaultConfiguration.set(this, (args) => {
+            var _a, _b, _c, _d;
             const { columns, externalFilters, filterDefs } = args;
             const inlineColumn = {};
-            const columnFilter = {};
             const inlineExternal = {};
-            const externalFilter = {};
             const inlineFilterDef = {};
-            const filterDef = {};
             // Filter column
             for (const item of (columns || [])) {
                 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;
             }
             // Filter external
             for (const item of (externalFilters || [])) {
-                inlineExternal[item.field] = (_e = inlineExternal[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
+                inlineExternal[item.field] = (_c = inlineExternal[item.field]) !== null && _c !== void 0 ? _c : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            // Filter def
+            for (const item of (filterDefs || [])) {
+                inlineFilterDef[item.sdMaterialFilterDef] = (_d = inlineFilterDef[item.sdMaterialFilterDef]) !== null && _d !== void 0 ? _d : item === null || item === void 0 ? void 0 : item.defaultShowing;
+            }
+            return {
+                inlineColumn,
+                inlineExternal,
+                inlineFilterDef,
+            };
+        });
+        _loadDefaultValue.set(this, (args) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            const { columns, externalFilters, filterDefs } = args;
+            const columnFilter = {};
+            const externalFilter = {};
+            const filterDef = {};
+            // Filter column
+            for (const item of (columns || [])) {
+                columnFilter[item.field] = (_a = columnFilter[item.field]) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.filter) === null || _b === void 0 ? void 0 : _b.default;
+            }
+            // Filter external
+            for (const item of (externalFilters || [])) {
                 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
+                        from: (_f = (_d = (_c = externalFilter[item.field]) === null || _c === void 0 ? void 0 : _c.from) !== null && _d !== void 0 ? _d : (_e = item.default) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : undefined,
+                        to: (_k = (_h = (_g = externalFilter[item.field]) === null || _g === void 0 ? void 0 : _g.to) !== null && _h !== void 0 ? _h : (_j = item.default) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : undefined
                     };
                 }
                 else {
-                    externalFilter[item.field] = (_p = externalFilter[item.field]) !== null && _p !== void 0 ? _p : item.default;
+                    externalFilter[item.field] = (_l = externalFilter[item.field]) !== null && _l !== void 0 ? _l : item.default;
                 }
             }
             // Filter def
-            for (const item of (filterDefs || [])) {
-                inlineFilterDef[item.sdMaterialFilterDef] = (_q = inlineFilterDef[item.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : item === null || item === void 0 ? void 0 : item.defaultShowing;
-            }
             return {
-                quickFilters: [],
-                selectedQuickFilter: null,
-                inlineColumn,
                 columnFilter,
-                inlineExternal,
                 externalFilter,
-                inlineFilterDef,
                 filterDef,
             };
         });
-        this.get = (key) => {
-            var _a;
-            if (!key) {
-                return {
-                    selectedQuickFilter: null,
-                    quickFilters: [],
-                    inlineExternal: {},
-                    inlineColumn: {},
-                    inlineFilterDef: {}
-                };
-            }
-            const { get } = this.settingService.create({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                key
-            });
-            const 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 = (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;
-            }
-            const { set } = this.settingService.create({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                key
-            });
-            key = hash({
-                prefix: __classPrivateFieldGet(this, _prefix$1),
-                key
-            });
-            set(configuration);
-            return configuration;
-        };
     }
 }
-_prefix$1 = new WeakMap(), _loadDefault = new WeakMap();
+_filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _loadDefaultConfiguration = new WeakMap(), _loadDefaultValue = new WeakMap();
 SdGridFilterService.decorators = [
     { type: Injectable }
 ];
@@ -1413,7 +1363,7 @@ class SdGridMaterial {
         });
         _filterExportInfo.set(this, (pageNumber, pageSize) => {
             var _a, _b;
-            const { columnFilter, externalFilter, filterDef } = this.filterRegister.get();
+            const { columnFilter, externalFilter, filterDef } = this.filterRegister.value.get();
             return {
                 rawColumnFilter: columnFilter || {},
                 rawExternalFilter: externalFilter || {},
@@ -1439,18 +1389,20 @@ class SdGridMaterial {
         _loadFilterRegister.set(this, () => {
             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(debounceTime(500), map((configuration) => {
-                this.columnFilter = configuration.columnFilter;
-                __classPrivateFieldGet(this, _paginator).pageIndex = 0;
-                __classPrivateFieldGet(this, _reload).next({
-                    force: false,
+            if (this.gridOption) {
+                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
                 });
-            })).subscribe());
+                __classPrivateFieldGet(this, _subscription$2).add(this.filterRegister.value.observer.pipe(debounceTime(500), map((filterValue) => {
+                    this.columnFilter = filterValue.columnFilter;
+                    __classPrivateFieldGet(this, _paginator).pageIndex = 0;
+                    __classPrivateFieldGet(this, _reload).next({
+                        force: false,
+                    });
+                })).subscribe());
+            }
         });
         _filterLocal.set(this, (localItems, filterInfo) => {
             const { columns } = this.gridOption;
@@ -1570,7 +1522,7 @@ class SdGridMaterial {
         });
         _getFilter.set(this, () => {
             var _a, _b, _c, _d, _e, _f;
-            const { columnFilter, externalFilter, filterDef } = this.filterRegister.get();
+            const { columnFilter, externalFilter, filterDef } = this.filterRegister.value.get();
             return {
                 rawColumnFilter: columnFilter || {},
                 rawExternalFilter: externalFilter || {},
@@ -2007,15 +1959,11 @@ class SdGridMaterial {
             this.ref.detectChanges();
         });
         this.clearFilter = () => {
-            this.filterRegister.remove();
-            // if (this.gridOption?.filter?.inlineColumn) {
-            //   this.columnFilter = {};
-            // }
-            // this.gridFilter?.onClearFilter();
+            this.filterRegister.value.remove();
         };
         this.setFilter = (args) => {
             const { columnFilter, externalFilter, filterDef } = args || {};
-            this.filterRegister.set({
+            this.filterRegister.value.set({
                 columnFilter,
                 externalFilter,
                 filterDef
@@ -2342,7 +2290,7 @@ _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new We
 SdGridMaterial.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-material',
-                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <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>",
+                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\" [externalFilters]=\"gridOption?.filter?.externalFilters\" [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: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -2773,7 +2721,7 @@ SdGridConfigurationResultPipe.ctorParameters = () => [
     { type: SdGridConfigurationService }
 ];
 
-var _cache$2;
+var _cache$3;
 class SdPopupGridConfiguration {
     constructor(ref, notifyService, translateService, gridConfigurationService) {
         this.ref = ref;
@@ -2781,24 +2729,24 @@ class SdPopupGridConfiguration {
         this.translateService = translateService;
         this.gridConfigurationService = gridConfigurationService;
         this.changes = new EventEmitter();
-        _cache$2.set(this, void 0);
+        _cache$3.set(this, void 0);
         this.isCreatingColumn = false;
         this.selected = {};
         this.disabledDrag = true;
         this.open = () => __awaiter(this, void 0, void 0, function* () {
-            __classPrivateFieldSet(this, _cache$2, this.gridConfigurationService.init(this.key, this.gridOption));
-            this.configuration = yield __classPrivateFieldGet(this, _cache$2).get();
+            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
+            this.configuration = yield __classPrivateFieldGet(this, _cache$3).get();
             this.modal.open();
         });
         this.onSave = () => {
-            __classPrivateFieldGet(this, _cache$2).set(this.configuration);
+            __classPrivateFieldGet(this, _cache$3).set(this.configuration);
             this.modal.close();
             this.ref.detectChanges();
         };
         this.onReset = () => __awaiter(this, void 0, void 0, function* () {
             const { translate } = this.translateService;
             this.notifyService.confirm(translate('Reset grid configuration to default')).then(() => {
-                __classPrivateFieldGet(this, _cache$2).remove();
+                __classPrivateFieldGet(this, _cache$3).remove();
                 this.modal.close();
                 this.ref.detectChanges();
             });
@@ -2822,7 +2770,7 @@ class SdPopupGridConfiguration {
                 generatedColumns: this.configuration.columns.filter(e => { var _a; return this.selected[(_a = e.origin) === null || _a === void 0 ? void 0 : _a.field]; }).map(e => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.field; })
             };
             this.configuration.columns.push(generatedColumn);
-            this.configuration = __classPrivateFieldGet(this, _cache$2).set(this.configuration);
+            this.configuration = __classPrivateFieldGet(this, _cache$3).set(this.configuration);
             this.isCreatingColumn = false;
         });
     }
@@ -2842,7 +2790,7 @@ class SdPopupGridConfiguration {
         this.disabledDrag = true;
     }
 }
-_cache$2 = new WeakMap();
+_cache$3 = new WeakMap();
 SdPopupGridConfiguration.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-grid-configuration',
@@ -3034,11 +2982,11 @@ SdSelectionVisibleSelectAllPipe.decorators = [
             },] }
 ];
 
-var _cache$3;
+var _cache$4;
 class SdGeneratedColumnService {
     constructor(settingService) {
         this.settingService = settingService;
-        _cache$3.set(this, {});
+        _cache$4.set(this, {});
         this.load = (configuration) => {
             if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
                 return null;
@@ -3047,22 +2995,22 @@ class SdGeneratedColumnService {
                 prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
                 key: configuration.key
             });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
+            if (!__classPrivateFieldGet(this, _cache$4)[key]) {
                 if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.createServer(key, {
                         args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                         default: []
                     });
                 }
                 else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.create(key, {
                         type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                         args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
                         default: []
                     });
                 }
             }
-            return __classPrivateFieldGet(this, _cache$3)[key];
+            return __classPrivateFieldGet(this, _cache$4)[key];
         };
         this.loadSystem = (configuration) => {
             var _a, _b;
@@ -3076,26 +3024,26 @@ class SdGeneratedColumnService {
                 prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
                 key: configuration.key
             });
-            if (!__classPrivateFieldGet(this, _cache$3)[key]) {
+            if (!__classPrivateFieldGet(this, _cache$4)[key]) {
                 if ((configuration === null || configuration === void 0 ? void 0 : configuration.storage) === 'server') {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.createServer(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.createServer(key, {
                         args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
                         default: []
                     });
                 }
                 else {
-                    __classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
+                    __classPrivateFieldGet(this, _cache$4)[key] = this.settingService.create(key, {
                         type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
                         args: (_b = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _b === void 0 ? void 0 : _b.args,
                         default: []
                     });
                 }
             }
-            return __classPrivateFieldGet(this, _cache$3)[key];
+            return __classPrivateFieldGet(this, _cache$4)[key];
         };
     }
 }
-_cache$3 = new WeakMap();
+_cache$4 = new WeakMap();
 SdGeneratedColumnService.decorators = [
     { type: Injectable }
 ];