@sd-angular/core 1.3.146 → 1.3.148

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

@@ -0,0 +1,4077 @@
+(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('object-hash'), require('@sd-angular/core/setting'), require('@sd-angular/core/quick-action'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/cdk/drag-drop'), 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('@sd-angular/core/translate'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/utility'), 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', 'object-hash', '@sd-angular/core/setting', '@sd-angular/core/quick-action', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/cdk/drag-drop', '@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', '@sd-angular/core/translate', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/utility', '@sd-angular/core/group'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.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['object-hash'], global['sd-angular'].core.setting, global['sd-angular'].core['quick-action'], global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.cdk.dragDrop, 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['sd-angular'].core.translate, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core.utility, 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, hash, setting, quickAction, table, progressSpinner, table$1, scrolling, dragDrop, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, translate, list, divider, utility, group) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) { return e; } else {
+            var n = Object.create(null);
+            if (e) {
+                Object.keys(e).forEach(function (k) {
+                    if (k !== 'default') {
+                        var d = Object.getOwnPropertyDescriptor(e, k);
+                        Object.defineProperty(n, k, d.get ? d : {
+                            enumerable: true,
+                            get: function () {
+                                return e[k];
+                            }
+                        });
+                    }
+                });
+            }
+            n['default'] = e;
+            return Object.freeze(n);
+        }
+    }
+
+    var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash);
+    var hash__namespace = /*#__PURE__*/_interopNamespace(hash);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    var DEFAULT_TABLE_CONFIG = {
+        paginate: {
+            pageSize: 50,
+            pages: [50, 100, 200]
+        }
+    };
+    var TABLE_CONFIG = new core.InjectionToken('sd-table.configuration');
+
+    var SdMaterialCellDefDirective = /** @class */ (function () {
+        function SdMaterialCellDefDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return SdMaterialCellDefDirective;
+    }());
+    SdMaterialCellDefDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sdMaterialCellDef]'
+                },] }
+    ];
+    SdMaterialCellDefDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
+    ]; };
+    SdMaterialCellDefDirective.propDecorators = {
+        sdMaterialCellDef: [{ type: core.Input }]
+    };
+
+    var _filterRegister;
+    var SdPopupFilter = /** @class */ (function () {
+        function SdPopupFilter(cdRef) {
+            var _this = this;
+            this.cdRef = cdRef;
+            _filterRegister.set(this, void 0);
+            this.externalFilters = [];
+            this.externalFilter = {};
+            this.inlineExternal = {};
+            this.columns = [];
+            this.columnFilter = {};
+            this.inlineColumn = {};
+            this.filterDefs = [];
+            this.filterDef = {};
+            this.inlineFilterDef = {};
+            this.open = function () {
+                var configuration = __classPrivateFieldGet(_this, _filterRegister).configuration.get();
+                _this.inlineColumn = JSON.parse(JSON.stringify(configuration.inlineColumn));
+                _this.inlineExternal = JSON.parse(JSON.stringify(configuration.inlineExternal));
+                _this.inlineFilterDef = JSON.parse(JSON.stringify(configuration.inlineFilterDef));
+                var filterValue = __classPrivateFieldGet(_this, _filterRegister).value.get();
+                _this.columnFilter = JSON.parse(JSON.stringify(filterValue.columnFilter));
+                _this.externalFilter = JSON.parse(JSON.stringify(filterValue.externalFilter));
+                _this.filterDef = JSON.parse(JSON.stringify(filterValue.filterDef));
+                _this.modal.open();
+                _this.cdRef.markForCheck();
+            };
+            this.close = function () {
+                _this.modal.close();
+                _this.cdRef.markForCheck();
+            };
+            this.onApply = function () {
+                __classPrivateFieldGet(_this, _filterRegister).configuration.set({
+                    inlineColumn: _this.inlineColumn,
+                    inlineExternal: _this.inlineExternal,
+                    inlineFilterDef: _this.inlineFilterDef,
+                });
+                __classPrivateFieldGet(_this, _filterRegister).value.set({
+                    columnFilter: _this.columnFilter,
+                    externalFilter: _this.externalFilter,
+                    filterDef: _this.filterDef,
+                });
+                _this.modal.close();
+                _this.cdRef.markForCheck();
+            };
+        }
+        Object.defineProperty(SdPopupFilter.prototype, "filterRegister", {
+            set: function (value) {
+                __classPrivateFieldSet(this, _filterRegister, value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SdPopupFilter.prototype.ngAfterViewInit = function () { };
+        SdPopupFilter.prototype.ngOnDestroy = function () { };
+        SdPopupFilter.prototype.onClear = function () {
+            __classPrivateFieldGet(this, _filterRegister).value.remove();
+            this.modal.close();
+            this.cdRef.markForCheck();
+        };
+        return SdPopupFilter;
+    }());
+    _filterRegister = new WeakMap();
+    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-select\r\n            *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete\r\n            *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\"\r\n            [label]=\"column.title\"\r\n            [items]=\"column.option.items\"\r\n            [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time\r\n            *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n            [label]=\"column.title\"\r\n            [(model)]=\"columnFilter[column.field]\"\r\n            type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'string'\"\r\n            type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'bool'\"\r\n            [items]=\"[\r\n              { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n              { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n            ]\"\r\n            valueField=\"value\"\r\n            displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              appearance=\"outline\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-autocomplete\r\n              *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select\r\n              *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\"\r\n              multiple>\r\n            </sd-select>\r\n            <sd-select\r\n              *ngIf=\"!item.option?.selection\"\r\n              [label]=\"item.title\"\r\n              [items]=\"item.values\"\r\n              [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\"\r\n              appearance=\"outline\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range\r\n            [label]=\"item.title\"\r\n            *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\"\r\n            [(to)]=\"externalFilter[item.field].to\"\r\n            [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\"\r\n            appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" size=\"sm\" type=\"link\"> </sd-button>\r\n    <sd-button (action)=\"onApply()\" title=\"\u0110\u1ED3ng \u00FD\" color=\"primary\" size=\"sm\" type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px\" (action)=\"onClear()\" title=\"M\u1EB7c \u0111\u1ECBnh\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n    <sd-button\r\n      style=\"flex: 1; padding-left: 5px\"\r\n      (action)=\"onApply()\"\r\n      title=\"\u0110\u1ED3ng \u00FD\"\r\n      color=\"primary\"\r\n      width=\"100%\"\r\n      size=\"sm\"\r\n      type=\"fill\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
+                },] }
+    ];
+    SdPopupFilter.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    SdPopupFilter.propDecorators = {
+        modal: [{ type: core.ViewChild, args: [modal.SdModal,] }],
+        filterRegister: [{ type: core.Input }],
+        externalFilters: [{ type: core.Input }],
+        columns: [{ type: core.Input }],
+        filterDefs: [{ type: core.Input }]
+    };
+
+    var _subscription;
+    var SdGridFilter = /** @class */ (function () {
+        function SdGridFilter(ref, deviceService) {
+            var _this = this;
+            this.ref = ref;
+            this.deviceService = deviceService;
+            this.columns = [];
+            this.externalFilters = [];
+            this.filterDefs = [];
+            this.filterRegisterChange = new rxjs.BehaviorSubject(null);
+            this.filterDef = {};
+            this.inlineFilterDef = {};
+            this.columnFilter = {};
+            this.inlineColumn = {};
+            this.externalFilter = {};
+            this.inlineExternal = {};
+            _subscription.set(this, new rxjs.Subscription());
+            this.onFilter = function (item) {
+                _this.filterRegister.value.set({
+                    columnFilter: _this.columnFilter,
+                    externalFilter: _this.externalFilter,
+                    filterDef: _this.filterDef,
+                });
+            };
+            this.updateFilter = function () {
+                _this.filterRegister.value.set({
+                    columnFilter: _this.columnFilter,
+                    externalFilter: _this.externalFilter,
+                    filterDef: _this.filterDef,
+                    notReload: true
+                });
+            };
+            this.open = function () {
+                _this.popupFilter.open();
+            };
+            this.isMobileOrTablet = !this.deviceService.isDesktop();
+            this.ref.markForCheck();
+        }
+        Object.defineProperty(SdGridFilter.prototype, "_filter", {
+            set: function (filter) {
+                this.filter = filter;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdGridFilter.prototype, "_externalFilters", {
+            set: function (value) {
+                this.externalFilters = value || [];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdGridFilter.prototype, "_filterRegister", {
+            set: function (value) {
+                this.filterRegister = value;
+                this.filterRegisterChange.next(this.filterRegister);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SdGridFilter.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            __classPrivateFieldGet(this, _subscription).add(this.filterRegisterChange.pipe(operators.startWith(this.filterRegister)).subscribe(function (filterRegister) {
+                if (_this.filterRegister) {
+                    __classPrivateFieldGet(_this, _subscription).add(_this.filterRegister.configuration.observer.subscribe(function (configuration) {
+                        var inlineColumn = configuration.inlineColumn, inlineExternal = configuration.inlineExternal, inlineFilterDef = configuration.inlineFilterDef;
+                        _this.inlineColumn = inlineColumn;
+                        _this.inlineExternal = inlineExternal;
+                        _this.inlineFilterDef = inlineFilterDef;
+                        _this.ref.markForCheck();
+                    }));
+                    __classPrivateFieldGet(_this, _subscription).add(_this.filterRegister.value.observer.subscribe(function (value) {
+                        var columnFilter = value.columnFilter, externalFilter = value.externalFilter, filterDef = value.filterDef;
+                        _this.columnFilter = columnFilter;
+                        _this.externalFilter = externalFilter;
+                        _this.filterDef = filterDef;
+                        _this.ref.markForCheck();
+                    }));
+                }
+            }));
+        };
+        SdGridFilter.prototype.ngOnDestroy = function () {
+            __classPrivateFieldGet(this, _subscription).unsubscribe();
+        };
+        return SdGridFilter;
+    }());
+    _subscription = new WeakMap();
+    SdGridFilter.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-grid-filter',
+                    template: "<ng-container *ngIf=\"!filter?.disabled\">\r\n  <ng-container *ngIf=\"filter?.enableCollapse;else noCollapse\">\r\n    <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"T\u00ECm ki\u1EBFm\" expandable>\r\n      <div sdGroupBody>\r\n        <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n      </div>\r\n    </sd-group>\r\n  </ng-container>\r\n  <ng-template #noCollapse>\r\n    <div\r\n      *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n      class=\"row mx-0\">\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}"]
+                },] }
+    ];
+    SdGridFilter.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: ngxDeviceDetector.DeviceDetectorService }
+    ]; };
+    SdGridFilter.propDecorators = {
+        popupFilter: [{ type: core.ViewChild, args: [SdPopupFilter,] }],
+        _filter: [{ type: core.Input, args: ['filter',] }],
+        columns: [{ type: core.Input }],
+        _externalFilters: [{ type: core.Input, args: ['externalFilters',] }],
+        filterDefs: [{ type: core.Input }],
+        _filterRegister: [{ type: core.Input, args: ['filterRegister',] }]
+    };
+
+    var SdMaterialFilterDefDirective = /** @class */ (function () {
+        function SdMaterialFilterDefDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        Object.defineProperty(SdMaterialFilterDefDirective.prototype, "showing", {
+            set: function (val) {
+                this.defaultShowing = (val === '') || val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SdMaterialFilterDefDirective;
+    }());
+    SdMaterialFilterDefDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sdMaterialFilterDef]'
+                },] }
+    ];
+    SdMaterialFilterDefDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
+    ]; };
+    SdMaterialFilterDefDirective.propDecorators = {
+        sdMaterialFilterDef: [{ type: core.Input }],
+        showing: [{ type: core.Input, args: ['defaultShowing',] }]
+    };
+
+    var SdMaterialSubInformationDefDirective = /** @class */ (function () {
+        function SdMaterialSubInformationDefDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return SdMaterialSubInformationDefDirective;
+    }());
+    SdMaterialSubInformationDefDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sdMaterialSubInformationDef]'
+                },] }
+    ];
+    SdMaterialSubInformationDefDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
+    ]; };
+
+    var SdMaterialFooterDefDirective = /** @class */ (function () {
+        function SdMaterialFooterDefDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return SdMaterialFooterDefDirective;
+    }());
+    SdMaterialFooterDefDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sdMaterialFooterDef]'
+                },] }
+    ];
+    SdMaterialFooterDefDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
+    ]; };
+    SdMaterialFooterDefDirective.propDecorators = {
+        sdMaterialFooterDef: [{ type: core.Input }]
+    };
+
+    var SdMaterialEmptyDataDefDirective = /** @class */ (function () {
+        function SdMaterialEmptyDataDefDirective(templateRef) {
+            this.templateRef = templateRef;
+        }
+        return SdMaterialEmptyDataDefDirective;
+    }());
+    SdMaterialEmptyDataDefDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[sdMaterialEmptyDataDef]'
+                },] }
+    ];
+    SdMaterialEmptyDataDefDirective.ctorParameters = function () { return [
+        { type: core.TemplateRef }
+    ]; };
+
+    var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
+    var SdTableConfigurationService = /** @class */ (function () {
+        function SdTableConfigurationService(settingService, gridMaterialConfiguration) {
+            var _this = this;
+            this.settingService = settingService;
+            this.gridMaterialConfiguration = gridMaterialConfiguration;
+            _COLUMNS.set(this, {
+                EDITORVALIDATION: 'sdEditorValidation',
+                EDITOR: 'sdEditor',
+                SUBINFORMATION: 'sdSubInformationAction',
+                COMMAND: 'sdCommand',
+                SELECTION: 'sdSelection',
+                GROUP: 'sdGroup',
+            });
+            _cache.set(this, {});
+            this.init = function (key, gridOption) {
+                if (!__classPrivateFieldGet(_this, _cache)[key]) {
+                    var subject_1 = new rxjs.Subject();
+                    __classPrivateFieldGet(_this, _cache)[key] = {
+                        load: __classPrivateFieldGet(_this, _load).call(_this, gridOption, subject_1),
+                        get: __classPrivateFieldGet(_this, _get).call(_this, gridOption),
+                        set: function (configuration) {
+                            configuration = __classPrivateFieldGet(_this, _set).call(_this, gridOption, configuration);
+                            subject_1.next(Object.assign({}, configuration));
+                            return configuration;
+                        },
+                        remove: function () {
+                            __classPrivateFieldGet(_this, _remove).call(_this, gridOption)();
+                            subject_1.next(__classPrivateFieldGet(_this, _default).call(_this, gridOption));
+                        },
+                        observer: subject_1,
+                    };
+                }
+                return __classPrivateFieldGet(_this, _cache)[key];
+            };
+            _getKey.set(this, function (gridOption) {
+                var _a, _b;
+                var prefix = 'c9e94836-6ace-4aeb-b148-4f0be63589ee';
+                if (!((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.key) && !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
+                    return null;
+                }
+                return hash__default['default']({
+                    prefix: prefix,
+                    key: ((_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.key) || !(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key),
+                });
+            });
+            _default.set(this, function (gridOption) {
+                var _a;
+                var columns = ((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns) === null || _a === void 0 ? void 0 : _a.filter(function (e) { return !e.hidden; }).map(function (e) { return ({
+                    origin: {
+                        field: e.field,
+                        title: e.title,
+                        width: e.width,
+                        invisible: e.invisible,
+                    },
+                    invisible: e.invisible,
+                    fixed: false,
+                }); })) || [];
+                return {
+                    columns: columns,
+                };
+            });
+            _load.set(this, function (gridOption, subject) {
+                return function () { return __awaiter(_this, void 0, void 0, function () {
+                    var get, configuration;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
+                            case 0:
+                                get = __classPrivateFieldGet(this, _get).call(this, gridOption);
+                                return [4 /*yield*/, get()];
+                            case 1:
+                                configuration = _e.sent();
+                                subject.next(Object.assign({}, configuration));
+                                return [2 /*return*/];
+                        }
+                    });
+                }); };
+            });
+            _get.set(this, function (gridOption) {
+                return function () { return __awaiter(_this, void 0, void 0, function () {
+                    var key, columns, config, configuration, _e, get, remove, _f, get, remove;
+                    return __generator(this, function (_g) {
+                        switch (_g.label) {
+                            case 0:
+                                key = __classPrivateFieldGet(this, _getKey).call(this, gridOption);
+                                if (!key) {
+                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
+                                }
+                                columns = gridOption.columns, config = gridOption.config;
+                                if (!((config === null || config === void 0 ? void 0 : config.storage) === 'server')) return [3 /*break*/, 2];
+                                _e = this.settingService.createServer(key, {
+                                    args: config === null || config === void 0 ? void 0 : config.args,
+                                }), get = _e.get, remove = _e.remove;
+                                return [4 /*yield*/, get().catch(function () { return undefined; })];
+                            case 1:
+                                configuration = _g.sent();
+                                if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
+                                    remove().catch(console.error);
+                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
+                                }
+                                return [3 /*break*/, 3];
+                            case 2:
+                                _f = this.settingService.create(key, {
+                                    type: config === null || config === void 0 ? void 0 : config.storage,
+                                    args: config === null || config === void 0 ? void 0 : config.args,
+                                }), get = _f.get, remove = _f.remove;
+                                configuration = get();
+                                if (!(configuration === null || configuration === void 0 ? void 0 : configuration.columns)) {
+                                    remove();
+                                    return [2 /*return*/, __classPrivateFieldGet(this, _default).call(this, gridOption)];
+                                }
+                                _g.label = 3;
+                            case 3:
+                                configuration.columns = configuration.columns.filter(function (column) { return columns.some(function (e) { return !e.hidden && e.field === column.origin.field; }); });
+                                // Thêm những column mới vào storage nếu có
+                                columns.forEach(function (column) {
+                                    var col = configuration.columns.find(function (e) { var _a; return ((_a = e.origin) === null || _a === void 0 ? void 0 : _a.field) === column.field; });
+                                    if (!col) {
+                                        configuration.columns.push({
+                                            origin: {
+                                                field: column.field,
+                                                title: column.title,
+                                                width: column.width,
+                                                invisible: column.invisible,
+                                            },
+                                            invisible: column.invisible,
+                                            fixed: false,
+                                        });
+                                    }
+                                    else {
+                                        col.origin = {
+                                            field: column.field,
+                                            title: column.title,
+                                            width: column.width,
+                                            invisible: column.invisible,
+                                        };
+                                    }
+                                });
+                                return [2 /*return*/, configuration];
+                        }
+                    });
+                }); };
+            });
+            _set.set(this, function (gridOption, configuration) {
+                var _a, _b, _c, _d;
+                var key = __classPrivateFieldGet(_this, _getKey).call(_this, gridOption);
+                if (key) {
+                    if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
+                        var set = _this.settingService.createServer(key, {
+                            args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args,
+                        }).set;
+                        set(configuration);
+                    }
+                    else {
+                        var set = _this.settingService.create(key, {
+                            type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
+                            args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args,
+                        }).set;
+                        set(configuration);
+                    }
+                }
+                return JSON.parse(JSON.stringify(configuration));
+            });
+            _remove.set(this, function (gridOption) {
+                return function () {
+                    var _a, _b, _c, _d;
+                    var key = __classPrivateFieldGet(_this, _getKey).call(_this, gridOption);
+                    if (key) {
+                        if (((_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _a === void 0 ? void 0 : _a.storage) === 'server') {
+                            var remove = _this.settingService.createServer(key, {
+                                args: (_b = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _b === void 0 ? void 0 : _b.args,
+                            }).remove;
+                            remove();
+                        }
+                        else {
+                            var remove = _this.settingService.create(key, {
+                                type: (_c = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _c === void 0 ? void 0 : _c.storage,
+                                args: (_d = gridOption === null || gridOption === void 0 ? void 0 : gridOption.config) === null || _d === void 0 ? void 0 : _d.args,
+                            }).remove;
+                            remove();
+                        }
+                    }
+                };
+            });
+            // get = async (gridOption: SdGridMaterialOption): Promise<SdGridConfiguration> => {
+            //   if (!gridOption?.key) {
+            //     return this.#getDefaultConfiguration(gridOption);
+            //   }
+            //   const { key, columns } = gridOption;
+            //   const configuration: SdGridConfiguration = await this.settingService.get(this.#getKey(key)).catch(() => undefined);
+            //   if (!configuration?.columns) {
+            //     this.settingService.remove(this.#getKey(key)).catch(console.error);
+            //     return this.#getDefaultConfiguration(gridOption);
+            //   }
+            //   configuration.columns = configuration.columns
+            //     .filter(column => columns.some(e => !e.hidden && e.field === column.origin.field));
+            //   // Thêm những column mới vào storage nếu có
+            //   columns.forEach(column => {
+            //     const col = configuration.columns.find(e => e.origin?.field === column.field);
+            //     if (!col) {
+            //       configuration.columns.push({
+            //         origin: {
+            //           field: column.field,
+            //           title: column.title,
+            //           width: column.width,
+            //           invisible: column.invisible,
+            //         },
+            //         invisible: column.invisible,
+            //         fixed: false
+            //       });
+            //     } else {
+            //       col.origin = {
+            //         field: column.field,
+            //         title: column.title,
+            //         width: column.width,
+            //         invisible: column.invisible
+            //       };
+            //     }
+            //   });
+            //   return configuration;
+            // }
+            // set = async (key: string, configuration: SdGridConfiguration): Promise<SdGridConfiguration> => {
+            //   if (key) {
+            //     this.settingService.set(this.#getKey(key), configuration);
+            //   }
+            //   return configuration;
+            // }
+            // remove = (key: string) => {
+            //   if (key) {
+            //     this.settingService.remove(this.#getKey(key));
+            //   }
+            // }
+            this.generateConfigurationResult = function (configuration, gridOption, sdSubInformation) {
+                var _a, _b;
+                var result = {
+                    column: {},
+                    fixedColumn: {},
+                    firstColumns: [],
+                    secondColumns: [],
+                    firstHeaders: [],
+                    secondHeaders: [],
+                    displayedColumns: [],
+                    displayedFooters: [],
+                    multipleHeader: false,
+                };
+                var _e = gridOption || {}, selector = _e.selector, commands = _e.commands, group = _e.group;
+                if (selector === null || selector === void 0 ? void 0 : selector.visible) {
+                    result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
+                    result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
+                }
+                if (commands === null || commands === void 0 ? void 0 : commands.length) {
+                    result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).COMMAND);
+                    result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).COMMAND);
+                }
+                if ((_a = group === null || group === void 0 ? void 0 : group.fields) === null || _a === void 0 ? void 0 : _a.length) {
+                    result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).GROUP);
+                    result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).GROUP);
+                }
+                (_b = configuration === null || configuration === void 0 ? void 0 : configuration.columns) === null || _b === void 0 ? void 0 : _b.filter(function (col) { return !col.invisible; }).forEach(function (col) {
+                    var _a;
+                    var column = gridOption === null || gridOption === void 0 ? void 0 : gridOption.columns.find(function (e) { return e.field === col.origin.field; });
+                    if (column) {
+                        result.column[col.origin.field] = {
+                            title: col.title || col.origin.title,
+                            width: col.width || col.origin.width,
+                        };
+                        if (col.fixed) {
+                            result.fixedColumn[col.origin.field] = {
+                                title: col.title || col.origin.title,
+                                width: col.width || col.origin.width,
+                            };
+                        }
+                        result.firstColumns.push(Object.assign(Object.assign({}, column), { title: col.title || col.origin.title, width: col.width || col.origin.width }));
+                        result.firstHeaders.push(col.origin.field);
+                        result.displayedColumns.push(col.origin.field);
+                        if (column.type === 'children') {
+                            (_a = column.children) === null || _a === void 0 ? void 0 : _a.forEach(function (childColumn) {
+                                result.secondColumns.push(childColumn);
+                                result.secondHeaders.push(childColumn.field);
+                                result.displayedColumns.push(childColumn.field);
+                            });
+                        }
+                    }
+                });
+                if (sdSubInformation === null || sdSubInformation === void 0 ? void 0 : sdSubInformation.templateRef) {
+                    result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION);
+                    result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION);
+                }
+                result.multipleHeader = result.secondHeaders.length > 0;
+                // Sub infomation không thể có footer
+                result.displayedFooters = result.displayedColumns.filter(function (val) { return val !== __classPrivateFieldGet(_this, _COLUMNS).SUBINFORMATION; });
+                return result;
+            };
+        }
+        return SdTableConfigurationService;
+    }());
+    _COLUMNS = new WeakMap(), _cache = new WeakMap(), _getKey = new WeakMap(), _default = new WeakMap(), _load = new WeakMap(), _get = new WeakMap(), _set = new WeakMap(), _remove = new WeakMap();
+    SdTableConfigurationService.decorators = [
+        { type: core.Injectable }
+    ];
+    SdTableConfigurationService.ctorParameters = function () { return [
+        { type: setting.SdSettingService },
+        { type: undefined, decorators: [{ type: core.Inject, args: [TABLE_CONFIG,] }, { type: core.Optional }] }
+    ]; };
+
+    var MapToSdTableItem = function (item) { return ({
+        current: JSON.parse(JSON.stringify(item)),
+        origin: item,
+        meta: {
+            id: hash__namespace(item),
+            expand: {
+                isExpanding: false,
+                isExpanded: false,
+            },
+            group: {},
+            selector: { actions: [], isSelected: false, selectable: false },
+        },
+    }); };
+
+    var _prefix, _cache$1;
+    var SdColumnValuesPipe = /** @class */ (function () {
+        function SdColumnValuesPipe() {
+            var _this = this;
+            _prefix.set(this, 'a1e67660-8aa2-4c11-b02d-71a32188719f');
+            _cache$1.set(this, {});
+            this.transform = function (value, column) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, items, valueField, displayField, selection, remain, key, isMultible, values, result, result;
+                return __generator(this, function (_m) {
+                    switch (_m.label) {
+                        case 0:
+                            if (column.type !== 'values' || !((_a = column.option) === null || _a === void 0 ? void 0 : _a.items) || !((_b = column.option) === null || _b === void 0 ? void 0 : _b.valueField) || !((_c = column.option) === null || _c === void 0 ? void 0 : _c.displayField)) {
+                                return [2 /*return*/, value];
+                            }
+                            _l = column.option, items = _l.items, valueField = _l.valueField, displayField = _l.displayField, selection = _l.selection, remain = __rest(_l, ["items", "valueField", "displayField", "selection"]);
+                            key = hash__default['default']({
+                                prefix: __classPrivateFieldGet(this, _prefix),
+                                valueField: valueField,
+                                displayField: displayField,
+                                selection: selection,
+                                remain: remain,
+                                value: value
+                            });
+                            isMultible = ['MULTIPLE', 'MULTIPLEAUTOCOMPLETE', 'MULTIPLE_EDITOR', 'MULTIPLEAUTOCOMPLETE_EDITOR'].includes(selection);
+                            if (!(typeof (items) === 'function')) return [3 /*break*/, 3];
+                            if (!!__classPrivateFieldGet(this, _cache$1)[key]) return [3 /*break*/, 2];
+                            return [4 /*yield*/, items(value, true)];
+                        case 1:
+                            values = _m.sent();
+                            result = '';
+                            if (isMultible && Array.isArray(value)) {
+                                result = ((_e = (_d = values === null || values === void 0 ? void 0 : values.filter(function (e) { return value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]); })) === null || _d === void 0 ? void 0 : _d.map(function (e) { return e === null || e === void 0 ? void 0 : e[displayField]; })) === null || _e === void 0 ? void 0 : _e.join(', ')) || (value === null || value === void 0 ? void 0 : value.join(', '));
+                            }
+                            else {
+                                result = ((_f = values === null || values === void 0 ? void 0 : values.find(function (e) { return (e === null || e === void 0 ? void 0 : e[valueField]) === value; })) === null || _f === void 0 ? void 0 : _f[displayField]) || value;
+                            }
+                            __classPrivateFieldGet(this, _cache$1)[key] = {
+                                result: result
+                            };
+                            _m.label = 2;
+                        case 2: return [3 /*break*/, 4];
+                        case 3:
+                            if (!__classPrivateFieldGet(this, _cache$1)[key]) {
+                                result = '';
+                                if (isMultible && Array.isArray(value)) {
+                                    result = (_j = (_h = (_g = items === null || items === void 0 ? void 0 : items.filter(function (e) { return value === null || value === void 0 ? void 0 : value.includes(e === null || e === void 0 ? void 0 : e[valueField]); })) === null || _g === void 0 ? void 0 : _g.map(function (e) { return e === null || e === void 0 ? void 0 : e[displayField]; })) === null || _h === void 0 ? void 0 : _h.join(', ')) !== null && _j !== void 0 ? _j : value === null || value === void 0 ? void 0 : value.join(', ');
+                                }
+                                else {
+                                    result = ((_k = items === null || items === void 0 ? void 0 : items.find(function (e) { return (e === null || e === void 0 ? void 0 : e[valueField]) === value; })) === null || _k === void 0 ? void 0 : _k[displayField]) || value;
+                                }
+                                __classPrivateFieldGet(this, _cache$1)[key] = {
+                                    result: result
+                                };
+                            }
+                            _m.label = 4;
+                        case 4: return [2 /*return*/, __classPrivateFieldGet(this, _cache$1)[key].result];
+                    }
+                });
+            }); };
+        }
+        return SdColumnValuesPipe;
+    }());
+    _prefix = new WeakMap(), _cache$1 = new WeakMap();
+    SdColumnValuesPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnValues'
+                },] }
+    ];
+
+    var _filterConfiguration, _filterValue, _cache$2, _defaultConfiguration, _defaultValue, _initConfiguration, _initValue;
+    var SdTableFilterService = /** @class */ (function () {
+        function SdTableFilterService(settingService) {
+            var _this = this;
+            this.settingService = settingService;
+            _filterConfiguration.set(this, 'GRID-FILTER-CONFIGURATION');
+            _filterValue.set(this, 'GRID-FILTER-VALUE');
+            _cache$2.set(this, {});
+            this.register = function (filter, args) {
+                var cacheSession = false;
+                var id = args.id, columns = args.columns, externalFilters = args.externalFilters;
+                var tempKey = hash__default['default']({
+                    id: id,
+                    columns: (columns === null || columns === void 0 ? void 0 : columns.map(function (e) { return e.field; }).filter(function (field) { return !!field; })) || [],
+                    externalFilters: (externalFilters === null || externalFilters === void 0 ? void 0 : externalFilters.map(function (e) { return e.field; }).filter(function (field) { return !!field; })) || [],
+                });
+                var key = (filter === null || filter === void 0 ? void 0 : filter.key) || tempKey;
+                if (!(filter === null || filter === void 0 ? void 0 : filter.key)) {
+                    cacheSession = true; // Nếu không có key thì chỉ lưu theo session
+                }
+                if (!__classPrivateFieldGet(_this, _cache$2)[key]) {
+                    // Setting của filter configuration
+                    var filterConfiguration_1 = _this.settingService.create({
+                        prefix: __classPrivateFieldGet(_this, _filterConfiguration),
+                        key: key,
+                    }, {
+                        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: !(filter === null || filter === void 0 ? void 0 : filter.cacheFilter) ? tempKey : key,
+                    }, {
+                        default: __classPrivateFieldGet(_this, _defaultValue).call(_this, args),
+                        type: cacheSession || !(filter === null || filter === void 0 ? void 0 : filter.cacheFilter) ? 'session' : undefined,
+                    });
+                    // Lấy giá trị value merge với giá trị default của args nếu như args có thay đổi
+                    filterValue_1.set(__classPrivateFieldGet(_this, _initValue).call(_this, args, filterValue_1.get()));
+                    __classPrivateFieldGet(_this, _cache$2)[key] = {
+                        configuration: {
+                            get: function () {
+                                return filterConfiguration_1.get();
+                            },
+                            set: function (configuration) {
+                                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,
+                                };
+                            },
+                            remove: function () {
+                                filterConfiguration_1.set(__classPrivateFieldGet(_this, _defaultConfiguration).call(_this, args));
+                            },
+                            observer: filterConfiguration_1.observer.pipe(operators.startWith(filterConfiguration_1.get()), 
+                            // Sử dụng mặc định nếu bị reset
+                            operators.map(function (configuration) { return configuration || __classPrivateFieldGet(_this, _defaultConfiguration).call(_this, args); })),
+                        },
+                        value: {
+                            get: function () {
+                                return filterValue_1.get();
+                            },
+                            set: function (value) {
+                                var keys = Object.keys(value || {});
+                                var current = filterValue_1.get();
+                                var columnOperator = current.columnOperator, columnFilter = current.columnFilter, externalFilter = current.externalFilter, filterDef = current.filterDef, notReload = current.notReload;
+                                var updatedFilter = {
+                                    // Filter column
+                                    columnOperator: keys.includes('columnOperator') ? (value === null || value === void 0 ? void 0 : value.columnOperator) || {} : columnOperator,
+                                    columnFilter: keys.includes('columnFilter') ? (value === null || value === void 0 ? void 0 : value.columnFilter) || {} : columnFilter,
+                                    // Filter external
+                                    externalFilter: keys.includes('externalFilter') ? (value === null || value === void 0 ? void 0 : value.externalFilter) || {} : externalFilter,
+                                    // Filter def
+                                    filterDef: keys.includes('filterDef') ? (value === null || value === void 0 ? void 0 : value.filterDef) || {} : filterDef,
+                                    // Force
+                                    notReload: !!notReload,
+                                };
+                                filterValue_1.set(updatedFilter);
+                                return updatedFilter;
+                            },
+                            remove: function () {
+                                filterValue_1.set(__classPrivateFieldGet(_this, _defaultValue).call(_this, args));
+                            },
+                            observer: filterValue_1.observer.pipe(operators.startWith(filterValue_1.get()), 
+                            // Sử dụng mặc định nếu bị reset
+                            operators.map(function (value) { return value || __classPrivateFieldGet(_this, _defaultValue).call(_this, args); })),
+                        },
+                    };
+                }
+                return __classPrivateFieldGet(_this, _cache$2)[key];
+            };
+            _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;
+                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] = (_b = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.inlineColumn) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.defaultShowing;
+                    }
+                }
+                catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                finally {
+                    try {
+                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                    }
+                    finally { if (e_7) throw e_7.error; }
+                }
+                try {
+                    // Filter external
+                    for (var _w = __values(externalFilters || []), _x = _w.next(); !_x.done; _x = _w.next()) {
+                        var item = _x.value;
+                        inlineExternal[item.field] = (_e = (_d = configuration === null || configuration === void 0 ? void 0 : configuration.inlineExternal) === null || _d === void 0 ? void 0 : _d[item.field]) !== null && _e !== void 0 ? _e : item === null || item === void 0 ? void 0 : item.defaultShowing;
+                    }
+                }
+                catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                finally {
+                    try {
+                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                    }
+                    finally { if (e_8) throw e_8.error; }
+                }
+                try {
+                    // 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;
+                    }
+                }
+                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                finally {
+                    try {
+                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                    }
+                    finally { if (e_9) throw e_9.error; }
+                }
+                return {
+                    // Filter column
+                    inlineColumn: inlineColumn,
+                    // Filter external
+                    inlineExternal: inlineExternal,
+                    // Filter def
+                    inlineFilterDef: inlineFilterDef,
+                };
+            });
+            _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 = {};
+                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] = (_b = (_a = value === null || value === void 0 ? void 0 : value.columnFilter) === null || _a === void 0 ? void 0 : _a[item.field]) !== null && _b !== void 0 ? _b : (_c = item === null || item === void 0 ? void 0 : item.filter) === null || _c === void 0 ? void 0 : _c.default;
+                    }
+                }
+                catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                finally {
+                    try {
+                        if (_v && !_v.done && (_r = _u.return)) _r.call(_u);
+                    }
+                    finally { if (e_10) throw e_10.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: (_f = (_e = (_d = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _d === void 0 ? void 0 : _d[item.field]) === null || _e === void 0 ? void 0 : _e.from) !== null && _f !== void 0 ? _f : (_g = item.default) === null || _g === void 0 ? void 0 : _g.from,
+                                to: (_k = (_j = (_h = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _h === void 0 ? void 0 : _h[item.field]) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : (_l = item.default) === null || _l === void 0 ? void 0 : _l.to,
+                            };
+                        }
+                        else {
+                            externalFilter[item.field] = (_o = (_m = value === null || value === void 0 ? void 0 : value.externalFilter) === null || _m === void 0 ? void 0 : _m[item.field]) !== null && _o !== void 0 ? _o : item === null || item === void 0 ? void 0 : item.default;
+                        }
+                    }
+                }
+                catch (e_11_1) { e_11 = { error: e_11_1 }; }
+                finally {
+                    try {
+                        if (_x && !_x.done && (_s = _w.return)) _s.call(_w);
+                    }
+                    finally { if (e_11) throw e_11.error; }
+                }
+                try {
+                    // 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;
+                    }
+                }
+                catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                finally {
+                    try {
+                        if (_z && !_z.done && (_t = _y.return)) _t.call(_y);
+                    }
+                    finally { if (e_12) throw e_12.error; }
+                }
+                return {
+                    // Filter column
+                    columnFilter: columnFilter,
+                    // Filter external
+                    externalFilter: externalFilter,
+                    // Filter def
+                    filterDef: filterDef,
+                };
+            });
+        }
+        return SdTableFilterService;
+    }());
+    _filterConfiguration = new WeakMap(), _filterValue = new WeakMap(), _cache$2 = new WeakMap(), _defaultConfiguration = new WeakMap(), _defaultValue = new WeakMap(), _initConfiguration = new WeakMap(), _initValue = new WeakMap();
+    SdTableFilterService.decorators = [
+        { type: core.Injectable }
+    ];
+    SdTableFilterService.ctorParameters = function () { return [
+        { type: setting.SdSettingService }
+    ]; };
+
+    var _gridId, _optionChanges, _localItems, _paginator, _sort, _subscription$1, _reload, _loadCompleted, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration$1, _loadFilterRegister, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _getExportColumns, _updateSelectedItems;
+    var SdTable = /** @class */ (function () {
+        function SdTable(ref, configuration, gridConfigurationService, exportService, notifyService, columnValuesPipe, gridFilterService) {
+            var _this = this;
+            this.ref = ref;
+            this.configuration = configuration;
+            this.gridConfigurationService = gridConfigurationService;
+            this.exportService = exportService;
+            this.notifyService = notifyService;
+            this.columnValuesPipe = columnValuesPipe;
+            this.gridFilterService = gridFilterService;
+            _gridId.set(this, uuid.v4());
+            this.key = uuid.v4();
+            _optionChanges.set(this, new rxjs.Subject());
+            _localItems.set(this, []);
+            this.items = [];
+            this.selectedItems = [];
+            // Loading
+            this.isLoading = false;
+            // Paginate
+            this.isHiddenPaginator = false;
+            _paginator.set(this, void 0);
+            // Sorting
+            _sort.set(this, void 0);
+            // Cell Def
+            this.sdCellDefs = new core.QueryList();
+            this.cellDef = {};
+            // Footer Def
+            this.sdFooterDefs = new core.QueryList();
+            this.footerDef = {};
+            this.hasFooter = false;
+            // Filter Def
+            this.sdFilterDefs = new core.QueryList();
+            this.filterDefs = [];
+            // Filter
+            this.columnOperator = {};
+            this.columnFilter = {};
+            // Subcription
+            _subscription$1.set(this, new rxjs.Subscription());
+            _reload.set(this, new rxjs.Subject());
+            this.isExporting = false;
+            this.isSelectAll = false;
+            this.exportTitle = 'Export';
+            _loadCompleted.set(this, false);
+            _initCellDef.set(this, function () {
+                var e_1, _8;
+                _this.cellDef = {};
+                try {
+                    for (var _9 = __values(_this.sdCellDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var cellDef = _10.value;
+                        if (cellDef.sdMaterialCellDef) {
+                            _this.cellDef[cellDef.sdMaterialCellDef] = cellDef;
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            });
+            _initFilterDef.set(this, function () {
+                var e_2, _8;
+                _this.filterDefs = [];
+                try {
+                    for (var _9 = __values(_this.sdFilterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var filterDef = _10.value;
+                        _this.filterDefs.push(filterDef);
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            });
+            _initFooterDef.set(this, function () {
+                var e_3, _8;
+                _this.footerDef = {};
+                _this.hasFooter = false;
+                try {
+                    for (var _9 = __values(_this.sdFooterDefs), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var footerDef = _10.value;
+                        if (footerDef.sdMaterialFooterDef) {
+                            _this.hasFooter = true;
+                            _this.footerDef[footerDef.sdMaterialFooterDef] = footerDef;
+                        }
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            });
+            _filterExportInfo.set(this, function (pageNumber, pageSize) {
+                var _a, _b;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                return {
+                    columnOperator: columnOperator || {},
+                    rawColumnFilter: columnFilter || {},
+                    rawExternalFilter: externalFilter || {},
+                    rawFilterDef: filterDef || {},
+                    orderBy: ((_a = __classPrivateFieldGet(_this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                    orderDirection: ((_b = __classPrivateFieldGet(_this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                    pageNumber: pageNumber,
+                    pageSize: pageSize,
+                    isExported: true,
+                };
+            });
+            _initConfiguration$1.set(this, function (option) {
+                var e_4, _8;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+                // Init pagination
+                option.paginate = {
+                    hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
+                    pageSize: (_f = (_c = (_b = option === null || option === void 0 ? void 0 : option.paginate) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : (_e = (_d = _this.configuration) === null || _d === void 0 ? void 0 : _d.paginate) === null || _e === void 0 ? void 0 : _e.pageSize) !== null && _f !== void 0 ? _f : (_g = DEFAULT_TABLE_CONFIG.paginate) === null || _g === void 0 ? void 0 : _g.pageSize,
+                    pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = _this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_TABLE_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
+                    showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
+                };
+                try {
+                    for (var _9 = __values(option.columns || []), _10 = _9.next(); !_10.done; _10 = _9.next()) {
+                        var column = _10.value;
+                        if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
+                            if (column.type === 'string') {
+                                column.filter.operator.list = ((_y = (_x = (_w = _this.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
+                            }
+                            if (column.type === 'number') {
+                                column.filter.operator.list = ((_1 = (_0 = (_z = _this.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                            }
+                            if (column.type === 'values') {
+                                column.filter.operator.list = ((_4 = (_3 = (_2 = _this.configuration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListValues) || [];
+                            }
+                            if (column.type === 'date' || column.type === 'datetime') {
+                                column.filter.operator.list = ((_7 = (_6 = (_5 = _this.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
+                            }
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_10 && !_10.done && (_8 = _9.return)) _8.call(_9);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                return option;
+            });
+            _loadFilterRegister.set(this, function () {
+                var _a, _b, _c, _d;
+                // Init filter
+                if (_this.gridOption) {
+                    if (!_this.filterRegister) {
+                        _this.filterRegister = _this.gridFilterService.register((_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter, {
+                            id: __classPrivateFieldGet(_this, _gridId),
+                            columns: (_b = _this.gridOption) === null || _b === void 0 ? void 0 : _b.columns,
+                            externalFilters: (_d = (_c = _this.gridOption) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.externalFilters,
+                            filterDefs: _this.filterDefs,
+                        });
+                        __classPrivateFieldGet(_this, _subscription$1).add(_this.filterRegister.value.observer
+                            .pipe(operators.debounceTime(500), operators.map(function (filterValue) {
+                            var columnOperator = filterValue.columnOperator, columnFilter = filterValue.columnFilter, notReload = filterValue.notReload;
+                            _this.columnOperator = columnOperator;
+                            _this.columnFilter = columnFilter;
+                            if (!notReload) {
+                                __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
+                                __classPrivateFieldGet(_this, _reload).next({
+                                    force: false,
+                                });
+                            }
+                        }))
+                            .subscribe());
+                    }
+                }
+            });
+            _filterLocal.set(this, function (localItems, filterInfo) {
+                var columns = _this.gridOption.columns;
+                var rawColumnFilter = filterInfo.rawColumnFilter, orderBy = filterInfo.orderBy, orderDirection = filterInfo.orderDirection, pageSize = filterInfo.pageSize, pageNumber = filterInfo.pageNumber;
+                var items = localItems.filter(function (tableItem) {
+                    var e_5, _8;
+                    var _a, _b, _c, _d;
+                    var item = tableItem.current;
+                    try {
+                        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();
+                            if (filterValue) {
+                                if (!columnValue && type !== 'datetime' && type !== 'date' && type !== 'time') {
+                                    return false;
+                                }
+                                if (type === 'string') {
+                                    if (columnValue.indexOf(filterValue) === -1) {
+                                        return false;
+                                    }
+                                }
+                                else if (type === 'values') {
+                                    if (columnValue !== filterValue) {
+                                        return false;
+                                    }
+                                }
+                                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) {
+                                            return false;
+                                        }
+                                        else if (filterValue.indexOf('<=') > -1 && cValue > fValue) {
+                                            return false;
+                                        }
+                                        else if (filterValue.indexOf('<') > -1 && cValue >= fValue) {
+                                            return false;
+                                        }
+                                        else if (filterValue.indexOf('>') > -1 && cValue <= fValue) {
+                                            return false;
+                                        }
+                                        else if (cValue !== fValue) {
+                                            return false;
+                                        }
+                                    }
+                                }
+                                else if (type === 'bool') {
+                                    if (filterValue === '1' && columnValue !== '1' && columnValue !== 'true') {
+                                        return false;
+                                    }
+                                    else if (filterValue === '0' && columnValue !== '0' && columnValue !== 'false') {
+                                        return false;
+                                    }
+                                }
+                                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);
+                                    var toDate = Date.end(to);
+                                    if (fromDate || toDate) {
+                                        if (!columnValue) {
+                                            return false;
+                                        }
+                                        var columnTime = new Date(columnValue).getTime();
+                                        var fromDateTime = (fromDate === null || fromDate === void 0 ? void 0 : fromDate.getTime()) || null;
+                                        var toDateTime = (toDate === null || toDate === void 0 ? void 0 : toDate.getTime()) || null;
+                                        if (fromDateTime && fromDateTime > columnTime) {
+                                            return false;
+                                        }
+                                        if (toDateTime && columnTime > toDateTime) {
+                                            return false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                    finally {
+                        try {
+                            if (columns_1_1 && !columns_1_1.done && (_8 = columns_1.return)) _8.call(columns_1);
+                        }
+                        finally { if (e_5) throw e_5.error; }
+                    }
+                    return true;
+                });
+                // Sort
+                if (orderBy && orderDirection) {
+                    var column = columns.find(function (e) { return e.field === orderBy; });
+                    if (column) {
+                        var type_1 = column.type, field_1 = column.field;
+                        items.sort(function (tableItemCurrent, tableItemNext) {
+                            var current = tableItemCurrent.current;
+                            var next = tableItemNext.current;
+                            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();
+                                return d1 - d2;
+                            }
+                            var s1 = (current[field_1] || '').toString();
+                            var s2 = (next[field_1] || '').toString();
+                            if (s1 > s2) {
+                                return 1;
+                            }
+                            if (s1 < s2) {
+                                return -1;
+                            }
+                            return 0;
+                        });
+                        if (orderDirection === 'desc') {
+                            items.reverse();
+                        }
+                    }
+                }
+                return {
+                    items: items.filter(function (item, index) {
+                        return index >= pageNumber * pageSize && index < (pageNumber + 1) * pageSize;
+                    }),
+                    total: items.length,
+                };
+            });
+            _getFilter.set(this, function () {
+                var _a, _b, _c, _d, _e, _f;
+                var _8 = _this.filterRegister.value.get(), columnOperator = _8.columnOperator, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                return {
+                    columnOperator: columnOperator || {},
+                    rawColumnFilter: columnFilter || {},
+                    rawExternalFilter: externalFilter || {},
+                    rawFilterDef: filterDef || {},
+                    orderBy: ((_a = __classPrivateFieldGet(_this, _sort)) === null || _a === void 0 ? void 0 : _a.active) || '',
+                    orderDirection: ((_b = __classPrivateFieldGet(_this, _sort)) === null || _b === void 0 ? void 0 : _b.direction) || '',
+                    pageNumber: ((_c = __classPrivateFieldGet(_this, _paginator)) === null || _c === void 0 ? void 0 : _c.pageIndex) || 0,
+                    pageSize: ((_d = __classPrivateFieldGet(_this, _paginator)) === null || _d === void 0 ? void 0 : _d.pageSize) || ((_f = (_e = _this.gridOption) === null || _e === void 0 ? void 0 : _e.paginate) === null || _f === void 0 ? void 0 : _f.pageSize) || 50,
+                };
+            });
+            _load$1.set(this, function (filterReq, force) {
+                if (force === void 0) { force = true; }
+                return __awaiter(_this, void 0, void 0, function () {
+                    var items, data, items, results, data;
+                    var _this = this;
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
+                            case 0:
+                                this.isLoading = true;
+                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 2];
+                                items = this.gridOption.items;
+                                return [4 /*yield*/, items(filterReq).catch(function (err) {
+                                        _this.notifyService.notify.warning('Có lỗi xảy ra');
+                                        console.error(err);
+                                        return {
+                                            items: [],
+                                            total: 0,
+                                        };
+                                    })];
+                            case 1:
+                                data = _8.sent();
+                                this.isLoading = false;
+                                return [2 /*return*/, {
+                                        items: (data === null || data === void 0 ? void 0 : data.items.map(MapToSdTableItem)) || [],
+                                        total: (data === null || data === void 0 ? void 0 : data.total) || 0,
+                                    }];
+                            case 2:
+                                if (!force) return [3 /*break*/, 6];
+                                items = this.gridOption.items;
+                                results = items();
+                                data = [];
+                                if (!(results instanceof Promise)) return [3 /*break*/, 4];
+                                return [4 /*yield*/, results.catch(function (err) {
+                                        _this.notifyService.notify.warning('Có lỗi xảy ra');
+                                        console.error(err);
+                                        return [];
+                                    })];
+                            case 3:
+                                data = _8.sent();
+                                return [3 /*break*/, 5];
+                            case 4:
+                                data = results;
+                                _8.label = 5;
+                            case 5:
+                                if (!Array.isArray(data)) {
+                                    this.notifyService.notify.warning('Dữ liệu không phải là một mảng');
+                                    data = [];
+                                }
+                                __classPrivateFieldSet(this, _localItems, data.map(MapToSdTableItem));
+                                this.isLoading = false;
+                                _8.label = 6;
+                            case 6: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, __classPrivateFieldGet(this, _localItems), filterReq)];
+                        }
+                    });
+                });
+            });
+            _render.set(this, function (args) { return __awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _d;
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
+                        case 0:
+                            (_a = this.sdScroll) === null || _a === void 0 ? void 0 : _a.scrollTop();
+                            this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
+                            this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
+                            return [4 /*yield*/, ((_d = (_c = (_b = this.gridOption) === null || _b === void 0 ? void 0 : _b.reload) === null || _c === void 0 ? void 0 : _c.onReload) === null || _d === void 0 ? void 0 : _d.call(_c, this.items))];
+                        case 1:
+                            _8.sent();
+                            this.isSelectAll = this.items.every(function (e) { return e.meta.selector.isSelected; });
+                            __classPrivateFieldGet(this, _updateSelectedItems).call(this);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            this.reload = function (force) {
+                if (force === void 0) { force = true; }
+                return __awaiter(_this, void 0, void 0, function () {
+                    var _e, _f, data;
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
+                            case 0:
+                                (_f = (_e = this.gridFilter) === null || _e === void 0 ? void 0 : _e.updateFilter) === null || _f === void 0 ? void 0 : _f.call(_e);
+                                return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this), force)];
+                            case 1:
+                                data = _8.sent();
+                                __classPrivateFieldGet(this, _render).call(this, data);
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            };
+            _exportedItems.set(this, function (pageNumber, pageSize) {
+                if (pageNumber === void 0) { pageNumber = 0; }
+                if (pageSize === void 0) { pageSize = 10000; }
+                return __awaiter(_this, void 0, void 0, function () {
+                    var _g, _h, result, filterInfo, result, exportedItems, results;
+                    return __generator(this, function (_8) {
+                        switch (_8.label) {
+                            case 0:
+                                if (!((_g = this.gridOption.export) === null || _g === void 0 ? void 0 : _g.items)) return [3 /*break*/, 2];
+                                result = (_h = this.gridOption.export) === null || _h === void 0 ? void 0 : _h.items(__classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize));
+                                if (Array.isArray(result)) {
+                                    return [2 /*return*/, result];
+                                }
+                                if (rxjs.isObservable(result)) {
+                                    result = result.toPromise();
+                                }
+                                if (rxjs.isObservable(result)) {
+                                    result = result.toPromise();
+                                }
+                                return [4 /*yield*/, result];
+                            case 1: return [2 /*return*/, _8.sent()];
+                            case 2:
+                                filterInfo = __classPrivateFieldGet(this, _filterExportInfo).call(this, pageNumber, pageSize);
+                                if (!(this.gridOption.type === 'server')) return [3 /*break*/, 4];
+                                result = this.gridOption.items(filterInfo);
+                                return [4 /*yield*/, result];
+                            case 3: return [2 /*return*/, _8.sent()];
+                            case 4:
+                                exportedItems = [];
+                                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];
+                            case 5:
+                                exportedItems = _8.sent();
+                                return [3 /*break*/, 7];
+                            case 6:
+                                exportedItems = results;
+                                _8.label = 7;
+                            case 7: return [3 /*break*/, 9];
+                            case 8:
+                                exportedItems = this.gridOption.items;
+                                _8.label = 9;
+                            case 9: return [2 /*return*/, __classPrivateFieldGet(this, _filterLocal).call(this, exportedItems, filterInfo)];
+                        }
+                    });
+                });
+            });
+            _allColumns.set(this, function () {
+                var columns = [];
+                _this.gridOption.columns
+                    .filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })
+                    .forEach(function (column) {
+                    var _a;
+                    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) {
+                            columns.push(childColumn);
+                        });
+                        return;
+                    }
+                    columns.push(column);
+                });
+                return columns;
+            });
+            _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); })) || [];
+            });
+            _onExport.set(this, function (isCSV) { return __awaiter(_this, void 0, void 0, function () {
+                var _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, columns_2, pageSize_1, batch, total_1, pageNumber_1, exportItems_1, items_1, promises_1, handleData, sheets, _8, _9, sheet, _10, _11, _12, e_6_1;
+                var e_6, _13;
+                var _this = this;
+                return __generator(this, function (_14) {
+                    switch (_14.label) {
+                        case 0:
+                            _14.trys.push([0, , 18, 19]);
+                            columns_2 = __classPrivateFieldGet(this, _getExportColumns).call(this);
+                            pageSize_1 = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.maxItemsPerRequest) || 1000;
+                            batch = ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.batch) || 1;
+                            total_1 = this.total;
+                            pageNumber_1 = 0;
+                            exportItems_1 = [];
+                            this.isExporting = true;
+                            items_1 = [];
+                            promises_1 = [];
+                            handleData = function () { return __awaiter(_this, void 0, void 0, function () {
+                                var _u, results, results_1, results_1_1, result, results_2, totalPage, percent, allColumns, allExportedColumns, _loop_1, exportItems_2, exportItems_2_1, item, e_7_1;
+                                var e_8, _8, e_7, _9;
+                                var _this = this;
+                                return __generator(this, function (_10) {
+                                    switch (_10.label) {
+                                        case 0: return [4 /*yield*/, Promise.all(promises_1)];
+                                        case 1:
+                                            results = _10.sent();
+                                            promises_1 = [];
+                                            exportItems_1 = [];
+                                            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) {
+                                                        exportItems_1 = __spread(exportItems_1, result.items);
+                                                        total_1 = result.total;
+                                                    }
+                                                    else {
+                                                        exportItems_1 = __spread(exportItems_1, result);
+                                                    }
+                                                }
+                                            }
+                                            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                                            finally {
+                                                try {
+                                                    if (results_1_1 && !results_1_1.done && (_8 = results_1.return)) _8.call(results_1);
+                                                }
+                                                finally { if (e_8) throw e_8.error; }
+                                            }
+                                            if (!((_u = this.gridOption.export) === null || _u === void 0 ? void 0 : _u.mapping)) return [3 /*break*/, 4];
+                                            results_2 = this.gridOption.export.mapping(exportItems_1);
+                                            if (!(results_2 instanceof Promise)) return [3 /*break*/, 3];
+                                            return [4 /*yield*/, results_2];
+                                        case 2:
+                                            exportItems_1 = _10.sent();
+                                            return [3 /*break*/, 4];
+                                        case 3:
+                                            exportItems_1 = results_2;
+                                            _10.label = 4;
+                                        case 4:
+                                            totalPage = total_1 / pageSize_1;
+                                            percent = Math.round(((pageNumber_1 - 1) * 100.0) / totalPage);
+                                            this.exportTitle = "Exporting..." + percent + "%";
+                                            allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
+                                            allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
+                                            _loop_1 = function (item) {
+                                                var obj, handle, columns_3, columns_3_1, exportColumn, e_9_1;
+                                                var e_9, _8;
+                                                return __generator(this, function (_9) {
+                                                    switch (_9.label) {
+                                                        case 0:
+                                                            obj = {};
+                                                            handle = function (exportColumn) { return __awaiter(_this, void 0, void 0, function () {
+                                                                var _v, _w, _x, column, exportedColumn, transform, _8, _9, date, transformDate, date, transformDate, date, transformDate, _10, _11;
+                                                                return __generator(this, function (_12) {
+                                                                    switch (_12.label) {
+                                                                        case 0:
+                                                                            obj[exportColumn.field] = item[exportColumn.field];
+                                                                            column = allColumns.find(function (e) { return e.field === exportColumn.field; });
+                                                                            exportedColumn = allExportedColumns.find(function (e) { return e.field === exportColumn.field; });
+                                                                            if (exportedColumn === null || exportedColumn === void 0 ? void 0 : exportedColumn.transform) {
+                                                                                obj[exportedColumn.field] = exportedColumn.transform(item[exportedColumn.field], item);
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!column) {
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (column.type === 'children') {
+                                                                                column === null || column === void 0 ? void 0 : column.children.forEach(function (childColumn) { return handle(childColumn); });
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!columns_2.some(function (e) { return e.field === column.field; })) {
+                                                                                return [2 /*return*/];
+                                                                            }
+                                                                            if (!column.transform) return [3 /*break*/, 4];
+                                                                            transform = column.transform(item[column.field], item, {
+                                                                                isExport: true,
+                                                                            });
+                                                                            if (!(transform instanceof Promise)) return [3 /*break*/, 2];
+                                                                            _8 = obj;
+                                                                            _9 = column.field;
+                                                                            return [4 /*yield*/, transform];
+                                                                        case 1:
+                                                                            _8[_9] = _12.sent();
+                                                                            return [3 /*break*/, 3];
+                                                                        case 2:
+                                                                            obj[column.field] = transform;
+                                                                            _12.label = 3;
+                                                                        case 3:
+                                                                            obj[column.field] = (_v = obj[column.field]) !== null && _v !== void 0 ? _v : '';
+                                                                            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] = '';
+                                                                            return [3 /*break*/, 13];
+                                                                        case 5:
+                                                                            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];
+                                                                            // 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] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnTrue) || 'True';
+                                                                            }
+                                                                            else if (obj[column.field] !== undefined && obj[column.field] !== null) {
+                                                                                obj[column.field] = ((_x = column.option) === null || _x === void 0 ? void 0 : _x.displayOnFalse) || 'False';
+                                                                            }
+                                                                            return [3 /*break*/, 13];
+                                                                        case 7:
+                                                                            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');
+                                                                            return [3 /*break*/, 13];
+                                                                        case 8:
+                                                                            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');
+                                                                            return [3 /*break*/, 13];
+                                                                        case 9:
+                                                                            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');
+                                                                            return [3 /*break*/, 13];
+                                                                        case 10:
+                                                                            if (!(column.type === 'values')) return [3 /*break*/, 12];
+                                                                            // Nếu là values thì lấy giá trị của value được chọn
+                                                                            _10 = obj;
+                                                                            _11 = column.field;
+                                                                            return [4 /*yield*/, this.columnValuesPipe.transform(item[column.field], column)];
+                                                                        case 11:
+                                                                            // Nếu là values thì lấy giá trị của value được chọn
+                                                                            _10[_11] = _12.sent();
+                                                                            return [3 /*break*/, 13];
+                                                                        case 12:
+                                                                            obj[column.field] = item[column.field];
+                                                                            _12.label = 13;
+                                                                        case 13: return [2 /*return*/];
+                                                                    }
+                                                                });
+                                                            }); };
+                                                            _9.label = 1;
+                                                        case 1:
+                                                            _9.trys.push([1, 6, 7, 8]);
+                                                            columns_3 = (e_9 = void 0, __values(columns_2)), columns_3_1 = columns_3.next();
+                                                            _9.label = 2;
+                                                        case 2:
+                                                            if (!!columns_3_1.done) return [3 /*break*/, 5];
+                                                            exportColumn = columns_3_1.value;
+                                                            return [4 /*yield*/, handle(exportColumn)];
+                                                        case 3:
+                                                            _9.sent();
+                                                            _9.label = 4;
+                                                        case 4:
+                                                            columns_3_1 = columns_3.next();
+                                                            return [3 /*break*/, 2];
+                                                        case 5: return [3 /*break*/, 8];
+                                                        case 6:
+                                                            e_9_1 = _9.sent();
+                                                            e_9 = { error: e_9_1 };
+                                                            return [3 /*break*/, 8];
+                                                        case 7:
+                                                            try {
+                                                                if (columns_3_1 && !columns_3_1.done && (_8 = columns_3.return)) _8.call(columns_3);
+                                                            }
+                                                            finally { if (e_9) throw e_9.error; }
+                                                            return [7 /*endfinally*/];
+                                                        case 8:
+                                                            items_1.push(obj);
+                                                            return [2 /*return*/];
+                                                    }
+                                                });
+                                            };
+                                            _10.label = 5;
+                                        case 5:
+                                            _10.trys.push([5, 10, 11, 12]);
+                                            exportItems_2 = __values(exportItems_1), exportItems_2_1 = exportItems_2.next();
+                                            _10.label = 6;
+                                        case 6:
+                                            if (!!exportItems_2_1.done) return [3 /*break*/, 9];
+                                            item = exportItems_2_1.value;
+                                            return [5 /*yield**/, _loop_1(item)];
+                                        case 7:
+                                            _10.sent();
+                                            _10.label = 8;
+                                        case 8:
+                                            exportItems_2_1 = exportItems_2.next();
+                                            return [3 /*break*/, 6];
+                                        case 9: return [3 /*break*/, 12];
+                                        case 10:
+                                            e_7_1 = _10.sent();
+                                            e_7 = { error: e_7_1 };
+                                            return [3 /*break*/, 12];
+                                        case 11:
+                                            try {
+                                                if (exportItems_2_1 && !exportItems_2_1.done && (_9 = exportItems_2.return)) _9.call(exportItems_2);
+                                            }
+                                            finally { if (e_7) throw e_7.error; }
+                                            return [7 /*endfinally*/];
+                                        case 12: return [2 /*return*/];
+                                    }
+                                });
+                            }); };
+                            _14.label = 1;
+                        case 1:
+                            if (!(pageNumber_1 * pageSize_1 < total_1)) return [3 /*break*/, 3];
+                            promises_1.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber_1, pageSize_1));
+                            pageNumber_1++;
+                            if (promises_1.length < batch) {
+                                return [3 /*break*/, 1];
+                            }
+                            return [4 /*yield*/, handleData()];
+                        case 2:
+                            _14.sent();
+                            return [3 /*break*/, 1];
+                        case 3:
+                            if (!(promises_1.length > 0)) return [3 /*break*/, 5];
+                            return [4 /*yield*/, handleData()];
+                        case 4:
+                            _14.sent();
+                            _14.label = 5;
+                        case 5:
+                            if (!isCSV) return [3 /*break*/, 7];
+                            return [4 /*yield*/, this.exportService.exportCSV({
+                                    columns: columns_2,
+                                    items: items_1,
+                                    fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName,
+                                })];
+                        case 6:
+                            _14.sent();
+                            return [2 /*return*/];
+                        case 7:
+                            sheets = [];
+                            if (!Array.isArray((_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) return [3 /*break*/, 16];
+                            _14.label = 8;
+                        case 8:
+                            _14.trys.push([8, 14, 15, 16]);
+                            _8 = __values(this.gridOption.export.sheets), _9 = _8.next();
+                            _14.label = 9;
+                        case 9:
+                            if (!!_9.done) return [3 /*break*/, 13];
+                            sheet = _9.value;
+                            if (!(sheet.name && sheet.items && sheet.fields)) return [3 /*break*/, 12];
+                            if (!Array.isArray(sheet.items)) return [3 /*break*/, 10];
+                            sheets.push({
+                                name: sheet.name,
+                                items: sheet.items,
+                                fields: sheet.fields,
+                            });
+                            return [3 /*break*/, 12];
+                        case 10:
+                            _11 = (_10 = sheets).push;
+                            _12 = {
+                                name: sheet.name
+                            };
+                            return [4 /*yield*/, sheet.items()];
+                        case 11:
+                            _11.apply(_10, [(_12.items = _14.sent(),
+                                    _12.fields = sheet.fields,
+                                    _12)]);
+                            _14.label = 12;
+                        case 12:
+                            _9 = _8.next();
+                            return [3 /*break*/, 9];
+                        case 13: return [3 /*break*/, 16];
+                        case 14:
+                            e_6_1 = _14.sent();
+                            e_6 = { error: e_6_1 };
+                            return [3 /*break*/, 16];
+                        case 15:
+                            try {
+                                if (_9 && !_9.done && (_13 = _8.return)) _13.call(_8);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                            return [7 /*endfinally*/];
+                        case 16: return [4 /*yield*/, this.exportService.export({
+                                columns: columns_2,
+                                items: items_1,
+                                fileName: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
+                                sheets: sheets,
+                            })];
+                        case 17:
+                            _14.sent();
+                            return [2 /*return*/];
+                        case 18:
+                            this.isExporting = false;
+                            this.exportTitle = "Export";
+                            this.ref.detectChanges();
+                            return [7 /*endfinally*/];
+                        case 19: return [2 /*return*/];
+                    }
+                });
+            }); });
+            _getExportColumns.set(this, function () {
+                var _a, _b;
+                var columns = __spread(_this.gridOption.columns.filter(function (e) { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); }), (((_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 columns;
+            });
+            this.exportExcel = function () {
+                __classPrivateFieldGet(_this, _onExport).call(_this);
+            };
+            this.exportCSV = function () {
+                __classPrivateFieldGet(_this, _onExport).call(_this, true);
+            };
+            this.onFilterChange = function () {
+                var _a, _b, _c, _d;
+                (_b = (_a = _this.gridFilter) === null || _a === void 0 ? void 0 : _a.updateFilter) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if ((_d = (_c = _this.gridOption) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.inlineColumn) {
+                    _this.filterRegister.value.set({
+                        columnOperator: _this.columnOperator,
+                        columnFilter: _this.columnFilter,
+                    });
+                }
+                else {
+                    _this.filterRegister.value.set({});
+                }
+            };
+            this.onExpand = function (rowData) { return __awaiter(_this, void 0, void 0, function () {
+                var _y, _z, _0, _1, _2, data;
+                return __generator(this, function (_8) {
+                    if ((_y = this.gridOption.expand) === null || _y === void 0 ? void 0 : _y.always) {
+                        return [2 /*return*/];
+                    }
+                    if (rowData.meta.expand.isExpanding) {
+                        return [2 /*return*/];
+                    }
+                    if (rowData.meta.expand.isExpanded) {
+                        rowData.meta.expand.isExpanded = false;
+                        return [2 /*return*/];
+                    }
+                    data = (_1 = (_0 = (_z = this.gridOption) === null || _z === void 0 ? void 0 : _z.expand) === null || _0 === void 0 ? void 0 : _0.onExpand) === null || _1 === void 0 ? void 0 : _1.call(_0, rowData.current);
+                    if (!((_2 = this.gridOption.expand) === null || _2 === void 0 ? void 0 : _2.multiple)) {
+                        this.items.forEach(function (item) { return (item.meta.expand.isExpanding = item.meta.expand.isExpanded = false); });
+                    }
+                    if (data instanceof Promise) {
+                        rowData.meta.expand.isExpanding = true;
+                        data
+                            .then(function (res) {
+                            rowData.meta.expand.data = res;
+                            rowData.meta.expand.isExpanded = true;
+                        })
+                            .finally(function () { return (rowData.meta.expand.isExpanding = false); });
+                    }
+                    else {
+                        rowData.meta.expand.data = data;
+                        rowData.meta.expand.isExpanded = true;
+                    }
+                    return [2 /*return*/];
+                });
+            }); };
+            this.onSelect = function (rowData) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((_b = (_a = rowData.meta.group) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) {
+                    rowData.meta.group.items.forEach(function (e) { return (e.meta.selector.isSelected = rowData.meta.selector.isSelected); });
+                    (_d = (_c = _this.gridOption.selector) === null || _c === void 0 ? void 0 : _c.onSelect) === null || _d === void 0 ? void 0 : _d.call(_c, rowData.current, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                    _this.isSelectAll = _this.items.every(function (e) { return e.meta.selector.isSelected; });
+                    __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
+                }
+                else {
+                    if ((_e = _this.gridOption.selector) === null || _e === void 0 ? void 0 : _e.single) {
+                        _this.items.filter(function (e) { return e !== rowData; }).forEach(function (e) { return (e.meta.selector.isSelected = false); });
+                        __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
+                        return;
+                    }
+                    (_g = (_f = _this.gridOption.selector) === null || _f === void 0 ? void 0 : _f.onSelect) === null || _g === void 0 ? void 0 : _g.call(_f, rowData.current, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                    _this.isSelectAll = _this.items.every(function (e) { return e.meta.selector.isSelected; });
+                    __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
+                }
+            };
+            this.onSelectAll = function () {
+                var _a, _b, _c;
+                (_a = _this.items) === null || _a === void 0 ? void 0 : _a.forEach(function (e) {
+                    var _a, _b, _c, _d;
+                    if (e.meta.selector.selectable && (!((_c = (_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.selector) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) || ((_d = e.meta.selector.actions) === null || _d === void 0 ? void 0 : _d.length))) {
+                        e.meta.selector.isSelected = _this.isSelectAll;
+                    }
+                });
+                (_c = (_b = _this.gridOption.selector) === null || _b === void 0 ? void 0 : _b.onSelectAll) === null || _c === void 0 ? void 0 : _c.call(_b, _this.items.filter(function (e) { return e.meta.selector.isSelected; }).map(function (e) { return e.current; }));
+                __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
+            };
+            this.onClearSelection = function (items) {
+                items = items || _this.items;
+                _this.isSelectAll = false;
+                items === null || items === void 0 ? void 0 : items.forEach(function (e) { return (e.meta.selector.isSelected = false); });
+                __classPrivateFieldGet(_this, _updateSelectedItems).call(_this);
+            };
+            _updateSelectedItems.set(this, function () {
+                _this.selectedItems = _this.items.filter(function (item) { return item.meta.selector.isSelected; }).map(function (item) { return item.current; });
+                _this.ref.detectChanges();
+            });
+            this.clearFilter = function () {
+                _this.filterRegister.value.remove();
+            };
+            this.setFilter = function (args) {
+                var _a, _b;
+                var _8 = args || {}, columnFilter = _8.columnFilter, externalFilter = _8.externalFilter, filterDef = _8.filterDef;
+                if (((_b = (_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.inlineColumn) && columnFilter) {
+                    _this.columnFilter = columnFilter;
+                }
+                _this.filterRegister.value.set({
+                    columnFilter: columnFilter,
+                    externalFilter: externalFilter,
+                    filterDef: filterDef,
+                });
+            };
+            this.detectChanges = function () { return _this.ref.detectChanges(); };
+        }
+        Object.defineProperty(SdTable.prototype, "_gridFilter", {
+            set: function (gridFilter) {
+                if (gridFilter && this.gridFilter !== gridFilter) {
+                    this.gridFilter = gridFilter;
+                    // this.#subscription.add(gridFilter.filterChange.pipe(
+                    //   filter(reload => reload),
+                    //   debounceTime(500),
+                    //   map(() => {
+                    //     this.#paginator.pageIndex = 0;
+                    //     this.#reload.next({
+                    //       force: false,
+                    //       source: 'FILTER'
+                    //     });
+                    //   }),
+                    // ).subscribe());
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdTable.prototype, "option", {
+            set: function (option) {
+                if (option) {
+                    option = __classPrivateFieldGet(this, _initConfiguration$1).call(this, option);
+                    this.gridOption = option;
+                    __classPrivateFieldSet(this, _loadCompleted, false);
+                    var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
+                    this.gridConfigurationObserver = configuration.observer;
+                    configuration.load();
+                    __classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdTable.prototype, "paginator", {
+            set: function (paginator) {
+                var _this = this;
+                if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
+                    __classPrivateFieldSet(this, _paginator, paginator);
+                    __classPrivateFieldGet(this, _subscription$1).add(paginator.page
+                        .pipe(operators.map(function () {
+                        __classPrivateFieldGet(_this, _reload).next({
+                            force: false,
+                        });
+                    }))
+                        .subscribe());
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdTable.prototype, "sort", {
+            set: function (sort) {
+                var _this = this;
+                if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
+                    __classPrivateFieldSet(this, _sort, sort);
+                    __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange
+                        .pipe(operators.map(function () {
+                        __classPrivateFieldGet(_this, _reload).next({
+                            force: false,
+                        });
+                    }))
+                        .subscribe());
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SdTable.prototype.ngOnInit = function () {
+            __classPrivateFieldGet(this, _initCellDef).call(this);
+        };
+        SdTable.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _reload).pipe(operators.debounceTime(200), operators.switchMap(function (data) { return __awaiter(_this, void 0, void 0, function () {
+                var filterInfo, result;
+                return __generator(this, function (_8) {
+                    switch (_8.label) {
+                        case 0:
+                            filterInfo = __classPrivateFieldGet(this, _getFilter).call(this);
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, filterInfo, !__classPrivateFieldGet(this, _loadCompleted) || data.force)];
+                        case 1:
+                            result = _8.sent();
+                            __classPrivateFieldSet(this, _loadCompleted, true);
+                            return [2 /*return*/, result];
+                    }
+                });
+            }); }))
+                .subscribe(__classPrivateFieldGet(this, _render)));
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdCellDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdFooterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(this.sdFilterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
+            __classPrivateFieldGet(this, _subscription$1).add(rxjs.combineLatest([
+                __classPrivateFieldGet(this, _optionChanges).pipe(operators.startWith(this.gridOption)),
+                this.sdFilterDefs.changes.pipe(operators.startWith(this.filterDefs)),
+            ]).subscribe(function () {
+                __classPrivateFieldGet(_this, _loadFilterRegister).call(_this);
+            }));
+            __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).subscribe(function () {
+                if (_this.filterRegister) {
+                    __classPrivateFieldGet(_this, _reload).next({
+                        force: true,
+                    });
+                }
+            }));
+            this.ref.detectChanges();
+        };
+        SdTable.prototype.ngOnDestroy = function () {
+            __classPrivateFieldGet(this, _subscription$1).unsubscribe();
+        };
+        Object.defineProperty(SdTable.prototype, "gridItems", {
+            get: function () {
+                return this.items.map(function (item) { return item.current; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SdTable;
+    }());
+    _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakMap(), _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _reload = new WeakMap(), _loadCompleted = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration$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(), _getExportColumns = new WeakMap(), _updateSelectedItems = new WeakMap();
+    SdTable.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-table',
+                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"gridConfiguration | sdGridConfigurationResult : gridOption : sdSubInformation as configuration\">\r\n    <sd-grid-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      #gridFilter>\r\n    </sd-grid-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 *ngIf=\"isLoading\"></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              *ngIf=\"items?.length; else elseEmpty\"\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                  cdkDrag\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=\"false\"\r\n                      role=\"presentation\"\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?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\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?.inlineColumn && columnOperator\"\r\n                      [value]=\"columnFilter[column.field]\"\r\n                      [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                      [columnFilter]=\"columnFilter\"\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            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th\r\n                    class=\"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\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th\r\n                    class=\"px-8\"\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\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\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                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"sdEmptyData.templateRef; context: { item: item }\"> </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\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\"></td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container\r\n                  *ngFor=\"let column of configuration.columns\"\r\n                  [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\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                  </th>\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=\"c-th px-8 py-8\"\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                        [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?.inlineColumn && columnOperator\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [(inlineOperator)]=\"columnOperator[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\">\r\n                      </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\" [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?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\"\r\n                        [columnFilter]=\"columnFilter\"\r\n                        [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\"></tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></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\r\n              *ngIf=\"gridFilter && !gridOption.filter?.inlineColumn\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Filter' | sdTranslate\"\r\n              icon=\"filter_alt\"\r\n              size=\"sm\"\r\n              (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button\r\n              *ngIf=\"gridOption.reload?.visible\"\r\n              class=\"mr-10\"\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\r\n                  class=\"mr-10\"\r\n                  [title]=\"exportTitle | sdTranslate\"\r\n                  icon=\"get_app\"\r\n                  size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\"\r\n                  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=\"gridOption.config?.visible\"\r\n              class=\"mr-10\"\r\n              [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\"\r\n              size=\"sm\"\r\n              (action)=\"popupGridConfiguration.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-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration> </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    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)')),
+                        ]),
+                    ],
+                    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}@-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\")}"]
+                },] }
+    ];
+    SdTable.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: undefined, decorators: [{ type: core.Inject, args: [TABLE_CONFIG,] }, { type: core.Optional }] },
+        { type: SdTableConfigurationService },
+        { type: _export.SdExportService },
+        { type: notify.SdNotifyService },
+        { type: SdColumnValuesPipe },
+        { type: SdTableFilterService }
+    ]; };
+    SdTable.propDecorators = {
+        sdScroll: [{ type: core.ViewChild, args: [common.SdScrollDirective,] }],
+        quickAction: [{ type: core.ViewChild, args: [quickAction.SdQuickAction,] }],
+        _gridFilter: [{ type: core.ViewChild, args: [SdGridFilter,] }],
+        option: [{ type: core.Input }],
+        paginator: [{ type: core.ViewChild, args: [paginator.MatPaginator,] }],
+        sort: [{ type: core.ViewChild, args: [sort.MatSort,] }],
+        sdSubInformation: [{ type: core.ContentChild, args: [SdMaterialSubInformationDefDirective,] }],
+        sdEmptyData: [{ type: core.ContentChild, args: [SdMaterialEmptyDataDefDirective,] }],
+        sdCellDefs: [{ type: core.ContentChildren, args: [SdMaterialCellDefDirective,] }],
+        sdFooterDefs: [{ type: core.ContentChildren, args: [SdMaterialFooterDefDirective,] }],
+        sdFilterDefs: [{ type: core.ContentChildren, args: [SdMaterialFilterDefDirective,] }]
+    };
+
+    var SdCommandFilterPipe = /** @class */ (function () {
+        function SdCommandFilterPipe() {
+        }
+        SdCommandFilterPipe.prototype.transform = function (item, commands) {
+            return __awaiter(this, void 0, void 0, function () {
+                var results, commands_1, commands_1_1, command, flag, hidden, isHidden, children, _a, _b, childCommand, hidden_1, isHidden, e_1_1, e_2_1;
+                var e_2, _c, e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            results = [];
+                            if (!commands) {
+                                return [2 /*return*/, results];
+                            }
+                            _e.label = 1;
+                        case 1:
+                            _e.trys.push([1, 22, 23, 24]);
+                            commands_1 = __values(commands), commands_1_1 = commands_1.next();
+                            _e.label = 2;
+                        case 2:
+                            if (!!commands_1_1.done) return [3 /*break*/, 21];
+                            command = commands_1_1.value;
+                            flag = false;
+                            hidden = command.hidden;
+                            if (!(hidden === undefined)) return [3 /*break*/, 3];
+                            flag = true;
+                            return [3 /*break*/, 7];
+                        case 3:
+                            if (!(typeof (hidden) === 'boolean')) return [3 /*break*/, 4];
+                            if (!hidden) {
+                                flag = true;
+                            }
+                            return [3 /*break*/, 7];
+                        case 4:
+                            isHidden = hidden(item);
+                            if (!(isHidden instanceof Promise)) return [3 /*break*/, 6];
+                            return [4 /*yield*/, isHidden];
+                        case 5:
+                            if (!(_e.sent())) {
+                                flag = true;
+                            }
+                            return [3 /*break*/, 7];
+                        case 6:
+                            if (!isHidden) {
+                                flag = true;
+                            }
+                            _e.label = 7;
+                        case 7:
+                            if (!flag) return [3 /*break*/, 20];
+                            if (!('children' in command)) return [3 /*break*/, 19];
+                            children = [];
+                            _e.label = 8;
+                        case 8:
+                            _e.trys.push([8, 16, 17, 18]);
+                            _a = (e_1 = void 0, __values(command.children)), _b = _a.next();
+                            _e.label = 9;
+                        case 9:
+                            if (!!_b.done) return [3 /*break*/, 15];
+                            childCommand = _b.value;
+                            hidden_1 = childCommand.hidden;
+                            if (!(hidden_1 === undefined)) return [3 /*break*/, 10];
+                            children.push(childCommand);
+                            return [3 /*break*/, 14];
+                        case 10:
+                            if (!(typeof (hidden_1) === 'boolean')) return [3 /*break*/, 11];
+                            if (!hidden_1) {
+                                children.push(childCommand);
+                            }
+                            return [3 /*break*/, 14];
+                        case 11:
+                            isHidden = hidden_1(item);
+                            if (!(isHidden instanceof Promise)) return [3 /*break*/, 13];
+                            return [4 /*yield*/, isHidden];
+                        case 12:
+                            if (!(_e.sent())) {
+                                children.push(childCommand);
+                            }
+                            return [3 /*break*/, 14];
+                        case 13:
+                            if (!isHidden) {
+                                children.push(childCommand);
+                            }
+                            _e.label = 14;
+                        case 14:
+                            _b = _a.next();
+                            return [3 /*break*/, 9];
+                        case 15: return [3 /*break*/, 18];
+                        case 16:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 18];
+                        case 17:
+                            try {
+                                if (_b && !_b.done && (_d = _a.return)) _d.call(_a);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 18:
+                            if (children.length > 0) {
+                                results.push(Object.assign(Object.assign({}, command), { children: children }));
+                            }
+                            return [3 /*break*/, 20];
+                        case 19:
+                            results.push(command);
+                            _e.label = 20;
+                        case 20:
+                            commands_1_1 = commands_1.next();
+                            return [3 /*break*/, 2];
+                        case 21: return [3 /*break*/, 24];
+                        case 22:
+                            e_2_1 = _e.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 24];
+                        case 23:
+                            try {
+                                if (commands_1_1 && !commands_1_1.done && (_c = commands_1.return)) _c.call(commands_1);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                            return [7 /*endfinally*/];
+                        case 24: return [2 /*return*/, results];
+                    }
+                });
+            });
+        };
+        return SdCommandFilterPipe;
+    }());
+    SdCommandFilterPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'commandFilter'
+                },] }
+    ];
+
+    var SdCommandDisablePipe = /** @class */ (function () {
+        function SdCommandDisablePipe() {
+        }
+        SdCommandDisablePipe.prototype.transform = function (item, command) {
+            if (!(command === null || command === void 0 ? void 0 : command.disabled)) {
+                return false;
+            }
+            if (typeof (command.disabled) === 'boolean') {
+                return command.disabled;
+            }
+            return command.disabled(item);
+        };
+        return SdCommandDisablePipe;
+    }());
+    SdCommandDisablePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'commandDisable'
+                },] }
+    ];
+
+    var SdCommandIconPipe = /** @class */ (function () {
+        function SdCommandIconPipe() {
+        }
+        SdCommandIconPipe.prototype.transform = function (command, item) {
+            if (!(command === null || command === void 0 ? void 0 : command.icon)) {
+                return '';
+            }
+            if (typeof (command.icon) === 'string') {
+                return command.icon;
+            }
+            return command.icon(item);
+        };
+        return SdCommandIconPipe;
+    }());
+    SdCommandIconPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'commandIcon'
+                },] }
+    ];
+
+    var SdCommandTitlePipe = /** @class */ (function () {
+        function SdCommandTitlePipe() {
+        }
+        SdCommandTitlePipe.prototype.transform = function (command, item) {
+            if (!(command === null || command === void 0 ? void 0 : command.title)) {
+                return '';
+            }
+            if (typeof (command.title) === 'string') {
+                return command.title;
+            }
+            return command.title(item);
+        };
+        return SdCommandTitlePipe;
+    }());
+    SdCommandTitlePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'commandTitle'
+                },] }
+    ];
+
+    var SdColumnHtmlTemplatePipe = /** @class */ (function () {
+        function SdColumnHtmlTemplatePipe(deviceService) {
+            this.isMobileOrTablet = false;
+            this.isMobileOrTablet = !deviceService.isDesktop();
+        }
+        SdColumnHtmlTemplatePipe.prototype.transform = function (value, rowData, column) {
+            if (typeof (column === null || column === void 0 ? void 0 : column.htmlTemplate) !== 'function') {
+                return value;
+            }
+            return column === null || column === void 0 ? void 0 : column.htmlTemplate(value, rowData, this.isMobileOrTablet);
+        };
+        return SdColumnHtmlTemplatePipe;
+    }());
+    SdColumnHtmlTemplatePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnHtmlTemplate'
+                },] }
+    ];
+    SdColumnHtmlTemplatePipe.ctorParameters = function () { return [
+        { type: ngxDeviceDetector.DeviceDetectorService }
+    ]; };
+
+    var SdDesktopCellView = /** @class */ (function () {
+        function SdDesktopCellView() {
+        }
+        return SdDesktopCellView;
+    }());
+    SdDesktopCellView.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-desktop-cell-view',
+                    template: "<ng-container *ngIf=\"item.current[column.field] | cellView : item : column : gridOption | async as view\">\r\n  <ng-container *ngIf=\"view.display.hasHtml; else useValue\">\r\n    <div\r\n      *ngIf=\"view.click\"\r\n      (click)=\"view.click()\"\r\n      class=\"text-break cursor-pointer\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n    <div\r\n      *ngIf=\"!view.click\"\r\n      class=\"text-break\"\r\n      [matTooltip]=\"view.tooltip\"\r\n      [class.text-center]=\"view.display.align === 'center'\"\r\n      [class.text-right]=\"view.display.align === 'right'\"\r\n      [innerHTML]=\"view.display.html | safeHtml\"></div>\r\n  </ng-container>\r\n  <ng-template #useValue>\r\n    <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n      <sd-badge\r\n        *ngIf=\"view.display.value\"\r\n        [type]=\"view.badge.type\"\r\n        [title]=\"view.display.value\"\r\n        [color]=\"view.badge.color\"\r\n        [icon]=\"view.badge.icon\"\r\n        [tooltip]=\"view.tooltip\"\r\n        (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n    </ng-container>\r\n    <ng-template #noBadge>\r\n      <div\r\n        class=\"text-break\"\r\n        [class.text-center]=\"view.display.align === 'center'\"\r\n        [class.text-right]=\"view.display.align === 'right'\"\r\n        [matTooltip]=\"view.tooltip\">\r\n        <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.display.value }}</a>\r\n        <ng-container *ngIf=\"!view.click\">{{ view.display.value }} </ng-container>\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n</ng-container>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
+                },] }
+    ];
+    SdDesktopCellView.ctorParameters = function () { return []; };
+    SdDesktopCellView.propDecorators = {
+        sdId: [{ type: core.Input }],
+        key: [{ type: core.Input }],
+        column: [{ type: core.Input }],
+        item: [{ type: core.Input }],
+        gridOption: [{ type: core.Input }]
+    };
+
+    var SdColumnTransformPipe = /** @class */ (function () {
+        function SdColumnTransformPipe(columnValuesPipe) {
+            this.columnValuesPipe = columnValuesPipe;
+        }
+        SdColumnTransformPipe.prototype.transform = function (value, rowData, column, key) {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (column === null || column === void 0 ? void 0 : column.transform) {
+                                return [2 /*return*/, column.transform(value, rowData)];
+                            }
+                            if (!(column.type === 'values')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
+                        case 1: return [2 /*return*/, _c.sent()];
+                        case 2:
+                            if (column.type === 'number' && Number.isNumber(value)) {
+                                return [2 /*return*/, Number.toVNCurrency(value)]; // this.decimalPipe.transform(value, '1.0-2');
+                            }
+                            if (column.type === 'bool') {
+                                return [2 /*return*/, value === true ? (((_a = column.option) === null || _a === void 0 ? void 0 : _a.displayOnTrue) || 'True') : (((_b = column.option) === null || _b === void 0 ? void 0 : _b.displayOnFalse) || 'False')];
+                            }
+                            return [2 /*return*/, value];
+                    }
+                });
+            });
+        };
+        return SdColumnTransformPipe;
+    }());
+    SdColumnTransformPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnTransform'
+                },] }
+    ];
+    SdColumnTransformPipe.ctorParameters = function () { return [
+        { type: SdColumnValuesPipe }
+    ]; };
+
+    var SdFilterExternalPipe = /** @class */ (function () {
+        function SdFilterExternalPipe() {
+        }
+        SdFilterExternalPipe.prototype.transform = function (externalFilters, field) {
+            var e_1, _a;
+            var results = [];
+            if (!externalFilters) {
+                return results;
+            }
+            try {
+                for (var externalFilters_1 = __values(externalFilters), externalFilters_1_1 = externalFilters_1.next(); !externalFilters_1_1.done; externalFilters_1_1 = externalFilters_1.next()) {
+                    var filter = externalFilters_1_1.value;
+                    results.push(filter);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (externalFilters_1_1 && !externalFilters_1_1.done && (_a = externalFilters_1.return)) _a.call(externalFilters_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return results.filter(function (e) { return !field || e.field === field; });
+        };
+        return SdFilterExternalPipe;
+    }());
+    SdFilterExternalPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'sdFilterExternal'
+                },] }
+    ];
+
+    var SdFilterColumnPipe = /** @class */ (function () {
+        function SdFilterColumnPipe() {
+        }
+        SdFilterColumnPipe.prototype.transform = function (columns, field) {
+            var e_1, _c, e_2, _d;
+            var _a, _b;
+            var results = [];
+            if (!columns) {
+                return results;
+            }
+            try {
+                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;
+                    if (column.type === 'children') {
+                        try {
+                            for (var _e = (e_2 = void 0, __values(column === null || column === void 0 ? void 0 : column.children)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var columnChildren = _f.value;
+                                if (!((_a = columnChildren.filter) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                                    results.push(columnChildren);
+                                }
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                        continue;
+                    }
+                    if (!((_b = column.filter) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                        results.push(column);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_c = columns_1.return)) _c.call(columns_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return results.filter(function (e) { return !field || e.field === field; });
+        };
+        return SdFilterColumnPipe;
+    }());
+    SdFilterColumnPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'sdFilterColumn'
+                },] }
+    ];
+
+    var _isMobileOrTablet;
+    var SdColumnChildrenFilterPipe = /** @class */ (function () {
+        function SdColumnChildrenFilterPipe(deviceService) {
+            _isMobileOrTablet.set(this, false);
+            __classPrivateFieldSet(this, _isMobileOrTablet, !deviceService.isDesktop());
+        }
+        SdColumnChildrenFilterPipe.prototype.transform = function (columns, item) {
+            var _this = this;
+            return columns.filter(function (column) {
+                var _a, _b;
+                var value = item === null || item === void 0 ? void 0 : item[column.field];
+                var transformValue = (_a = column.transform) === null || _a === void 0 ? void 0 : _a.call(column, item[column.field], item);
+                var templateValue = (_b = column.htmlTemplate) === null || _b === void 0 ? void 0 : _b.call(column, item[column.field], item, __classPrivateFieldGet(_this, _isMobileOrTablet));
+                return (value !== undefined && value !== null && value !== '')
+                    || (transformValue !== undefined && transformValue !== null && transformValue !== '')
+                    || (templateValue !== undefined && templateValue !== null && templateValue !== '');
+            });
+        };
+        return SdColumnChildrenFilterPipe;
+    }());
+    _isMobileOrTablet = new WeakMap();
+    SdColumnChildrenFilterPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnChildrenFilter'
+                },] }
+    ];
+    SdColumnChildrenFilterPipe.ctorParameters = function () { return [
+        { type: ngxDeviceDetector.DeviceDetectorService }
+    ]; };
+
+    var SdDesktopCommand = /** @class */ (function () {
+        function SdDesktopCommand() {
+            this.commands = [];
+        }
+        return SdDesktopCommand;
+    }());
+    SdDesktopCommand.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-desktop-command',
+                    template: "<ng-container *ngIf=\"item | commandFilter:commands | async; $implicit as filteredCommands\">\r\n  <ng-container *ngFor=\"let command of filteredCommands\">\r\n    <ng-container *ngIf=\"command?.click; else elseChildren\">\r\n      <button (click)=\"command.click(item)\" [matTooltip]=\"command | commandTitle:item\" aria-hidden=\"true\"\r\n        [disabled]=\"item | commandDisable:command\" mat-icon-button>\r\n        <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n    <ng-template #elseChildren>\r\n      <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\r\n        <mat-icon *ngIf=\"command?.icon\" class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!command?.icon\" class=\"c-icon\">more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <span>\r\n          <button *ngFor=\"let childCommand of command.children\" mat-menu-item (click)=\"childCommand.click(item)\"\r\n            [disabled]=\"item | commandDisable:childCommand\">\r\n            <ng-container *ngIf=\"!childCommand.htmlTemplate\">\r\n              <mat-icon [fontSet]=\"command.fontSet\" class=\"c-icon\">{{childCommand | commandIcon:item}}\r\n              </mat-icon>\r\n              <span> {{childCommand | commandTitle:item}}</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"childCommand.htmlTemplate\">\r\n              <div [innerHTML]=\"childCommand.htmlTemplate(item)\"></div>\r\n            </ng-container>\r\n          </button>\r\n        </span>\r\n      </mat-menu>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{align-items:center;display:flex}mat-icon.c-icon{color:rgba(0,0,0,.54)!important}"]
+                },] }
+    ];
+    SdDesktopCommand.ctorParameters = function () { return []; };
+    SdDesktopCommand.propDecorators = {
+        item: [{ type: core.Input }],
+        commands: [{ type: core.Input }]
+    };
+
+    var SdColumnBadgePipe = /** @class */ (function () {
+        function SdColumnBadgePipe() {
+        }
+        SdColumnBadgePipe.prototype.transform = function (value, rowData, column) {
+            var _a, _b, _c;
+            if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
+                return {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: column.badge(value, rowData),
+                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
+                };
+            }
+            if (column.type === 'number' && (column === null || column === void 0 ? void 0 : column.badge)) {
+                return {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: column.badge(value, rowData),
+                    icon: (_b = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _b === void 0 ? void 0 : _b.call(column, value, rowData)
+                };
+            }
+            if (column.type === 'bool') {
+                return {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: !!value ? 'success' : 'danger',
+                    icon: null
+                };
+            }
+            if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
+                return {
+                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                    color: column.badge(value, rowData),
+                    icon: (_c = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _c === void 0 ? void 0 : _c.call(column, value, rowData)
+                };
+            }
+            return null;
+        };
+        return SdColumnBadgePipe;
+    }());
+    SdColumnBadgePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnBadge'
+                },] }
+    ];
+    SdColumnBadgePipe.ctorParameters = function () { return []; };
+
+    var SdGridConfigurationResultPipe = /** @class */ (function () {
+        function SdGridConfigurationResultPipe(gridConfigurationService) {
+            this.gridConfigurationService = gridConfigurationService;
+        }
+        SdGridConfigurationResultPipe.prototype.transform = function (configuration, gridOption, sdSubInformation) {
+            var a = this.gridConfigurationService.generateConfigurationResult(configuration, gridOption, sdSubInformation);
+            console.log(a);
+            return a;
+        };
+        return SdGridConfigurationResultPipe;
+    }());
+    SdGridConfigurationResultPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'sdGridConfigurationResult'
+                },] }
+    ];
+    SdGridConfigurationResultPipe.ctorParameters = function () { return [
+        { type: SdTableConfigurationService }
+    ]; };
+
+    var _cache$3;
+    var SdPopupGridConfiguration = /** @class */ (function () {
+        function SdPopupGridConfiguration(ref, notifyService, translateService, gridConfigurationService) {
+            var _this = this;
+            this.ref = ref;
+            this.notifyService = notifyService;
+            this.translateService = translateService;
+            this.gridConfigurationService = gridConfigurationService;
+            this.changes = new core.EventEmitter();
+            _cache$3.set(this, void 0);
+            this.isCreatingColumn = false;
+            this.selected = {};
+            this.disabledDrag = true;
+            this.open = function () { return __awaiter(_this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            __classPrivateFieldSet(this, _cache$3, this.gridConfigurationService.init(this.key, this.gridOption));
+                            _a = this;
+                            return [4 /*yield*/, __classPrivateFieldGet(this, _cache$3).get()];
+                        case 1:
+                            _a.configuration = _b.sent();
+                            this.modal.open();
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            this.onSave = function () {
+                __classPrivateFieldGet(_this, _cache$3).set(_this.configuration);
+                _this.modal.close();
+                _this.ref.detectChanges();
+            };
+            this.onReset = function () { return __awaiter(_this, void 0, void 0, function () {
+                var translate;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    translate = this.translateService.translate;
+                    this.notifyService.confirm(translate('Reset grid configuration to default')).then(function () {
+                        __classPrivateFieldGet(_this, _cache$3).remove();
+                        _this.modal.close();
+                        _this.ref.detectChanges();
+                    });
+                    return [2 /*return*/];
+                });
+            }); };
+            this.createColumn = function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.selected = {};
+                    this.isCreatingColumn = true;
+                    return [2 /*return*/];
+                });
+            }); };
+            this.confirm = function () { return __awaiter(_this, void 0, void 0, function () {
+                var generatedColumn;
+                return __generator(this, function (_a) {
+                    generatedColumn = {
+                        origin: {
+                            field: uuid.v4(),
+                            title: 'Generated',
+                            width: '300px',
+                        },
+                        fixed: false,
+                        invisible: false,
+                        title: 'Generated',
+                        width: '300px',
+                    };
+                    this.configuration.columns.push(generatedColumn);
+                    this.configuration = __classPrivateFieldGet(this, _cache$3).set(this.configuration);
+                    this.isCreatingColumn = false;
+                    return [2 /*return*/];
+                });
+            }); };
+        }
+        SdPopupGridConfiguration.prototype.ngOnInit = function () { };
+        SdPopupGridConfiguration.prototype.mouseUp = function (event) {
+            this.disabledDrag = true;
+        };
+        SdPopupGridConfiguration.prototype.dropTable = function (event) {
+            dragDrop.moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
+            this.table.renderRows();
+        };
+        SdPopupGridConfiguration.prototype.handleMouseDown = function () {
+            this.disabledDrag = false;
+        };
+        SdPopupGridConfiguration.prototype.handleMouseUp = function () {
+            this.disabledDrag = true;
+        };
+        return SdPopupGridConfiguration;
+    }());
+    _cache$3 = new WeakMap();
+    SdPopupGridConfiguration.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-popup-grid-configuration',
+                    template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height:70vh\">\r\n        <table #table mat-table [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\">#\r\n            </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 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\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}}\r\n            </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}}\r\n            </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' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n              </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' |\r\n              sdTranslate}}\r\n            </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 mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isCreatingColumn\">\r\n      <div class=\"c-table\" style=\"max-height:50vh\">\r\n        <table mat-table [dataSource]=\"configuration.columns\">\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\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}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <ng-container *ngIf=\"!isCreatingColumn\">\r\n      <!-- <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button> -->\r\n      <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isCreatingColumn\">\r\n      <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n  </sd-modal-footer>\r\n</sd-modal>",
+                    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}"]
+                },] }
+    ];
+    SdPopupGridConfiguration.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: notify.SdNotifyService },
+        { type: translate.SdTranslateService },
+        { type: SdTableConfigurationService }
+    ]; };
+    SdPopupGridConfiguration.propDecorators = {
+        gridOption: [{ type: core.Input }],
+        key: [{ type: core.Input }],
+        modal: [{ type: core.ViewChild, args: ['modal',] }],
+        table: [{ type: core.ViewChild, args: ['table',] }],
+        mouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
+    };
+
+    var SdColumnTooltipPipe = /** @class */ (function () {
+        function SdColumnTooltipPipe() {
+        }
+        SdColumnTooltipPipe.prototype.transform = function (value, rowData, column) {
+            if (column === null || column === void 0 ? void 0 : column.tooltip) {
+                return column.tooltip(value, rowData);
+            }
+            return null;
+        };
+        return SdColumnTooltipPipe;
+    }());
+    SdColumnTooltipPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'columnTooltip'
+                },] }
+    ];
+    SdColumnTooltipPipe.ctorParameters = function () { return []; };
+
+    var _convert;
+    var SdSelectionActionFilterPipe = /** @class */ (function () {
+        function SdSelectionActionFilterPipe() {
+            var _this = this;
+            _convert.set(this, function (action) {
+                if ('children' in action) {
+                    return {
+                        title: action.title,
+                        icon: action.icon,
+                        fontSet: action.fontSet,
+                        tooltip: action.tooltip,
+                        color: action.color,
+                        type: action.type,
+                        children: action.children.map(function (e) { return ({
+                            title: e.title,
+                            icon: e.icon,
+                            color: action.color,
+                            type: action.type,
+                            fontSet: e.fontSet,
+                            tooltip: e.tooltip,
+                            click: e.click
+                        }); })
+                    };
+                }
+                return {
+                    title: action.title,
+                    icon: action.icon,
+                    color: action.color,
+                    type: action.type,
+                    fontSet: action.fontSet,
+                    tooltip: action.tooltip,
+                    click: action.click
+                };
+            });
+            this.transform = function (selectedItems, actions) {
+                var e_1, _a;
+                var results = [];
+                if (!(actions === null || actions === void 0 ? void 0 : actions.length) || !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)) {
+                    return [];
+                }
+                var _loop_1 = function (action) {
+                    var e_2, _a;
+                    if ('children' in action) {
+                        var children = [];
+                        var _loop_2 = function (childAction) {
+                            var key = hash__default['default'](childAction);
+                            if (selectedItems.every(function (e) { return e.meta.selector.actions.includes(key); })) {
+                                children.push(childAction);
+                            }
+                        };
+                        try {
+                            for (var _b = (e_2 = void 0, __values(action.children)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                var childAction = _c.value;
+                                _loop_2(childAction);
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                        if (children.length > 0) {
+                            results.push(Object.assign(Object.assign({}, action), { children: children }));
+                        }
+                    }
+                    else {
+                        var key_1 = hash__default['default'](action);
+                        if (selectedItems.every(function (e) { return e.meta.selector.actions.includes(key_1); })) {
+                            results.push(action);
+                        }
+                    }
+                };
+                try {
+                    for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
+                        var action = actions_1_1.value;
+                        _loop_1(action);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return results.map(function (result) { return __classPrivateFieldGet(_this, _convert).call(_this, result); });
+            };
+        }
+        return SdSelectionActionFilterPipe;
+    }());
+    _convert = new WeakMap();
+    SdSelectionActionFilterPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'selectionActionFilter'
+                },] }
+    ];
+
+    var SdSelectionDisablePipe = /** @class */ (function () {
+        function SdSelectionDisablePipe() {
+            this.transform = function (selectedItems, rowData, selection) {
+                var e_1, _a, e_2, _b;
+                var disabled = selection.disabled, actions = selection.actions;
+                if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
+                    if (!disabled) {
+                        rowData.meta.selector.selectable = true;
+                        return false;
+                    }
+                    rowData.meta.selector.selectable = !disabled(rowData, selectedItems);
+                    return !rowData.meta.selector.selectable;
+                }
+                // Lọc các action theo selectedItems hiện tại
+                var availableActions = actions.filter(function (action) {
+                    var e_3, _a;
+                    if ('children' in action) {
+                        var _loop_1 = function (childAction) {
+                            var key = hash__default['default'](childAction);
+                            if (selectedItems.every(function (e) { return e.meta.selector.actions.includes(key); })) {
+                                return { value: true };
+                            }
+                        };
+                        try {
+                            for (var _b = __values(action.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                var childAction = _c.value;
+                                var state_1 = _loop_1(childAction);
+                                if (typeof state_1 === "object")
+                                    return state_1.value;
+                            }
+                        }
+                        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                        finally {
+                            try {
+                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                        }
+                        return false;
+                    }
+                    else {
+                        var key_1 = hash__default['default'](action);
+                        return selectedItems.every(function (e) { return e.meta.selector.actions.includes(key_1); });
+                    }
+                });
+                try {
+                    // Kiểm tra rowData có action nào thỏa hay ko, nếu ko thì disabled
+                    for (var availableActions_1 = __values(availableActions), availableActions_1_1 = availableActions_1.next(); !availableActions_1_1.done; availableActions_1_1 = availableActions_1.next()) {
+                        var action = availableActions_1_1.value;
+                        if ('children' in action) {
+                            try {
+                                for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                    var childAction = _d.value;
+                                    if (rowData.meta.selector.actions.includes(hash__default['default'](childAction))) {
+                                        return false;
+                                    }
+                                }
+                            }
+                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            finally {
+                                try {
+                                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                                }
+                                finally { if (e_2) throw e_2.error; }
+                            }
+                        }
+                        else {
+                            if (rowData.meta.selector.actions.includes(hash__default['default'](action))) {
+                                return false;
+                            }
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (availableActions_1_1 && !availableActions_1_1.done && (_a = availableActions_1.return)) _a.call(availableActions_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return true;
+            };
+        }
+        return SdSelectionDisablePipe;
+    }());
+    SdSelectionDisablePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'selectionDisable'
+                },] }
+    ];
+
+    var SdSelectionVisibleSelectAllPipe = /** @class */ (function () {
+        function SdSelectionVisibleSelectAllPipe() {
+            var _this = this;
+            this.transform = function (items, selection) { return __awaiter(_this, void 0, void 0, function () {
+                var actions, first, _loop_1, _b, _c, action, state_1;
+                var e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            actions = selection.actions;
+                            if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
+                                return [2 /*return*/, true];
+                            }
+                            if (!items.length) {
+                                return [2 /*return*/, false];
+                            }
+                            if (actions.some(function (e) { return ('children' in e && e.children.some(function (e1) { return e1.isGrouped; })) || e.isGrouped; })) {
+                                return [2 /*return*/, false];
+                            }
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 500); })];
+                        case 1:
+                            _e.sent();
+                            first = items.find(function (t) { var _a; return (_a = t.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length; });
+                            if (first) {
+                                _loop_1 = function (action) {
+                                    if (items.filter(function (t) { var _a; return (_a = t.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length; }).every(function (e) { return e.meta.selector.actions.includes(action); })) {
+                                        return { value: true };
+                                    }
+                                };
+                                try {
+                                    for (_b = __values(first.meta.selector.actions), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                        action = _c.value;
+                                        state_1 = _loop_1(action);
+                                        if (typeof state_1 === "object")
+                                            return [2 /*return*/, state_1.value];
+                                    }
+                                }
+                                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                                finally {
+                                    try {
+                                        if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                                    }
+                                    finally { if (e_1) throw e_1.error; }
+                                }
+                            }
+                            return [2 /*return*/, false];
+                    }
+                });
+            }); };
+        }
+        return SdSelectionVisibleSelectAllPipe;
+    }());
+    SdSelectionVisibleSelectAllPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'selectionVisibleSelectAll'
+                },] }
+    ];
+
+    var SdDesktopCell = /** @class */ (function () {
+        function SdDesktopCell() {
+            this.cellDef = {};
+        }
+        return SdDesktopCell;
+    }());
+    SdDesktopCell.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-desktop-cell',
+                    template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n  <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item, column: column, idx: idx }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n  *ngIf=\"!cellDef[column.field]\"\r\n  [sdId]=\"item.meta.id\"\r\n  [key]=\"key\"\r\n  [column]=\"column\"\r\n  [gridOption]=\"gridOption\"\r\n  [item]=\"item\">\r\n</sd-desktop-cell-view>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    SdDesktopCell.ctorParameters = function () { return []; };
+    SdDesktopCell.propDecorators = {
+        sdId: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        key: [{ type: core.Input }],
+        column: [{ type: core.Input }],
+        item: [{ type: core.Input }],
+        gridOption: [{ type: core.Input }],
+        cellDef: [{ type: core.Input }],
+        idx: [{ type: core.Input }]
+    };
+
+    var SdFilterOperators = [
+        {
+            value: 'EQUAL',
+            symbol: '=',
+            display: 'Bằng',
+        },
+        {
+            value: 'NOT_EQUAL',
+            symbol: '≠',
+            display: 'Không bằng',
+        },
+        {
+            value: 'GREATER_THAN',
+            symbol: '>',
+            display: 'Lớn hơn',
+        },
+        {
+            value: 'LESS_THAN',
+            symbol: '<',
+            display: 'Nhỏ hơn',
+        },
+        {
+            value: 'GREATER_OR_EQUAL',
+            symbol: '≥',
+            display: 'Lớn hơn, hoặc bằng'
+        },
+        {
+            value: 'LESS_OR_EQUAL',
+            symbol: '≤',
+            display: 'Nhỏ hơn, hoặc bằng'
+        },
+        {
+            value: 'CONTAIN',
+            symbol: 'join_inner',
+            display: 'Chứa',
+        },
+        {
+            value: 'NOT_CONTAIN',
+            symbol: 'join',
+            display: 'Không chứa',
+        },
+        {
+            value: 'START_WITH',
+            symbol: 'line_start_circle',
+            display: 'Bắt đầu bởi'
+        },
+        {
+            value: 'END_WITH',
+            symbol: 'line_end_circle',
+            display: 'Kết thúc bởi'
+        },
+        {
+            value: 'IN',
+            symbol: 'checklist_rtl',
+            display: 'Nằm trong'
+        },
+        {
+            value: 'NOT_IN',
+            symbol: 'event_list',
+            display: 'Không nằm trong'
+        },
+    ];
+
+    var _inlineOperator_1, _valueChanges, _subcription;
+    var SdColumnInlineFilter = /** @class */ (function () {
+        function SdColumnInlineFilter(ref) {
+            var _this = this;
+            this.ref = ref;
+            this.inlineSymbol = 'filter_alt';
+            _inlineOperator_1.set(this, void 0);
+            this.inlineOperatorChange = new core.EventEmitter();
+            this.columnFilter = {};
+            this.operators = [];
+            this.filterChange = new core.EventEmitter();
+            _valueChanges.set(this, new rxjs.Subject());
+            _subcription.set(this, new rxjs.Subscription());
+            this.onFilterChange = function () {
+                _this.filterChange.emit();
+            };
+            this.onChangeOperator = function (operator) {
+                if (operator) {
+                    __classPrivateFieldSet(_this, _inlineOperator_1, operator.value);
+                    _this.inlineSymbol = operator.symbol;
+                }
+                else {
+                    __classPrivateFieldSet(_this, _inlineOperator_1, null);
+                    _this.inlineSymbol = 'filter_alt';
+                }
+                _this.inlineOperatorChange.emit(__classPrivateFieldGet(_this, _inlineOperator_1));
+                _this.ref.markForCheck();
+            };
+        }
+        SdColumnInlineFilter.prototype._value = function (value) {
+            this.value = value;
+            __classPrivateFieldGet(this, _valueChanges).next();
+        };
+        Object.defineProperty(SdColumnInlineFilter.prototype, "_inlineOperator", {
+            set: function (inlineOperator) {
+                var _a, _b;
+                if (__classPrivateFieldGet(this, _inlineOperator_1) !== inlineOperator) {
+                    __classPrivateFieldSet(this, _inlineOperator_1, inlineOperator);
+                    this.inlineSymbol = (_b = (_a = SdFilterOperators.find(function (e) { return e.value === inlineOperator; })) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : 'filter_alt';
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdColumnInlineFilter.prototype, "_columnFilter", {
+            set: function (columnFilter) {
+                this.columnFilter = columnFilter || {};
+                __classPrivateFieldGet(this, _valueChanges).next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SdColumnInlineFilter.prototype, "_column", {
+            set: function (column) {
+                var _a, _b, _c;
+                this.column = column;
+                if (!((_a = column === null || column === void 0 ? void 0 : column.filter) === null || _a === void 0 ? void 0 : _a.disabled) && ((_c = (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.operator) === null || _c === void 0 ? void 0 : _c.enable)) {
+                    this.operators = SdFilterOperators.filter(function (e) { var _a, _b; return (_b = (_a = column.filter.operator.list) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, e.value); });
+                }
+                else {
+                    this.operators = [];
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SdColumnInlineFilter.prototype.ngOnInit = function () {
+            var _this = this;
+            __classPrivateFieldGet(this, _subcription).add(__classPrivateFieldGet(this, _valueChanges).pipe(operators.startWith(this.columnFilter)).subscribe(function () {
+                var _a, _b;
+                if (_this.column.type === 'date' || _this.column.type === 'time' || _this.column.type === 'datetime') {
+                    if (!((_b = (_a = _this.column) === null || _a === void 0 ? void 0 : _a.option) === null || _b === void 0 ? void 0 : _b.useFilterDate)) {
+                        _this.columnFilter[_this.column.field] = _this.columnFilter[_this.column.field] || {
+                            from: null,
+                            to: null,
+                        };
+                    }
+                }
+            }));
+        };
+        SdColumnInlineFilter.prototype.ngOnDestroy = function () {
+            __classPrivateFieldGet(this, _subcription).unsubscribe();
+        };
+        return SdColumnInlineFilter;
+    }());
+    _inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription = new WeakMap();
+    SdColumnInlineFilter.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-column-inline-filter',
+                    template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n      [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n          <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\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      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\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      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
+                },] }
+    ];
+    SdColumnInlineFilter.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    SdColumnInlineFilter.propDecorators = {
+        _value: [{ type: core.Input, args: ['value',] }],
+        _inlineOperator: [{ type: core.Input, args: ['inlineOperator',] }],
+        inlineOperatorChange: [{ type: core.Output }],
+        _columnFilter: [{ type: core.Input, args: ['columnFilter',] }],
+        _column: [{ type: core.Input, args: ['column',] }],
+        filterChange: [{ type: core.Output }]
+    };
+
+    var SdSelectionVisiblePipe = /** @class */ (function () {
+        function SdSelectionVisiblePipe() {
+            this.transform = function (rowData, selection) {
+                var e_1, _d, e_2, _e;
+                var _a, _b, _c;
+                var actions = selection.actions;
+                var groupedActions = [];
+                rowData.meta.selector.actions = rowData.meta.selector.actions || [];
+                if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
+                    rowData.meta.selector.selectable = true;
+                    return rowData.meta.selector.selectable;
+                }
+                try {
+                    for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
+                        var action = actions_1_1.value;
+                        if ('children' in action) {
+                            var flag = false;
+                            var hasGroup = false;
+                            try {
+                                for (var _f = (e_2 = void 0, __values(action.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                                    var childAction = _g.value;
+                                    var hidden = childAction.hidden, isGrouped = childAction.isGrouped;
+                                    var key = hash__default['default'](childAction);
+                                    if (isGrouped) {
+                                        hasGroup = true;
+                                    }
+                                    if (typeof (hidden) === 'function') {
+                                        if (!hidden(rowData)) {
+                                            flag = true;
+                                            rowData.meta.selector.actions.push(key);
+                                            if (isGrouped) {
+                                                groupedActions.push(key);
+                                            }
+                                        }
+                                    }
+                                    else if (!hidden) {
+                                        flag = true;
+                                        rowData.meta.selector.actions.push(key);
+                                        if (isGrouped) {
+                                            groupedActions.push(key);
+                                        }
+                                    }
+                                }
+                            }
+                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            finally {
+                                try {
+                                    if (_g && !_g.done && (_e = _f.return)) _e.call(_f);
+                                }
+                                finally { if (e_2) throw e_2.error; }
+                            }
+                            if (flag) {
+                                rowData.meta.selector.actions.push(hash__default['default'](action));
+                                if (hasGroup) {
+                                    groupedActions.push(hash__default['default'](action));
+                                }
+                            }
+                        }
+                        else {
+                            var hidden = action.hidden, isGrouped = action.isGrouped;
+                            var key = hash__default['default'](action);
+                            if (typeof (hidden) === 'function') {
+                                if (!hidden(rowData)) {
+                                    rowData.meta.selector.actions.push(key);
+                                    if (isGrouped) {
+                                        groupedActions.push(key);
+                                    }
+                                }
+                            }
+                            else if (!hidden) {
+                                rowData.meta.selector.actions.push(key);
+                                if (isGrouped) {
+                                    groupedActions.push(key);
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (actions_1_1 && !actions_1_1.done && (_d = actions_1.return)) _d.call(actions_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                rowData.meta.selector.selectable = !!((_a = rowData.meta.selector.actions) === null || _a === void 0 ? void 0 : _a.length);
+                if (!rowData.meta.selector.selectable || !groupedActions.length || ((_c = (_b = rowData === null || rowData === void 0 ? void 0 : rowData.meta.group) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length)) {
+                    return rowData.meta.selector.selectable;
+                }
+                // Đối với trường hợp grouped, tuy selectable là true nhưng vẫn ẩn đi checkbox
+                // nếu các action đều thuộc groupedActions và rowData ko phải là dòng group
+                return rowData.meta.selector.actions.some(function (action) { return !groupedActions.includes(action); });
+            };
+        }
+        return SdSelectionVisiblePipe;
+    }());
+    SdSelectionVisiblePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'selectionVisible'
+                },] }
+    ];
+
+    var SdGridQuickAction = /** @class */ (function () {
+        function SdGridQuickAction() {
+            var _this = this;
+            this.clear = new core.EventEmitter();
+            this.onClear = function () {
+                _this.clear.emit();
+            };
+        }
+        return SdGridQuickAction;
+    }());
+    SdGridQuickAction.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sd-grid-quick-action',
+                    template: "<sd-quick-action *ngIf=\"selectedItems | selectionActionFilter: gridOption?.selector?.actions as actions\"\r\n  [isOpened]=\"actions?.length\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedItems.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">{{ gridOption?.selector?.message || 'd\u1EEF li\u1EC7u \u0111\u01B0\u1EE3c ch\u1ECDn' }}</div>\r\n  </div>\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n      (action)=\"onClear()\" width=\"35px\"></sd-button>\r\n  </div>\r\n</sd-quick-action>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;min-width:48px;padding:12px 8px;position:static;top:0;width:auto}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;min-width:32px;text-align:center;top:12px;width:auto}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]
+                },] }
+    ];
+    SdGridQuickAction.ctorParameters = function () { return []; };
+    SdGridQuickAction.propDecorators = {
+        gridOption: [{ type: core.Input }],
+        selectedItems: [{ type: core.Input }],
+        clear: [{ type: core.Output }]
+    };
+
+    var _maxSecond, _maxMinute, _maxHour, _maxDay, _maxMonth, _isMobileOrTablet$1;
+    var SdCellViewPipe = /** @class */ (function () {
+        function SdCellViewPipe(deviceService, utilityService, columnValuesPipe) {
+            this.utilityService = utilityService;
+            this.columnValuesPipe = columnValuesPipe;
+            _maxSecond.set(this, 60);
+            _maxMinute.set(this, __classPrivateFieldGet(this, _maxSecond) * 60);
+            _maxHour.set(this, __classPrivateFieldGet(this, _maxMinute) * 24);
+            _maxDay.set(this, __classPrivateFieldGet(this, _maxHour) * 30);
+            _maxMonth.set(this, __classPrivateFieldGet(this, _maxHour) * 365);
+            _isMobileOrTablet$1.set(this, false);
+            __classPrivateFieldSet(this, _isMobileOrTablet$1, !deviceService.isDesktop());
+        }
+        SdCellViewPipe.prototype.transform = function (value, tableItem, column, gridOption) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var displayOnEmpty, rowData, align, click, tooltip, htmlTemplate, transform, result, transformDate, val, _b, option, seconds, date, time, dateTime, _c, option, values, display, emptyValues;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            displayOnEmpty = gridOption.displayOnEmpty;
+                            rowData = tableItem.current;
+                            align = column.align, click = column.click, tooltip = column.tooltip, htmlTemplate = column.htmlTemplate, transform = column.transform;
+                            result = {
+                                badge: null,
+                                tooltip: null,
+                                display: {
+                                    align: align || (column.type === 'number' ? 'right' : 'left'),
+                                    value: value
+                                },
+                                click: null
+                            };
+                            if (!(typeof (htmlTemplate) === 'function')) return [3 /*break*/, 1];
+                            result.display.hasHtml = true;
+                            result.display.html = htmlTemplate(value, rowData, __classPrivateFieldGet(this, _isMobileOrTablet$1));
+                            return [3 /*break*/, 10];
+                        case 1:
+                            if (column.type === 'datetime' || column.type === 'date' || column.type === 'time') {
+                                transformDate = column.transformDate;
+                                if (transformDate) {
+                                    value = transformDate(value, rowData);
+                                }
+                            }
+                            if (!(typeof (transform) === 'function')) return [3 /*break*/, 5];
+                            val = transform(value, rowData);
+                            if (!(val instanceof Promise)) return [3 /*break*/, 3];
+                            _b = result.display;
+                            return [4 /*yield*/, val];
+                        case 2:
+                            _b.value = _d.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            result.display.value = val;
+                            _d.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
+                            if (column.type === 'date' || column.type === 'datetime') {
+                                option = column.option;
+                                seconds = Math.round((new Date().getTime() - new Date(value).getTime()) / 1000);
+                                if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'month' && seconds < __classPrivateFieldGet(this, _maxMonth)) {
+                                    result.display.value = this.utilityService.timeDifference(value);
+                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                }
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'day' && seconds < __classPrivateFieldGet(this, _maxDay)) {
+                                    result.display.value = this.utilityService.timeDifference(value);
+                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                }
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'hour' && seconds < __classPrivateFieldGet(this, _maxHour)) {
+                                    result.display.value = this.utilityService.timeDifference(value);
+                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                }
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'minute' && seconds < __classPrivateFieldGet(this, _maxMinute)) {
+                                    result.display.value = this.utilityService.timeDifference(value);
+                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                }
+                                else if ((option === null || option === void 0 ? void 0 : option.timeDifferent) === 'second' && seconds < __classPrivateFieldGet(this, _maxSecond)) {
+                                    result.display.value = this.utilityService.timeDifference(value);
+                                    result.tooltip = Date.toFormat(value, column.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm');
+                                }
+                                else {
+                                    date = Date.toFormat(value, 'dd/MM/yyyy');
+                                    time = Date.toFormat(value, 'HH:mm');
+                                    dateTime = Date.toFormat(value, 'HH:mm');
+                                    if (column.type === 'datetime' && time && time !== '00:00') {
+                                        result.display.value = dateTime;
+                                        result.display.hasHtml = true;
+                                        result.display.html = "<span class=\"d-block T14R text-black400\">" + Date.toFormat(value, 'HH:mm') + "</span><span class=\"d-block T14R\">" + Date.toFormat(value, 'dd/MM/yyyy') + "</span>";
+                                    }
+                                    else {
+                                        result.display.value = date;
+                                    }
+                                }
+                            }
+                            if (column.type === 'time') {
+                                result.display.value = Date.toFormat(value, 'HH:mm');
+                            }
+                            if (!(column.type === 'values')) return [3 /*break*/, 7];
+                            _c = result.display;
+                            return [4 /*yield*/, this.columnValuesPipe.transform(value, column)];
+                        case 6:
+                            _c.value = _d.sent();
+                            return [3 /*break*/, 8];
+                        case 7:
+                            if (column.type === 'number' && Number.isNumber(value)) {
+                                result.display.value = Number.toVNCurrency(value);
+                            }
+                            _d.label = 8;
+                        case 8:
+                            if (column.type === 'bool') {
+                                option = column.option;
+                                if (value !== undefined && value !== null && value !== '') {
+                                    result.display.value = value === true ? ((option === null || option === void 0 ? void 0 : option.displayOnTrue) || 'True') : ((option === null || option === void 0 ? void 0 : option.displayOnFalse) || 'False');
+                                }
+                                else {
+                                    result.display.value = null;
+                                }
+                            }
+                            _d.label = 9;
+                        case 9:
+                            if (displayOnEmpty) {
+                                values = [null, undefined, ''];
+                                if (typeof (displayOnEmpty) === 'object') {
+                                    display = displayOnEmpty.display, emptyValues = displayOnEmpty.emptyValues;
+                                    values = __spread([null, undefined, ''], emptyValues);
+                                    if (values.includes(result.display.value)) {
+                                        if (typeof (display) === 'function') {
+                                            result.display.hasHtml = true;
+                                            result.display.html = display(rowData, column);
+                                        }
+                                        else {
+                                            result.display.hasHtml = true;
+                                            result.display.html = "<div class=\"T16R text-black400\">--</div>";
+                                        }
+                                    }
+                                }
+                                else {
+                                    if (values.includes(result.display.value)) {
+                                        if (typeof (displayOnEmpty) === 'function') {
+                                            result.display.hasHtml = true;
+                                            result.display.html = displayOnEmpty(rowData, column);
+                                        }
+                                        else {
+                                            result.display.hasHtml = true;
+                                            result.display.html = "<div class=\"T16R text-black400\">--</div>";
+                                        }
+                                    }
+                                }
+                            }
+                            _d.label = 10;
+                        case 10:
+                            // Badge
+                            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                                result.badge = {
+                                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                                    color: column.badge(value, rowData),
+                                    icon: (_a = column === null || column === void 0 ? void 0 : column.badgeIcon) === null || _a === void 0 ? void 0 : _a.call(column, value, rowData)
+                                };
+                            }
+                            else if (column.type === 'bool') {
+                                result.badge = {
+                                    type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
+                                    color: !!value ? 'success' : 'danger',
+                                    icon: null
+                                };
+                            }
+                            // Tooltip
+                            if (typeof (tooltip) === 'function') {
+                                result.tooltip = tooltip(value, rowData);
+                            }
+                            // Clickable
+                            if (typeof (click) === 'function') {
+                                result.click = function () { return click(value, rowData); };
+                            }
+                            return [2 /*return*/, result];
+                    }
+                });
+            });
+        };
+        return SdCellViewPipe;
+    }());
+    _maxSecond = new WeakMap(), _maxMinute = new WeakMap(), _maxHour = new WeakMap(), _maxDay = new WeakMap(), _maxMonth = new WeakMap(), _isMobileOrTablet$1 = new WeakMap();
+    SdCellViewPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'cellView'
+                },] }
+    ];
+    SdCellViewPipe.ctorParameters = function () { return [
+        { type: ngxDeviceDetector.DeviceDetectorService },
+        { type: utility.SdUtilityService },
+        { type: SdColumnValuesPipe }
+    ]; };
+
+    var SdGroupPipe = /** @class */ (function () {
+        function SdGroupPipe() {
+        }
+        SdGroupPipe.prototype.transform = function (items, gridOption) {
+            var e_1, _b, e_2, _c, _d, e_3, _e, e_4, _f;
+            var _a;
+            var group = gridOption.group;
+            if (!group) {
+                return items;
+            }
+            var fields = group.fields, htmlTemplate = group.htmlTemplate;
+            if (!(fields === null || fields === void 0 ? void 0 : fields.length)) {
+                return items;
+            }
+            var groupItem = {};
+            try {
+                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                    var item = items_1_1.value;
+                    var obj = {};
+                    try {
+                        for (var fields_1 = (e_2 = void 0, __values(fields)), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
+                            var field = fields_1_1.value;
+                            obj = Object.assign(Object.assign({}, obj), ((_a = item[field]) !== null && _a !== void 0 ? _a : (_d = {}, _d[field] = item[field], _d)));
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (fields_1_1 && !fields_1_1.done && (_c = fields_1.return)) _c.call(fields_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                    var key = hash__default['default'](obj);
+                    if (!groupItem[key]) {
+                        groupItem[key] = [];
+                    }
+                    groupItem[key].push(item);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (items_1_1 && !items_1_1.done && (_b = items_1.return)) _b.call(items_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            var results = [];
+            try {
+                for (var _g = __values(Object.keys(groupItem)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var key = _h.value;
+                    var result = MapToSdTableItem({});
+                    result.meta.group.items = groupItem[key];
+                    result.meta.group.htmlTemplate = htmlTemplate(groupItem[key]);
+                    results.push(result);
+                    try {
+                        for (var _j = (e_4 = void 0, __values(groupItem[key])), _k = _j.next(); !_k.done; _k = _j.next()) {
+                            var item = _k.value;
+                            results.push(item);
+                        }
+                    }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    finally {
+                        try {
+                            if (_k && !_k.done && (_f = _j.return)) _f.call(_j);
+                        }
+                        finally { if (e_4) throw e_4.error; }
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_e = _g.return)) _e.call(_g);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            return results;
+        };
+        return SdGroupPipe;
+    }());
+    SdGroupPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'sdGroup',
+                },] }
+    ];
+
+    var MatPaginatorIntlCro = /** @class */ (function (_super) {
+        __extends(MatPaginatorIntlCro, _super);
+        function MatPaginatorIntlCro() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.firstPageLabel = 'Trang đầu';
+            _this.lastPageLabel = 'Trang cuối';
+            _this.itemsPerPageLabel = 'Kích thước trang';
+            _this.nextPageLabel = 'Trang sau';
+            _this.previousPageLabel = 'Trang trước';
+            _this.getRangeLabel = function (page, pageSize, length) {
+                if (length === 0 || pageSize === 0) {
+                    return '';
+                }
+                var from = page * pageSize + 1;
+                var to = from + (length - page * pageSize > pageSize ? pageSize : length - page * pageSize) - 1;
+                return from + "-" + to + " tr\u00EAn " + length;
+            };
+            return _this;
+        }
+        return MatPaginatorIntlCro;
+    }(paginator.MatPaginatorIntl));
+    MatPaginatorIntlCro.decorators = [
+        { type: core.Injectable }
+    ];
+    var SdTableModule = /** @class */ (function () {
+        function SdTableModule() {
+        }
+        return SdTableModule;
+    }());
+    SdTableModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common$1.CommonModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        input.MatInputModule,
+                        formField.MatFormFieldModule,
+                        sort.MatSortModule,
+                        paginator.MatPaginatorModule,
+                        table.MatTableModule,
+                        menu.MatMenuModule,
+                        icon.MatIconModule,
+                        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,
+                    ],
+                    declarations: [
+                        SdGridQuickAction,
+                        SdDesktopCell,
+                        SdDesktopCellView,
+                        SdDesktopCommand,
+                        SdColumnInlineFilter,
+                        SdTable,
+                        SdMaterialFooterDefDirective,
+                        SdMaterialCellDefDirective,
+                        SdMaterialFilterDefDirective,
+                        SdMaterialSubInformationDefDirective,
+                        SdMaterialEmptyDataDefDirective,
+                        SdPopupGridConfiguration,
+                        SdGridFilter,
+                        SdPopupFilter,
+                        // Pipes
+                        SdGridConfigurationResultPipe,
+                        SdColumnChildrenFilterPipe,
+                        SdCommandFilterPipe,
+                        SdCommandDisablePipe,
+                        SdCommandIconPipe,
+                        SdCommandTitlePipe,
+                        SdColumnValuesPipe,
+                        SdColumnHtmlTemplatePipe,
+                        SdColumnTransformPipe,
+                        SdColumnTooltipPipe,
+                        SdColumnBadgePipe,
+                        SdFilterColumnPipe,
+                        SdFilterExternalPipe,
+                        SdSelectionActionFilterPipe,
+                        SdSelectionVisiblePipe,
+                        SdSelectionDisablePipe,
+                        SdSelectionVisibleSelectAllPipe,
+                        SdCellViewPipe,
+                        SdGroupPipe,
+                    ],
+                    exports: [
+                        SdTable,
+                        SdMaterialFooterDefDirective,
+                        SdMaterialCellDefDirective,
+                        SdMaterialFilterDefDirective,
+                        SdMaterialEmptyDataDefDirective,
+                        SdMaterialSubInformationDefDirective,
+                    ],
+                    providers: [
+                        common$1.DatePipe,
+                        common$1.DecimalPipe,
+                        table$1.CdkColumnDef,
+                        SdTableFilterService,
+                        SdTableConfigurationService,
+                        SdColumnValuesPipe,
+                        {
+                            provide: paginator.MatPaginatorIntl,
+                            useClass: MatPaginatorIntlCro,
+                        },
+                    ],
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.MatPaginatorIntlCro = MatPaginatorIntlCro;
+    exports.SdFilterOperators = SdFilterOperators;
+    exports.SdTable = SdTable;
+    exports.SdTableModule = SdTableModule;
+    exports.ɵa = SdGridQuickAction;
+    exports.ɵb = SdDesktopCell;
+    exports.ɵba = SdColumnTooltipPipe;
+    exports.ɵbb = SdColumnBadgePipe;
+    exports.ɵbc = SdFilterColumnPipe;
+    exports.ɵbd = SdFilterExternalPipe;
+    exports.ɵbe = SdSelectionActionFilterPipe;
+    exports.ɵbf = SdSelectionVisiblePipe;
+    exports.ɵbg = SdSelectionDisablePipe;
+    exports.ɵbh = SdSelectionVisibleSelectAllPipe;
+    exports.ɵbi = SdCellViewPipe;
+    exports.ɵbj = SdGroupPipe;
+    exports.ɵc = SdDesktopCellView;
+    exports.ɵd = SdDesktopCommand;
+    exports.ɵe = SdColumnInlineFilter;
+    exports.ɵf = SdGridFilter;
+    exports.ɵg = SdPopupFilter;
+    exports.ɵh = SdMaterialSubInformationDefDirective;
+    exports.ɵi = SdMaterialEmptyDataDefDirective;
+    exports.ɵj = SdMaterialCellDefDirective;
+    exports.ɵk = SdMaterialFooterDefDirective;
+    exports.ɵl = SdMaterialFilterDefDirective;
+    exports.ɵn = TABLE_CONFIG;
+    exports.ɵo = SdTableConfigurationService;
+    exports.ɵp = SdColumnValuesPipe;
+    exports.ɵq = SdTableFilterService;
+    exports.ɵr = SdPopupGridConfiguration;
+    exports.ɵs = SdGridConfigurationResultPipe;
+    exports.ɵt = SdColumnChildrenFilterPipe;
+    exports.ɵu = SdCommandFilterPipe;
+    exports.ɵv = SdCommandDisablePipe;
+    exports.ɵw = SdCommandIconPipe;
+    exports.ɵx = SdCommandTitlePipe;
+    exports.ɵy = SdColumnHtmlTemplatePipe;
+    exports.ɵz = SdColumnTransformPipe;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=sd-angular-core-table.umd.js.map