tnx-shared 5.1.387 → 5.1.390

package/bundles/tnx-shared.umd.js

@@ -1134,7 +1134,7 @@
             _this.placeholder = '';
             _this.dataFormat = 'text';
             _this.min = 0;
-            _this.max = 99999999;
+            _this.max = Number.MAX_SAFE_INTEGER;
             _this.valueField = 'id';
             _this.displayField = 'ten';
             _this.sorts = [];
@@ -1894,7 +1894,6 @@
     var RefField = /** @class */ (function () {
         function RefField(init) {
             var _this = this;
-            this.funcGetValueOfField = function (item) { return item[_this.field]; };
             this.multiple = false;
             this.separator = ', ';
             this.isChildObject = false;
@@ -1908,6 +1907,7 @@
             this.sorts = [];
             this.sortField = '';
             this.sortDir = 1;
+            this.funcGetValueOfField = function (item) { return item[_this.field]; };
             this.funcCompare = function (item, value) { return item[_this.valueField] == value; };
             for (var key in init) {
                 this[key] = init[key];
@@ -4956,71 +4956,6 @@
         { ten: 'Đã duyệt quyết định', id: 3 }
     ];
 
-    var sort_by;
-    (function () {
-        var defaultCompareFunc = function (a, b) {
-            if (a == b)
-                return 0;
-            return a < b ? -1 : 1;
-        };
-        var getCompareFunc = function (primer, reverse) {
-            var defaultCompare = defaultCompareFunc;
-            var compare = defaultCompareFunc;
-            if (primer) {
-                compare = function (a, b) {
-                    return defaultCompare(primer(a), primer(b));
-                };
-            }
-            if (reverse) {
-                return function (a, b) {
-                    return -1 * compare(a, b);
-                };
-            }
-            return compare;
-        };
-        sort_by = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var fields = [], n_fields = args.length;
-            var field, name, cmp;
-            // preprocess sorting options
-            for (var i = 0; i < n_fields; i++) {
-                field = args[i];
-                if (typeof field === 'string') {
-                    name = field;
-                    cmp = defaultCompareFunc;
-                }
-                else {
-                    name = field.name;
-                    cmp = getCompareFunc(field.primer, field.reverse);
-                }
-                fields.push({
-                    name: name,
-                    cmp: cmp
-                });
-            }
-            // final comparison function
-            return function (A, B) {
-                var name, result;
-                for (var i = 0; i < n_fields; i++) {
-                    result = 0;
-                    field = fields[i];
-                    name = field.name;
-                    result = field.cmp(A[name], B[name]);
-                    if (result !== 0)
-                        break;
-                }
-                return result;
-            };
-        };
-    }());
-    // multipleSort('idTinhThanh', 'idQuanHuyen')
-    // multipleSort({name: 'idTinhThanh', reverse: true}, 'idQuanHuyen')
-    // multipleSort({name: 'soThuTu', primer: parseInt}, 'idQuanHuyen') // parseInt là function
-    var multipleSort = sort_by;
-
     var MasterDataItem = /** @class */ (function () {
         function MasterDataItem() {
         }
@@ -6100,129 +6035,113 @@
         CrudService.prototype.getRefDataInDatasource = function (dataSource, schemas, callBackAfterGetRefDataDropdown) {
             if (callBackAfterGetRefDataDropdown === void 0) { callBackAfterGetRefDataDropdown = null; }
             return __awaiter(this, void 0, void 0, function () {
-                var dicData, _loop_1, this_1, schemas_1, schemas_1_1, schema, lstData, _loop_2, lstData_1, lstData_1_1, _a, promises, schemas_2, e_1_1;
-                var e_2, _b, e_1, _c;
-                var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                var dicData, schemas_1, schemas_1_1, schema, promise, data, lstData, _loop_1, this_1, index;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!dataSource || !dataSource.length)
                                 return [2 /*return*/];
                             if (!schemas || !schemas.length)
                                 return [2 /*return*/];
-                            schemas.sort(multipleSort('order'));
-                            dicData = {};
-                            _loop_1 = function (schema) {
-                                if (!schema.baseService) {
-                                    this_1.mergeRefDataToDatasource(dataSource, schema, schema.dataSource);
-                                    return "continue";
-                                }
-                                var arrValue = [];
-                                dataSource.forEach(function (itemData) {
-                                    var currentValue = schema.funcGetValueOfField(itemData);
-                                    if (currentValue == null) {
-                                        return;
-                                    }
-                                    if (schema.multiple) {
-                                        _this.mapValueMultiple(arrValue, currentValue, schema);
-                                        return;
-                                    }
-                                    if (!arrValue.some(function (p) { return p == currentValue; })) {
-                                        arrValue.push(currentValue);
-                                    }
-                                });
-                                if (arrValue.length === 0) {
-                                    return "continue";
-                                }
-                                var promise = null;
-                                if (schema.baseService instanceof MasterDataService) {
-                                    promise = schema.baseService.getDataDropdown(schema.groupCode, arrValue, this_1.createDropdownOptions(schema));
-                                }
-                                else {
-                                    promise = schema.baseService.getDataDropdownByFilter([this_1._commonService.newFilter(schema.valueField, exports.Operator.in, arrValue)], this_1.createDropdownOptions(schema));
-                                }
-                                var dataByOrder = dicData[schema.order];
-                                if (dataByOrder == null) {
-                                    dicData[schema.order] = {
-                                        promises: [promise],
-                                        schemas: [schema]
-                                    };
-                                    return "continue";
-                                }
-                                dataByOrder.promises.push(promise);
-                                dataByOrder.schemas.push(schema);
-                            };
-                            this_1 = this;
+                            dicData = [];
                             try {
+                                // preprocess schema, them schema vao arr voi index = schema.order
                                 for (schemas_1 = __values(schemas), schemas_1_1 = schemas_1.next(); !schemas_1_1.done; schemas_1_1 = schemas_1.next()) {
                                     schema = schemas_1_1.value;
-                                    _loop_1(schema);
+                                    promise = schema.baseService ? this.processSchemaWithBaseService(schema, dataSource) : new Promise(function (resolve) { return resolve(true); });
+                                    data = dicData[schema.order];
+                                    if (data == null) {
+                                        dicData[schema.order] = {
+                                            promises: [promise],
+                                            schemas: [schema]
+                                        };
+                                        continue;
+                                    }
+                                    data.schemas.push(schema);
+                                    data.promises.push(promise);
                                 }
                             }
-                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
                             finally {
                                 try {
-                                    if (schemas_1_1 && !schemas_1_1.done && (_b = schemas_1.return)) _b.call(schemas_1);
+                                    if (schemas_1_1 && !schemas_1_1.done && (_a = schemas_1.return)) _a.call(schemas_1);
                                 }
-                                finally { if (e_2) throw e_2.error; }
+                                finally { if (e_1) throw e_1.error; }
                             }
                             lstData = Object.values(dicData);
-                            _loop_2 = function (promises, schemas_2) {
-                                var arrRes_1;
+                            _loop_1 = function (index) {
+                                var data, promises, schemaDatas, arrRes;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
-                                            if (!(promises.length > 0)) return [3 /*break*/, 2];
+                                            data = lstData[index];
+                                            if (data == null) {
+                                                return [2 /*return*/, "continue"];
+                                            }
+                                            promises = data.promises;
+                                            schemaDatas = data.schemas;
+                                            if (promises.length === 0) {
+                                                return [2 /*return*/, "continue"];
+                                            }
                                             return [4 /*yield*/, Promise.all(promises)];
                                         case 1:
-                                            arrRes_1 = _a.sent();
-                                            schemas_2.forEach(function (schema, index) {
+                                            arrRes = _a.sent();
+                                            schemaDatas.forEach(function (schema, resIndex) {
+                                                var schemaData = arrRes[resIndex] === true ? schema.dataSource : arrRes[resIndex];
                                                 if (schema.callbackDataFinish) {
                                                     schema.callbackDataFinish({
-                                                        data: arrRes_1[index]
+                                                        data: schemaData
                                                     });
                                                 }
-                                                _this.mergeRefDataToDatasource(dataSource, schema, arrRes_1[index]);
+                                                schema.dataSource = schemaData;
                                                 if (callBackAfterGetRefDataDropdown) {
                                                     callBackAfterGetRefDataDropdown(schema.field);
                                                 }
                                             });
-                                            _a.label = 2;
-                                        case 2: return [2 /*return*/];
+                                            this_1.mergeRefDatasToDatasource(dataSource, schemaDatas);
+                                            return [2 /*return*/];
                                     }
                                 });
                             };
-                            _d.label = 1;
+                            this_1 = this;
+                            index = 0;
+                            _b.label = 1;
                         case 1:
-                            _d.trys.push([1, 6, 7, 8]);
-                            lstData_1 = __values(lstData), lstData_1_1 = lstData_1.next();
-                            _d.label = 2;
+                            if (!(index < lstData.length)) return [3 /*break*/, 4];
+                            return [5 /*yield**/, _loop_1(index)];
                         case 2:
-                            if (!!lstData_1_1.done) return [3 /*break*/, 5];
-                            _a = lstData_1_1.value, promises = _a.promises, schemas_2 = _a.schemas;
-                            return [5 /*yield**/, _loop_2(promises, schemas_2)];
+                            _b.sent();
+                            _b.label = 3;
                         case 3:
-                            _d.sent();
-                            _d.label = 4;
-                        case 4:
-                            lstData_1_1 = lstData_1.next();
-                            return [3 /*break*/, 2];
-                        case 5: return [3 /*break*/, 8];
-                        case 6:
-                            e_1_1 = _d.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 8];
-                        case 7:
-                            try {
-                                if (lstData_1_1 && !lstData_1_1.done && (_c = lstData_1.return)) _c.call(lstData_1);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 8: return [2 /*return*/];
+                            index++;
+                            return [3 /*break*/, 1];
+                        case 4: return [2 /*return*/];
                     }
                 });
             });
         };
