@sd-angular/core 1.3.104 → 1.3.105

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

@@ -539,7 +539,7 @@
                 _this.filterRegister.value.set({
                     columnFilter: _this.columnFilter,
                     externalFilter: _this.externalFilter,
-                    filterDef: _this.filterDef
+                    filterDef: _this.filterDef,
                 });
             };
             this.open = function () {
@@ -570,19 +570,20 @@
             enumerable: false,
             configurable: true
         });
-        ;
         SdGridFilter.prototype.ngAfterViewInit = function () {
             var _this = this;
             __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.configuration.observer.subscribe(function (configuration) {
-                _this.inlineColumn = configuration.inlineColumn;
-                _this.inlineExternal = configuration.inlineExternal;
-                _this.inlineFilterDef = configuration.inlineFilterDef;
+                var inlineColumn = configuration.inlineColumn, inlineExternal = configuration.inlineExternal, inlineFilterDef = configuration.inlineFilterDef;
+                _this.inlineColumn = inlineColumn;
+                _this.inlineExternal = inlineExternal;
+                _this.inlineFilterDef = inlineFilterDef;
                 _this.ref.markForCheck();
             }));
             __classPrivateFieldGet(this, _subscription$1).add(this.filterRegister.value.observer.subscribe(function (value) {
-                _this.columnFilter = value.columnFilter;
-                _this.externalFilter = value.externalFilter;
-                _this.filterDef = value.filterDef;
+                var columnFilter = value.columnFilter, externalFilter = value.externalFilter, filterDef = value.filterDef;
+                _this.columnFilter = columnFilter;
+                _this.externalFilter = externalFilter;
+                _this.filterDef = filterDef;
                 _this.ref.markForCheck();
             }));
         };
@@ -594,7 +595,7 @@
     _subscription$1 = new WeakMap();
     SdGridFilter.decorators = [
         { type: core.Component, args: [{
-                    selector: 'sd-grid-filter',
+                    selector: "sd-grid-filter",
                     template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\r\n          <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n            <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"externalFilters?.length\">\r\n            <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n              <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n          <ng-container *ngFor=\"let item of filterDefs\">\r\n            <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n              class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n              <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <ng-template #filterColumn let-item=\"item\">\r\n      <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [disabled]=\"item.filter?.disabled\"\r\n          [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n          [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" appearance=\"outline\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n          [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\" [displayField]=\"item.option?.displayField\"\r\n          [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" [disabled]=\"item.filter?.disabled\"\r\n          appearance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n          [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\"\r\n          appearance=\"outline\">\r\n        </sd-date-time>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #filterExternal let-item=\"item\">\r\n      <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n        <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input>\r\n        <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n          (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-input-number>\r\n        <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n        <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\"\r\n            appearance=\"outline\" multiple>\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n            [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" appearance=\"outline\"\r\n            multiple>\r\n          </sd-select>\r\n          <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n            [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n          </sd-select>\r\n        </ng-container>\r\n        <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n          [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-time>\r\n        <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n          [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n          [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-date-range>\r\n      </div>\r\n    </ng-template>\r\n    <sd-popup-filter [filterRegister]=\"filterRegister\" [columns]=\"columns\"\r\n      [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;padding-bottom:10px;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
@@ -606,11 +607,11 @@
     ]; };
     SdGridFilter.propDecorators = {
         popupFilter: [{ type: core.ViewChild, args: [SdPopupFilter,] }],
-        _filter: [{ type: core.Input, args: ['filter',] }],
+        _filter: [{ type: core.Input, args: ["filter",] }],
         columns: [{ type: core.Input }],
-        _externalFilters: [{ type: core.Input, args: ['externalFilters',] }],
+        _externalFilters: [{ type: core.Input, args: ["externalFilters",] }],
         filterDefs: [{ type: core.Input }],
-        _filterRegister: [{ type: core.Input, args: ['filterRegister',] }]
+        _filterRegister: [{ type: core.Input, args: ["filterRegister",] }]
     };
 
     var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
@@ -1634,7 +1635,7 @@
         { type: core.NgZone }
     ]; };
 
