@sd-angular/core 1.3.164 → 1.3.166

package/bundles/sd-angular-core-table.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/group')) :
-    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/group'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.forms, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core.group));
-}(this, (function (exports, common, core, common$1, forms, formField, icon, input, paginator, sort, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, group) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@sd-angular/core/common'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('@sd-angular/core/notify'), require('rxjs/operators'), require('@sd-angular/core/modal'), require('ngx-device-detector'), require('@sd-angular/core/export'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('object-hash'), require('@angular/cdk/drag-drop'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@sd-angular/core/group')) :
+    typeof define === 'function' && define.amd ? define('@sd-angular/core/table', ['exports', '@sd-angular/core/common', '@angular/core', '@angular/common', '@angular/material/icon', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', '@sd-angular/core/notify', 'rxjs/operators', '@sd-angular/core/modal', 'ngx-device-detector', '@sd-angular/core/export', '@sd-angular/core/setting', '@sd-angular/core/quick-action', 'object-hash', '@angular/cdk/drag-drop', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@sd-angular/core/group'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.table = {}), global['sd-angular'].core.common, global.ng.core, global.ng.common, global.ng.material.icon, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global['sd-angular'].core.notify, global.rxjs.operators, global['sd-angular'].core.modal, global['ngx-device-detector'], global['sd-angular'].core.export, global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global['object-hash'], global.ng.cdk.dragDrop, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global['sd-angular'].core.group));
+}(this, (function (exports, common, core, common$1, icon, paginator, sort, animations, uuid, rxjs, notify, operators, modal, ngxDeviceDetector, _export, setting, quickAction, hash, dragDrop, table, progressSpinner, table$1, menu, button, service, tooltip, slideToggle, form, checkbox, list, group) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -440,7 +440,7 @@
     SdPopupFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-filter',
-                    template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            *ngIf=\"column.type === 'string'\"\r\n            [label]=\"column.title\"\r\n            type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf=\"column.type === 'number'\"\r\n            [label]=\"column.title\"\r\n            type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'bool'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"[\r\n              { value: '1', display: column.trueValue || 'True' },\r\n              { value: '0', display: column.falseValue || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' || column.type === 'lazy-values'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            *ngIf=\"column.type === 'string'\"\r\n            [label]=\"column.title\"\r\n            type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input\r\n            *ngIf=\"column.type === 'number'\"\r\n            [label]=\"column.title\"\r\n            type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select\r\n            *ngIf=\"column.type === 'bool'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"[\r\n              { value: '1', display: column.trueValue || 'True' },\r\n              { value: '0', display: column.falseValue || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' || column.type === 'lazy-values'\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdTableFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
@@ -546,7 +546,7 @@
     SdTableFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table-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 *ngIf=\"!isMobileOrTablet && (externalFilters?.length || filterDefs?.length)\" class=\"row mx-0 mb-8\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\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=\"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 #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.type === 'lazy-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\" [externalFilters]=\"externalFilters\"\r\n      [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div *ngIf=\"!isMobileOrTablet && (externalFilters?.length || filterDefs?.length)\" class=\"row mx-0 mb-8\">\r\n      <ng-container *ngIf=\"filter?.sorts?.length\">\r\n        <ng-container *ngFor=\"let field of filter?.sorts\">\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.sdTableFilterDef] && item.sdTableFilterDef === 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=\"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.sdTableFilterDef]\" 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 #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.type === 'lazy-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\" [externalFilters]=\"externalFilters\"\r\n      [filterDefs]=\"filterDefs\">\r\n    </sd-popup-filter>\r\n  </ng-template>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
@@ -579,14 +579,14 @@
     }());
     SdMaterialFilterDefDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: '[sdMaterialFilterDef]'
+                    selector: '[sdTableFilterDef]'
                 },] }
     ];
     SdMaterialFilterDefDirective.ctorParameters = function () { return [
         { type: core.TemplateRef }
     ]; };
     SdMaterialFilterDefDirective.propDecorators = {
-        sdMaterialFilterDef: [{ type: core.Input }],
+        sdTableFilterDef: [{ type: core.Input }],
         showing: [{ type: core.Input, args: ['defaultShowing',] }]
     };
 
@@ -598,7 +598,7 @@
     }());
     SdMaterialSubInformationDefDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: '[sdMaterialSubInformationDef]'
+                    selector: '[sdTableExpandDef]'
                 },] }
     ];
     SdMaterialSubInformationDefDirective.ctorParameters = function () { return [
@@ -613,14 +613,14 @@
     }());
     SdMaterialFooterDefDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: '[sdMaterialFooterDef]'