+        CrudService.prototype.processSchemaWithBaseService = function (schema, dataSource) {
+            var _this = this;
+            var arrValue = [];
+            dataSource.forEach(function (itemData) {
+                var currentValue = schema.funcGetValueOfField(itemData);
+                if (currentValue == null) {
+                    return;
+                }
+                if (schema.multiple) {
+                    _this.mapValueMultiple(arrValue, currentValue, schema);
+                    return;
+                }
+                if (!arrValue.some(function (p) { return p == currentValue; })) {
+                    arrValue.push(currentValue);
+                }
+            });
+            if (schema.baseService instanceof MasterDataService) {
+                return schema.baseService.getDataDropdown(schema.groupCode, arrValue, this.createDropdownOptions(schema));
+            }
+            return schema.baseService.getDataDropdownByFilter([this._commonService.newFilter(schema.valueField, exports.Operator.in, arrValue)], this.createDropdownOptions(schema));
+        };
         CrudService.prototype.mapValueMultiple = function (arrValue, valueToMap, schema) {
             if (!valueToMap) {
                 return;
@@ -6243,11 +6162,103 @@
             });
         };
         CrudService.prototype.getFuntionGetLabel = function (schema) {
-            var funcGetLabel = function (item) { return item[schema.displayFieldInGrid] || item[schema.displayField] || item['ten']; };
-            if (schema.funcGetLabel) {
-                funcGetLabel = schema.funcGetLabel;
+            return schema.funcGetLabel ? schema.funcGetLabel : function (item) { return item[schema.displayFieldInGrid] || item[schema.displayField] || item['ten']; };
+        };
+        CrudService.prototype.mergeRefDatasToDatasource = function (dataSource, schemas, callBackAfterGetRefDataDropdown) {
+            var e_2, _a, e_3, _b;
+            try {
+                // #region set default function
+                for (var dataSource_1 = __values(dataSource), dataSource_1_1 = dataSource_1.next(); !dataSource_1_1.done; dataSource_1_1 = dataSource_1.next()) {
+                    var rowData = dataSource_1_1.value;
+                    var _loop_2 = function (schema) {
+                        var data = schema.dataSource;
+                        var field = schema.field;
+                        if (!data || !data.length) {
+                            if (schema.funcSetValueRowWhenNullOrEmpty) {
+                                schema.funcSetValueRowWhenNullOrEmpty(rowData);
+                            }
+                            return "continue";
+                        }
+                        var fieldData = schema.funcGetValueOfField(rowData);
+                        if (fieldData == null) {
+                            return "continue";
+                        }
+                        var funcGetLabel = this_2.getFuntionGetLabel(schema);
+                        var funcSetValueRow = schema.funcSetValueRow
+                            ? schema.funcSetValueRow
+                            : function (rowItem, data) {
+                            };
+                        var funcSetValueRowWhenNullOrEmpty = schema.funcSetValueRowWhenNullOrEmpty
+                            ? schema.funcSetValueRowWhenNullOrEmpty
+                            : function (rowItem, data) {
+                            };
+                        var funcGetRefDataRow = schema.funcGetRefDataRow
+                            ? schema.funcGetRefDataRow
+                            : function (refItems) {
+                                return refItems.map(function (item) { return funcGetLabel(item); }).join(schema.separator + " ");
+                            };
+                        var funcGetRefDataSingle = function (rowData) {
+                            var refItem = data.find(function (i) { return schema.funcCompare(i, fieldData); });
+                            if (refItem != null) {
+                                rowData['str' + field] = funcGetLabel(refItem);
+                                funcSetValueRow(rowData, refItem);
+                                return;
+                            }
+                            funcSetValueRowWhenNullOrEmpty(rowData, refItem);
+                        };
+                        if (schema.isChildObject) {
+                            funcGetRefDataSingle = function (rowData) {
+                                var refItems = data.filter(function (i) { return schema.funcCompare(i, fieldData); });
+                                if (refItems != null) {
+                                    rowData['str' + field] = funcGetRefDataRow(refItems);
+                                    funcSetValueRow(rowData, refItems);
+                                }
+                                else {
+                                    funcSetValueRowWhenNullOrEmpty(rowData, refItems);
+                                }
+                            };
+                        }
+                        // #endregion
+                        if (schema.multiple) {
+                            var ids_1 = [];
+                            this_2.mapValueMultiple(ids_1, fieldData, schema);
+                            var refItems = data.filter(function (i) { return ids_1.some(function (q) { return schema.funcCompare(i, q); }); });
+                            if (refItems.length > 0) {
+                                rowData['str' + field] = funcGetRefDataRow(refItems);
+                                funcSetValueRow(rowData, refItems);
+                                return "continue";
+                            }
+                            funcSetValueRowWhenNullOrEmpty(rowData, refItems);
+                            return "continue";
+                        }
+                        funcGetRefDataSingle(rowData);
+                    };
+                    var this_2 = this;
+                    try {
+                        for (var schemas_2 = (e_3 = void 0, __values(schemas)), schemas_2_1 = schemas_2.next(); !schemas_2_1.done; schemas_2_1 = schemas_2.next()) {
+                            var schema = schemas_2_1.value;
+                            _loop_2(schema);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (schemas_2_1 && !schemas_2_1.done && (_b = schemas_2.return)) _b.call(schemas_2);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    // if (callBackAfterGetRefDataDropdown) {
+                    //     callBackAfterGetRefDataDropdown(rowData);
+                    // }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (dataSource_1_1 && !dataSource_1_1.done && (_a = dataSource_1.return)) _a.call(dataSource_1);
+                }
+                finally { if (e_2) throw e_2.error; }
             }
-            return funcGetLabel;
         };
         CrudService.prototype.mergeRefDataToDatasource = function (dataSource, schema, data) {
             var _this = this;
@@ -6304,9 +6315,9 @@
             if (schema.multiple) {
                 dataSource.forEach(function (rowData) {
                     if (schema.funcGetValueOfField(rowData) != null) {
-                        var ids_1 = [];
-                        _this.mapValueMultiple(ids_1, schema.funcGetValueOfField(rowData), schema);
-                        var refItems = data.filter(function (i) { return ids_1.some(function (q) { return schema.funcCompare(i, q); }); });
+                        var ids_2 = [];
+                        _this.mapValueMultiple(ids_2, schema.funcGetValueOfField(rowData), schema);
+                        var refItems = data.filter(function (i) { return ids_2.some(function (q) { return schema.funcCompare(i, q); }); });
                         if (refItems.length > 0) {
                             rowData['str' + field] = funcGetRefDataRow(refItems);
                             funcSetValueRow(rowData, refItems);
@@ -6693,7 +6704,7 @@
             return result;
         };
         CrudService.prototype.deQuyReplaceValue = function (filters, filter, model, rootModel) {
-            var e_3, _a;
+            var e_4, _a;
             var _this = this;
             var valueFilter = null;
             var sourceField = filter.sourceField;
@@ -6731,12 +6742,12 @@
                             }
                         }
                     }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
                             if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
                         }
-                        finally { if (e_3) throw e_3.error; }
+                        finally { if (e_4) throw e_4.error; }
                     }
                     if (canAccessSubField(temp)) {
                         valueFilter = temp[subField];
@@ -12662,6 +12673,130 @@
             return this._message;
         };
         return SameValueValidator;
+    }());
+    (function (ValueType) {
+        ValueType["date"] = "date";
+        ValueType["datetime"] = "datetime";
+        ValueType["int"] = "int";
+        ValueType["decimal"] = "decimal";
+        ValueType["boolean"] = "boolean";
+        ValueType["string"] = "string";
+    })(exports.ValueType || (exports.ValueType = {}));
+    var ScalarValueValidator = /** @class */ (function () {
+        function ScalarValueValidator(_operator, _scalarValue, _type) {
+            if (_type === void 0) { _type = exports.ValueType.string; }
+            this._operator = _operator;
+            this._scalarValue = _scalarValue;
+            this._type = _type;
+            this._operatorText = '';
+        }
+        ScalarValueValidator.prototype.getError = function () {
+            return "Ph\u1EA3i " + this._operatorText + " " + this._scalarValue;
+        };
+        ScalarValueValidator.prototype.validate = function (event) {
+            var left = this.getValue(event.value);
+            var right = this.getValue(this._scalarValue);
+            return this.compareValue(left, right);
+        };
+        ScalarValueValidator.prototype.compareValue = function (left, right) {
+            switch (this._operator) {
+                case exports.Operator.equal:
+                    this._operatorText = 'bằng';
+                    return left == right;
+                case exports.Operator.notEqual:
+                    this._operatorText = 'không bằng';
+                    return left != right;
+                case exports.Operator.greater:
+                    this._operatorText = 'lớn hơn';
+                    return left > right;
+                case exports.Operator.greaterThanEqual:
+                    this._operatorText = 'lớn hơn hoặc bằng';
+                    return left >= right;
+                case exports.Operator.lower:
+                    this._operatorText = 'nhỏ hơn';
+                    return left < right;
+                case exports.Operator.lowerThanEqual:
+                    this._operatorText = 'nhỏ hơn hoặc bằng';
+                    return left <= right;
+                case exports.Operator.in: {
+                    var list = left;
+                    this._operatorText = 'nằm trong';
+                    return list.some(function (x) { return x == left; });
+                }
+                case exports.Operator.notIn: {
+                    var list = left;
+                    this._operatorText = 'nằm ngoài';
+                    return list.every(function (x) { return x != left; });
+                }
+                case exports.Operator.startWith: {
+                    var str = left;
+                    this._operatorText = 'bắt đầu bằng';
+                    return str.startsWith(right);
+                }
+                case exports.Operator.notStartWith: {
+                    var str = left;
+                    this._operatorText = 'không bắt đầu bằng';
+                    return str.startsWith(right);
+                }
+                case exports.Operator.endWith: {
+                    var str = left;
+                    this._operatorText = 'kết thúc bằng';
+                    return str.endsWith(right);
+                }
+                case exports.Operator.notEndWith: {
+                    var str = left;
+                    this._operatorText = 'không kết thúc bằng';
+                    return str.endsWith(right);
+                }
+                case exports.Operator.contain: {
+                    var str = left;
+                    this._operatorText = 'có chứa';
+                    return str.includes(right);
+                }
+                case exports.Operator.notContain: {
+                    var str = left;
+                    this._operatorText = 'không chứa';
+                    return !str.includes(right);
+                }
+                case exports.Operator.isNull: {
+                    this._operatorText = 'để trống';
+                    return left == null;
+                }
+                case exports.Operator.isNotNull: {
+                    this._operatorText = 'không để trống';
+                    return left != null;
+                }
+                case exports.Operator.inRole:
+                case exports.Operator.notInRole:
+                case exports.Operator.inCategory:
+                case exports.Operator.notInCategory:
+                case exports.Operator.inPosition:
+                case exports.Operator.notInPosition:
+                case exports.Operator.inListUser:
+                case exports.Operator.notInListUser:
+                case exports.Operator.inListGroup:
+                case exports.Operator.notInListGroup:
+                case exports.Operator.isCurrentUser:
+                case exports.Operator.isCurrentCanBo:
+                    return false;
+            }
+        };
+        ScalarValueValidator.prototype.getValue = function (value) {
+            switch (this._type) {
+                case exports.ValueType.date:
+                case exports.ValueType.datetime:
+                    return new Date(value);
+                case exports.ValueType.int:
+                    return parseInt(value);
+                case exports.ValueType.decimal:
+                    return parseFloat(value);
+                case exports.ValueType.boolean:
+                    return Boolean(value);
+                case exports.ValueType.string:
+                    return value;
+            }
+        };
+        return ScalarValueValidator;
     }());
 
     var _d;
@@ -14115,9 +14250,7 @@
                 if (control.mode == exports.FileUploadMode.usingFileInstanceId) {
                     return 'fileUpload';
                 }
-                else {
-                    return 'serviceFileUpload';
-                }
+                return 'serviceFileUpload';
             }
             if (control instanceof FileManagerControlSchema)
                 return 'fileManager';
@@ -15340,7 +15473,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                        control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, \r\n                        mdWidth: control.mdWidth, rowSpan: control.rowSpan\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\"\r\n    let-tableParentData=\"tableParentData\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (search)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\r\n                    [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\r\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\r\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\r\n                    [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\r\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\r\n                            $implicit: files\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\r\n                            $implicit: file\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                </app-image-uploader>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\r\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\r\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager>\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\"\r\n                    [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [control]=\"control\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </service-file-upload>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                control: subControl, \r\n                                data: data[control.field], \r\n                                parentPath: path, \r\n                                rowIndex: rowIndex, \r\n                                path: path + '.' + subControl.field, \r\n                                showLabel: subControl.showLabel, \r\n                                mdWidth: subControl.mdWidth,\r\n                                rowSpan: subControl.rowSpan\r\n                            }\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\r\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list-new>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </vanban-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'chips'\">\r\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                                        control: subControl,\r\n                                                        data: rowData,\r\n                                                        index: ri,\r\n                                                        tablePath: path,\r\n                                                        parentPath: path + '[' + ri + ']',\r\n                                                        path: path + '[' + ri + '].' + subControl.field,\r\n                                                        showLabel: false,\r\n                                                        mdWidth: 12,\r\n                                                        rowSpan: 1\r\n                                                    }\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"control.template\">\r\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n            <div *ngIf=\"control.message\" class=\"control-message\">\r\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form>\r\n</tn-dialog>",
+                    template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" [class.grid]=\"useGridTemplate\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                        control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, \r\n                        mdWidth: control.mdWidth, rowSpan: control.rowSpan\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowSpan=\"rowSpan\" let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\"\r\n    let-tableParentData=\"tableParentData\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} row-span-{{rowSpan}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, eventType.ENTER, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\" [dataSource]=\"control.dataSource\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [autoFormat]=\"control.autoFormat\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\" [min]=\"control.min\"\r\n                    [max]=\"control.max\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (search)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, eventType.BLUR, data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    [placeholder]=\"control.placeholder\" [height]=\"control.height ? control.height : 250\"\r\n                    [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [disabled]=\"control.disabled\" [control]=\"control\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, eventType.HIDE, data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'imageuploader'\">\r\n                <app-image-uploader [loadByEntityKey]=\"control.loadByEntityKey\" [entityKey]=\"control.entityKey\"\r\n                    [defaultNoImageUrl]=\"'/assets/images/no-image.jpg'\" [multiple]=\"control.multiple\"\r\n                    [isAvatar]=\"control.isAvatar\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\">\r\n                    <ng-template *ngIf=\"control.templateItems\" #items let-files>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItems; context: {\r\n                            $implicit: files\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"control.templateItem\" #item let-file>\r\n                        <ng-container *ngTemplateOutlet=\"control.templateItem; context: {\r\n                            $implicit: file\r\n                        }\"></ng-container>\r\n                    </ng-template>\r\n                </app-image-uploader>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [rootFolderId]=\"control.rootFolderId\"\r\n                    [maxFileSize]=\"control.maxFileSize\" [inTaiLieu]=\"control.inTaiLieu\"\r\n                    [inTaiLieuChung]=\"control.inTaiLieuChung\" [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager>\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload *ngIf=\"control.entityKey || data[control.entityKeyField] || control.rootFolderId\"\r\n                    [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\" [serviceCode]=\"control.serviceCode\"\r\n                    [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [control]=\"control\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.DELETED, data, parentPath)\">\r\n                </service-file-upload>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                        binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                control: subControl, \r\n                                data: data[control.field], \r\n                                parentPath: path, \r\n                                rowIndex: rowIndex, \r\n                                path: path + '.' + subControl.field, \r\n                                showLabel: subControl.showLabel, \r\n                                mdWidth: subControl.mdWidth,\r\n                                rowSpan: subControl.rowSpan\r\n                            }\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker-new'\">\r\n                <cocautochuc-picker-list-new [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list-new>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnly]=\"control.readOnly\" [loaiVanBan]=\"control.loaiVanBan\"\r\n                    [(ngModel)]=\"data[control.field]\" (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </vanban-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\"\r\n                        [autoFormat]=\"control.autoFormat\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'chips'\">\r\n                <p-chips [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onAdd)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"\r\n                    (onRemove)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\"></p-chips>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onInit)=\"handleLoadedControl($event, control, parentPath)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, eventType.CHANGE, data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, eventType.ROW_REORDER, data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 40px\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <span *ngIf=\"subControl.required\" class=\"star-required\">*</span>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\" [class]=\"rowData.class\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container *ngTemplateOutlet=\"customControl; context: {\r\n                                                        control: subControl,\r\n                                                        data: rowData,\r\n                                                        index: ri,\r\n                                                        tablePath: path,\r\n                                                        parentPath: path + '[' + ri + ']',\r\n                                                        path: path + '[' + ri + '].' + subControl.field,\r\n                                                        showLabel: false,\r\n                                                        mdWidth: 12,\r\n                                                        rowSpan: 1\r\n                                                    }\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"control.template\">\r\n                    <ng-container [ngTemplateOutlet]=\"control.template\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!control.template\" [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n            <div *ngIf=\"control.message\" class=\"control-message\">\r\n                <span [class]=\"control.messageClass\">{{control.message}}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form>\r\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{position:absolute}div.label .star-required,th>span.star-required{color:red;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;color:#495057;display:flex;font-weight:600;padding:.5em}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-size:.85em;font-weight:700}.view-mode>span:not(:empty){display:inline-block;padding:5px 0;width:100%}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{border-bottom:1px solid #cfcfcf;color:#025ba7;font-size:1.2rem;font-weight:700;margin-bottom:5px;padding:5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#007eff;font-size:.8rem;font-weight:700;margin-bottom:5px;margin-left:10px}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.no-value{font-size:.8em}@-webkit-keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@-webkit-keyframes shrink{0%{height:0}to{height:20px}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep crud-form .crud-form-control>div.label{font-size:.9rem;height:1.15em;margin-bottom:5px}::ng-deep crud-form .crud-form-control>div.label+*{width:100%}::ng-deep crud-form .crud-form-control>.error-container .error-item{-webkit-animation:shrink .1s;animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content{-webkit-animation:fadeIn .1s;animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content i{display:flex;font-size:.9em;padding-top:1px}::ng-deep crud-form .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep crud-form .crud-form-control .control-message{font-size:.9rem;margin-top:5px}::ng-deep crud-form .crud-form-control .control-message .green{color:#00af00}::ng-deep crud-form .crud-form-control .control-message .red{color:red}::ng-deep crud-form .crud-form-control .control-message .blue{color:#0095ff}::ng-deep crud-form .crud-form-control.no-label>div.label{display:none}::ng-deep crud-form .crud-form-control.error .p-dropdown,::ng-deep crud-form .crud-form-control.error .p-inputtext,::ng-deep crud-form .crud-form-control.error .p-multiselect,::ng-deep crud-form .crud-form-control.error .tn-dropdown,::ng-deep crud-form .crud-form-control.error input,::ng-deep crud-form .crud-form-control.error select,::ng-deep crud-form .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep crud-form .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep crud-form .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep crud-form .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}@media screen and (min-width:768px){::ng-deep crud-form .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}::ng-deep crud-form .grid .p-md-1{grid-column:span 1;width:unset}::ng-deep crud-form .grid .p-md-2{grid-column:span 2;width:unset}::ng-deep crud-form .grid .p-md-3{grid-column:span 3;width:unset}::ng-deep crud-form .grid .p-md-4{grid-column:span 4;width:unset}::ng-deep crud-form .grid .p-md-5{grid-column:span 5;width:unset}::ng-deep crud-form .grid .p-md-6{grid-column:span 6;width:unset}::ng-deep crud-form .grid .p-md-7{grid-column:span 7;width:unset}::ng-deep crud-form .grid .p-md-8{grid-column:span 8;width:unset}::ng-deep crud-form .grid .p-md-9{grid-column:span 9;width:unset}::ng-deep crud-form .grid .p-md-10{grid-column:span 10;width:unset}::ng-deep crud-form .grid .p-md-11{grid-column:span 11;width:unset}::ng-deep crud-form .grid .p-md-12{grid-column:span 12;width:unset}::ng-deep crud-form .grid .row-span-1{grid-row:span 1}::ng-deep crud-form .grid .row-span-2{grid-row:span 2}::ng-deep crud-form .grid .row-span-3{grid-row:span 3}::ng-deep crud-form .grid .row-span-4{grid-row:span 4}::ng-deep crud-form .grid .row-span-5{grid-row:span 5}::ng-deep crud-form .grid .row-span-6{grid-row:span 6}::ng-deep crud-form .grid .row-span-7{grid-row:span 7}::ng-deep crud-form .grid .row-span-8{grid-row:span 8}::ng-deep crud-form .grid .row-span-9{grid-row:span 9}::ng-deep crud-form .grid .row-span-10{grid-row:span 10}::ng-deep crud-form .grid .row-span-11{grid-row:span 11}::ng-deep crud-form .grid .row-span-12{grid-row:span 12}::ng-deep crud-form .grid .row-span-13{grid-row:span 13}::ng-deep crud-form .grid .row-span-14{grid-row:span 14}::ng-deep crud-form .grid .row-span-15{grid-row:span 15}::ng-deep crud-form .grid .row-span-16{grid-row:span 16}::ng-deep crud-form .grid .row-span-17{grid-row:span 17}::ng-deep crud-form .grid .row-span-18{grid-row:span 18}::ng-deep crud-form .grid .row-span-19{grid-row:span 19}::ng-deep crud-form .grid .row-span-20{grid-row:span 20}::ng-deep crud-form .grid .row-span-21{grid-row:span 21}::ng-deep crud-form .grid .row-span-22{grid-row:span 22}::ng-deep crud-form .grid .row-span-23{grid-row:span 23}::ng-deep crud-form .grid .row-span-24{grid-row:span 24}::ng-deep crud-form .grid .row-span-25{grid-row:span 25}::ng-deep crud-form .grid .row-span-26{grid-row:span 26}::ng-deep crud-form .grid .row-span-27{grid-row:span 27}::ng-deep crud-form .grid .row-span-28{grid-row:span 28}::ng-deep crud-form .grid .row-span-29{grid-row:span 29}::ng-deep crud-form .grid .row-span-30{grid-row:span 30}::ng-deep crud-form .grid .row-span-31{grid-row:span 31}::ng-deep crud-form .grid .row-span-32{grid-row:span 32}::ng-deep crud-form .grid .row-span-33{grid-row:span 33}::ng-deep crud-form .grid .row-span-34{grid-row:span 34}::ng-deep crud-form .grid .row-span-35{grid-row:span 35}::ng-deep crud-form .grid .row-span-36{grid-row:span 36}::ng-deep crud-form .grid .row-span-37{grid-row:span 37}::ng-deep crud-form .grid .row-span-38{grid-row:span 38}::ng-deep crud-form .grid .row-span-39{grid-row:span 39}::ng-deep crud-form .grid .row-span-40{grid-row:span 40}::ng-deep crud-form .grid .row-span-41{grid-row:span 41}::ng-deep crud-form .grid .row-span-42{grid-row:span 42}::ng-deep crud-form .grid .row-span-43{grid-row:span 43}::ng-deep crud-form .grid .row-span-44{grid-row:span 44}::ng-deep crud-form .grid .row-span-45{grid-row:span 45}::ng-deep crud-form .grid .row-span-46{grid-row:span 46}::ng-deep crud-form .grid .row-span-47{grid-row:span 47}::ng-deep crud-form .grid .row-span-48{grid-row:span 48}::ng-deep crud-form .grid .row-span-49{grid-row:span 49}::ng-deep crud-form .grid .row-span-50{grid-row:span 50}}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-delay:0s,0s;transition-duration:.3s,.3s;transition-property:box-shadow,border-color;transition-timing-function:ease,ease}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}:host ::ng-deep .table-schema-paging{display:block;margin-bottom:40px}"]
                 },] }