-    var _filterConfiguration, _filterValue, _cache$2, _loadDefaultConfiguration, _loadDefaultValue;
+    var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
     var SdGridFilterService = /** @class */ (function () {
         function SdGridFilterService(settingService) {
             var _this = this;
@@ -1653,194 +1654,52 @@
                     cacheSession = true; // Nếu không có key thì chỉ lưu theo session
                 }
                 if (!__classPrivateFieldGet(_this, _cache$2)[key]) {
-                    var t1 = _this.settingService.create({
-                        prefix: __classPrivateFieldGet(_this, _filterConfiguration),
-                        key: key,
-                    }, {
-                        type: cacheSession ? "session" : undefined,
-                    });
-                    var defaultConfiguration = __classPrivateFieldGet(_this, _loadDefaultConfiguration).call(_this, args, t1.get());
-                    var t2 = _this.settingService.create({
-                        prefix: __classPrivateFieldGet(_this, _filterValue),
-                        key: key,
-                    }, {
-                        type: cacheSession ? "session" : undefined,
-                    });
-                    var defaultValue = __classPrivateFieldGet(_this, _loadDefaultValue).call(_this, args, t2.get());
+                    // Setting của filter configuration
                     var filterConfiguration_1 = _this.settingService.create({
                         prefix: __classPrivateFieldGet(_this, _filterConfiguration),
                         key: key,
                     }, {
-                        default: defaultConfiguration,
+                        default: __classPrivateFieldGet(_this, _defaultConfiguration).call(_this, args),
                         type: cacheSession ? "session" : undefined,
                     });
+                    // Lấy giá trị configuration merge với giá trị defaultShowing của args nếu như args có thay đổi
+                    filterConfiguration_1.set(__classPrivateFieldGet(_this, _initConfiguration).call(_this, args, filterConfiguration_1.get()));
+                    // Setting của filter value
                     var filterValue_1 = _this.settingService.create({
                         prefix: __classPrivateFieldGet(_this, _filterValue),
                         key: key,
                     }, {
-                        default: defaultValue,
+                        default: __classPrivateFieldGet(_this, _defaultValue).call(_this, args),
                         type: cacheSession ? "session" : undefined,
                     });
-                    var configurationGet_1 = function (configuration) {
-                        var e_1, _r, e_2, _s, e_3, _t;
-                        var _a, _b, _c;
-                        var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
-                        var inlineColumn = {};
-                        var inlineExternal = {};
-                        var inlineFilterDef = {};
-                        try {
-                            // Filter column
-                            for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                                var item = _v.value;
-                                inlineColumn[item.field] = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field];
-                            }
-                        }
-                        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] = (_b = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _b === void 0 ? void 0 : _b[item.field];
-                            }
-                        }
-                        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] = (_c = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _c === void 0 ? void 0 : _c[item.sdMaterialFilterDef];
-                            }
-                        }
-                        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 {
-                            // Filter column
-                            inlineColumn: inlineColumn,
-                            // Filter external
-                            inlineExternal: inlineExternal,
-                            // Filter def
-                            inlineFilterDef: inlineFilterDef,
-                        };
-                    };
-                    var valueGet_1 = function (value) {
-                        var e_4, _r, e_5, _s, e_6, _t;
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        var columnFilter = {};
-                        var externalFilter = {};
-                        var filterDef = {};
-                        var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
-                        try {
-                            // Filter column
-                            for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
-                                var item = _v.value;
-                                columnFilter[item.field] = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field];
-                            }
-                        }
-                        catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                        finally {
-                            try {
-                                if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
-                            }
-                            finally { if (e_4) throw e_4.error; }
-                        }
-                        try {
-                            // Filter external
-                            for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
-                                var item = _x.value;
-                                if (item.type === "daterange") {
-                                    externalFilter[item.field] = {
-                                        from: (_c = (_b = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _b === void 0 ? void 0 : _b[item.field]) === null || _c === void 0 ? void 0 : _c.from,
-                                        to: (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.to,
-                                    };
-                                }
-                                else {
-                                    externalFilter[item.field] = (_f = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _f === void 0 ? void 0 : _f[item.field];
-                                }
-                            }
-                        }
-                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
-                        finally {
-                            try {
-                                if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
-                            }
-                            finally { if (e_5) throw e_5.error; }
-                        }
-                        try {
-                            // Filter def
-                            for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
-                                var item = _z.value;
-                                filterDef[item.sdMaterialFilterDef] = (_g = value === null || value === void 0 ? void 0 : value.filterDef) === null || _g === void 0 ? void 0 : _g[item.sdMaterialFilterDef];
-                            }
-                        }
-                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                        finally {
-                            try {
-                                if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
-                            }
-                            finally { if (e_6) throw e_6.error; }
-                        }
-                        return {
-                            // Filter column
-                            columnFilter: columnFilter,
-                            // Filter external
-                            externalFilter: externalFilter,
-                            // Filter def
-                            filterDef: filterDef,
-                        };
-                    };
+                    // Lấy giá trị value merge với giá trị default của args nếu như args có thay đổi
+                    filterValue_1.set(__classPrivateFieldGet(_this, _initValue).call(_this, args, filterValue_1.get()));
                     __classPrivateFieldGet(_this, _cache$2)[key] = {
                         configuration: {
                             get: function () {
-                                var configuration = filterConfiguration_1.get();
-                                return configurationGet_1(configuration);
+                                return filterConfiguration_1.get();
                             },
                             set: function (configuration) {
-                                var keys = Object.keys(configuration || {});
-                                var current = filterConfiguration_1.get();
-                                var inlineColumn = current.inlineColumn, inlineExternal = current.inlineExternal, inlineFilterDef = current.inlineFilterDef;
-                                var 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,
+                                var inlineColumn = configuration.inlineColumn, inlineExternal = configuration.inlineExternal, inlineFilterDef = configuration.inlineFilterDef;
+                                filterConfiguration_1.set({
+                                    inlineColumn: inlineColumn,
+                                    inlineExternal: inlineExternal,
+                                    inlineFilterDef: inlineFilterDef,
+                                });
+                                return {
+                                    inlineColumn: inlineColumn,
+                                    inlineExternal: inlineExternal,
+                                    inlineFilterDef: inlineFilterDef,
                                 };
-                                filterConfiguration_1.set(updatedConfiguration);
-                                return updatedConfiguration;
                             },
                             remove: function () {
                                 filterConfiguration_1.remove();
                             },
-                            observer: filterConfiguration_1.observer.pipe(operators.map(configurationGet_1)),
+                            observer: filterConfiguration_1.observer.pipe(operators.startWith(filterConfiguration_1.get())),
                         },
                         value: {
                             get: function () {
-                                var configuration = filterValue_1.get();
-                                return valueGet_1(configuration);
+                                return filterValue_1.get();
                             },
                             set: function (configuration) {
                                 var keys = Object.keys(configuration || {});
@@ -1866,13 +1725,129 @@
                             remove: function () {
                                 filterValue_1.remove();
                             },
-                            observer: filterValue_1.observer.pipe(operators.map(valueGet_1)),
+                            observer: filterValue_1.observer.pipe(operators.startWith(filterValue_1.get())),
                         },
                     };
                 }
                 return __classPrivateFieldGet(_this, _cache$2)[key];
             };