+                    selector: '[sdTableFooterDef]'
                 },] }
     ];
     SdMaterialFooterDefDirective.ctorParameters = function () { return [
         { type: core.TemplateRef }
     ]; };
     SdMaterialFooterDefDirective.propDecorators = {
-        sdMaterialFooterDef: [{ type: core.Input }]
+        sdTableFooterDef: [{ type: core.Input }]
     };
 
     var _COLUMNS, _prefix, _getSetting, _default;
@@ -840,7 +840,7 @@
                                     // Filter def
                                     filterDef: keys.includes('filterDef') ? (value === null || value === void 0 ? void 0 : value.filterDef) || {} : filterDef,
                                     // Force
-                                    notReload: !!notReload,
+                                    notReload: !!(value === null || value === void 0 ? void 0 : value.notReload),
                                 };
                                 filterValue_1.set(updatedFilter);
                                 return updatedFilter;
@@ -895,7 +895,7 @@
                     // 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;
+                        inlineFilterDef[item.sdTableFilterDef] = item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
@@ -953,7 +953,7 @@
                     // Filter def
                     for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
                         var item = _z.value;
-                        filterDef[item.sdMaterialFilterDef] = undefined;
+                        filterDef[item.sdTableFilterDef] = undefined;
                     }
                 }
                 catch (e_6_1) { e_6 = { error: e_6_1 }; }
@@ -1011,7 +1011,7 @@
                     // Filter def
                     for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
                         var item = _z.value;
-                        inlineFilterDef[item.sdMaterialFilterDef] = (_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _f === void 0 ? void 0 : _f[item.sdMaterialFilterDef]) !== null && _g !== void 0 ? _g : item === null || item === void 0 ? void 0 : item.defaultShowing;
+                        inlineFilterDef[item.sdTableFilterDef] = (_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration.inlineFilterDef) === null || _f === void 0 ? void 0 : _f[item.sdTableFilterDef]) !== null && _g !== void 0 ? _g : item === null || item === void 0 ? void 0 : item.defaultShowing;
                     }
                 }
                 catch (e_9_1) { e_9 = { error: e_9_1 }; }
@@ -1077,7 +1077,7 @@
                     // Filter def
                     for (var _y = __values(filterDefs || []), _z = _y.next(); !_z.done; _z = _y.next()) {
                         var item = _z.value;
-                        filterDef[item.sdMaterialFilterDef] = (_q = (_p = value === null || value === void 0 ? void 0 : value.filterDef) === null || _p === void 0 ? void 0 : _p[item.sdMaterialFilterDef]) !== null && _q !== void 0 ? _q : undefined;
+                        filterDef[item.sdTableFilterDef] = (_q = (_p = value === null || value === void 0 ? void 0 : value.filterDef) === null || _p === void 0 ? void 0 : _p[item.sdTableFilterDef]) !== null && _q !== void 0 ? _q : undefined;
                     }
                 }
                 catch (e_12_1) { e_12 = { error: e_12_1 }; }
@@ -1164,7 +1164,7 @@
     SdPopupConfiguration.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-popup-configuration',
-                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <!-- <span>{{item.width}}</span>\r\n              <mat-slider\r\n                  step=\"1\"\r\n                  min=\"0\"\r\n                  [max]=\"+item?.origin?.width*3\"\r\n                  [(ngModel)]=\"+item.width\"\r\n                  aria-label=\"units\">\r\n                </mat-slider> -->\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                     styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
                 },] }
     ];