@@ -19799,6 +19932,71 @@
         { type: ApplicationContextService }
     ]; };
 
+    var sort_by;
+    (function () {
+        var defaultCompareFunc = function (a, b) {
+            if (a == b)
+                return 0;
+            return a < b ? -1 : 1;
+        };
+        var getCompareFunc = function (primer, reverse) {
+            var defaultCompare = defaultCompareFunc;
+            var compare = defaultCompareFunc;
+            if (primer) {
+                compare = function (a, b) {
+                    return defaultCompare(primer(a), primer(b));
+                };
+            }
+            if (reverse) {
+                return function (a, b) {
+                    return -1 * compare(a, b);
+                };
+            }
+            return compare;
+        };
+        sort_by = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var fields = [], n_fields = args.length;
+            var field, name, cmp;
+            // preprocess sorting options
+            for (var i = 0; i < n_fields; i++) {
+                field = args[i];
+                if (typeof field === 'string') {
+                    name = field;
+                    cmp = defaultCompareFunc;
+                }
+                else {
+                    name = field.name;
+                    cmp = getCompareFunc(field.primer, field.reverse);
+                }
+                fields.push({
+                    name: name,
+                    cmp: cmp
+                });
+            }
+            // final comparison function
+            return function (A, B) {
+                var name, result;
+                for (var i = 0; i < n_fields; i++) {
+                    result = 0;
+                    field = fields[i];
+                    name = field.name;
+                    result = field.cmp(A[name], B[name]);
+                    if (result !== 0)
+                        break;
+                }
+                return result;
+            };
+        };
+    }());
+    // multipleSort('idTinhThanh', 'idQuanHuyen')
+    // multipleSort({name: 'idTinhThanh', reverse: true}, 'idQuanHuyen')
+    // multipleSort({name: 'soThuTu', primer: parseInt}, 'idQuanHuyen') // parseInt là function
+    var multipleSort = sort_by;
+
     var ListComponentBase = /** @class */ (function (_super) {
         __extends(ListComponentBase, _super);
         function ListComponentBase(_injector, _isTreeTable) {
@@ -22859,7 +23057,8 @@
         ListComponentBase.prototype.goToTask = function (event) {
             this._notifierService.showWarning('Chức năng xem chi tiết công việc xử lý tờ trình đang được hoàn thiện...');
         };
-        ListComponentBase.prototype.adjustPositionLoadingMask = function () { };
+        ListComponentBase.prototype.adjustPositionLoadingMask = function () {
+        };
         ListComponentBase.prototype.checkPermissionToUseButton = function (buttonPermissionCode) {
             var userService = this._injector.get(UserService);
             var currentUser = userService.getCurrentUser();
@@ -22893,6 +23092,7 @@
         templateWorkflowCoreStatus: [{ type: i0.ViewChild, args: ['workflowCoreStatus', { static: true },] }],
         scrollbar: [{ type: i0.ViewChild, args: ['scrollbar', { static: true },] }],
         contextMenu: [{ type: i0.ViewChild, args: ['contextMenu', { static: false },] }],
+        paginationTemplate: [{ type: i0.ContentChild, args: ['pagination', { static: true },] }],
         searchCustom: [{ type: i0.ContentChild, args: ['searchCustom', { static: true },] }],
         header: [{ type: i0.ContentChild, args: ['header', { static: true },] }],
         headerFilter: [{ type: i0.ContentChild, args: ['headerFilter', { static: true },] }],
@@ -23020,7 +23220,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'crud-list',
-                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n        [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                    }\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                        (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n        <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                                [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                                class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\r\n                                    selectedItems: model.selectedItems, crudList: this,\r\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                                }\">\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                                [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                                class=\"p-col-12 button-group function-topbar\">\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                                    [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\r\n                                    (click)=\"danhSoThuTuGroupLastest()\"></button>\r\n                            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n                            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n                            </ng-container>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                    label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                    [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                    class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                    (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                    [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                            [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch id=\"crudList_advanceSearch\" [parentSetting]=\"setting\"\r\n                                [searchInfo]=\"searchInfo\" [loading]=\"model.loading\"\r\n                                (onSearch)=\"handleSearchAdvs($event)\"\r\n                                (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                    [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                    [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n        [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n        (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n        [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n        (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n        [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n        (onRemoved)=\"onRemoveWorkflowSettings($event)\"\r\n        (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n        [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n            (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n        [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n        (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\r\n        [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"processWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%; padding: 1rem\">\r\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\r\n                [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n                (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n        [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\r\n                [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\r\n                (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n        [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\r\n                [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\r\n                [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n                (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\r\n        [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"detailTaskModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\r\n            (onCancel)=\"detailTaskModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n\r\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\r\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-form>\r\n</tn-dialog> -->\r\n\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n        [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n                (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\r\n        [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"permissionListModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\r\n                (onCancel)=\"permissionListModel.showEditForm = false\">\r\n        </workflow-permission>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n        [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n        [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n                [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n                (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n        [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n        (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n            [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n            (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n        [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"shareLinkModel.showEditForm = false\">\r\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\r\n            (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </share-link-by-permission>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\r\n        [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"attachedTaskModel.showEditForm = false\">\r\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\r\n            [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\r\n</tn-dialog>\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n            [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n            [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n            [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                    (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n            [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n            [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n            [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                    class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                            (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                    [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                        [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <div class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                                [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                                [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                            [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                    (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #baseColgroup let-columns>\r\n    <colgroup>\r\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\"/>\r\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\"/>\r\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\"/>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\"/>\r\n        </ng-container>\r\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\"/>\r\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\"/>\r\n    </colgroup>\r\n</ng-template>\r\n<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonExport>\r\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\r\n            [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\r\n            label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n            class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n            [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n            [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n            class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                        class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\r\n                        tooltipPosition=\"top\"\r\n                        [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n                (dblclick)=\"reload()\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                    [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                    [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                    [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n                [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                    tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                                [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                    [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'intWithoutMask'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'currency'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                    (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                    [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\"\r\n                    (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                    [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                    (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\r\n            [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\r\n            [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && (!rowData.hidden || !rowData.hidden[fieldCheckbox])\">\r\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\r\n                    [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\r\n                    [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                                [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\" class=\"stt\"\r\n                style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion && (!rowData.hidden || !rowData.hidden[fieldColExpand])\"\r\n                class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n                *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow && (!rowData.hidden || !rowData.hidden[fieldColReorder])\" class=\"no-padding center\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn && (!rowData.hidden || !rowData.hidden[fieldFunction])\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                    [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\r\n                    [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                            class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                            tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" [appAuthorize]=\"serviceCode\"\r\n                            [permission]=\"authorizePaths[commonConst.EDIT]\"\r\n                            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EDIT]\" type=\"button\" pButton pRipple\r\n                            [disabled]=\"disableEdit(rowData)\" [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                            class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                            (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" [appAuthorize]=\"serviceCode\"\r\n                            [permission]=\"authorizePaths[commonConst.DELETE]\"\r\n                            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE]\" type=\"button\" pButton pRipple\r\n                            [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\r\n                            tooltipPosition=\"top\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                            (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"showMenuButtons && this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                            class=\"link-or-action p-button-text p-button-info p-button-rounded\"\r\n                            pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                            tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n    <ng-container *ngIf=\"rowData.template\">\r\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\r\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\r\n        }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n            [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                    tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                    tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                    class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n                [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                        style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                        [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                    tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'intWithoutMask'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n                {{rowData[field] | currency:\"VND\"}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                        [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                        tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                        tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n            [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n            (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n            [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span *ngIf=\"setting.columnSetting.showGroupSize\">\r\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\r\n                class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\r\n                pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n                [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\r\n                (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                    class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                    [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n            tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n            [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n                [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n                (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n                (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                    [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                    (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n                tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                    [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n                [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n                tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                    (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n                [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n                (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton *ngIf=\"!col.minimizeFilter\"\r\n                [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n                [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n        <ng-container *ngIf=\"col.minimizeFilter\">\r\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\r\n                    class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\r\n                    class=\"btn-filter-boolean p-button-primary\"\r\n                    (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n            [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n            [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n            [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\"\r\n            [entity]=\"fileSetting.control.entity\"\r\n            [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n            [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template>\r\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n            [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n            [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n            [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n            [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template>",
+                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n        [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                        crudList: this,\r\n                        buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                    }\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\r\n                <ng-container *ngIf=\"!paginationTemplate\">\r\n                    <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\r\n                            (onChangeLimitPage)=\"savePageSize()\">\r\n                    </paging-next-back-only>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"paginationTemplate\">\r\n                    <ng-container [ngTemplateOutlet]=\"paginationTemplate\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n        <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n    </div>\r\n    <div class=\"fit-content crud-list-body-area\">\r\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\r\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\r\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\r\n                    <ng-container>\r\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\r\n                                [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                                class=\"p-col-12 button-group function-topbar custom-toolbar\">\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('toolbar')\" [ngTemplateOutletContext]=\"{\r\n                                    selectedItems: model.selectedItems, crudList: this,\r\n                                    buttonAdd: buttonAdd, buttonExport: buttonExport, buttonDelete: buttonDelete\r\n                                }\">\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\r\n                                [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\r\n                                class=\"p-col-12 button-group function-topbar\">\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonBeforeToolbar')\"\r\n                                    [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                            <button type=\"button\" pButton label=\"\u0110\u00E1nh STT\" class=\"p-button-text\" style=\"display: none\"\r\n                                    (click)=\"danhSoThuTuGroupLastest()\"></button>\r\n                            <ng-container *ngIf=\"!hiddenAdd\" [ngTemplateOutlet]=\"buttonAdd\"></ng-container>\r\n                            <ng-container *ngIf=\"setting.showExportSelectedItems\" [ngTemplateOutlet]=\"buttonExport\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"!hiddenDelete\" [ngTemplateOutlet]=\"buttonDelete\">\r\n                            </ng-container>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                    label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                    [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                    class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                    (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                    [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                            [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch id=\"crudList_advanceSearch\" [parentSetting]=\"setting\"\r\n                                [searchInfo]=\"searchInfo\" [loading]=\"model.loading\"\r\n                                (onSearch)=\"handleSearchAdvs($event)\"\r\n                                (onInit)=\"handleInitAdvanceSearch($event)\">\r\n                        </advance-search>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\r\n                </div>\r\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\r\n                    <div class=\"container-table-inner\">\r\n                        <ng-container *ngIf=\"!_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                    [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                    [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n        [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n        (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n        [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n        (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n        [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n        (onRemoved)=\"onRemoveWorkflowSettings($event)\"\r\n        (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n        [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n            (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n        [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n        (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\r\n        [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"processWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%; padding: 1rem\">\r\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\r\n                [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n                (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n        [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\r\n                [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\r\n                (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n        [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\r\n                [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\r\n                [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n                (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\r\n        [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"detailTaskModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\r\n            (onCancel)=\"detailTaskModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n\r\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\r\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-form>\r\n</tn-dialog> -->\r\n\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n        [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n                (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\r\n        [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"permissionListModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\r\n                (onCancel)=\"permissionListModel.showEditForm = false\">\r\n        </workflow-permission>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n        [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n        [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n        (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n                [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n                (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n        [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n        (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n            [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n            (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n        [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"shareLinkModel.showEditForm = false\">\r\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\r\n            (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </share-link-by-permission>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\r\n        [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n        (onHide)=\"attachedTaskModel.showEditForm = false\">\r\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\r\n            [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\r\n</tn-dialog>\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n            [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n            [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n            [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                    (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"rowExpansion; context: {$implicit: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n            [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n            [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n            [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                    class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                            (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                    [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                        [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <div class=\"content-row-group\">\r\n                                    <ng-container *ngIf=\"!contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\r\n                                                [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"contentRowGroup\">\r\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\r\n                                                [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </a>\r\n                        </div>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"rowGroup\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\r\n                            [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\r\n            <ng-container\r\n                    *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                    (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #baseColgroup let-columns>\r\n    <colgroup>\r\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\"/>\r\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\"/>\r\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\"/>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\"/>\r\n        </ng-container>\r\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\"/>\r\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\"/>\r\n    </colgroup>\r\n</ng-template>\r\n<ng-template #buttonAdd>\r\n    <span [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.ADD]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.ADD]\">\r\n        <button type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text\"\r\n                [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n    </span>\r\n</ng-template>\r\n<ng-template #buttonExport>\r\n    <button *ngIf=\"model.selectedItems.length > 0\" [appAuthorize]=\"serviceCode\"\r\n            [permission]=\"authorizePaths[commonConst.EXPORT_EXCEL]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EXPORT_EXCEL]\" type=\"button\" pButton pRipple\r\n            label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\r\n            class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\r\n</ng-template>\r\n<ng-template #buttonDelete>\r\n    <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n            [appAuthorize]=\"serviceCode\" [permission]=\"authorizePaths[commonConst.DELETE_MULTIPLE]\"\r\n            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE_MULTIPLE]\" type=\"button\" pButton pRipple\r\n            [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n            class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                        class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\"\r\n                        tooltipPosition=\"top\"\r\n                        [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n                (dblclick)=\"reload()\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                    [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                    [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                    [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n                [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                    tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                                [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                    [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'intWithoutMask'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'decimal'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'currency'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'date'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'datetime'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'boolean'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchDefault>\r\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\r\n                                            [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\r\n                [class.sticky]=\"setting.stickyColumn\">\r\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\r\n                    (click)=\"showSettings()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\r\n                    [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\"\r\n                    (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                    class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                    [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                    (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr *ngIf=\"!rowData.template\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\r\n            [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\r\n            [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox && (!rowData.hidden || !rowData.hidden[fieldCheckbox])\">\r\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\"\r\n                    [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldCheckbox]\"\r\n                    [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldCheckbox]\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                                [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\" class=\"stt\"\r\n                style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion && (!rowData.hidden || !rowData.hidden[fieldColExpand])\"\r\n                class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColExpand]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColExpand]\">\r\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container\r\n                *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\r\n        </ng-container>\r\n        <td *ngIf=\"enableReorderRow && (!rowData.hidden || !rowData.hidden[fieldColReorder])\" class=\"no-padding center\"\r\n                [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldColReorder]\"\r\n                [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldColReorder]\">\r\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn && (!rowData.hidden || !rowData.hidden[fieldFunction])\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n                    [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldFunction]\"\r\n                    [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldFunction]\">\r\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </div>\r\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\r\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\r\n                            class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                            tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" [appAuthorize]=\"serviceCode\"\r\n                            [permission]=\"authorizePaths[commonConst.EDIT]\"\r\n                            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.EDIT]\" type=\"button\" pButton pRipple\r\n                            [disabled]=\"disableEdit(rowData)\" [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\r\n                            class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\r\n                            (click)=\"edit(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenDelete\" [appAuthorize]=\"serviceCode\"\r\n                            [permission]=\"authorizePaths[commonConst.DELETE]\"\r\n                            [enableAuthorize]=\"buttonApplyAuthorize[commonConst.DELETE]\" type=\"button\" pButton pRipple\r\n                            [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\"\r\n                            tooltipPosition=\"top\"\r\n                            class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                            (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"showMenuButtons && this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                            class=\"link-or-action p-button-text p-button-info p-button-rounded\"\r\n                            pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                            tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                            [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n    <ng-container *ngIf=\"rowData.template\">\r\n        <ng-container *ngTemplateOutlet=\"rowData.template; context: {\r\n            $implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: eventSelectRow, eventChecked: eventChecked\r\n        }\"></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n                *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n            [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                    tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                    tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                    class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                            [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n                [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                        style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                        [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                    tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'intWithoutMask'\">\r\n                {{rowData[field]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n                {{rowData[field] | currency:\"VND\"}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field] | number}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'boolean'\">\r\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\r\n                        [disabled]=\"col.disableCheckBox\">\r\n                </p-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'html'\">\r\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'metadataStatus'\">\r\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\r\n                        tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\r\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\r\n                    duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\r\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'fileUpload'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                        *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                        tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n            [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n            (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n            [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span *ngIf=\"setting.columnSetting.showGroupSize\">\r\n        ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\r\n                class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\r\n                pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n                [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\r\n                (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                    class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                    [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n            tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n            [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n                [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n                (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n                (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                    [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                    (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n                tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                    [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n                [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n                tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                    (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n                [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n                [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n                (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton *ngIf=\"!col.minimizeFilter\"\r\n                [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n                [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n        <ng-container *ngIf=\"col.minimizeFilter\">\r\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\r\n                    class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\r\n                    class=\"btn-filter-boolean p-button-primary\"\r\n                    (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n            [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n            [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n            [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\"\r\n            [entity]=\"fileSetting.control.entity\"\r\n            [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n            [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template>\r\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n            [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n            [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n            [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n            [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template>",
                     providers: [i3.DecimalPipe, i3.DatePipe],
                     styles: [".container-table{display:flex;flex-direction:column;overflow:hidden}.container-table .container-table-inner{display:flex;height:auto;max-height:100%;min-height:60px;position:relative}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{border:1px solid #d1d1d1;border-radius:2px;bottom:0;cursor:pointer;display:flex;flex-wrap:wrap;height:1.4em;left:0;margin:auto;position:absolute;right:0;top:0;width:1.4em}.pick-color-row>div{background:#84d140;border:1px solid #fff;flex:0 0 50%}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.group-icon{color:#256aa2;font-weight:400}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{height:100%;left:0;position:absolute;top:0;width:5px}.column-function{min-width:100px;padding:0}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{align-items:center;display:flex;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem;left:50%;position:absolute;top:50%;transform:translate(-50%,calc(-50% - 1px));width:2rem}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;font-weight:700;white-space:nowrap}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}.btn-filter-boolean{height:26px;width:26px}.btn-filter-boolean:not(.p-button-primary),.btn-filter-boolean:not(.p-button-primary):hover{background:#f5f6f8;border-color:#ced4da;color:#6c757d}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .main-title>*>h1{font-size:1.2em}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{min-width:200px;position:fixed;z-index:10}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{height:0;position:absolute;width:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{background-color:#fff;border-radius:3px;display:flex;min-width:0}::ng-deep crud-list .cell-header-filter .filter-box>div{border:1px solid #ced4da;border-radius:3px 0 0 3px;border-right:none;flex:1;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{align-items:center;background:#f5f6f8;border:1px solid #ced4da;color:#6c757d;cursor:pointer;display:inline-flex;flex-basis:32px;height:32px;justify-content:center;min-width:unset;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{border:none;box-shadow:none!important;padding-left:5px;padding-right:5px}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter.focus-within,::ng-deep crud-list .cell-header-filter:focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box{box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763);min-width:250px;position:absolute;top:calc(50% - 16px);z-index:2}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;flex:1;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{background-color:#eee;position:absolute;z-index:5}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{bottom:0;top:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{height:1px;left:0;right:0}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list .custom-search-area .main-container-search-inner .container-control{overflow:hidden;padding-bottom:0}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -23776,6 +23976,35 @@
                 });
             });
         };
+        ListBase.prototype.addRefFields = function (refFields) {
+            var e_1, _a;
+            if (this.setting.fieldNeedGetRef == null || this.setting.fieldNeedGetRef.length === 0) {
+                this.setting.fieldNeedGetRef = __spread(refFields);
+                return;
+            }
+            var _loop_1 = function (refField) {
+                var oldRefIndex = this_1.setting.fieldNeedGetRef.findIndex(function (x) { return x.field == refField.field; });
+                if (oldRefIndex === -1) {
+                    this_1.setting.fieldNeedGetRef.push(refField);
+                    return "continue";
+                }
+                this_1.setting.fieldNeedGetRef[oldRefIndex] = refField;
+            };
+            var this_1 = this;
+            try {
+                for (var refFields_1 = __values(refFields), refFields_1_1 = refFields_1.next(); !refFields_1_1.done; refFields_1_1 = refFields_1.next()) {
+                    var refField = refFields_1_1.value;
+                    _loop_1(refField);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (refFields_1_1 && !refFields_1_1.done && (_a = refFields_1.return)) _a.call(refFields_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
         ListBase.prototype.groupInClient = function (dataSource) {
             if (dataSource.length == 0)
                 return;
@@ -23811,9 +24040,7 @@
                         case 0:
                             if (!(dataSource && dataSource.length > 0)) return [3 /*break*/, 3];
                             if (!this.setting.fieldNeedGetRef) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._crudService.getRefDataInDatasource(dataSource, this.setting.fieldNeedGetRef, function (field) {
-                                    _this.afterGetRefDataDropdown(field);
-                                })];
+                            return [4 /*yield*/, this._crudService.getRefDataInDatasource(dataSource, this.setting.fieldNeedGetRef, function (field) { return _this.afterGetRefDataDropdown(field); })];
                         case 1:
                             _a.sent();
                             this.afterGetRefDataDropdown(null);
@@ -24162,8 +24389,8 @@
         };
         ListBase.prototype._copyLinkMultiple = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var paths, _a, _b, item, _c, _d, e_1_1;
-                var e_1, _e;
+                var paths, _a, _b, item, _c, _d, e_2_1;
+                var e_2, _e;
                 return __generator(this, function (_f) {
                     switch (_f.label) {
                         case 0:
@@ -24186,14 +24413,14 @@
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_1_1 = _f.sent();
-                            e_1 = { error: e_1_1 };
+                            e_2_1 = _f.sent();
+                            e_2 = { error: e_2_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
                                 if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
                             }
-                            finally { if (e_1) throw e_1.error; }
+                            finally { if (e_2) throw e_2.error; }
                             return [7 /*endfinally*/];
                         case 8:
                             this._commonService.copyByStorage(paths.join('\r\n'));
@@ -24221,14 +24448,19 @@
         ListBase.prototype._edit = function (rowData, scopeDataEdit) {
             if (scopeDataEdit === void 0) { scopeDataEdit = {}; }
             return __awaiter(this, void 0, void 0, function () {
-                var flashShow;
+                var resultValidate, flashShow;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
+                        case 0: return [4 /*yield*/, this.validateEdit()];
+                        case 1:
+                            resultValidate = _a.sent();
+                            if (!resultValidate) {
+                                return [2 /*return*/];
+                            }
                             flashShow = rowData[KeyFlashShow];
                             delete rowData[KeyFlashShow];
                             return [4 /*yield*/, this.beforeEdit()];
-                        case 1:
+                        case 2:
                             _a.sent();
                             this.formModel.formState = exports.FormState.EDIT;
                             this.setting.popupHeader = "Chi ti\u1EBFt " + this.setting.objectName + " ";
@@ -24236,7 +24468,7 @@
                             this.scopeDataEdit = scopeDataEdit;
                             this.formModel.data = this.cloneData(rowData);
                             return [4 /*yield*/, this.modifyEditModel(rowData)];
-                        case 2:
+                        case 3:
                             _a.sent();
                             this.formModel.data[KeyFlashShow] = flashShow;
                             this.showDetailForm = true;
@@ -24245,6 +24477,13 @@
                 });
             });
         };
+        ListBase.prototype.validateEdit = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
         ListBase.prototype.beforeEdit = function () {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -24882,25 +25121,26 @@
                             _i = 0;
                             _c.label = 1;
                         case 1:
-                            if (!(_i < _a.length)) return [3 /*break*/, 5];
+                            if (!(_i < _a.length)) return [3 /*break*/, 4];
                             ind = _a[_i];
                             element = this.environment.appMetadata.appSwitcher[ind];
-                            if (!(this.rootModel.allowAnonymous && element.allowAnonymous)) return [3 /*break*/, 2];
-                            arr.push(element);
-                            return [3 /*break*/, 4];
-                        case 2:
-                            if (!this.currentUser) return [3 /*break*/, 4];
+                            // const clientId = this.environment.authenticationSettings.clientId;
+                            if (this.rootModel.allowAnonymous && element.allowAnonymous) {
+                                arr.push(element);
+                                return [3 /*break*/, 3];
+                            }
+                            if (!this.currentUser) return [3 /*break*/, 3];
                             return [4 /*yield*/, this._permissionService.isAuthorized(element.code, (element.code + ".MODULE." + element.code).toUpperCase(), true)];
-                        case 3:
+                        case 2:
                             isAuthorized = _c.sent();
                             if (isAuthorized) {
                                 arr.push(element);
                             }
-                            _c.label = 4;
-                        case 4:
+                            _c.label = 3;
+                        case 3:
                             _i++;
                             return [3 /*break*/, 1];
-                        case 5:
+                        case 4:
                             resolve(arr);
                             return [2 /*return*/];
                     }
@@ -24913,20 +25153,21 @@
                         if (element.visible) {
                             if (!_this.currentUser) { // allow anonymous
                                 _this.appSwitcherItems.push(element);
+                                return;
                             }
-                            else {
-                                if (_this.currentUser.maNguoiHoc && _this.currentUser.issuperuser.toLowerCase() != 'true') {
-                                    if (element.code.toLowerCase() == 'sv' || element.code.toLowerCase() == 'user') {
-                                        _this.appSwitcherItems.push(element);
-                                    }
-                                }
-                                else {
+                            if (_this.currentUser.maNguoiHoc && _this.currentUser.issuperuser.toLowerCase() != 'true') {
+                                if (element.code.toLowerCase() == 'sv' || element.code.toLowerCase() == 'user') {
                                     _this.appSwitcherItems.push(element);
                                 }
+                                return;
                             }
+                            _this.appSwitcherItems.push(element);
                         }
                     });
                     if (_this.appSwitcherItems.length === 1) {
+                        if (_this._appContext.getRootContext().data.isLoggingOut === true) {
+                            return;
+                        }
                         _this.switchApp(_this.appSwitcherItems[0]);
                     }
                 }
@@ -30298,8 +30539,12 @@
             this.currentKeyPressIndex = 0;
             this.EnumTypeSplash = exports.EnumTypeSplash;
             this.layoutLoadingPage = exports.EnumTypeSplash.NEW_V1;
+            this.favIcon = document.querySelector('#appFavicon');
+            this.icon = '';
             this.environment = this._moduleConfigService.getConfig().environment;
             this.appCode = this._moduleConfigService.getConfig().appCode;
+            this.icon = this.environment.appMetadata.main.favicon;
+            this.favIcon.href = this.icon;
             if (this.environment.keyPressPermissionUtils) {
                 this.keyPressPermissionUtils = this.environment.keyPressPermissionUtils;
             }
@@ -30329,7 +30574,7 @@
             //     confirmService: _confirmService
             // });
             this._applicationContext.addRootContext(this._componentContextService, _activatedRoute);
-            this._title.setTitle(this.environment.appMetadata.main.title);
+            this._title.setTitle(this.environment.appMetadata.main.owner);
             this.translate.setDefaultLang('vn');
             this.translate.use('vn');
             this.initTinyMce();
@@ -30737,10 +30982,12 @@
                 }
                 else if (evt.type === 'logout') {
                     // cleanup storage
+                    _this._applicationContext.getRootContext().data.isLoggingOut = true;
                     _this._authenService.cleanupLocalStorage();
                     _this._authenService.cleanupSessionStorage();
                     _this._storageUpdatedService.cleanupStorageService();
-                    _this._oauthService.revokeTokenAndLogout(null, true);
+                    _this._oauthService.revokeTokenAndLogout(null, true).then(function (res) {
+                    });
                 }
                 else if (evt.type == 'session_terminated') {
                     _this._storageService.removeItem('current_user_info');
@@ -31103,6 +31350,8 @@
         });
     }
 
+    var KeyStorageDropdownSetting = '__DROPDOWN_SETING';
+
     var DropdownComponent = /** @class */ (function (_super) {
         __extends(DropdownComponent, _super);
         function DropdownComponent(_deviceDetectorService, injector, _crudService) {
@@ -31129,6 +31378,7 @@
             _this.onDataSourceLoaded = new i0.EventEmitter();
             _this.valueChange = new i0.EventEmitter();
             _this.adjustValue = new i0.EventEmitter();
+            _this._unSubscribeAll = new rxjs.Subject();
             _this.dataSourceInternal = [];
             _this.dataSourceSelected = [];
             _this.funcReturnValue = function (value) { return value; };
@@ -31139,6 +31389,9 @@
             _this.keyUp = new rxjs.Subject();
             _this._hasLoadedDatasource = false;
             _this.quickAddDialogModel = new DialogModel({});
+            _this.settingDialogModel = new DialogModel({
+                header: 'Cấu hình dropdown'
+            });
             _this.flashCacheParent = [];
             _this.filterFromParents = [];
             _this.dropdownOptions = [];
@@ -31252,7 +31505,6 @@
             configurable: true
         });
         DropdownComponent.prototype.ngOnInit = function () {
-            var _this = this;
             if (this.control.quickAdd) {
                 this.quickAddDialogModel.header = "Th\u00EAm m\u1EDBi " + this.control.label;
                 this.quickAddDialogModel.popupSize = this.control.popupSize;
@@ -31278,9 +31530,7 @@
                 if (this.control.isServerLoad) {
                     this.control.maxItemDisplay = 9999;
                     this.createFilterFunction();
-                    this.subscription = this.keyUp.pipe(operators.map(function (event) { return event.target.value; }), operators.debounceTime(500), operators.distinctUntilChanged()).subscribe(function (value) {
-                        _this._getData();
-                    });
+                    this.createSearchSubscription();
                     this._getData();
                 }
                 else if (this.control.loadOnInit) {
@@ -31295,6 +31545,9 @@
             }
             this.onInit.emit(this);
         };
+        DropdownComponent.prototype.ngOnDestroy = function () {
+            this._unSubscribeAll.complete();
+        };
         DropdownComponent.prototype.setDefaultSetting = function () {
             var _this = this;
             if (this.control.isTree) {
@@ -31329,6 +31582,22 @@
                 this.funcReturnValue = function (value) { return value; };
             }
         };
+        DropdownComponent.prototype.getDelaySearchTime = function () {
+            var jsDropdownSetting = localStorage.getItem(KeyStorageDropdownSetting);
+            var result = 500;
+            if (jsDropdownSetting) {
+                try {
+                    var dropdownSetting = JSON.parse(jsDropdownSetting);
+                    result = dropdownSetting.delaySearchTime;
+                }
+                catch (err) {
+                }
+            }
+            if (!result || result == NaN || result < 200) {
+                result = 200;
+            }
+            return result;
+        };
         DropdownComponent.prototype.getAllParent = function (result, parentId) {
             if (this.flashCacheParent.some(function (q) { return q.value.id == parentId; })) {
                 return;
@@ -32036,10 +32305,16 @@
         };
         DropdownComponent.prototype._insertTextboxAndFocus = function (defaultInput) {
             this.input.nativeElement.classList.remove('hide');
+            this.buttonSetting.nativeElement.classList.remove('hide');
             // defaultInput.disabled = true;
             defaultInput.parentElement.insertBefore(this.input.nativeElement, defaultInput);
+            defaultInput.parentElement.insertBefore(this.buttonSetting.nativeElement, defaultInput);
             this.input.nativeElement.focus();
         };
+        DropdownComponent.prototype.handleLoaded = function () {
+            if (this.input)
+                this.input.nativeElement.focus();
+        };
         DropdownComponent.prototype.onHideHandler = function (evt) {
             this.onHide.emit({
                 component: this,
@@ -32080,14 +32355,35 @@
             this.quickAddDialogModel.data.formModel = formModel;
             this.quickAddDialogModel.showEditForm = true;
         };
+        DropdownComponent.prototype.showFormSetting = function () {
+            var formModel = new CrudFormData();
+            formModel.data = {};
+            formModel.formState = exports.FormState.ADD;
+            this.settingDialogModel.data.formModel = formModel;
+            this.settingDialogModel.showEditForm = true;
+        };
+        DropdownComponent.prototype.handleSavedSetting = function () {
+            this.settingDialogModel.showEditForm = false;
+            this.createSearchSubscription();
+        };
+        DropdownComponent.prototype.createSearchSubscription = function () {
+            var _this = this;
+            var delaySearchTime = this.getDelaySearchTime();
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+            this.subscription = this.keyUp.pipe(operators.map(function (event) { return event.target.value; }), operators.debounceTime(delaySearchTime), operators.distinctUntilChanged(), operators.takeUntil(this._unSubscribeAll)).subscribe(function (value) {
+                _this._getData();
+            });
+        };
         return DropdownComponent;
     }(ComponentBase));
     DropdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dropdown',
-                    template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\r\n    [class.server-load]=\"control.isServerLoad\">\r\n    <span class=\"server-load-info\" pTooltip=\"D\u1EEF li\u1EC7u s\u1EBD \u0111\u01B0\u1EE3c l\u00E0m m\u1EDBi ghi t\u00ECm ki\u1EBFm\" tooltipPosition=\"top\"></span>\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"control.virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"autofocusSelectedItem\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [virtualScroll]=\"control.virtualScroll\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [selectedItemsLabel]=\"control.selectedItemsLabel\"\r\n        [maxSelectedLabels]=\"control.maxSelectedLabels\" [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\"\r\n        [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onPanelShow)=\"onPanelShowHandler($event)\"\r\n        (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <button *ngIf=\"control.quickAdd && (control.cols || control.quickAddTemplate)\" type=\"button\" pButton\r\n        icon=\"pi pi-plus\" class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\"\r\n        tooltipPosition=\"top\" (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"quickAddDialogModel.showEditForm\" #dialog [header]=\"quickAddDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"quickAddDialogModel.showEditForm = false\">\r\n    <quick-add-form *ngIf=\"control.cols\" #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"quickAddDialogModel.data.formModel\" [control]=\"control\" [baseService]=\"control.baseService\"\r\n        (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form>\r\n</tn-dialog>\r\n\r\n<ng-container *ngTemplateOutlet=\"control.quickAddTemplate; context: {\r\n    handleSaved: handleSaved,\r\n    handleCancel: handleCancel,\r\n    dialogModel: quickAddDialogModel\r\n}\"></ng-container>",
+                    template: "<div #el class=\"tn-dropdown\" [pTooltip]=\"tooltip\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\"\r\n    [class.server-load]=\"control.isServerLoad\">\r\n    <span class=\"server-load-info\" pTooltip=\"D\u1EEF li\u1EC7u s\u1EBD \u0111\u01B0\u1EE3c l\u00E0m m\u1EDBi ghi t\u00ECm ki\u1EBFm\" tooltipPosition=\"top\"></span>\r\n    <p-dropdown *ngIf=\"!control.multiple\" [options]=\"dataSourceInternal\" [placeholder]=\"control.placeholder\"\r\n        [filter]=\"control.filter\" [panelStyleClass]=\"getPanelClass()\" [appendTo]=\"control.appendTo\"\r\n        [styleClass]=\"'tn-dropdown'\" [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\"\r\n        [disabled]=\"control.disabled ? true : null\" [autoZIndex]=\"true\" [showClear]=\"control.showClear\"\r\n        [showTransitionOptions]=\"showTransitionOptions\" [autoDisplayFirst]=\"control.autoDisplayFirst\"\r\n        [virtualScroll]=\"control.virtualScroll\" itemSize=\"30\" [maxItemDisplay]=\"control.maxItemDisplay\"\r\n        [autofocusSelectedItem]=\"autofocusSelectedItem\" [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        [modifyOptionsWhenFilter]=\"modifyOptionWhenFilter\" [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\"\r\n        (onFocus)=\"handleFocus($event)\" (onBlur)=\"handleBlur($event)\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onShow)=\"onShowHandler($event)\" (onHide)=\"onHideHandler($event)\">\r\n        <ng-template *ngIf=\"control.templateSelectedItem\" let-item pTemplate=\"selectedItem\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"control.templateSelectedItem; context: {$implicit: item, selectedValue: _value}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"control.templateItem\" let-item pTemplate=\"item\">\r\n            <ng-container *ngTemplateOutlet=\"control.templateItem; context: {$implicit: item}\"></ng-container>\r\n        </ng-template>\r\n    </p-dropdown>\r\n    <p-multiSelect *ngIf=\"control.multiple\" [options]=\"dataSourceInternal\" [filter]=\"control.filter\"\r\n        [defaultLabel]=\"control.placeholder\" [placeholder]=\"control.placeholder\" [panelStyleClass]=\"getPanelClass()\"\r\n        [appendTo]=\"control.appendTo\" [styleClass]=\"'tn-dropdown'\"\r\n        [emptyFilterMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3' | translate\" [disabled]=\"control.disabled ? true : null\"\r\n        [autoZIndex]=\"true\" [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\" [virtualScroll]=\"control.virtualScroll\"\r\n        [maxItemDisplay]=\"control.maxItemDisplay\" [selectedItemsLabel]=\"control.selectedItemsLabel\"\r\n        [maxSelectedLabels]=\"control.maxSelectedLabels\" [modifyOptionsWhenFilter]=\"modifyOptionWhenFilterMultiple\"\r\n        [delayFilter]=\"delayFilter\" [(ngModel)]=\"_value\" (onChange)=\"onChangeSelected($event)\"\r\n        (onClick)=\"onDropdownClickHandler($event)\" (onPanelShow)=\"onPanelShowHandler($event)\"\r\n        (onPanelHide)=\"onHideHandler($event)\">\r\n        <ng-template pTemplate=\"selectedItems\" let-value>\r\n            <ng-container *ngIf=\"!value || value.length == 0\">{{control.placeholder}}</ng-container>\r\n            <ng-container *ngIf=\"value && value.length > 0\">\r\n                <span *ngFor=\"let selectedItem of value\" [class]=\"_itemSelectedStyleClass\">\r\n                    {{selectedItem[control.displayField]}}<span class=\"remove-item\"\r\n                        (click)=\"removeItem($event, selectedItem)\"><i class=\"fas fa-times\"></i></span>\r\n                </span>\r\n            </ng-container>\r\n        </ng-template>\r\n    </p-multiSelect>\r\n    <input #inputMask class=\"input-mask hide p-inputtext\" type=\"text\" [disabled]=\"loading\"\r\n        [(ngModel)]=\"valueSearchServer\" (keyup)=\"keyUp.next($event)\" />\r\n    <span #buttonSetting class=\"button-setting hide pi pi-cog\" (click)=\"showFormSetting()\"></span>\r\n    <after-view-checked *ngIf=\"!loading\" (loaded)=\"handleLoaded()\"></after-view-checked>\r\n    <button *ngIf=\"control.quickAdd && (control.cols || control.quickAddTemplate)\" type=\"button\" pButton\r\n        icon=\"pi pi-plus\" class=\"p-button-text p-button-rounded button-quick-add\" pTooltip=\"Th\u00EAm nhanh\"\r\n        tooltipPosition=\"top\" (click)=\"showFormQuickAdd()\"></button>\r\n</div>\r\n<tn-dialog *ngIf=\"quickAddDialogModel.showEditForm\" #dialog [header]=\"quickAddDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"quickAddDialogModel.showEditForm = false\">\r\n    <quick-add-form *ngIf=\"control.cols\" #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"quickAddDialogModel.data.formModel\" [control]=\"control\" [baseService]=\"control.baseService\"\r\n        (onSaved)=\"handleSaved()\" (onCancel)=\"handleCancel()\">\r\n    </quick-add-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"settingDialogModel.showEditForm\" #dialog [header]=\"settingDialogModel.header | translate\"\r\n    [popupSize]=\"control.popupSize\" (onHide)=\"settingDialogModel.showEditForm = false\">\r\n    <dropdown-setting-form #formBase [model]=\"settingDialogModel.data.formModel\" (onSaved)=\"handleSavedSetting()\"\r\n        (onCancel)=\"settingDialogModel.showEditForm = false\">\r\n    </dropdown-setting-form>\r\n</tn-dialog>\r\n\r\n<ng-container *ngTemplateOutlet=\"control.quickAddTemplate; context: {\r\n    handleSaved: handleSaved,\r\n    handleCancel: handleCancel,\r\n    dialogModel: quickAddDialogModel\r\n}\"></ng-container>",
                     providers: [ComponentContextService],
-                    styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.tn-dropdown .server-load-info{display:none}.tn-dropdown.server-load{position:relative}.tn-dropdown.server-load .server-load-info{display:block;height:6px;left:0;position:absolute;top:0;width:6px}.tn-dropdown.server-load .server-load-info:before{border:6px solid transparent;border-right-color:green;content:\"\";display:block;left:-6px;position:absolute;top:-6px;transform:rotate(45deg);z-index:1}.input-mask{background:transparent;border:1px solid transparent;border-radius:3px;box-sizing:border-box;outline:none;padding-left:12px;position:absolute;width:100%;z-index:1}.input-mask.hide{display:none}.input-mask:focus{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa}.custom-select-item{align-items:center;background:#d2eefb;border:1px solid #a9d8ff;border-radius:3px;display:inline-flex;margin:0 0 0 3px;padding:3px 5px}.custom-select-item>span{color:#555;font-size:12px;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{margin-left:2px;padding:1px 5px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{box-sizing:border-box;height:22px;left:1px;padding:.2em;text-indent:1.5em;top:1px;width:calc(100% - 2px)}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}"]
+                    styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.tn-dropdown .server-load-info{display:none}.tn-dropdown.server-load{position:relative}.tn-dropdown.server-load .server-load-info{display:block;height:6px;left:0;position:absolute;top:0;width:6px}.tn-dropdown.server-load .server-load-info:before{border:6px solid transparent;border-right-color:green;content:\"\";display:block;left:-6px;position:absolute;top:-6px;transform:rotate(45deg);z-index:1}.input-mask{background:transparent;border:1px solid transparent;border-radius:3px;box-sizing:border-box;outline:none;padding-left:12px;padding-right:32px;position:absolute;width:100%;z-index:1}.input-mask.hide{display:none}.input-mask:focus{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa}.button-setting{align-items:center;background:#fff;border-radius:3px;cursor:pointer;display:flex;height:30px;justify-content:center;position:absolute;right:1px;top:1px;width:30px;z-index:1}.button-setting.hide{display:none}.custom-select-item{align-items:center;background:#d2eefb;border:1px solid #a9d8ff;border-radius:3px;display:inline-flex;margin:0 0 0 3px;padding:3px 5px}.custom-select-item>span{color:#555;font-size:12px;margin-left:3px}.custom-select-item>span i{font-size:10px}.custom-select-item.min{margin-left:2px;padding:1px 5px}.custom-select-item:first-child{margin-left:0}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{box-sizing:border-box;height:22px;left:1px;padding:.2em;text-indent:1.5em;top:1px;width:calc(100% - 2px)}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}"]
                 },] }
     ];
     DropdownComponent.ctorParameters = function () { return [
@@ -32098,6 +32394,7 @@
     DropdownComponent.propDecorators = {
         el: [{ type: i0.ViewChild, args: ['el',] }],
         input: [{ type: i0.ViewChild, args: ['inputMask',] }],
+        buttonSetting: [{ type: i0.ViewChild, args: ['buttonSetting',] }],
         dropdown: [{ type: i0.ViewChild, args: [dropdown.Dropdown,] }],
         multiSelect: [{ type: i0.ViewChild, args: [multiselect.MultiSelect,] }],
         showClear: [{ type: i0.Input }],
@@ -34105,7 +34402,7 @@
             this.setFileName(fileObject.name);
             this.hasFile = true;
             this.onChangeBase('has-value');
-            this.onChanged.emit();
+            this.onInit.emit({ fileId: this.fileId });
         };
         ServiceFileUploadComponent.prototype.hasKeys = function () {
             return this.serviceCode
@@ -34170,10 +34467,10 @@
                 }
                 else {
                     this.hasFile = true;
+                    this.onChangeBase('has-value');
+                    this.onSelect.emit(this.selectedFile);
+                    this.onChanged.emit(this.selectedFile);
                 }
-                this.onChangeBase('has-value');
-                this.onSelect.emit();
-                this.onChanged.emit();
             }
         };
         ServiceFileUploadComponent.prototype.handleSaveFile = function () {
@@ -34208,6 +34505,7 @@
                     _this.selectedFileName = _this.selectedFile.name;
                     _this.fileId = rs.data;
                     _this.hasFile = true;
+                    _this.onChanged.emit({ fileId: _this.fileId, selectedFile: _this.selectedFile });
                 }
                 else {
                     _this._crudService.processErrorResponse(rs);
@@ -34252,7 +34550,7 @@
             this.hasFile = false;
             this.onChangeBase(null);
             this.onRemove.emit();
-            this.onChanged.emit();
+            // this.onChanged.emit();
         };
         ServiceFileUploadComponent.prototype.onDownloadFile = function () {
             this.download();
@@ -45713,7 +46011,7 @@
                 var currentUrl = this.trimLink(this._router.url);
                 var currentRouterLink = this.trimLink(item.routerLink);
                 if (currentUrl === currentRouterLink || this._menuService.checkMappingRouterLink(currentRouterLink, currentUrl)) {
-                    this._title.setTitle(item.label + " - " + this.environment.appMetadata.main.title);
+                    this._title.setTitle(item.label + " - " + this.environment.appMetadata.main.owner);
                     item.activated = true;
                 }
                 else
@@ -47196,6 +47494,84 @@
         onClose: [{ type: i0.Output }]
     };
 
+    var DropdownSettingFormComponent = /** @class */ (function (_super) {
+        __extends(DropdownSettingFormComponent, _super);
+        function DropdownSettingFormComponent(_injector) {
+            var _this = _super.call(this, _injector) || this;
+            _this._injector = _injector;
+            _this.autoSave = false;
+            _this.doNotCheckBaseService = true;
+            return _this;
+        }
+        DropdownSettingFormComponent.prototype.ngOnInit = function () {
+            this.setting.schema = [
+                new MaskControlSchema({
+                    field: 'delaySearchTime',
+                    label: 'Thời gian delay tìm kiếm',
+                    required: true,
+                    suffix: 'Mili giây',
+                    defaultValue: 500
+                })
+            ];
+            _super.prototype.ngOnInit.call(this);
+        };
+        DropdownSettingFormComponent.prototype.onFormInitialized = function (formEvent) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
+        };
+        DropdownSettingFormComponent.prototype.initDataAdd = function (evt) {
+            return __awaiter(this, void 0, void 0, function () {
+                var jsDropdownSetting, dropdownSetting;
+                return __generator(this, function (_a) {
+                    jsDropdownSetting = localStorage.getItem(KeyStorageDropdownSetting);
+                    if (jsDropdownSetting) {
+                        dropdownSetting = JSON.parse(jsDropdownSetting);
+                        Object.assign(evt.rootModel, dropdownSetting);
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        DropdownSettingFormComponent.prototype.onAfterGetDetail = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
+        };
+        DropdownSettingFormComponent.prototype.onBeforeSave = function () {
+            // trước khi lưu
+        };
+        DropdownSettingFormComponent.prototype.handleManualSave = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    localStorage.setItem(KeyStorageDropdownSetting, JSON.stringify(this.model.data));
+                    this.onSaved.emit();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return DropdownSettingFormComponent;
+    }(DataFormBase));
+    DropdownSettingFormComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'dropdown-setting-form',
+                    template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n",
+                    providers: [ComponentContextService],
+                    styles: [""]
+                },] }
+    ];
+    DropdownSettingFormComponent.ctorParameters = function () { return [
+        { type: i0.Injector }
+    ]; };
+    DropdownSettingFormComponent.propDecorators = {
+        control: [{ type: i0.Input }],
+        baseService: [{ type: i0.Input }]
+    };
+
     var QuickAddFormComponent = /** @class */ (function (_super) {
         __extends(QuickAddFormComponent, _super);
         function QuickAddFormComponent(_injector) {
@@ -47232,7 +47608,7 @@
                     selector: 'quick-add-form',
                     template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\"\r\n        [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n",
                     providers: [ComponentContextService],
-                    styles: [".tn-dropdown{display:flex}.tn-dropdown p-dropdown,.tn-dropdown p-multiSelect{flex:1 1;width:100%}.tn-dropdown>.button-quick-add{flex:0 0 auto}.input-mask{background:transparent;border:1px solid transparent;border-radius:3px;box-sizing:border-box;outline:none;padding-left:12px;position:absolute;width:100%;z-index:1}.input-mask.hide{display:none}.input-mask:focus{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa}.custom-select-item{align-items:center;background:#d2eefb;border:1px solid #a9d8ff;border-radius:3px;display:inline-flex;margin:3px 3px 0 0;padding:1px 5px 2px}.custom-select-item>span{color:#555;font-size:12px;margin-left:3px}.custom-select-item>span i{font-size:10px}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item{background:#e1e1e1;border-color:#d4d4d4}::ng-deep .tn-dropdown.ui-state-disabled .custom-select-item>span{display:none}::ng-deep .ui-multiselect-filter-container .input-mask{box-sizing:border-box;height:22px;left:1px;padding:.2em;text-indent:1.5em;top:1px;width:calc(100% - 2px)}::ng-deep .ui-multiselect-filter-container .input-mask:focus{left:1px;width:calc(100% - 2px)}"]
+                    styles: [""]
                 },] }
     ];
     QuickAddFormComponent.ctorParameters = function () { return [
@@ -52372,7 +52748,7 @@
                     selector: 'splash-component-v1',
                     template: "<div *ngIf=\"!loaded\" class=\"wrp-loader\">\r\n    <div class=\"loader\"></div>\r\n</div>\r\n<div *ngIf=\"loaded\" class=\"modules-v1\">\r\n    <div class=\"welcome-user\">\r\n        <div class=\"profile-image\">\r\n            <img class=\"custom-avatar\" [src-fallback]=\"defaultAvatar\" [src]=\"getCurrentUserAvatar()\" />\r\n        </div>\r\n\r\n        <div class=\"wrp-login\">\r\n            <h2>Xin ch\u00E0o!</h2>\r\n            <b>{{currentUser.fullName}}</b>\r\n            <div *ngIf=\"currentUser\" class=\"login\">\r\n                <a (click)=\"goToPersonal()\"><i class=\"far fa-folder-open\"></i>Trang c\u00E1 nh\u00E2n</a>\r\n                <a style=\"background: #fabc01;\" (click)=\"logout()\"><i class=\"far fa-arrow-alt-circle-right\"></i>\u0110\u0103ng\r\n                    xu\u1EA5t</a>\r\n            </div>\r\n            <div *ngIf=\"!currentUser\" class=\"login\"><a style=\"background: #fabc01;\" (click)=\"login()\"><i\r\n                        class=\"fas fa-sign-out-alt\"></i>\u0110\u0103ng nh\u1EADp</a></div>\r\n        </div>\r\n\r\n        <div class=\"clock-wrapper\">\r\n            <h1 class=\"clock\">{{currentDate | date:'HH:mm:ss'}}</h1>\r\n            <h4 class=\"data-time\">{{getNgayTrongTuan()}}, ng\u00E0y {{currentDate | date:'dd/MM/yyyy'}}</h4>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"module-icons\">\r\n        <div class=\"img-title\">\r\n            <img class=\"tn-custom-logo\" [src]=\"environment.appMetadata.main.logo\"\r\n                [alt]=\"environment.appMetadata.main.owner\">\r\n            <div class=\"title\">\r\n                <h2>{{environment.appMetadata.main.title}}</h2>\r\n                <h1>{{environment.appMetadata.main.owner}}</h1>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"div1111-wrapper\">\r\n            <tn-custom-scrollbar *ngIf=\"!isOnMobile\">\r\n                <ng-container *ngTemplateOutlet=\"appSwitcher\"></ng-container>\r\n            </tn-custom-scrollbar>\r\n\r\n            <ng-container *ngIf=\"isOnMobile\">\r\n                <ng-container *ngTemplateOutlet=\"appSwitcher\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #appSwitcher>\r\n    <div class=\"div1111\">\r\n        <ng-container *ngFor=\"let item of appSwitcherItems; let ind = index;\">\r\n            <span>\r\n                <a class=\"bg-switcher\" (click)=\"switchApp(item)\">\r\n                    <i class=\"{{item.icon}} app-switcher-item-icon\"></i>\r\n                    <span>{{ item.title | translate}}</span>\r\n                </a>\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>",
                     providers: [ComponentContextService],
-                    styles: ["body{background-color:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.wrp-loader{display:inline-block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:101}.wrp-loader .loader{-webkit-animation:load4 1.3s linear infinite;animation:load4 1.3s linear infinite;border:2px solid #bcdbf5;border-radius:50%;border-top-color:#3192e1;color:#607d8b;display:block;font-size:10px;height:10px;width:10px}.modules-v1{align-items:center;background-image:url(/assets/images/background-splash.png);background-position:50%;background-repeat:no-repeat;background-size:cover;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:100}.modules-v1 div>span{border-radius:5px;box-shadow:1px 2px 9px 1px #dadada;display:inline-block;height:120px;margin:10px;min-width:100px;white-space:normal;width:120px}.modules-v1 div>span>a{border-radius:5px;cursor:pointer;display:inline-block;display:flex;flex-direction:column;font-weight:700;height:100%;justify-content:space-evenly;position:relative}.modules-v1 div>span>a,.modules-v1 div>span>a>span{color:#fff;text-align:center;text-decoration:unset;width:100%}.modules-v1 div>span>a>span{display:inline-block;line-height:1.2}.modules-v1 div>span>a>i{font-size:3.5em;width:100%}.modules-v1 .div1111-wrapper{height:420px;margin:0 auto;max-width:700px;overflow:auto}.modules-v1 .div1111-wrapper .div1111{display:flex;flex-wrap:wrap;white-space:nowrap;width:100%}.modules-v1 .div1111-wrapper .div1111 .bg-switcher{background:#fff;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher .app-switcher-item-icon{color:#52abff;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher span{color:#2f70ac;font-weight:500;text-shadow:none;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover{background:#fabc01;box-shadow:1px 2px 9px 1px rgba(39,23,86,.5215686274509804)}.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover .app-switcher-item-icon,.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover span{color:#2f70ac}.modules-v1 .module-icons{align-self:stretch;background-color:rgba(249,244,244,.9215686274509803);color:#666;display:flex;flex-direction:column;justify-content:space-evenly;text-align:center;width:65%}.modules-v1 .module-icons h2{color:#271756;font-size:25px;margin-bottom:15px;margin-top:15px}.modules-v1 .module-icons h1{color:#2f70ac;font-size:35px;margin-bottom:0;margin-top:0}.modules-v1 .welcome-user{align-self:stretch;background-color:rgba(47,112,172,.9215686274509803);display:flex;flex-direction:column;text-align:center;width:35%}.modules-v1 .welcome-user .wrp-login{align-items:center;color:#fff;display:flex;flex-direction:column;margin:20px auto auto}.modules-v1 .welcome-user .wrp-login h2{font-size:20px;font-weight:500;margin-bottom:5px;margin-top:0}.modules-v1 .welcome-user .wrp-login b{display:block;font-size:25px;text-transform:uppercase}.modules-v1 .welcome-user .wrp-login .login{display:grid;grid-gap:10px;grid-template-columns:repeat(2,150px);margin-top:30px}.modules-v1 .welcome-user .wrp-login .login a{background:#fff;border-radius:5px;color:#5d5d5d;cursor:pointer;display:inline-block;padding:6px}.modules-v1 .welcome-user .wrp-login .login a i{margin-right:10px}.modules-v1 .welcome-user .profile-image{margin:auto auto 0}.modules-v1 .welcome-user .profile-image img{-o-object-fit:contain;background:#fff;border-radius:50%;box-shadow:1px 1px 11px 6px #2a659b;height:200px;object-fit:contain;width:200px}.modules-v1 .welcome-user .clock-wrapper{color:#fff;margin-bottom:auto;margin-top:auto;text-align:center}.modules-v1 .welcome-user .clock-wrapper h4{font-size:18px;font-weight:500;margin-top:10px}.modules-v1 .welcome-user .clock-wrapper h1{font-size:40px;margin-bottom:0}.modules-v1 .underconstruction{color:red;font-size:4em;font-weight:700;text-transform:uppercase}@media (max-width:1368px){.modules-v1 .clock{font-size:1.5em;margin:0 20px}.modules-v1 .data-time{font-size:1em;margin:10px 0 20px}}@media (max-width:1100px){.modules-v1 .div1111-wrapper .div1111{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr))}}@media (max-width:991px){.modules-v1 .welcome-user .wrp-login .login{grid-template-columns:1fr}}@media (max-width:768px){.modules-v1{flex-direction:column}.modules-v1 .welcome-user{align-items:center;flex-direction:row;height:270px;padding-bottom:87px;width:100%}.modules-v1 .welcome-user .profile-image{margin-bottom:auto}.modules-v1 .welcome-user .profile-image img{height:150px;width:150px}.modules-v1 .welcome-user .wrp-login{margin-top:auto}.modules-v1 .welcome-user .wrp-login .login{margin-top:20px}.modules-v1 .welcome-user .clock-wrapper{padding-right:15px}.modules-v1 .module-icons{height:calc(100% - 270px);width:100%}.modules-v1 .module-icons .img-title{background-image:url(/assets/images/logo.png);background-position:50%;background-repeat:no-repeat;z-index:9}.modules-v1 .module-icons .img-title img{display:none}.modules-v1 .module-icons .img-title .title{background:hsla(0,0%,100%,.9019607843137255);box-shadow:1px 4px 9px 2px #67a0d4;left:20px;padding:20px 10px;position:absolute;right:20px;top:200px;width:calc(100% - 40px)}.modules-v1 .module-icons .img-title .title h2{font-size:30px}.modules-v1 .module-icons .img-title .title h1{font-size:34px}}@media (max-width:640px){.modules-v1 .welcome-user{display:block;padding-top:20px}.modules-v1 .welcome-user .wrp-login{float:right;padding:0 20px 0 0;width:50%}.modules-v1 .welcome-user .wrp-login h2{font-size:14px;margin-bottom:3px}.modules-v1 .welcome-user .wrp-login b{font-size:14px}.modules-v1 .welcome-user .wrp-login .login{display:flex;flex-direction:column;margin-top:10px;padding:0 15px;text-align:left}.modules-v1 .welcome-user .wrp-login .login a{font-size:14px}.modules-v1 .welcome-user .profile-image{float:left;width:50%}.modules-v1 .welcome-user .profile-image img{display:block;height:130px;margin-left:35px;width:130px}.modules-v1 .welcome-user .clock-wrapper{clear:both;padding-right:0;padding-top:10px}.modules-v1 .welcome-user .clock-wrapper h4{font-size:14px;margin-top:5px}.modules-v1 .welcome-user .clock-wrapper h1{font-size:1.3em}.modules-v1 .module-icons .img-title{background-size:80px 80px}.modules-v1 .module-icons .img-title .title{top:230px}.modules-v1 .module-icons .img-title .title h1{font-size:16px}.modules-v1 .module-icons .img-title .title h2{font-size:16px;margin-top:0}.modules-v1 .module-icons .div1111-wrapper{height:360px;margin-top:0}.modules-v1 .module-icons .div1111-wrapper .div1111 .bg-switcher span{font-size:14px}.modules-v1 .module-icons div>span{height:100px;width:100px}.modules-v1 .module-icons div>span>a>i{font-size:2.5em;top:10px}}@media (max-width:425px){.modules-v1 .module-icons .img-title .title{top:225px}.modules-v1 .module-icons .div1111-wrapper .div1111{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr))}}@media (max-width:375px){.modules-v1 .module-icons{height:calc(100% - 250px)}.modules-v1 .module-icons .img-title{background-size:60px 60px}.modules-v1 .module-icons .img-title .title{padding:10px;top:220px}.modules-v1 .module-icons .img-title .title h2{margin-bottom:10px}.modules-v1 .module-icons .img-title .title h1,.modules-v1 .module-icons .img-title .title h2{font-size:14px}.modules-v1 .welcome-user{height:250px}}@media (max-width:360px){.modules-v1 .module-icons{height:calc(100% - 240px)}.modules-v1 .module-icons .img-title{background-size:60px 60px}.modules-v1 .module-icons .img-title .title{left:10px;right:10px;top:205px;width:calc(100% - 20px)}.modules-v1 .welcome-user{height:240px}.modules-v1 .welcome-user .clock-wrapper{padding-top:0}}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}"]
+                    styles: ["body{background-color:#fff;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.wrp-loader{display:inline-block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:101}.wrp-loader .loader{-webkit-animation:load4 1.3s linear infinite;animation:load4 1.3s linear infinite;border:2px solid #bcdbf5;border-radius:50%;border-top-color:#3192e1;color:#607d8b;display:block;font-size:10px;height:10px;width:10px}.modules-v1{align-items:center;background-image:url(/assets/images/background-splash.png);background-position:50%;background-repeat:no-repeat;background-size:cover;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:100}.modules-v1 div>span{border-radius:5px;box-shadow:1px 2px 9px 1px #dadada;display:inline-block;height:120px;margin:10px;min-width:100px;white-space:normal;width:120px}.modules-v1 div>span>a{border-radius:5px;cursor:pointer;display:inline-block;display:flex;flex-direction:column;font-weight:700;height:100%;justify-content:space-evenly;position:relative}.modules-v1 div>span>a,.modules-v1 div>span>a>span{color:#fff;text-align:center;text-decoration:unset;width:100%}.modules-v1 div>span>a>span{display:inline-block;line-height:1.2}.modules-v1 div>span>a>i{font-size:3.5em;width:100%}.modules-v1 .div1111-wrapper{height:420px;margin:0 auto;max-width:700px;overflow:auto}.modules-v1 .div1111-wrapper .div1111{display:flex;flex-wrap:wrap;white-space:nowrap;width:100%}.modules-v1 .div1111-wrapper .div1111 .bg-switcher{background:#fff;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher .app-switcher-item-icon{color:#52abff;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher span{color:#2f70ac;font-weight:500;padding:0 5px;text-shadow:none;transition:.3s}.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover{background:#fabc01;box-shadow:1px 2px 9px 1px rgba(39,23,86,.5215686274509804)}.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover .app-switcher-item-icon,.modules-v1 .div1111-wrapper .div1111 .bg-switcher:hover span{color:#2f70ac}.modules-v1 .module-icons{align-self:stretch;background-color:rgba(249,244,244,.9215686274509803);color:#666;display:flex;flex-direction:column;justify-content:space-evenly;text-align:center;width:65%}.modules-v1 .module-icons h2{color:#271756;font-size:25px;margin-bottom:15px;margin-top:15px}.modules-v1 .module-icons h1{color:#2f70ac;font-size:35px;margin-bottom:0;margin-top:0}.modules-v1 .welcome-user{align-self:stretch;background-color:rgba(47,112,172,.9215686274509803);display:flex;flex-direction:column;text-align:center;width:35%}.modules-v1 .welcome-user .wrp-login{align-items:center;color:#fff;display:flex;flex-direction:column;margin:20px auto auto}.modules-v1 .welcome-user .wrp-login h2{font-size:20px;font-weight:500;margin-bottom:5px;margin-top:0}.modules-v1 .welcome-user .wrp-login b{display:block;font-size:25px;text-transform:uppercase}.modules-v1 .welcome-user .wrp-login .login{display:grid;grid-gap:10px;grid-template-columns:repeat(2,150px);margin-top:30px}.modules-v1 .welcome-user .wrp-login .login a{background:#fff;border-radius:5px;color:#5d5d5d;cursor:pointer;display:inline-block;padding:6px}.modules-v1 .welcome-user .wrp-login .login a i{margin-right:10px}.modules-v1 .welcome-user .profile-image{margin:auto auto 0}.modules-v1 .welcome-user .profile-image img{-o-object-fit:contain;background:#fff;border-radius:50%;box-shadow:1px 1px 11px 6px #2a659b;height:200px;object-fit:contain;width:200px}.modules-v1 .welcome-user .clock-wrapper{color:#fff;margin-bottom:auto;margin-top:auto;text-align:center}.modules-v1 .welcome-user .clock-wrapper h4{font-size:18px;font-weight:500;margin-top:10px}.modules-v1 .welcome-user .clock-wrapper h1{font-size:40px;margin-bottom:0}.modules-v1 .underconstruction{color:red;font-size:4em;font-weight:700;text-transform:uppercase}@media (max-width:1368px){.modules-v1 .clock{font-size:1.5em;margin:0 20px}.modules-v1 .data-time{font-size:1em;margin:10px 0 20px}}@media (max-width:1100px){.modules-v1 .div1111-wrapper .div1111{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr))}}@media (max-width:991px){.modules-v1 .welcome-user .wrp-login .login{grid-template-columns:1fr}}@media (max-width:768px){.modules-v1{flex-direction:column}.modules-v1 .welcome-user{align-items:center;flex-direction:row;height:270px;padding-bottom:87px;width:100%}.modules-v1 .welcome-user .profile-image{margin-bottom:auto}.modules-v1 .welcome-user .profile-image img{height:150px;width:150px}.modules-v1 .welcome-user .wrp-login{margin-top:auto}.modules-v1 .welcome-user .wrp-login .login{margin-top:20px}.modules-v1 .welcome-user .clock-wrapper{padding-right:15px}.modules-v1 .module-icons{height:calc(100% - 270px);width:100%}.modules-v1 .module-icons .img-title{background-image:url(/assets/images/logo.png);background-position:50%;background-repeat:no-repeat;z-index:9}.modules-v1 .module-icons .img-title img{display:none}.modules-v1 .module-icons .img-title .title{background:hsla(0,0%,100%,.9019607843137255);box-shadow:1px 4px 9px 2px #67a0d4;left:20px;padding:20px 10px;position:absolute;right:20px;top:200px;width:calc(100% - 40px)}.modules-v1 .module-icons .img-title .title h2{font-size:30px}.modules-v1 .module-icons .img-title .title h1{font-size:34px}}@media (max-width:640px){.modules-v1 .welcome-user{display:block;padding-top:20px}.modules-v1 .welcome-user .wrp-login{float:right;padding:0 20px 0 0;width:50%}.modules-v1 .welcome-user .wrp-login h2{font-size:14px;margin-bottom:3px}.modules-v1 .welcome-user .wrp-login b{font-size:14px}.modules-v1 .welcome-user .wrp-login .login{display:flex;flex-direction:column;margin-top:10px;padding:0 15px;text-align:left}.modules-v1 .welcome-user .wrp-login .login a{font-size:14px}.modules-v1 .welcome-user .profile-image{float:left;width:50%}.modules-v1 .welcome-user .profile-image img{display:block;height:130px;margin-left:35px;width:130px}.modules-v1 .welcome-user .clock-wrapper{clear:both;padding-right:0;padding-top:10px}.modules-v1 .welcome-user .clock-wrapper h4{font-size:14px;margin-top:5px}.modules-v1 .welcome-user .clock-wrapper h1{font-size:1.3em}.modules-v1 .module-icons .img-title{background-size:80px 80px}.modules-v1 .module-icons .img-title .title{top:230px}.modules-v1 .module-icons .img-title .title h1{font-size:16px}.modules-v1 .module-icons .img-title .title h2{font-size:16px;margin-top:0}.modules-v1 .module-icons .div1111-wrapper{height:360px;margin-top:0}.modules-v1 .module-icons .div1111-wrapper .div1111 .bg-switcher span{font-size:14px}.modules-v1 .module-icons div>span{height:100px;width:100px}.modules-v1 .module-icons div>span>a>i{font-size:2.5em;top:10px}}@media (max-width:425px){.modules-v1 .module-icons .img-title .title{top:225px}.modules-v1 .module-icons .div1111-wrapper .div1111{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr))}}@media (max-width:375px){.modules-v1 .module-icons{height:calc(100% - 250px)}.modules-v1 .module-icons .img-title{background-size:60px 60px}.modules-v1 .module-icons .img-title .title{padding:10px;top:220px}.modules-v1 .module-icons .img-title .title h2{margin-bottom:10px}.modules-v1 .module-icons .img-title .title h1,.modules-v1 .module-icons .img-title .title h2{font-size:14px}.modules-v1 .welcome-user{height:250px}}@media (max-width:360px){.modules-v1 .module-icons{height:calc(100% - 240px)}.modules-v1 .module-icons .img-title{background-size:60px 60px}.modules-v1 .module-icons .img-title .title{left:10px;right:10px;top:205px;width:calc(100% - 20px)}.modules-v1 .welcome-user{height:240px}.modules-v1 .welcome-user .clock-wrapper{padding-top:0}}@-webkit-keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}@keyframes load4{0%,to{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}"]
                 },] }
     ];
     SplashComponentV1Component.ctorParameters = function () { return [
@@ -59643,7 +60019,8 @@
             TaiLieuCuaToiComponent,
             KhaiThacTaiLieuDungChungComponent,
             TnTemplateComponent,
-            LoadingPageV1Component
+            LoadingPageV1Component,
+            DropdownSettingFormComponent
         ];
     }
     function coreModuleImport() {
@@ -60085,6 +60462,7 @@
     exports.SafeStylePipe = SafeStylePipe;
     exports.SafeUrlPipe = SafeUrlPipe;
     exports.SameValueValidator = SameValueValidator;
+    exports.ScalarValueValidator = ScalarValueValidator;
     exports.SchemaBase = SchemaBase;
     exports.SecurePipe = SecurePipe;
     exports.ServiceFileUploadComponent = ServiceFileUploadComponent;
@@ -60382,7 +60760,8 @@
     exports.ɵfm = DanhMucDungChungService;
     exports.ɵfn = TnTemplateComponent;
     exports.ɵfo = LoadingPageV1Component;
-    exports.ɵfp = CheckReadyComponent;
+    exports.ɵfp = DropdownSettingFormComponent;
+    exports.ɵfq = CheckReadyComponent;
     exports.ɵg = TreeTableComponent;
     exports.ɵh = UniversalLinkProcessorComponent;
     exports.ɵi = NotFoundComponent;