-            _loadDefaultConfiguration.set(this, function (args, configuration) {
+            _defaultConfiguration.set(this, function (args) {
+                var e_1, _r, e_2, _s, e_3, _t;
+                var _a;
+                var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
+                var inlineColumn = {};
+                var inlineExternal = {};
+                var inlineFilterDef = {};
+                try {
+                    // Filter column
+                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
+                        var item = _v.value;
+                        inlineColumn[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.defaultShowing;
+                    }
+                }
+                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] = item === null || item === void 0 ? void 0 : item.defaultShowing;
+                    }
+                }
+                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] = 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 {
+                    // Filter column
+                    inlineColumn: inlineColumn,
+                    // Filter external
+                    inlineExternal: inlineExternal,
+                    // Filter def
+                    inlineFilterDef: inlineFilterDef,
+                };
+            });
+            _defaultValue.set(this, function (args) {
+                var e_4, _r, e_5, _s, e_6, _t;
+                var _a;
+                var columnFilter = {};
+                var externalFilter = {};
+                var filterDef = {};
+                var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
+                try {
+                    // Filter column
+                    for (var _u = __values(columns || []), _v = _u.next(); !_v.done; _v = _u.next()) {
+                        var item = _v.value;
+                        columnFilter[item.field] = (_a = item === null || item === void 0 ? void 0 : item.filter) === null || _a === void 0 ? void 0 : _a.default;
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                try {
+                    // Filter external
+                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var item = _x.value;
+                        externalFilter[item.field] = item === null || item === void 0 ? void 0 : item.default;
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+                try {
+                    // Filter def
+                    for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
+                        var item = _z.value;
+                        filterDef[item.sdMaterialFilterDef] = undefined;
+                    }
+                }
+                catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                finally {
+                    try {
+                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                    }
+                    finally { if (e_6) throw e_6.error; }
+                }
+                return {
+                    // Filter column
+                    columnFilter: columnFilter,
+                    // Filter external
+                    externalFilter: externalFilter,
+                    // Filter def
+                    filterDef: filterDef,
+                };
+            });
+            _initConfiguration.set(this, function (args, configuration) {
                 var e_7, _r, e_8, _s, e_9, _t;
                 var _a, _b, _c, _d, _e, _f, _g;
                 var columns = args.columns, externalFilters = args.externalFilters, filterDefs = args.filterDefs;
@@ -1930,7 +1905,7 @@
                     inlineFilterDef: inlineFilterDef,
                 };
             });
-            _loadDefaultValue.set(this, function (args, value) {
+            _initValue.set(this, function (args, value) {
                 var e_10, _r, e_11, _s, e_12, _t;
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
                 var columnFilter = {};
@@ -1999,7 +1974,7 @@
         }
         return SdGridFilterService;
     }());
-    _filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _loadDefaultConfiguration = new WeakMap(), _loadDefaultValue = new WeakMap();
+    _filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _defaultConfiguration = new WeakMap(), _defaultValue = new WeakMap(), _initConfiguration = new WeakMap(), _initValue = new WeakMap();
     SdGridFilterService.decorators = [
         { type: core.Injectable }
     ];
@@ -2007,7 +1982,7 @@
         { type: setting.SdSettingService }
     ]; };
 