@@ -1268,9 +1268,9 @@
                 try {
                     for (var _9 = __values(_this.sdFooterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
                         var footerDef = _10.value;
-                        if (footerDef.sdMaterialFooterDef) {
+                        if (footerDef.sdTableFooterDef) {
                             _this.hasFooter = true;
-                            _this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
+                            _this.footerDef[footerDef.sdTableFooterDef] = footerDef;
                         }
                     }
                 }
@@ -2171,35 +2171,44 @@
                 });
             }); });
             _format.set(this, function (rawItems, columns) { return __awaiter(_this, void 0, void 0, function () {
-                var _4, _5, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
+                var _4, _5, _6, items, _loop_4, this_3, columns_5, columns_5_1, column, e_12_1;
                 var e_12, _8;
+                var _this = this;
                 return __generator(this, function (_9) {
                     switch (_9.label) {
                         case 0:
                             items = rawItems.map(MapToSdTableItem);
                             _loop_4 = function (column) {
-                                var field, cellStyle, click, tooltip, htmlTemplate, transform, objValues, values, views, _8, _9, _loop_5, items_2, items_2_1, item, e_13_1;
-                                var e_13, _10;
-                                return __generator(this, function (_11) {
-                                    switch (_11.label) {
+                                var field, cellStyle, click, tooltip, htmlTemplate, transform, values_1, views, lazyItems, _loop_5, items_2, items_2_1, item, e_13_1;
+                                var e_13, _8;
+                                return __generator(this, function (_9) {
+                                    switch (_9.label) {
                                         case 0:
                                             field = column.field, cellStyle = column.cellStyle, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
-                                            objValues = {};
-                                            if (column.type === 'values') {
-                                                objValues = __classPrivateFieldGet(this_3, _cacheObjValues)[field] || {};
-                                            }
                                             if (!(column.type === 'lazy-values')) return [3 /*break*/, 2];
-                                            values = items.map(function (item) { var _a; return (_a = item.data) === null || _a === void 0 ? void 0 : _a[field]; }).filter(function (val) { return !!val || val === 0; }).union();
+                                            __classPrivateFieldGet(this_3, _cacheObjValues)[field] = __classPrivateFieldGet(this_3, _cacheObjValues)[field] || {};
+                                            values_1 = items
+                                                .map(function (item) { var _a; return (_a = item.data) === null || _a === void 0 ? void 0 : _a[field]; })
+                                                .filter(function (val) { return (!!val || val === 0) && !Object.keys(__classPrivateFieldGet(_this, _cacheObjValues)[field]).includes(val); })
+                                                .union();
                                             views = column.option.views;
-                                            if (!(views && values.length)) return [3 /*break*/, 2];
-                                            _9 = (_8 = Array).toObject;
-                                            return [4 /*yield*/, views(values).catch(function (err) {
+                                            if (!(views && values_1.length)) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, views(values_1).catch(function (err) {
                                                     console.error(err);
                                                     return [];
                                                 })];
                                         case 1:
-                                            objValues = _9.apply(_8, [_11.sent(), column.option.valueField]) || {};
-                                            _11.label = 2;
+                                            lazyItems = (_9.sent())
+                                                .filter(function (item) { return values_1.includes(item === null || item === void 0 ? void 0 : item[column.option.valueField]); })
+                                                .map(function (e) {
+                                                var _8;
+                                                return (_8 = {},
+                                                    _8[column.option.valueField] = e === null || e === void 0 ? void 0 : e[column.option.valueField],
+                                                    _8[column.option.displayField] = e === null || e === void 0 ? void 0 : e[column.option.displayField],
+                                                    _8);
+                                            });
+                                            Object.assign(__classPrivateFieldGet(this_3, _cacheObjValues)[field], Array.toObject(lazyItems, column.option.valueField) || {});
+                                            _9.label = 2;
                                         case 2:
                                             _loop_5 = function (item) {
                                                 var rowData, value, display, newValue, _8, date, time, option;
@@ -2255,7 +2264,7 @@
                                                                 }
                                                             }
                                                             if (column.type === 'values' || column.type === 'lazy-values') {
-                                                                display.data = ((_4 = objValues[value]) === null || _4 === void 0 ? void 0 : _4[column.option.displayField]) || value;
+                                                                display.data = ((_5 = (_4 = __classPrivateFieldGet(this_3, _cacheObjValues)[field]) === null || _4 === void 0 ? void 0 : _4[value]) === null || _5 === void 0 ? void 0 : _5[column.option.displayField]) || value;
                                                             }
                                                             if (column.type === 'number' && Number.isNumber(value)) {
                                                                 display.data = Number.toVNCurrency(value);
@@ -2274,7 +2283,7 @@
                                                                 display.badge = {
                                                                     type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
                                                                     color: column.badge(value, rowData),
-                                                                    icon: (_5 = column.badgeIcon) === null || _5 === void 0 ? void 0 : _5.call(column, value, rowData),
+                                                                    icon: (_6 = column.badgeIcon) === null || _6 === void 0 ? void 0 : _6.call(column, value, rowData),
                                                                 };
                                                             }
                                                             else if (column.type === 'bool') {
@@ -2289,29 +2298,29 @@
                                                     }
                                                 });
                                             };
-                                            _11.label = 3;
+                                            _9.label = 3;
                                         case 3:
-                                            _11.trys.push([3, 8, 9, 10]);
+                                            _9.trys.push([3, 8, 9, 10]);
                                             items_2 = (e_13 = void 0, __values(items)), items_2_1 = items_2.next();
-                                            _11.label = 4;
+                                            _9.label = 4;
                                         case 4:
                                             if (!!items_2_1.done) return [3 /*break*/, 7];
                                             item = items_2_1.value;
                                             return [5 /*yield**/, _loop_5(item)];
                                         case 5:
-                                            _11.sent();
-                                            _11.label = 6;
+                                            _9.sent();
+                                            _9.label = 6;
                                         case 6:
                                             items_2_1 = items_2.next();
                                             return [3 /*break*/, 4];
                                         case 7: return [3 /*break*/, 10];
                                         case 8:
-                                            e_13_1 = _11.sent();
+                                            e_13_1 = _9.sent();
                                             e_13 = { error: e_13_1 };
                                             return [3 /*break*/, 10];
                                         case 9:
                                             try {
-                                                if (items_2_1 && !items_2_1.done && (_10 = items_2.return)) _10.call(items_2);
+                                                if (items_2_1 && !items_2_1.done && (_8 = items_2.return)) _8.call(items_2);
                                             }
                                             finally { if (e_13) throw e_13.error; }
                                             return [7 /*endfinally*/];
@@ -2468,7 +2477,7 @@
     SdTable.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-table',
-                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"gridOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': gridOption?.style?.maxHeight,\r\n            'min-height': gridOption?.style?.minHeight\r\n          }\">\r\n          <table\r\n            mat-table\r\n            [dataSource]=\"groupedItems\"\r\n            matSort\r\n            [matSortDisabled]=\"!gridOption.sort?.enable\"\r\n            multiTemplateDataRows>\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?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </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=\"sdSubInformation.templateRef; context: { item: item }\"> </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\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (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\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!gridOption.selector?.single\"\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\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?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n                  </mat-checkbox>\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\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!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\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [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\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [idx]=\"i\"\r\n                  [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [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\r\n                  class=\"d-block px-8\"\r\n                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [idx]=\"i\"\r\n                  [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.isSelected\"></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        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableFilter\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Filter' | sdTranslate\"\r\n            icon=\"filter_alt\"\r\n            size=\"sm\"\r\n            (action)=\"tableFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button\r\n            *ngIf=\"gridOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Reload' | sdTranslate\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            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\" 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\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"gridOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\">\r\n    </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    template: "<ng-container *ngIf=\"configuration\">\r\n  <sd-table-filter\r\n    *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n    [filterRegister]=\"filterRegister\"\r\n    [filter]=\"gridOption?.filter\"\r\n    [columns]=\"configuration.firstColumns\"\r\n    [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n    [filterDefs]=\"filterDefs\">\r\n  </sd-table-filter>\r\n  <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n      </div>\r\n      <ng-container>\r\n        <div\r\n          class=\"c-table\"\r\n          sdScroll\r\n          [ngStyle]=\"{\r\n            'max-height': gridOption?.style?.maxHeight,\r\n            'min-height': gridOption?.style?.minHeight\r\n          }\">\r\n          <table mat-table [dataSource]=\"groupedItems\" matSort [matSortDisabled]=\"!gridOption.sort?.enable\" multiTemplateDataRows>\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?.expand?.always; else useExpandCollapse\">\r\n                    <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </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=\"sdSubInformation.templateRef; context: { item: item }\"> </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\r\n                class=\"p-0\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"width: 1px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td mat-cell *matCellDef=\"let element\">\r\n                <button\r\n                  *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n                  mat-icon-button\r\n                  aria-label=\"Expand & Collapse\"\r\n                  (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\r\n                class=\"text-center px-15\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                style=\"min-width: 50px; max-width: 50px\"\r\n                [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n                  <mat-checkbox\r\n                    *ngIf=\"!gridOption.selector?.single\"\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"isSelectAll\"\r\n                    (change)=\"onSelectAll()\">\r\n                  </mat-checkbox>\r\n                </ng-container>\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?.selector\">\r\n                  <mat-checkbox\r\n                    class=\"c-selection\"\r\n                    color=\"primary\"\r\n                    [(ngModel)]=\"item.isSelected\"\r\n                    (change)=\"onSelect(item)\"\r\n                    [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n                  </mat-checkbox>\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\r\n                class=\"px-8 py-8\"\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n              <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n              </td>\r\n              <td mat-footer-cell *matFooterCellDef></td>\r\n            </ng-container>\r\n            <ng-container\r\n              *sdFor=\"let column of configuration.firstColumns; let i = index\"\r\n              [matColumnDef]=\"column.field\"\r\n              [sticky]=\"configuration.fixedColumn[column.field]\">\r\n              <th\r\n                mat-header-cell\r\n                *matHeaderCellDef\r\n                class=\"px-8 py-8 c-th\"\r\n                [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n                [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n                [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n                <div>\r\n                  <div\r\n                    aria-hidden=\"true\"\r\n                    mat-sort-header\r\n                    [disabled]=\"!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\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [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\r\n                  class=\"d-block px-8\"\r\n                  *ngIf=\"!item?.sdGroup\"\r\n                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [idx]=\"i\"\r\n                  [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n                  </ng-container>\r\n                </ng-container>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *sdFor=\"let column of configuration.secondColumns; let i = index\" [matColumnDef]=\"column.field\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                <div>\r\n                  <div\r\n                    [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                    [class.text-center]=\"column.align === 'center'\"\r\n                    [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter\r\n                    *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n                    [value]=\"columnFilter[column.field]\"\r\n                    [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                    [columnFilter]=\"columnFilter\"\r\n                    [cacheValues]=\"cacheValues\"\r\n                    [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\r\n                  class=\"d-block px-8\"\r\n                  [sdId]=\"item.meta.id\"\r\n                  [key]=\"key\"\r\n                  [value]=\"item[column.field]\"\r\n                  [column]=\"column\"\r\n                  [item]=\"item\"\r\n                  [idx]=\"i\"\r\n                  [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n            <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n              <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n            </ng-container>\r\n            <tr\r\n              mat-row\r\n              *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n              matRipple\r\n              class=\"c-row\"\r\n              [class.selected]=\"row.isSelected\"></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        </div>\r\n      </ng-container>\r\n      <div class=\"c-paginator\">\r\n        <div class=\"c-action\">\r\n          <sd-button\r\n            *ngIf=\"tableFilter\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Filter' | sdTranslate\"\r\n            icon=\"filter_alt\"\r\n            size=\"sm\"\r\n            (action)=\"tableFilter.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n          <sd-button\r\n            *ngIf=\"gridOption.reload?.visible\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Reload' | sdTranslate\"\r\n            icon=\"refresh\"\r\n            size=\"sm\"\r\n            (action)=\"reload()\"\r\n            [disabled]=\"!items?.length\"\r\n            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\" 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\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n              </sd-button>\r\n            </ng-template>\r\n\r\n            <mat-menu #menu=\"matMenu\">\r\n              <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t excel</span>\r\n              </button>\r\n              <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n                <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                <span> Xu\u1EA5t CSV</span>\r\n              </button>\r\n            </mat-menu>\r\n          </ng-container>\r\n          <sd-button\r\n            *ngIf=\"popupConfiguration\"\r\n            class=\"mr-8\"\r\n            [title]=\"'Configure' | sdTranslate\"\r\n            icon=\"settings\"\r\n            size=\"sm\"\r\n            (action)=\"popupConfiguration.open()\"\r\n            type=\"link\">\r\n          </sd-button>\r\n        </div>\r\n        <mat-paginator\r\n          [class.d-none]=\"gridOption.paginate?.hidden\"\r\n          [length]=\"total\"\r\n          [pageSize]=\"gridOption.paginate?.pageSize\"\r\n          [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n          [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n      </div>\r\n    </div>\r\n    <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n    </sd-table-quick-action>\r\n    <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\"> </sd-popup-configuration>\r\n  </ng-container>\r\n</ng-container>\r\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('detailExpand', [
@@ -3540,10 +3549,6 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common$1.CommonModule,
-                        forms.FormsModule,
-                        forms.ReactiveFormsModule,
-                        input.MatInputModule,
-                        formField.MatFormFieldModule,
                         sort.MatSortModule,
                         paginator.MatPaginatorModule,
                         table.MatTableModule,
@@ -3552,18 +3557,13 @@
                         button.MatButtonModule,
                         tooltip.MatTooltipModule,
                         progressSpinner.MatProgressSpinnerModule,
-                        chips.MatChipsModule,
-                        radio.MatRadioModule,
                         slideToggle.MatSlideToggleModule,
                         checkbox.MatCheckboxModule,
                         list.MatListModule,
-                        divider.MatDividerModule,
                         table$1.CdkTableModule,
                         dragDrop.DragDropModule,
                         form.SdFormModule,
                         service.SdServiceModule,
-                        slider.MatSliderModule,
-                        scrolling.ScrollingModule,
                         common.SdCommonModule,
                         group.SdGroupModule,
                     ],