-    var _optionChanges, _localItems, _paginator, _sort, _subscription$2, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
+    var _optionChanges, _localItems, _paginator, _sort, _subscription$2, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
     var SdGridMaterial = /** @class */ (function () {
         function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService, editorHandlerColumnPipe) {
             var _this = this;
@@ -2048,7 +2023,7 @@
             _reload.set(this, new rxjs.Subject());
             this.isExporting = false;
             this.isSelectAll = false;
-            this.exportTitle = "Export";
+            this.exportTitle = 'Export';
             _loadCompleted.set(this, false);
             _initCellDef.set(this, function () {
                 var e_1, _3;
@@ -2085,9 +2060,6 @@
                     }
                     finally { if (e_2) throw e_2.error; }
                 }
-                // if (this.filterDefs?.length) {
-                //   this.#loadFilterRegister();
-                // }
             });
             _initFooterDef.set(this, function () {
                 var e_3, _3;
@@ -2117,14 +2089,14 @@
                     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) || "",
+                    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,
                 };
             });
-            _initConfiguration.set(this, function (option) {
+            _initConfiguration$1.set(this, function (option) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
                 // Init pagination
                 option.paginate = {
@@ -2148,7 +2120,8 @@
                     if (!hasRegister) {
                         __classPrivateFieldGet(_this, _subscription$2).add(_this.filterRegister.value.observer
                             .pipe(operators.debounceTime(500), operators.map(function (filterValue) {
-                            _this.columnFilter = filterValue.columnFilter;
+                            var columnFilter = filterValue.columnFilter;
+                            _this.columnFilter = columnFilter;
                             __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
                             __classPrivateFieldGet(_this, _reload).next({
                                 force: false,
@@ -2173,52 +2146,39 @@
                         for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
                             var column = columns_1_1.value;
                             var field = column.field, type = column.type;
-                            var filterValue = (rawColumnFilter[field] || "")
-                                .toString()
-                                .trim()
-                                .toLowerCase();
-                            var columnValue = (item[field] || "")
-                                .toString()
-                                .trim()
-                                .toLowerCase();
+                            var filterValue = (rawColumnFilter[field] || '').toString().trim().toLowerCase();
+                            var columnValue = (item[field] || '').toString().trim().toLowerCase();
                             if (filterValue) {
-                                if (!columnValue &&
-                                    type !== "datetime" &&
-                                    type !== "date" &&
-                                    type !== "time") {
+                                if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
                                     return false;
                                 }
-                                if (type === "string") {
+                                if (type === 'string') {
                                     if (columnValue.indexOf(filterValue) === -1) {
                                         return false;
                                     }
                                 }
-                                else if (type === "values") {
+                                else if (type === 'values') {
                                     if (columnValue !== filterValue) {
                                         return false;
                                     }
                                 }
-                                else if (type === "number") {
-                                    var fValue = +filterValue
-                                        .replace(">=", "")
-                                        .replace("<=", "")
-                                        .replace(">", "")
-                                        .replace("<", "");
+                                else if (type === 'number') {
+                                    var fValue = +filterValue.replace('>=', '').replace('<=', '').replace('>', '').replace('<', '');
                                     var cValue = +columnValue;
                                     if (fValue || fValue === 0) {
                                         if (!cValue && cValue !== 0) {
                                             return false;
                                         }
-                                        if (filterValue.indexOf(">=") > -1 && cValue < fValue) {
+                                        if (filterValue.indexOf('>=') > -1 && cValue < fValue) {
                                             return false;
                                         }
-                                        else if (filterValue.indexOf("<=") > -1 && cValue > fValue) {
+                                        else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
                                             return false;
                                         }
-                                        else if (filterValue.indexOf("<") > -1 && cValue >= fValue) {
+                                        else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
                                             return false;
                                         }
-                                        else if (filterValue.indexOf(">") > -1 && cValue <= fValue) {
+                                        else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
                                             return false;
                                         }
                                         else if (cValue !== fValue) {
@@ -2226,21 +2186,15 @@
                                         }
                                     }
                                 }
-                                else if (type === "bool") {
-                                    if (filterValue === "1" &&
-                                        columnValue !== "1" &&
-                                        columnValue !== "true") {
+                                else if (type === 'bool') {
+                                    if (filterValue === '1' && columnValue !== '1' && columnValue !== 'true') {
                                         return false;
                                     }
-                                    else if (filterValue === "0" &&
-                                        columnValue !== "0" &&
-                                        columnValue !== "false") {
+                                    else if (filterValue === '0' && columnValue !== '0' && columnValue !== 'false') {
                                         return false;
                                     }
                                 }
-                                else if (type === "datetime" ||
-                                    type === "date" ||
-                                    type === "time") {
+                                else if (type === 'datetime' || type === 'date' || type === 'time') {
                                     var from = (_b = (_a = rawColumnFilter[field]) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : rawColumnFilter[field];
                                     var to = (_d = (_c = rawColumnFilter[field]) === null || _c === void 0 ? void 0 : _c.to) !== null && _d !== void 0 ? _d : rawColumnFilter[field];
                                     var fromDate = Date.begin(from);
@@ -2278,16 +2232,16 @@
                     if (column) {
                         var type_1 = column.type, field_1 = column.field;
                         items.sort(function (current, next) {
-                            if (type_1 === "number") {
+                            if (type_1 === 'number') {
                                 return (current[field_1] || 0) - (next[field_1] || 0);
                             }
-                            if (type_1 === "date" || type_1 === "datetime" || type_1 === "time") {
-                                var d1 = new Date(current[field_1] || "").getTime();
-                                var d2 = new Date(current[field_1] || "").getTime();
+                            if (type_1 === 'date' || type_1 === 'datetime' || type_1 === 'time') {
+                                var d1 = new Date(current[field_1] || '').getTime();
+                                var d2 = new Date(current[field_1] || '').getTime();
                                 return d1 - d2;
                             }
-                            var s1 = (current[field_1] || "").toString();
-                            var s2 = (next[field_1] || "").toString();
+                            var s1 = (current[field_1] || '').toString();
+                            var s2 = (next[field_1] || '').toString();
                             if (s1 > s2) {
                                 return 1;
                             }
@@ -2296,14 +2250,14 @@
                             }
                             return 0;
                         });
-                        if (orderDirection === "desc") {
+                        if (orderDirection === 'desc') {
                             items.reverse();
                         }
                     }
                 }
                 return {
                     items: items.filter(function (item, index) {
-                        return (index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize);
+                        return index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize;
                     }),
                     total: items.length,
                 };
@@ -2315,8 +2269,8 @@
                     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) || "",
+                    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,
                 };
@@ -2329,7 +2283,7 @@
                         switch (_5.label) {
                             case 0:
                                 this.isLoading = true;
-                                if (!(this.gridOption.type === "server")) return [3 /*break*/, 6];
+                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 6];
                                 _5.label = 1;
                             case 1:
                                 _5.trys.push([1, 3, 4, 5]);
@@ -2347,7 +2301,7 @@
                             case 3:
                                 error_1 = _5.sent();
                                 console.error(error_1);
-                                this.notifyService.notify.warning("Có lỗi xảy ra");
+                                this.notifyService.notify.warning('Có lỗi xảy ra');
                                 return [2 /*return*/, {
                                         items: [],
                                         total: 0,
@@ -2375,14 +2329,14 @@
                                 _5.label = 10;
                             case 10:
                                 if (!Array.isArray(__classPrivateFieldGet(this, _localItems))) {
-                                    this.notifyService.notify.warning("Dữ liệu không phải là một mảng");
+                                    this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
                                     __classPrivateFieldSet(this, _localItems, []);
                                 }
                                 return [3 /*break*/, 13];
                             case 11:
                                 error_2 = _5.sent();
                                 console.error(error_2);
-                                this.notifyService.notify.warning("Có lỗi xảy ra");
+                                this.notifyService.notify.warning('Có lỗi xảy ra');
                                 __classPrivateFieldSet(this, _localItems, []);
                                 return [3 /*break*/, 13];
                             case 12:
@@ -2457,7 +2411,7 @@
                             case 1: return [2 /*return*/, _3.sent()];
                             case 2:
                                 filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
-                                if (!(this.gridOption.type === "server")) return [3 /*break*/, 4];
+                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
                                 result = this.gridOption.items(filterInfo);
                                 if (rxjs.isObservable(result)) {
                                     result = result.toPromise();
@@ -2466,7 +2420,7 @@
                             case 3: return [2 /*return*/, _3.sent()];
                             case 4:
                                 exportedItems = [];
-                                if (!(typeof this.gridOption.items === "function")) return [3 /*break*/, 8];
+                                if (!(typeof this.gridOption.items === 'function')) return [3 /*break*/, 8];
                                 results = this.gridOption.items();
                                 if (!(results instanceof Promise)) return [3 /*break*/, 6];
                                 return [4 /*yield*/, results];
@@ -2491,21 +2445,21 @@
                     .filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
                     .forEach(function (column) {
                     var _a, _b;
-                    if (column.type === "image") {
+                    if (column.type === 'image') {
                         return;
                     }
-                    if (column.type === "children") {
+                    if (column.type === 'children') {
                         (_a = column.children) === null || _a === void 0 ? void 0 : _a.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(function (childColumn) {
-                            if (childColumn.type === "image") {
+                            if (childColumn.type === 'image') {
                                 return;
                             }
                             columns.push(childColumn);
                         });
                         return;
                     }
-                    if (column.type === "children-col") {
+                    if (column.type === 'children-col') {
                         (_b = column.children) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }).forEach(function (childColumn) {
-                            if (childColumn.type === "image") {
+                            if (childColumn.type === 'image') {
                                 return;
                             }
                             columns.push(childColumn);
@@ -2518,7 +2472,7 @@
             });
             _allExportedColumns.set(this, function () {
                 var _a, _b;
-                return (((_b = (_a = _this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || []);
+                return ((_b = (_a = _this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
             });
             _onExport.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
                 var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, file, isCSV, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _3, _4, sheet, _5, _6, _7, e_5_1;
@@ -2552,7 +2506,7 @@
                                             try {
                                                 for (results_1 = __values(results), results_1_1 = results_1.next(); !results_1_1.done; results_1_1 = results_1.next()) {
                                                     result = results_1_1.value;
-                                                    if ("items" in result) {
+                                                    if ('items' in result) {
                                                         exportItems_1 = __spread(exportItems_1, result.items);
                                                         total_1 = result.total;
                                                     }
@@ -2606,7 +2560,7 @@
                                                                             if (!column) {
                                                                                 return [2 /*return*/];
                                                                             }
-                                                                            if (column.type === "children" || column.type === "children-col") {
+                                                                            if (column.type === 'children' || column.type === 'children-col') {
                                                                                 column === null || column === void 0 ? void 0 : column.children.forEach(function (childColumn) { return handle(childColumn); });
                                                                                 return [2 /*return*/];
                                                                             }
@@ -2628,62 +2582,59 @@
                                                                             obj[column.field] = transform;
                                                                             _7.label = 3;
                                                                         case 3:
-                                                                            obj[column.field] = (_t = obj[column.field]) !== null && _t !== void 0 ? _t : "";
+                                                                            obj[column.field] = (_t = obj[column.field]) !== null && _t !== void 0 ? _t : '';
                                                                             return [3 /*break*/, 13];
                                                                         case 4:
-                                                                            if (!(item[column.field] === undefined ||
-                                                                                item[column.field] === null ||
-                                                                                item[column.field] === "")) return [3 /*break*/, 5];
-                                                                            obj[column.field] = "";
+                                                                            if (!(item[column.field] === undefined || item[column.field] === null || item[column.field] === '')) return [3 /*break*/, 5];
+                                                                            obj[column.field] = '';
                                                                             return [3 /*break*/, 13];
                                                                         case 5:
-                                                                            if (!(column.type === "string" || column.type === "number")) return [3 /*break*/, 6];
+                                                                            if (!(column.type === 'string' || column.type === 'number')) return [3 /*break*/, 6];
                                                                             // Nếu cell là string hoặc number thì gán bằng chính nó
                                                                             obj[column.field] = item[column.field];
                                                                             return [3 /*break*/, 13];
                                                                         case 6:
-                                                                            if (!(column.type === "bool")) return [3 /*break*/, 7];
+                                                                            if (!(column.type === 'bool')) return [3 /*break*/, 7];
                                                                             // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
                                                                             if (item[column.field]) {
-                                                                                obj[column.field] = ((_u = column.option) === null || _u === void 0 ? void 0 : _u.displayOnTrue) || "True";
+                                                                                obj[column.field] = ((_u = column.option) === null || _u === void 0 ? void 0 : _u.displayOnTrue) || 'True';
                                                                             }
-                                                                            else if (obj[column.field] !== undefined &&
-                                                                                obj[column.field] !== null) {
-                                                                                obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnFalse) || "False";
+                                                                            else if (obj[column.field] !== undefined && obj[column.field] !== null) {
+                                                                                obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnFalse) || 'False';
                                                                             }
                                                                             return [3 /*break*/, 13];
                                                                         case 7:
-                                                                            if (!(column.type === "date")) return [3 /*break*/, 8];
+                                                                            if (!(column.type === 'date')) return [3 /*break*/, 8];
                                                                             date = item[column.field];
                                                                             transformDate = column.transformDate;
                                                                             if (transformDate) {
                                                                                 date = transformDate(date, item);
                                                                             }
                                                                             // Nếu là date thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, "dd/MM/yyyy");
+                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy');
                                                                             return [3 /*break*/, 13];
                                                                         case 8:
-                                                                            if (!(column.type === "datetime")) return [3 /*break*/, 9];
+                                                                            if (!(column.type === 'datetime')) return [3 /*break*/, 9];
                                                                             date = item[column.field];
                                                                             transformDate = column.transformDate;
                                                                             if (transformDate) {
                                                                                 date = transformDate(date, item);
                                                                             }
                                                                             // Nếu là datetime thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, "dd/MM/yyyy HH:mm");
+                                                                            obj[column.field] = Date.toFormat(date, 'dd/MM/yyyy HH:mm');
                                                                             return [3 /*break*/, 13];
                                                                         case 9:
-                                                                            if (!(column.type === "time")) return [3 /*break*/, 10];
+                                                                            if (!(column.type === 'time')) return [3 /*break*/, 10];
                                                                             date = item[column.field];
                                                                             transformDate = column.transformDate;
                                                                             if (transformDate) {
                                                                                 date = transformDate(date, item);
                                                                             }
                                                                             // Nếu là time thì convert theo đúng format
-                                                                            obj[column.field] = Date.toFormat(date, "HH:mm");
+                                                                            obj[column.field] = Date.toFormat(date, 'HH:mm');
                                                                             return [3 /*break*/, 13];
                                                                         case 10:
-                                                                            if (!(column.type === "values")) return [3 /*break*/, 12];
+                                                                            if (!(column.type === 'values')) return [3 /*break*/, 12];
                                                                             // Nếu là values thì lấy giá trị của value được chọn
                                                                             _5 = obj;
                                                                             _6 = column.field;
@@ -2868,8 +2819,17 @@
                 });
             }); };
             this.onFilterChange = function () {
-                __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
-                _this.reload(false);
+                var _a, _b;
+                // this.#paginator.pageIndex = 0;
+                // this.reload(false);
+                if ((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) {
+                    _this.filterRegister.value.set({
+                        columnFilter: _this.columnFilter,
+                    });
+                }
+                else {
+                    _this.filterRegister.value.set({});
+                }
             };
             this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
                 var _w, _x, _y, _z, _0, data;
@@ -2914,9 +2874,7 @@
                 }
                 else {
                     if ((_f = _this.gridOption.selection) === null || _f === void 0 ? void 0 : _f.single) {
-                        _this.items
-                            .filter(function (e) { return e !== rowData; })
-                            .forEach(function (e) { return (e.isSelected = false); });
+                        _this.items.filter(function (e) { return e !== rowData; }).forEach(function (e) { return (e.isSelected = false); });
                         __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
                         return;
                     }
@@ -2929,8 +2887,7 @@
                 var _a, _b, _c;
                 (_a = _this.items) === null || _a === void 0 ? void 0 : _a.forEach(function (e) {
                     var _a, _b, _c, _d;
-                    if (e.selectable &&
-                        (!((_c = (_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.actions) === null || _d === void 0 ? void 0 : _d.length))) {
+                    if (e.selectable && (!((_c = (_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.actions) === null || _d === void 0 ? void 0 : _d.length))) {
                         e.isSelected = _this.isSelectAll;
                     }
                 });
@@ -2964,10 +2921,6 @@
                     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;
@@ -2978,48 +2931,48 @@
                 var item = {};
                 // Gán giá trị mặc định
                 columns.forEach(function (column) {
-                    if (column.type === "values") {
-                        item[column.field] = "";
+                    if (column.type === 'values') {
+                        item[column.field] = '';
                     }
-                    else if (column.type === "bool") {
+                    else if (column.type === 'bool') {
                         item[column.field] = true;
                     }
-                    else if (column.type === "number") {
+                    else if (column.type === 'number') {
                         item[column.field] = null;
                     }
                 });
-                if (type === "local") {
+                if (type === 'local') {
                     (_a = editor.onAdd) === null || _a === void 0 ? void 0 : _a.call(editor, item, __classPrivateFieldGet(_this, _localItems));
                 }
                 else {
                     (_b = editor.onAdd) === null || _b === void 0 ? void 0 : _b.call(editor, item, _this.items);
                 }
                 // Đưa item lên dòng đầu tiên nếu type khác popup
-                if (editor.type !== "popup") {
+                if (editor.type !== 'popup') {
                     if (editor.addToLast) {
-                        if (type === "local") {
+                        if (type === 'local') {
                             __classPrivateFieldSet(_this, _localItems, __spread(__classPrivateFieldGet(_this, _localItems), [item]));
                         }
                         _this.items = __spread(_this.items, [item]);
                     }
                     else {
-                        if (type === "local") {
+                        if (type === 'local') {
                             __classPrivateFieldSet(_this, _localItems, __spread([item], __classPrivateFieldGet(_this, _localItems)));
                         }
                         _this.items = __spread([item], _this.items);
                     }
                 }
-                item.editorStatus = "create";
+                item.editorStatus = 'create';
                 item.editorHandlerRow = {
                     temporary: Object.assign({}, item),
                 };
             };
             this.onUpdate = function (item) {
                 var editor = _this.gridOption.editor;
-                item.editorStatus = "update";
+                item.editorStatus = 'update';
                 item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { temporary: Object.assign({}, item) });
                 // this.generateEditorHanlder(item);
-                if (editor.type === "popup") {
+                if (editor.type === 'popup') {
                     // Xử lý case popup
                     // this.sdGridPopupEditor.open(item, columns, isModified);
                 }
@@ -3062,8 +3015,8 @@
                             _3.sent();
                             _3.label = 6;
                         case 6:
-                            if (item.editorStatus === "create" && editor.type === "popup") {
-                                if (this.gridOption.type === "local") {
+                            if (item.editorStatus === 'create' && editor.type === 'popup') {
+                                if (this.gridOption.type === 'local') {
                                     this.items.splice(0, 0, item);
                                 }
                                 // this.viewItems.splice(0, 0, item);
@@ -3085,8 +3038,8 @@
             this.onCancel = function (item) {
                 var _a, _b;
                 var editor = _this.gridOption.editor;
-                if (editor.type === "inline") {
-                    if (_this.gridOption.type === "local") {
+                if (editor.type === 'inline') {
+                    if (_this.gridOption.type === 'local') {
                         var idx2 = __classPrivateFieldGet(_this, _localItems).indexOf(item);
                         __classPrivateFieldGet(_this, _localItems).splice(idx2, 1);
                         __classPrivateFieldSet(_this, _localItems, __spread(__classPrivateFieldGet(_this, _localItems)));
@@ -3094,7 +3047,7 @@
                     var idx1 = _this.items.indexOf(item);
                     _this.items.splice(idx1, 1);
                     _this.items = __spread(_this.items);
-                    if (_this.gridOption.type === "local") {
+                    if (_this.gridOption.type === 'local') {
                         (_a = editor === null || editor === void 0 ? void 0 : editor.onCancel) === null || _a === void 0 ? void 0 : _a.call(editor, item, __classPrivateFieldGet(_this, _localItems));
                     }
                     else {
@@ -3103,9 +3056,9 @@
                     _this.ref.detectChanges();
                     return;
                 }
-                if (editor.type === "focus") {
-                    if (item.editorStatus === "create") {
-                        if (_this.gridOption.type === "local") {
+                if (editor.type === 'focus') {
+                    if (item.editorStatus === 'create') {
+                        if (_this.gridOption.type === 'local') {
                             var idx2 = __classPrivateFieldGet(_this, _localItems).indexOf(item);
                             __classPrivateFieldGet(_this, _localItems).splice(idx2, 1);
                             __classPrivateFieldSet(_this, _localItems, __spread(__classPrivateFieldGet(_this, _localItems)));
@@ -3143,8 +3096,8 @@
                             }
                             _3.label = 3;
                         case 3:
-                            if (editor.type === "inline") {
-                                if (this.gridOption.type === "local") {
+                            if (editor.type === 'inline') {
+                                if (this.gridOption.type === 'local') {
                                     idx2 = __classPrivateFieldGet(this, _localItems).indexOf(item);
                                     __classPrivateFieldGet(this, _localItems).splice(idx2, 1);
                                     __classPrivateFieldSet(this, _localItems, __spread(__classPrivateFieldGet(this, _localItems)));
@@ -3152,7 +3105,7 @@
                                 idx1 = this.items.indexOf(item);
                                 this.items.splice(idx1, 1);
                                 this.items = __spread(this.items);
-                                if (this.gridOption.type === "local") {
+                                if (this.gridOption.type === 'local') {
                                     (_1 = editor === null || editor === void 0 ? void 0 : editor.onRemove) === null || _1 === void 0 ? void 0 : _1.call(editor, item, __classPrivateFieldGet(this, _localItems));
                                 }
                                 else {
@@ -3215,13 +3168,9 @@
         Object.defineProperty(SdGridMaterial.prototype, "option", {
             set: function (option) {
                 if (option) {
-                    option = __classPrivateFieldGet(this, _initConfiguration).call(this, option);
+                    option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
                     this.gridOption = option;
-                    // this.#loadFilterRegister();
                     __classPrivateFieldSet(this, _loadCompleted, false);
-                    // this.#reload.next({
-                    //   force: true,
-                    // });
                     var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
                     this.gridConfigurationObserver = configuration.observer;
                     configuration.load();
@@ -3286,16 +3235,12 @@
             }); }))
                 .subscribe(__classPrivateFieldGet(this, _render)));
             __classPrivateFieldGet(this, _subscription$2).add(this.sdCellDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
-            __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes
-                .pipe(operators.startWith([]))
-                .subscribe(__classPrivateFieldGet(this, _initFooterDef)));
-            __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes
-                .pipe(operators.startWith([]))
-                .subscribe(__classPrivateFieldGet(this, _initFilterDef)));
+            __classPrivateFieldGet(this, _subscription$2).add(this.sdFooterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
+            __classPrivateFieldGet(this, _subscription$2).add(this.sdFilterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
             __classPrivateFieldGet(this, _subscription$2).add(rxjs.combineLatest([
                 __classPrivateFieldGet(this, _optionChanges).pipe(operators.startWith(this.gridOption)),
                 this.sdFilterDefs.changes.pipe(operators.startWith(this.filterDefs)),
-            ]).subscribe(function (a) {
+            ]).subscribe(function () {
                 __classPrivateFieldGet(_this, _loadFilterRegister).call(_this);
             }));
             this.ref.detectChanges();
@@ -3362,16 +3307,16 @@
         });
         return SdGridMaterial;
     }());
-    _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$2 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
+    _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$2 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$1 = new WeakMap(), _loadFilterRegister = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
     SdGridMaterial.decorators = [
         { type: core.Component, args: [{
-                    selector: "sd-grid-material",
+                    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\" [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: [
-                        animations.trigger("detailExpand", [
-                            animations.state("collapsed", animations.style({ height: "0", minHeight: "0", visibility: "hidden" })),
-                            animations.state("expanded", animations.style({ height: "*", visibility: "visible" })),
-                            animations.transition("expanded <=> collapsed", animations.animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")),
+                        animations.trigger('detailExpand', [
+                            animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
+                            animations.state('expanded', animations.style({ height: '*', visibility: 'visible' })),
+                            animations.transition('expanded <=> collapsed', animations.animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
                     ],
                     styles: [".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex:1;flex-direction:column;min-height:200px;position:relative}:host .c-container .c-table{flex:1;min-height:300px;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}:host .style1 .mat-table{border:1px solid #dde0e5}:host .style1 .mat-table tr.mat-header-row{background:#f2f3f4}:host .style1 .mat-table th.mat-header-cell{padding:10px 0}:host .style1 .c-paginator{border:1px solid #dde0e5;border-top:none!important}:host .style1 .mat-form-field-wrapper{background:#fff;padding:0}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]