tnx-shared 5.0.64 → 5.0.65

package/bundles/tnx-shared.umd.js

@@ -28,8 +28,6 @@
 
     var stringify__default = /*#__PURE__*/_interopDefaultLegacy(stringify);
     var moment___namespace = /*#__PURE__*/_interopNamespace(moment_);
-    var FileSaver__default = /*#__PURE__*/_interopDefaultLegacy(FileSaver);
-    var printJS___default = /*#__PURE__*/_interopDefaultLegacy(printJS_);
     var printJS___namespace = /*#__PURE__*/_interopNamespace(printJS_);
     var JWT___namespace = /*#__PURE__*/_interopNamespace(JWT_);
     var jQuery___namespace = /*#__PURE__*/_interopNamespace(jQuery_);
@@ -397,7 +395,8 @@
         MENU_CHANGED: 'MENU_CHANGED',
         ADVANCE_SEARCH_INIT_WITHOUT_UPDATE_ROUTER: 'ADVANCE_SEARCH_INIT_WITHOUT_UPDATE_ROUTER',
         SHOW_WAIT_BOX: 'SHOW_WAIT_BOX',
-        SHOW_REJECT_CONFIRM: 'SHOW_REJECT_CONFIRM'
+        SHOW_REJECT_CONFIRM: 'SHOW_REJECT_CONFIRM',
+        NEED_CLEAR_PERMISSION_CACHE: 'NEED_CLEAR_PERMISSION_CACHE'
     };
     ComCtxConstants.ROOT_USMART = {
         SHOW_CONFIG_DATA_DEFAULT: 'SHOW_CONFIG_DATA_DEFAULT',
@@ -909,7 +908,7 @@
         NotifierService.prototype.showWarningByReponse = function (res) {
             var message = res.message;
             if (!message)
-                message = res.error;
+                message = 'Có lỗi xảy ra, vui lòng liên hệ quản trị viên!';
             this.showWarning(message);
         };
         NotifierService.prototype.showBusinessError = function (message, key, header, life) {
@@ -2362,6 +2361,14 @@
                 errorDetail: err
             };
         };
+        CommonService.prototype.tryParseJson = function (data) {
+            try {
+                return { valid: true, value: JSON.parse(data) };
+            }
+            catch (e) {
+                return { valid: false, value: data };
+            }
+        };
         return CommonService;
     }());
     CommonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CommonService_Factory() { return new CommonService(i0.ɵɵinject(ModuleConfigService)); }, token: CommonService, providedIn: "root" });
@@ -3247,7 +3254,11 @@
         EnumWorkflowCoreCodeSettingKey["MAC_DINH"] = "workflowCoreTrinhKy";
         EnumWorkflowCoreCodeSettingKey["PHE_DUYET_2_BUOC"] = "workflowCoreTrinhKy2Buoc";
         EnumWorkflowCoreCodeSettingKey["PHE_DUYET_3_BUOC"] = "workflowCoreTrinhKy3Buoc";
-    })(exports.EnumWorkflowCoreCodeSettingKey || (exports.EnumWorkflowCoreCodeSettingKey = {}));
+    })(exports.EnumWorkflowCoreCodeSettingKey || (exports.EnumWorkflowCoreCodeSettingKey = {}));
+    (function (EnumCoreVersion) {
+        EnumCoreVersion["V4"] = "V4";
+        EnumCoreVersion["V5"] = "V5";
+    })(exports.EnumCoreVersion || (exports.EnumCoreVersion = {}));
 
     var ModelSchema = /** @class */ (function () {
         function ModelSchema(init) {
@@ -3323,6 +3334,7 @@
             this.function = new CrudListCustomFunction();
             this.popupHeader = '';
             this.popupSize = new PopupSize();
+            this.showMenuButtons = true;
             this.getCustomDataTrinhKy = function (rowData) { return ({}); };
             this.getLabelButtonTrinhKy = function (rowData) { return 'Trình ký'; };
             this.checkReadyToTrinhKy = function () { return true; };
@@ -3637,6 +3649,7 @@
             _this.fieldPlus = ''; // Danh sách những trường bổ sung cần lấy thêm ngoài id, ten; Ví dụ ,ma
             _this.fieldValueParent = 'value'; // Trường sử dụng để lấy dữ liệu làm khóa từ bảng cha của item drop down được chọn
             _this.fireCallBackInside = true;
+            _this.coreVersion = exports.EnumCoreVersion.V5;
             _this.funcCompare = function (item, value) { return item[_this.valueField] == value; };
             for (var key in init) {
                 _this[key] = init[key];
@@ -3690,6 +3703,7 @@
             _this.prefix = '';
             _this.suffix = '';
             _this.decimalPlaces = 2;
+            _this.thousandSeperator = '.';
             for (var key in init) {
                 _this[key] = init[key];
             }
@@ -3869,7 +3883,6 @@
             _this.mode = exports.FileManagerMode.multiple;
             _this.layout = exports.EnumFileLayout.LIST;
             _this.readonly = false;
-            _this.uploadOnly = false;
             // Trường hợp ở trong form, dùng trường này để lấy
             // entityKey từ model.data thay vì truyền vào entityKey
             _this.entityKeyField = 'id';
@@ -4484,6 +4497,7 @@
         DataType["decimal"] = "decimal";
         DataType["boolean"] = "boolean";
         DataType["enum"] = "enum";
+        DataType["currency"] = "currency";
     })(exports.DataType || (exports.DataType = {}));
     (function (ControlType) {
         ControlType["dropdown"] = "dropdown";
@@ -4555,7 +4569,34 @@
     (function (ExportAllMode) {
         ExportAllMode[ExportAllMode["ManualGetData"] = 0] = "ManualGetData";
         ExportAllMode[ExportAllMode["AutoGetData"] = 1] = "AutoGetData";
-    })(exports.ExportAllMode || (exports.ExportAllMode = {}));
+    })(exports.ExportAllMode || (exports.ExportAllMode = {}));
+    (function (EventType) {
+        EventType["CHANGE"] = "change";
+        EventType["ADJUST_VALUE"] = "adjustValue";
+        EventType["MODEL_CHANGED"] = "modelChanged";
+        EventType["FORM_READY"] = "formReady";
+        EventType["ENTER"] = "enter";
+        EventType["HIDE"] = "hide";
+        EventType["ROW_REORDER"] = "rowReorder";
+        EventType["BLUR"] = "blur";
+        EventType["READY"] = "READY";
+        EventType["DATASOURCE_LOADED"] = "dataSourceLoaded";
+        EventType["CLICK"] = "click";
+        EventType["AUTO_CORRECT"] = "autoCorrect";
+        EventType["VALIDATE"] = "validate";
+        EventType["INIT"] = "init";
+        EventType["ADDING"] = "adding";
+        EventType["ADDED"] = "added";
+        EventType["DELETING"] = "deleting";
+        EventType["DELETED"] = "deleted";
+        EventType["SELECT"] = "select";
+        EventType["TABLE_CHANGED"] = "tableChanged";
+        EventType["SAVE"] = "save";
+        EventType["MESSAGE"] = "message";
+        EventType["ROW_FINISH_INIT"] = "rowFinishInit";
+        EventType["TABLE_FINISH_INIT"] = "tableFinishInit";
+        EventType["UPLOADED"] = "uploaded";
+    })(exports.EventType || (exports.EventType = {}));
 
     var _a;
     (function (WorkflowCoreStatusEnum) {
@@ -5997,14 +6038,24 @@
             if (model.hasOwnProperty(sourceField)) {
                 valueFilter = model[sourceField];
                 if (canAccessSubField(valueFilter)) {
-                    valueFilter = valueFilter[subField];
+                    if (isArray(valueFilter) && typeof subField === 'string') {
+                        valueFilter = valueFilter.map(function (x) { return x[subField]; });
+                    }
+                    else {
+                        valueFilter = valueFilter[subField];
+                    }
                 }
             }
             else if (rootModel) {
                 if (rootModel.hasOwnProperty(sourceField)) {
                     valueFilter = rootModel[sourceField];
                     if (canAccessSubField(valueFilter)) {
-                        valueFilter = valueFilter[subField];
+                        if (isArray(valueFilter)) {
+                            valueFilter = valueFilter.map(function (x) { return x[subField]; });
+                        }
+                        else {
+                            valueFilter = valueFilter[subField];
+                        }
                     }
                 }
                 else {
@@ -6030,7 +6081,12 @@
                         finally { if (e_1) throw e_1.error; }
                     }
                     if (canAccessSubField(temp)) {
-                        valueFilter = temp[subField];
+                        if (isArray(temp)) {
+                            valueFilter = temp.map(function (x) { return x[subField]; });
+                        }
+                        else {
+                            valueFilter = temp[subField];
+                        }
                     }
                 }
             }
@@ -6043,6 +6099,9 @@
                 valueFilter = tmpFilter.funcGetValue(valueFilter);
             }
             tmpFilter.value = JSON.stringify(valueFilter);
+            if (tmpFilter.modifyValue) {
+                valueFilter = tmpFilter.modifyValue(valueFilter);
+            }
             tmpFilter.filters = [];
             if (filter.logic && filter.filters) {
                 filter.filters.forEach(function (f) { return _this.deQuyReplaceValue(tmpFilter.filters, f, model, rootModel); });
@@ -6193,6 +6252,7 @@
             });
         };
         CrudService.prototype.mergeRefDataToDatasource = function (dataSource, schema, data) {
+            data !== null && data !== void 0 ? data : (data = []);
             var field = schema.field;
             var funcGetLabel = function (item) { return item[schema.displayField] || item['label']; };
             if (schema.funcGetLabel) {
@@ -6485,6 +6545,24 @@
             });
             return this.postGridInfo(apiUrl, gridInfo);
         };
+        BaseService.prototype.getAllByFilter = function (filters, fields, sorts, plusUrl) {
+            if (fields === void 0) { fields = ''; }
+            if (sorts === void 0) { sorts = []; }
+            if (plusUrl === void 0) { plusUrl = ''; }
+            var apiUrl = this.apiGetAll;
+            if (plusUrl != null && plusUrl != '')
+                apiUrl += "/" + plusUrl;
+            var gridInfo = new GridInfo({
+                fields: fields,
+                pageInfo: {
+                    page: 1,
+                    pageSize: 9999
+                },
+                sorts: sorts,
+                filters: filters ? filters : []
+            });
+            return this.postGridInfo(apiUrl, gridInfo);
+        };
         BaseService.prototype.getAllByGridInfo = function (gridInfo, plusUrl) {
             if (plusUrl === void 0) { plusUrl = ''; }
             var apiUrl = this.apiGetAll;
@@ -6955,7 +7033,7 @@
     }());
 
     // fix for build prod
-    var printJS = printJS___default['default'];
+    var printJS = printJS___namespace;
     var FileExplorerService = /** @class */ (function () {
         function FileExplorerService(_http, _moduleConfig, _authenService, _commonSerivce, _moduleConfigService, _notifierService) {
             this._http = _http;
@@ -7165,11 +7243,11 @@
             return this._serviceUri + "/DownloadLink/" + hash;
         };
         FileExplorerService.prototype.getDownloadForSignUrl = function (hash) {
-            return this._serviceUri + "/DownloadLink/downloadforsign/" + hash;
+            return this._serviceUri + "/Download/downloadforsign/" + hash;
         };
         FileExplorerService.prototype.generateLinkDownload = function (model) {
             var _this = this;
-            var svUrl = this._serviceUri + "/DownloadLink/GenerateDownloadLink";
+            var svUrl = this._serviceUri + "/Download/GenerateDownloadLink";
             if (model.isFileVersion && !model.fileVersionId) {
                 model.fileVersionId = model.fileId;
             }
@@ -7199,7 +7277,7 @@
             this._http.get(url, { responseType: 'blob' })
                 .toPromise()
                 .then(function (rs) {
-                FileSaver__default['default'].saveAs(rs, fileName);
+                FileSaver.saveAs(rs, fileName);
             })
                 .catch(function (err) {
                 _this._notifierService.showWarning('Lỗi tải file');
@@ -7361,13 +7439,13 @@
             return regex.test(ext);
         };
         FileExplorerService.prototype.saveSignedFile = function (data) {
-            return this._http.post(this._serviceUri + "/KySoFile/SaveSignedFile", data).toPromise();
+            return this._http.post(this._serviceUri + "/Signature/SaveSignedFile", data).toPromise();
         };
         FileExplorerService.prototype.getSignatureInfoByFileId = function (fileId) {
-            return this._http.get(this._serviceUri + "/KySoFile/GetListSignatureByFileId?fileId=" + fileId).toPromise();
+            return this._http.get(this._serviceUri + "/Signature/GetListSignatureByFileId?fileId=" + fileId).toPromise();
         };
         FileExplorerService.prototype.getSignatureInfoByFileVersionId = function (fileVersionId) {
-            return this._http.get(this._serviceUri + "/KySoFile/GetListSignatureByFileVersionId?fileVersionId=" + fileVersionId).toPromise();
+            return this._http.get(this._serviceUri + "/Signature/GetListSignatureByFileVersionId?fileVersionId=" + fileVersionId).toPromise();
         };
         FileExplorerService.prototype.getUploadFileVersionApiUrl = function () {
             return this._serviceUri + "/FileVersion/SaveVersionOnEdit";
@@ -7425,20 +7503,6 @@
             var svUrl = this._serviceUri + "/FileObject/CreateServiceFileAnonymous";
             return this._http.post(svUrl, serviceFileObjectDTO).pipe(operators.catchError(function (err) { return _this.handleError(err); })).toPromise();
         };
-        FileExplorerService.prototype.needConvertBeforeSign = function (fileName) {
-            if (fileName.lastIndexOf('.') === -1) {
-                return false;
-            }
-            var fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
-            if ((/(doc|docx|dot|dotm|dotx|xls|xlsx|ppt|pptx)$/i).test(fileType)) {
-                return true;
-            }
-            return false;
-        };
-        FileExplorerService.prototype.changeFileExtension = function (fileName, newExtension) {
-            var arr = fileName.split('.');
-            return fileName.replace("." + arr[arr.length - 1], "." + newExtension);
-        };
         return FileExplorerService;
     }());
     FileExplorerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FileExplorerService_Factory() { return new FileExplorerService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(ModuleConfigService), i0.ɵɵinject(AuthenService), i0.ɵɵinject(CommonService), i0.ɵɵinject(ModuleConfigService), i0.ɵɵinject(NotifierService)); }, token: FileExplorerService, providedIn: "root" });
@@ -7886,9 +7950,6 @@
             });
             return promise;
         };
-        DownloadLinkService.prototype.getDownloadForSignUrl = function (hash) {
-            return this.serviceUri + "/DownloadForSign/" + hash;
-        };
         return DownloadLinkService;
     }(BaseService));
     DownloadLinkService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DownloadLinkService_Factory() { return new DownloadLinkService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(ModuleConfigService), i0.ɵɵinject(CrudService), i0.ɵɵinject(NotifierService)); }, token: DownloadLinkService, providedIn: "root" });
@@ -8880,6 +8941,7 @@
             }
             else {
                 this._applicationContext.getRootContext().replaySubscribeOnce(ComCtxConstants.ROOT.USER_READY, function (rs) {
+                    var firstTimeLogin = rs;
                     var accessToken = _this._oauthService.getAccessToken();
                     var decoded = JWT.default(accessToken);
                     // Chuyển đổi sang dùng instanceId nếu đăng nhập bằng identityv4 nhưng phải sử dụng base userOrgv5
@@ -8921,7 +8983,12 @@
                             localStorage.setItem(_this.CURRENT_USER_KEY, JSON.stringify(user));
                         }
                         _this._applicationContext.getRootContext().data.currentUser = user;
-                        _this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED, true);
+                        if (firstTimeLogin) {
+                            _this._applicationContext.getRootContext().fireEvent(ComCtxConstants.ROOT.NEED_CLEAR_PERMISSION_CACHE);
+                        }
+                        else {
+                            _this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED, true);
+                        }
                     }, function (err) {
                     });
                 });
@@ -9481,9 +9548,12 @@
             _this.delayCheckPermissions = [];
             _this.ignoreAdmin = false;
             _this.appCode = null;
+            if (_moduleConfigService.getConfig().environment.authenticationSettings.coreVersion == 'v4') {
+                _this.serviceUri = _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint + "/permission";
+            }
             _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.authorizationEndpoint;
-            _this.ignoreAdmin = _this._moduleConfigService.getConfig().environment.isIgnoreAdmin;
             _this.appCode = _this._moduleConfigService.getConfig().appCode;
+            _this.ignoreAdmin = _this._moduleConfigService.getConfig().environment.isIgnoreAdmin;
             return _this;
         }
         /**
@@ -9705,6 +9775,10 @@
                 }
             });
         };
+        PermissionService.prototype.clearPermissionCache = function (lstModule) {
+            var url = this.serviceUri + "/ClearPermissionCache";
+            return this.defaultPost(url, lstModule);
+        };
         return PermissionService;
     }(BaseService));
     PermissionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PermissionService_Factory() { return new PermissionService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(ModuleConfigService), i0.ɵɵinject(UserService), i0.ɵɵinject(i4.OAuthService), i0.ɵɵinject(ApplicationContextService)); }, token: PermissionService, providedIn: "root" });
@@ -10079,7 +10153,7 @@
             if (service == undefined) {
                 (this._injector.get(NotifierService)).showWarning('Bạn chưa đăng ký base service cho entity workflow history');
             }
-            this.serviceUri = service.endPoint + "/EntityWorkflowHistory";
+            this.serviceUri = service.endPoint + "/" + this._moduleConfig.environment.apiVersion + "/EntityWorkflowHistory";
         };
         EntityWorkflowHistoryService.prototype.getLastHistory = function (tableName, filters) {
             if (filters === void 0) { filters = []; }
@@ -10087,7 +10161,7 @@
             if (service == undefined) {
                 (this._injector.get(NotifierService)).showWarning('Bạn chưa đăng ký base service cho entity workflow history');
             }
-            var url = service.endPoint + "/EntityWorkflowHistory/GetLastByFilter";
+            var url = service.endPoint + "/" + this._moduleConfig.environment.apiVersion + "/EntityWorkflowHistory/GetLastByFilter";
             var gridInfo = {
                 pageInfo: {
                     page: 1,
@@ -10244,7 +10318,7 @@
                 (this._injector.get(NotifierService)).showWarning('Bạn chưa đăng ký base service cho entity workflow setting');
             }
             return new Promise(function (resolve, reject) {
-                _this.defaultPost(service.endPoint + "/EntityWorkflowSetting/GetSetting/" + service.entityName, {})
+                _this.defaultPost(service.endPoint + "/" + _this._moduleConfig.environment.apiVersion + "/EntityWorkflowSetting/GetSetting/" + service.entityName, {})
                     .then(function (res) {
                     if (res.success) {
                         var itemSetting = res.data;
@@ -10329,11 +10403,11 @@
         };
         EntityWorkflowSettingService.prototype.saveSetting = function (settingKey, data) {
             var service = this.serviceManagers[settingKey];
-            return this.defaultPost(service.endPoint + "/EntityWorkflowSetting/SaveSetting/" + service.entityName, data);
+            return this.defaultPost(service.endPoint + "/" + this._moduleConfig.environment.apiVersion + "/EntityWorkflowSetting/SaveSetting/" + service.entityName, data);
         };
         EntityWorkflowSettingService.prototype.removeSetting = function (settingKey) {
             var service = this.serviceManagers[settingKey];
-            return this.defaultPost(service.endPoint + "/EntityWorkflowSetting/RemoveSetting/" + service.entityName, {});
+            return this.defaultPost(service.endPoint + "/" + this._moduleConfig.environment.apiVersion + "/EntityWorkflowSetting/RemoveSetting/" + service.entityName, {});
         };
         return EntityWorkflowSettingService;
     }(BaseService));
@@ -11147,25 +11221,37 @@
                 });
             });
         };
+        DataListBase.prototype.validateEdit = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
         DataListBase.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(rowData)];
+                        case 1:
+                            resultValidate = _a.sent();
+                            if (!resultValidate) {
+                                return [2 /*return*/];
+                            }
                             flashShow = rowData[KeyFlashShow];
                             delete rowData[KeyFlashShow];
                             this.formModel.formState = exports.FormState.EDIT;
                             return [4 /*yield*/, this.beforeEdit()];
-                        case 1:
+                        case 2:
                             _a.sent();
                             this.setting.popupHeader = "C\u1EADp nh\u1EADt " + this.setting.objectName;
                             this.setting.maskClass = flashShow ? 'hide' : null;
                             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;
@@ -11196,34 +11282,56 @@
         DataListBase.prototype.getPromiseDeleteItem = function (rowData) {
             return this.setting.baseService.delete(rowData.id);
         };
+        DataListBase.prototype.validateDelete = function (rowData) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, true];
+                });
+            });
+        };
         DataListBase.prototype._delete = function (rowData) {
-            var _this = this;
-            if (rowData.__disableDelete) {
-                return;
-            }
-            this._notifierService.showDeleteConfirm().then(function (rs) {
-                if (!rs) {
-                    return;
-                }
-                if (_this.setting.baseService) {
-                    _this.getPromiseDeleteItem(rowData)
-                        .then(function (response) {
-                        if (response.success) {
-                            if (_this.setting.showVersionButton) {
-                                _this.context.fireEvent(ComCtxConstants.COMMON.RELOAD_DATA_VERSION, {}, true);
+            return __awaiter(this, void 0, void 0, function () {
+                var resultValidate;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (rowData.__disableDelete) {
+                                return [2 /*return*/];
                             }
-                            else {
-                                _this._triggerProcessData();
+                            return [4 /*yield*/, this.validateDelete(rowData)];
+                        case 1:
+                            resultValidate = _a.sent();
+                            if (!resultValidate) {
+                                return [2 /*return*/];
                             }
-                            _this._notifierService.showDeleteDataSuccess();
-                        }
-                        else {
-                            _this._notifierService.showWarningByReponse(response);
-                        }
-                    }, function (error) {
-                        _this._notifierService.showDeleteDataError();
-                    });
-                }
+                            this._notifierService.showDeleteConfirm().then(function (rs) {
+                                if (!rs) {
+                                    return;
+                                }
+                                if (_this.setting.baseService) {
+                                    _this.getPromiseDeleteItem(rowData)
+                                        .then(function (response) {
+                                        if (response.success) {
+                                            if (_this.setting.showVersionButton) {
+                                                _this.context.fireEvent(ComCtxConstants.COMMON.RELOAD_DATA_VERSION, {}, true);
+                                            }
+                                            else {
+                                                _this._triggerProcessData();
+                                            }
+                                            _this._notifierService.showDeleteDataSuccess();
+                                        }
+                                        else {
+                                            _this._notifierService.showWarningByReponse(response);
+                                        }
+                                    }, function (error) {
+                                        _this._notifierService.showDeleteDataError();
+                                    });
+                                }
+                            });
+                            return [2 /*return*/];
+                    }
+                });
             });
         };
         DataListBase.prototype.getPromiseDeleteItems = function (items) {
@@ -11564,7 +11672,7 @@
                             arrPromiseDontNeedWait = [];
                             arrSchemaDontNeedWait = [];
                             _loop_1 = function (schema) {
-                                var field, arrValue_1, promise, result, funcGetLabel_1;
+                                var field, arrValue_1, promise, filters, result, funcGetLabel_1;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
@@ -11599,7 +11707,11 @@
                                                 promise = schema.baseService.getDataDropdown(schema.groupCode, arrValue_1, this_1.createDropdownOptions(schema));
                                             }
                                             else {
-                                                promise = schema.baseService.getDataDropdownByFilter([this_1.newFilter(schema.valueField, exports.Operator.in, arrValue_1)], this_1.createDropdownOptions(schema));
+                                                filters = [this_1.newFilter(schema.valueField, exports.Operator.in, arrValue_1)];
+                                                if (schema.modifyFilter) {
+                                                    schema.modifyFilter(filters);
+                                                }
+                                                promise = schema.baseService.getDataDropdownByFilter(filters, this_1.createDropdownOptions(schema));
                                             }
                                             if (!(schema.order != null)) return [3 /*break*/, 2];
                                             return [4 /*yield*/, promise];
@@ -11677,6 +11789,7 @@
             });
         };
         DataListBase.prototype.mergeRefDataToDatasource = function (dataSource, schema, data) {
+            data !== null && data !== void 0 ? data : (data = []);
             var field = schema.field;
             var funcGetLabel = function (item) { return item[schema.displayField] || item['label']; };
             if (schema.funcGetLabel) {
@@ -14725,6 +14838,10 @@
                     });
                     this.onModelChanged.emit(event);
                 }
+                else {
+                    this._rootNode = new ControlTreeNode(this._modelData, this.formControls);
+                    this._rootNode.setCrudForm(this);
+                }
             },
             enumerable: false,
             configurable: true
@@ -15984,18 +16101,24 @@
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
-                            if (!control.multiple) return [3 /*break*/, 3];
+                            if (!control.multiple) return [3 /*break*/, 5];
                             if (!(eventType == 'hide')) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.handleFieldValueChange(control, event, 'change', parentModel, parentPath, sourceNode, bubble)];
                         case 1:
                             _d.sent();
-                            _d.label = 2;
-                        case 2: return [3 /*break*/, 5];
-                        case 3: return [4 /*yield*/, this.handleFieldValueChange(control, event, eventType, parentModel, parentPath, sourceNode, bubble)];
-                        case 4:
+                            return [3 /*break*/, 4];
+                        case 2:
+                            if (!(control.bindingFilters && eventType == 'change')) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.handleFieldValueChange(control, event, 'change', parentModel, parentPath, sourceNode, bubble)];
+                        case 3:
                             _d.sent();
-                            _d.label = 5;
-                        case 5: return [2 /*return*/];
+                            _d.label = 4;
+                        case 4: return [3 /*break*/, 7];
+                        case 5: return [4 /*yield*/, this.handleFieldValueChange(control, event, eventType, parentModel, parentPath, sourceNode, bubble)];
+                        case 6:
+                            _d.sent();
+                            _d.label = 7;
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -16948,7 +17071,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\" style=\"padding: 0.5rem 0.5rem 0\">\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\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngIf=\"!isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"labelValueViewMode; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\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 #labelValueViewMode let-data=\"data\" let-control=\"control\" let-path=\"path\" let-parentPath=\"parentPath\"\r\n    let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} type-{{control.dataType}} view-mode\"\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 && control.label\">\r\n            <label [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}<span *ngIf=\"control.required\"\r\n                    class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container *ngIf=\"data[control.field] === null || data[control.field] === undefined\">\r\n            <span class=\"no-value\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!(data[control.field] === null || data[control.field] === undefined)\">\r\n            <ng-container [ngSwitch]=\"control.dataType\">\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\r\n                                *ngTemplateOutlet=\"labelValueViewMode; context: {control: subControl, data: data[control.field], showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                    <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\"\r\n                        [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\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\" [readonly]=\"true\">\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\" [readonly]=\"true\"\r\n                        [accept]=\"control.accept\">\r\n                    </file-upload>\r\n                </span>\r\n                <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                    <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                        [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\">\r\n                    </service-file-upload>\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'label'\">\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\"\r\n                        [attr.label-index]=\"control.indexLabel\" [pTooltip]=\"control.title\" tooltipPosition=\"top\"\r\n                        tooltipStyleClass=\"wrap\" [escape]=\"false\" [for]=\"control.for\">{{control.text |\r\n                        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                <span *ngSwitchCase=\"'text'\">\r\n                    {{data[control.field]}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'money'\">\r\n                    {{data[control.field] | number}} VN\u0110\r\n                </span>\r\n                <span *ngSwitchCase=\"'date'\">\r\n                    {{data[control.field] | date:'dd/MM/yyyy'}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'datetime'\">\r\n                    {{_crudService.renderDateTime(data[control.field], control.format)}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'user'\">\r\n                    {{data[control.field] | userFormat | async}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'hasDataSource'\">\r\n                    <span *ngIf=\"!control.freeText\">\r\n                        {{getItemInArrayByValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field], control)}}\r\n                    </span>\r\n                    <span *ngIf=\"control.freeText\">\r\n                        {{getItemInArrayByTextValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field])}}\r\n                    </span>\r\n                </span>\r\n                <span *ngSwitchCase=\"'colorPicker'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.field]}\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                    <span *ngIf=\"!control.ishtml\">{{data[control.sourceField]}}</span>\r\n                    <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.sourceField]\"></span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'colorControl'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\">\r\n                </span>\r\n                <span *ngSwitchCase=\"'boolean'\">\r\n                    <i class=\"{{data[control.field] | booleanFormat}}\"></i>\r\n                </span>\r\n                <span *ngSwitchCase=\"'html'\">\r\n                    <div [innerHTML]=\"data[control.field]\" *ngIf=\"data[control.field]==null?'':data[control.field]\">\r\n                    </div>\r\n                </span>\r\n                <span *ngSwitchCase=\"'mask'\">\r\n                    <tn-mask [viewMode]=\"true\" [prefix]=\"control.prefix\" [suffix]=\"control.suffix\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [decimalPlaces]=\"control.decimalPlaces\"\r\n                        [maskType]=\"control.maskType\" [(ngModel)]=\"data[control.field]\" [min]=\"control.min\"\r\n                        [max]=\"control.max\">\r\n                    </tn-mask>\r\n                </span>\r\n                <span *ngSwitchCase=\"'address'\">\r\n                    <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\" [viewMode]=\"true\"\r\n                        [(data)]=\"data[control.field]\">\r\n                    </address-picker>\r\n                </span>\r\n                <span *ngSwitchCase=\"'numberrange'\">\r\n                    <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\" [maskType]=\"control.maskType\"\r\n                        [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\">\r\n                    </tn-number-picker-range>\r\n                </span>\r\n                <span *ngSwitchCase=\"'string'\">{{data[control.field]}}</span>\r\n                <span *ngSwitchCase=\"'button'\">\r\n                </span>\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 [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\"\r\n                                [responsive]=\"true\" class=\"new-table scr-table table-control\">\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-columns>\r\n                                    <tr>\r\n                                        <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\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\"\r\n                                                tooltipPosition=\"top\" [style.width]=\"subControl.width\"\r\n                                                style=\"text-align: center;\">\r\n                                                {{subControl.label}}\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                    <tr>\r\n                                        <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                            *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                            <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</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\" [style]=\"subControl.style\">\r\n                                                <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"labelValueViewMode; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </tn-custom-scrollbar>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    <ng-container [ngTemplateOutlet]=\"getComponentByType(control.viewModedataType)\"\r\n                        [ngTemplateOutletContext]=\"{data: data, control: control, isViewMode: true}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{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 (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                        pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                    [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\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\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\" (onFocus)=\"onFocusTextControl($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText type=\"tel\" [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (focus)=\"onFocusTextControl($event)\" />\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]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    type=\"tel\" pInputText [(ngModel)]=\"data[control.field]\" (focus)=\"onFocusTextControl($event)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea (focus)=\"onFocusTextControl($event)\" [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\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\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, '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=\"'fileManager'\">\r\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [readonly]=\"control.disabled\"\r\n                    [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\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                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    [(ngModel)]=\"data[control.field]\" [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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, '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, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-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\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\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                    (onSelect)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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 [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, '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                    (onSelect)=\"handleFieldValueChange(control, $event, '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\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\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\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\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 [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\" [responsive]=\"true\"\r\n                            class=\"new-table scr-table table-control\" [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\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; width: 2.5rem\">\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.width]=\"subControl.width\" style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\"\r\n                                        [style.width]=\"getTableFunctionColumnWidth(control)\"\r\n                                        class=\"table-function column-function\">\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\">\r\n                                    <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                        *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                        <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</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                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                            </ng-container>\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 style=\"text-align:center\" *ngIf=\"control.showFunction\" class=\"column-function\">\r\n                                        <div 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\" icon=\"pi pi-save\"\r\n                                                [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-pencil\"\r\n                                                [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-danger\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (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                                            <!-- <button *ngFor=\"let bt of control.rowButtons\" type=\"button\" pButton\r\n                                                [class]=\"bt.class\" [icon]=\"bt.icon\" [pTooltip]=\"bt.label | translate\"\r\n                                                tooltipPosition=\"top\" style=\"width: 2.143em;\"\r\n                                                (click)=\"messageRow(ri, control, path)\"></button> -->\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\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 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 [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange}\">\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        </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<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>\r\n",
+                    template: "<div [class]=\"_styleClass\" style=\"padding: 0.5rem 0.5rem 0\">\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\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container *ngIf=\"!isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"isViewMode\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"labelValueViewMode; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                    </ng-container>\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 #labelValueViewMode let-data=\"data\" let-control=\"control\" let-path=\"path\" let-parentPath=\"parentPath\"\r\n    let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} type-{{control.dataType}} view-mode\"\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 && control.label\">\r\n            <label [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}<span *ngIf=\"control.required\"\r\n                    class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container *ngIf=\"data[control.field] === null || data[control.field] === undefined\">\r\n            <span class=\"no-value\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!(data[control.field] === null || data[control.field] === undefined)\">\r\n            <ng-container [ngSwitch]=\"control.dataType\">\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\r\n                                *ngTemplateOutlet=\"labelValueViewMode; context: {control: subControl, data: data[control.field], showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                    <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\"\r\n                        [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\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\" [readonly]=\"true\">\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\" [readonly]=\"true\"\r\n                        [accept]=\"control.accept\">\r\n                    </file-upload>\r\n                </span>\r\n                <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                    <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                        [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                        [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\">\r\n                    </service-file-upload>\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'label'\">\r\n                    <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\"\r\n                        [attr.label-index]=\"control.indexLabel\" [pTooltip]=\"control.title\" tooltipPosition=\"top\"\r\n                        tooltipStyleClass=\"wrap\" [escape]=\"false\" [for]=\"control.for\">{{control.text |\r\n                        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                <span *ngSwitchCase=\"'text'\">\r\n                    {{data[control.field]}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'money'\">\r\n                    {{data[control.field] | number}} VN\u0110\r\n                </span>\r\n                <span *ngSwitchCase=\"'date'\">\r\n                    {{data[control.field] | date:'dd/MM/yyyy'}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'datetime'\">\r\n                    {{_crudService.renderDateTime(data[control.field], control.format)}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'user'\">\r\n                    {{data[control.field] | userFormat | async}}\r\n                </span>\r\n                <span *ngSwitchCase=\"'hasDataSource'\">\r\n                    <span *ngIf=\"!control.freeText\">\r\n                        {{getItemInArrayByValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field], control)}}\r\n                    </span>\r\n                    <span *ngIf=\"control.freeText\">\r\n                        {{getItemInArrayByTextValue(data._source[control.field] || control.dataSource,\r\n                        data[control.field])}}\r\n                    </span>\r\n                </span>\r\n                <span *ngSwitchCase=\"'colorPicker'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.field]}\">\r\n                </span>\r\n                <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                    <span *ngIf=\"!control.ishtml\">{{data[control.sourceField]}}</span>\r\n                    <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.sourceField]\"></span>\r\n                </ng-container>\r\n                <span *ngSwitchCase=\"'colorControl'\" class=\"show-color-control\"\r\n                    [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\">\r\n                </span>\r\n                <span *ngSwitchCase=\"'boolean'\">\r\n                    <i class=\"{{data[control.field] | booleanFormat}}\"></i>\r\n                </span>\r\n                <span *ngSwitchCase=\"'html'\">\r\n                    <div [innerHTML]=\"data[control.field]\" *ngIf=\"data[control.field]==null?'':data[control.field]\">\r\n                    </div>\r\n                </span>\r\n                <span *ngSwitchCase=\"'mask'\">\r\n                    <tn-mask [viewMode]=\"true\" [prefix]=\"control.prefix\" [suffix]=\"control.suffix\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [decimalPlaces]=\"control.decimalPlaces\"\r\n                        [maskType]=\"control.maskType\" [thousandSeperator]=\"control.thousandSeperator\" [(ngModel)]=\"data[control.field]\" [min]=\"control.min\"\r\n                        [max]=\"control.max\">\r\n                    </tn-mask>\r\n                </span>\r\n                <span *ngSwitchCase=\"'address'\">\r\n                    <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\" [viewMode]=\"true\"\r\n                        [(data)]=\"data[control.field]\">\r\n                    </address-picker>\r\n                </span>\r\n                <span *ngSwitchCase=\"'numberrange'\">\r\n                    <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\" [maskType]=\"control.maskType\"\r\n                        [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\">\r\n                    </tn-number-picker-range>\r\n                </span>\r\n                <span *ngSwitchCase=\"'string'\">{{data[control.field]}}</span>\r\n                <span *ngSwitchCase=\"'button'\">\r\n                </span>\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 [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\"\r\n                                [responsive]=\"true\" class=\"new-table scr-table table-control\">\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-columns>\r\n                                    <tr>\r\n                                        <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 2.5rem\">\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\"\r\n                                                tooltipPosition=\"top\" [style.width]=\"subControl.width\"\r\n                                                style=\"text-align: center;\">\r\n                                                {{subControl.label}}\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </th>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                                <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                    <tr>\r\n                                        <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                            *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                            <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</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\" [style]=\"subControl.style\">\r\n                                                <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"labelValueViewMode; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                            </td>\r\n                                        </ng-container>\r\n                                    </tr>\r\n                                </ng-template>\r\n                            </p-table>\r\n                        </tn-custom-scrollbar>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>\r\n                    <ng-container [ngTemplateOutlet]=\"getComponentByType(control.viewModedataType)\"\r\n                        [ngTemplateOutletContext]=\"{data: data, control: control, isViewMode: true}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{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 (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                        [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                        pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" (focus)=\"onFocusTextControl($event)\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                    [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\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\" [min]=\"control.min\" [max]=\"control.max\" [thousandSeperator]=\"control.thousandSeperator\"\r\n                    [(ngModel)]=\"data[control.field]\" (onFocus)=\"onFocusTextControl($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    pInputText type=\"tel\" [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (focus)=\"onFocusTextControl($event)\" />\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]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    type=\"tel\" pInputText [(ngModel)]=\"data[control.field]\" (focus)=\"onFocusTextControl($event)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea (focus)=\"onFocusTextControl($event)\" [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"data._status[control.field].disabled === true || (data._status[control.field].disabled === undefined && control.disabled) ? true : null\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\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\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, '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=\"'fileManager'\">\r\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [readonly]=\"control.disabled\"\r\n                    [rootFolderName]=\"control.rootFolderName || control.label\" [layout]=\"control.layout\"\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                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    [(ngModel)]=\"data[control.field]\" [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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, '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.checkboxLabel ? control.checkboxLabel : control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-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\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\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                    (onSelect)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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 [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, '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                    (onSelect)=\"handleFieldValueChange(control, $event, '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\" [parentPath]=\"parentPath\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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                    (onChanged)=\"handleFieldValueChange(control, $event, '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\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\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\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, '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                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\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 [value]=\"data[control.field]\" [columns]=\"control.headerTemplate\" [responsive]=\"true\"\r\n                            class=\"new-table scr-table table-control\" [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\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; width: 2.5rem\">\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.width]=\"subControl.width\" style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\"\r\n                                        [style.width]=\"getTableFunctionColumnWidth(control)\"\r\n                                        class=\"table-function column-function\">\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\">\r\n                                    <td style=\"text-align: center; padding-left: 0; padding-right: 0;\"\r\n                                        *ngIf=\"control.showNumber\" class=\"stt\">\r\n                                        <span style=\"padding: 12px 5px; display: inline-block;\">{{ri+1}}</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                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                            </ng-container>\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 style=\"text-align:center\" *ngIf=\"control.showFunction\" class=\"column-function\">\r\n                                        <div 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\" icon=\"pi pi-save\"\r\n                                                [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-pencil\"\r\n                                                [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-danger\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                style=\"width: 2.143em;\" (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                                            <!-- <button *ngFor=\"let bt of control.rowButtons\" type=\"button\" pButton\r\n                                                [class]=\"bt.class\" [icon]=\"bt.icon\" [pTooltip]=\"bt.label | translate\"\r\n                                                tooltipPosition=\"top\" style=\"width: 2.143em;\"\r\n                                                (click)=\"messageRow(ri, control, path)\"></button> -->\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\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 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 [ngTemplateOutlet]=\"getComponentByType(control.field)\"\r\n                    [ngTemplateOutletContext]=\"{crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange}\">\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        </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<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>\r\n",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;padding-left:.2em;padding-top:.3em;position:absolute}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}::ng-deep .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}.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;padding:10px 0 10px 5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#6c757d;font-size:.8rem;margin-bottom:5px;margin-left:10px}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{font-size:.9em;height:1.15em;margin-bottom:5px}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep .crud-form-control>.error-container .error-item .error-content i{display:flex;font-size:.9em;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}: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}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{display:block;margin-bottom:40px}"]
                 },] }
@@ -18131,7 +18254,7 @@
                                     this.onSaved.emit();
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    this.handleInsertError();
+                                    this.handleInsertError(response);
                                     _a.label = 3;
                                 case 3: return [2 /*return*/];
                             }
@@ -18151,7 +18274,7 @@
         DataFormBase.prototype.getPromiseActionInsert = function () {
             return this.setting.baseService.post(this.model.data, this.insertPlusUrl);
         };
-        DataFormBase.prototype.handleInsertError = function () {
+        DataFormBase.prototype.handleInsertError = function (response) {
         };
         DataFormBase.prototype.onUpdate = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -18172,7 +18295,7 @@
                                     this.onSaved.emit();
                                     return [3 /*break*/, 3];
                                 case 2:
-                                    this.handleUpdateError();
+                                    this.handleUpdateError(response);
                                     _a.label = 3;
                                 case 3: return [2 /*return*/];
                             }
@@ -18189,7 +18312,7 @@
                 });
             });
         };
-        DataFormBase.prototype.handleUpdateError = function () {
+        DataFormBase.prototype.handleUpdateError = function (response) {
         };
         DataFormBase.prototype.getPromiseActionUpdate = function () {
             return this.setting.baseService.put(this.model.data.id.toString(), this.model.data, this.updatePlusUrl);
@@ -18821,27 +18944,49 @@
         AutoCompletePickerComponent.prototype.buildFilterKeyword = function () {
             var _this = this;
             if (this.fieldSearchText.length == 1) {
-                this.getFilterOnSearch = function (value) { return _this.newFilter(_this.control.displayField, exports.Operator.contain, value); };
+                if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                    this.getFilterOnSearch = function (value) { return _this.newFilterV4(_this.control.displayField, exports.Operator.contain, value.toString()); };
+                }
+                else {
+                    this.getFilterOnSearch = function (value) { return _this.newFilter(_this.control.displayField, exports.Operator.contain, value); };
+                }
             }
             else {
                 this.getFilterOnSearch = function (value) {
-                    var e_1, _a;
+                    var e_1, _a, e_2, _b;
                     var result = new Filter({
                         logic: 'or',
                         filters: []
                     });
-                    try {
-                        for (var _b = __values(_this.fieldSearchText), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var fieldSearch = _c.value;
-                            result.filters.push(_this.newFilter(fieldSearch, exports.Operator.contain, value));
+                    if (_this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                        try {
+                            for (var _c = __values(_this.fieldSearchText), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                var fieldSearch = _d.value;
+                                result.filters.push(_this.newFilterV4(fieldSearch, exports.Operator.contain, value.toString()));
+                            }
+                        }
+                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                        finally {
+                            try {
+                                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                            }
+                            finally { if (e_1) throw e_1.error; }
                         }
                     }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
+                    else {
                         try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            for (var _e = __values(_this.fieldSearchText), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var fieldSearch = _f.value;
+                                result.filters.push(_this.newFilter(fieldSearch, exports.Operator.contain, value));
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                            }
+                            finally { if (e_2) throw e_2.error; }
                         }
-                        finally { if (e_1) throw e_1.error; }
                     }
                     return result;
                 };
@@ -18917,34 +19062,50 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
+                            if (!this.control.modifyInitSearchData) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.control.modifyInitSearchData(this)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
                             filters = [];
                             if (this.control.multiple) {
                                 if (this.value && this.value.length > 0) {
-                                    filters.push(this.newFilter(this.control.valueField, exports.Operator.notIn, this.value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        filters.push(this.newFilterV4(this.control.valueField, exports.Operator.notIn, this.value.join(',')));
+                                    }
+                                    else {
+                                        filters.push(this.newFilter(this.control.valueField, exports.Operator.notIn, this.value));
+                                    }
                                 }
                             }
                             else {
                                 if (this.value) {
-                                    filters.push(this.newFilter(this.control.valueField, exports.Operator.notEqual, this.value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        filters.push(this.newFilterV4(this.control.valueField, exports.Operator.notEqual, this.value.toString()));
+                                    }
+                                    else {
+                                        filters.push(this.newFilter(this.control.valueField, exports.Operator.notEqual, this.value));
+                                    }
                                 }
                             }
                             return [4 /*yield*/, appendDefaultFilter(filters, this.control.defaultFilters)];
-                        case 1:
+                        case 3:
                             _a.sent();
                             if (this.keyword && this.keyword.length > 0) {
                                 filters.push(this.getFilterOnSearch(this.keyword));
                             }
-                            if (!this.control.modifyFilter) return [3 /*break*/, 3];
+                            if (!this.control.modifyFilter) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.control.modifyFilter(filters)];
-                        case 2:
+                        case 4:
                             allow = _a.sent();
                             if (allow === false) {
                                 this.results = [];
                                 return [2 /*return*/];
                             }
-                            _a.label = 3;
-                        case 3: return [4 /*yield*/, this.control.baseService.getDataDropdownByFilter(filters, this.getDropdownOptions())];
-                        case 4:
+                            _a.label = 5;
+                        case 5: return [4 /*yield*/, this.control.baseService.getDataDropdownByFilter(filters, this.getDropdownOptions())];
+                        case 6:
                             dataSource = _a.sent();
                             this.fireEventAfterGetDataDropDown(dataSource);
                             this.reStructureDataSource(dataSource);
@@ -19125,9 +19286,17 @@
                             if (!this.control.multiple) return [3 /*break*/, 5];
                             dataSource = [];
                             if (!(this.value && this.value.length > 0)) return [3 /*break*/, 4];
-                            filters = [
-                                this.newFilter(this.control.valueField, exports.Operator.in, this.value)
-                            ];
+                            filters = [];
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                filters = [
+                                    this.newFilterV4(this.control.valueField, exports.Operator.in, this.value.join(','))
+                                ];
+                            }
+                            else {
+                                filters = [
+                                    this.newFilter(this.control.valueField, exports.Operator.in, this.value)
+                                ];
+                            }
                             if (!this.control.modifyFilter) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.control.modifyFilter(filters)];
                         case 1:
@@ -19151,9 +19320,17 @@
                         case 5:
                             dataSource = [];
                             if (!this.value) return [3 /*break*/, 9];
-                            filters = [
-                                this.newFilter(this.control.valueField, exports.Operator.equal, this.value)
-                            ];
+                            filters = [];
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                filters = [
+                                    this.newFilterV4(this.control.valueField, exports.Operator.equal, this.value.toString())
+                                ];
+                            }
+                            else {
+                                filters = [
+                                    this.newFilter(this.control.valueField, exports.Operator.equal, this.value)
+                                ];
+                            }
                             if (!this.control.modifyFilter) return [3 /*break*/, 7];
                             return [4 /*yield*/, this.control.modifyFilter(filters)];
                         case 6:
@@ -19198,7 +19375,7 @@
             }
         };
         AutoCompletePickerComponent.prototype.reStructureDataSource = function (sources) {
-            var e_2, _a;
+            var e_3, _a;
             if (sources != null && sources.length > 0) {
                 var arr = [];
                 try {
@@ -19208,12 +19385,12 @@
                         arr.push(item);
                     }
                 }
-                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
                         if (sources_1_1 && !sources_1_1.done && (_a = sources_1.return)) _a.call(sources_1);
                     }
-                    finally { if (e_2) throw e_2.error; }
+                    finally { if (e_3) throw e_3.error; }
                 }
                 this.dataSource = arr;
             }
@@ -19243,7 +19420,12 @@
                             if (!this.control.multiple) return [3 /*break*/, 6];
                             if (!(obj != null && obj.length > 0)) return [3 /*break*/, 4];
                             filters = [];
-                            filters.push(this.newFilter(this.control.valueField, exports.Operator.in, obj));
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                filters.push(this.newFilterV4(this.control.valueField, exports.Operator.in, obj.join(',')));
+                            }
+                            else {
+                                filters.push(this.newFilter(this.control.valueField, exports.Operator.in, obj));
+                            }
                             if (!this.control.modifyFilter) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.control.modifyFilter(filters)];
                         case 1:
@@ -19268,9 +19450,17 @@
                         case 5: return [3 /*break*/, 10];
                         case 6:
                             if (!(obj != null)) return [3 /*break*/, 9];
-                            filters = [
-                                this.newFilter(this.control.valueField, exports.Operator.equal, obj)
-                            ];
+                            filters = [];
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                filters = [
+                                    this.newFilterV4(this.control.valueField, exports.Operator.equal, obj.toString())
+                                ];
+                            }
+                            else {
+                                filters = [
+                                    this.newFilter(this.control.valueField, exports.Operator.equal, obj)
+                                ];
+                            }
                             if (!this.control.modifyFilter) return [3 /*break*/, 8];
                             return [4 /*yield*/, this.control.modifyFilter(filters)];
                         case 7:
@@ -19346,6 +19536,7 @@
     AutoCompletePickerComponent.propDecorators = {
         control: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
+        parentPath: [{ type: i0.Input }],
         popupSize: [{ type: i0.Input }],
         onSelect: [{ type: i0.Output }],
         onUnSelect: [{ type: i0.Output }],
@@ -19464,20 +19655,6 @@
         FileObjectService.prototype.getScanFileUploadEndpoint = function (correlationId) {
             return this.serviceCode + "/CreateScannedFile/" + correlationId;
         };
-        FileObjectService.prototype.isTypeFileKySo = function (fileName) {
-            var fileExtension = this.getFileExtension(fileName);
-            if (fileExtension) {
-                fileExtension = fileExtension.toLowerCase();
-                if (fileExtension.indexOf('.') > -1) {
-                    var arr = fileExtension.split('.');
-                    fileExtension = arr[arr.length - 1];
-                }
-                if ((/(pdf|doc|docx|xls|xlsm|xlsx)$/i).test(fileExtension)) {
-                    return true;
-                }
-            }
-            return false;
-        };
         return FileObjectService;
     }(BaseService));
     FileObjectService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FileObjectService_Factory() { return new FileObjectService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(ModuleConfigService)); }, token: FileObjectService, providedIn: "root" });
@@ -20565,13 +20742,16 @@
                 });
             });
         };
-        MenuService.prototype.renderMenuByAppCode = function (appCode) {
+        MenuService.prototype.renderMenuByAppCode = function (scopeName, appCode) {
             return __awaiter(this, void 0, void 0, function () {
                 var menuUrl;
                 var _this = this;
                 return __generator(this, function (_a) {
                     this._menuItems = [];
                     menuUrl = "assets/menus/" + appCode.toLocaleLowerCase() + ".json";
+                    if (scopeName) {
+                        menuUrl = "assets/menus/" + scopeName.toLocaleLowerCase() + "/" + appCode.toLocaleLowerCase() + ".json";
+                    }
                     fetch(menuUrl).then(function (rs) { return __awaiter(_this, void 0, void 0, function () {
                         var menu, _a, _b;
                         return __generator(this, function (_c) {
@@ -20725,7 +20905,7 @@
                 // Nếu là môi trường triển khai thì cộng thêm tiền tố phân hệ vào router link để có thể chuột phải mở tab mới
                 funcSetNewTabLink = function (link) { return "/" + appCodeLowerCase + link; };
             }
-            this._menuService.renderMenuByAppCode(appCode);
+            this._menuService.renderMenuByAppCode(this.environment.scopeName, appCode);
             this.model = this._menuService.getMenuItems();
             this._router.events.pipe(operators.filter(function (event) { return event instanceof i3.NavigationEnd; }))
                 .subscribe(function (event) {
@@ -23286,7 +23466,7 @@
     };
 
     var CommonAppComponentComponent = /** @class */ (function () {
-        function CommonAppComponentComponent(_globalService, _commonService, renderer, translate, _oauthService, _authenService, _userService, _router, _title, _signalRService, _storageUpdatedService, _customRouteService, _applicationContext, _componentContextService, _activatedRoute, _deviceDetectorService, _cd, _tnClientService, _coreConfigService, _notifierService, _entityMetadataService, _moduleConfigService, _translateService, _messageService, _confirmService, _menuService, _primengConfig, _storageService) {
+        function CommonAppComponentComponent(_globalService, _commonService, renderer, translate, _oauthService, _authenService, _userService, _router, _title, _signalRService, _storageUpdatedService, _customRouteService, _applicationContext, _componentContextService, _activatedRoute, _deviceDetectorService, _cd, _tnClientService, _coreConfigService, _notifierService, _entityMetadataService, _moduleConfigService, _translateService, _messageService, _confirmService, _menuService, _primengConfig, _storageService, _permissionService) {
             var _this = this;
             this._globalService = _globalService;
             this._commonService = _commonService;
@@ -23316,6 +23496,7 @@
             this._menuService = _menuService;
             this._primengConfig = _primengConfig;
             this._storageService = _storageService;
+            this._permissionService = _permissionService;
             this.showQuickNote = true;
             this.allowAnonymous = false;
             this._unsubscribeAll = new rxjs.Subject();
@@ -23469,6 +23650,25 @@
             root.data.allowAnonymous = this.allowAnonymous;
             // get current User
             this._userService.populateCurrentUser();
+            this._componentContextService.subscribe(ComCtxConstants.ROOT.NEED_CLEAR_PERMISSION_CACHE, function () { return __awaiter(_this, void 0, void 0, function () {
+                var clear;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this.environment.authenticationSettings.coreVersion == 'v4')) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.clearPermissionCacheByModule()];
+                        case 1:
+                            clear = _a.sent();
+                            if (!clear.success) {
+                                this._notifierService.showWarning('Có vấn đề trong lúc clear cache quyền');
+                            }
+                            _a.label = 2;
+                        case 2:
+                            this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
             this._componentContextService.subscribe(ComCtxConstants.ROOT.KEY_DOWN_ARROWLEFT, function (e) {
                 if (document.activeElement === _this.cancelButton.nativeElement) {
                     _this.okButton.nativeElement.focus();
@@ -23984,6 +24184,17 @@
                 }
             }
         };
+        CommonAppComponentComponent.prototype.clearPermissionCacheByModule = function () {
+            var appSwitcher = this._moduleConfigService.getConfig().environment.appMetadata.appSwitcher;
+            if (!appSwitcher || !appSwitcher.length) {
+                appSwitcher = [];
+            }
+            var lstModule = appSwitcher.map(function (x) { return x.code; });
+            if (!lstModule) {
+                lstModule = [];
+            }
+            return this._permissionService.clearPermissionCache(lstModule);
+        };
         return CommonAppComponentComponent;
     }());
     CommonAppComponentComponent.decorators = [
@@ -24022,7 +24233,8 @@
         { type: i1.ConfirmationService },
         { type: MenuService },
         { type: i1.PrimeNGConfig },
-        { type: StorageService }
+        { type: StorageService },
+        { type: PermissionService }
     ]; };
     CommonAppComponentComponent.propDecorators = {
         okButton: [{ type: i0.ViewChild, args: ['okButton',] }],
@@ -26179,6 +26391,8 @@
             });
             _this.sourceIcon = {};
             _this.stopCalculatingFunctionColumnWidth = false;
+            _this.FileUploadMode = exports.FileUploadMode;
+            _this.eventType = exports.EventType;
             _this._unSubscribeAll = new rxjs.Subject();
             _this.handleSelectRow = function (evt, data) {
                 if (_this.setting.hasCustomHandleClickRow) {
@@ -26361,6 +26575,94 @@
                 _this.setting.pageSetting.page = 1;
                 _this.getData();
             };
+            _this.handleFieldValueChange = function (control, event, rowData, type) { return __awaiter(_this, void 0, void 0, function () {
+                var eventData, _f, _a_1, _b_1, _c_1, _d_1, _e_1;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            eventData = {
+                                event: event,
+                                rowData: rowData,
+                                type: type
+                            };
+                            _f = type;
+                            switch (_f) {
+                                case exports.EventType.CHANGE: return [3 /*break*/, 1];
+                                case exports.EventType.INIT: return [3 /*break*/, 6];
+                                case exports.EventType.DELETED: return [3 /*break*/, 11];
+                                case exports.EventType.SELECT: return [3 /*break*/, 16];
+                                case exports.EventType.UPLOADED: return [3 /*break*/, 21];
+                            }
+                            return [3 /*break*/, 26];
+                        case 1:
+                            if (!control.onChanged) return [3 /*break*/, 5];
+                            _g.label = 2;
+                        case 2:
+                            _g.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, control.onChanged(eventData)];
+                        case 3:
+                            _g.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            _a_1 = _g.sent();
+                            return [3 /*break*/, 5];
+                        case 5: return [3 /*break*/, 26];
+                        case 6:
+                            if (!control.onInit) return [3 /*break*/, 10];
+                            _g.label = 7;
+                        case 7:
+                            _g.trys.push([7, 9, , 10]);
+                            return [4 /*yield*/, control.onInit(eventData)];
+                        case 8:
+                            _g.sent();
+                            return [3 /*break*/, 10];
+                        case 9:
+                            _b_1 = _g.sent();
+                            return [3 /*break*/, 10];
+                        case 10: return [3 /*break*/, 26];
+                        case 11:
+                            if (!control.onRemove) return [3 /*break*/, 15];
+                            _g.label = 12;
+                        case 12:
+                            _g.trys.push([12, 14, , 15]);
+                            return [4 /*yield*/, control.onRemove(eventData)];
+                        case 13:
+                            _g.sent();
+                            return [3 /*break*/, 15];
+                        case 14:
+                            _c_1 = _g.sent();
+                            return [3 /*break*/, 15];
+                        case 15: return [3 /*break*/, 26];
+                        case 16:
+                            if (!control.onSelected) return [3 /*break*/, 20];
+                            _g.label = 17;
+                        case 17:
+                            _g.trys.push([17, 19, , 20]);
+                            return [4 /*yield*/, control.onSelected(eventData)];
+                        case 18:
+                            _g.sent();
+                            return [3 /*break*/, 20];
+                        case 19:
+                            _d_1 = _g.sent();
+                            return [3 /*break*/, 20];
+                        case 20: return [3 /*break*/, 26];
+                        case 21:
+                            if (!control.onUploaded) return [3 /*break*/, 25];
+                            _g.label = 22;
+                        case 22:
+                            _g.trys.push([22, 24, , 25]);
+                            return [4 /*yield*/, control.onUploaded(eventData)];
+                        case 23:
+                            _g.sent();
+                            return [3 /*break*/, 25];
+                        case 24:
+                            _e_1 = _g.sent();
+                            return [3 /*break*/, 25];
+                        case 25: return [3 /*break*/, 26];
+                        case 26: return [2 /*return*/];
+                    }
+                });
+            }); };
             _this._activatedRoute = _this._injector.get(i3.ActivatedRoute);
             _this._router = _this._injector.get(i3.Router);
             _this._customRouterService = _this._injector.get(CustomRouterService);
@@ -26668,7 +26970,7 @@
             });
         };
         CrudListComponent.prototype.formatColumns = function (cols) {
-            var e_1, _b;
+            var e_1, _f;
             try {
                 for (var cols_1 = __values(cols), cols_1_1 = cols_1.next(); !cols_1_1.done; cols_1_1 = cols_1.next()) {
                     var col = cols_1_1.value;
@@ -26680,7 +26982,7 @@
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (cols_1_1 && !cols_1_1.done && (_b = cols_1.return)) _b.call(cols_1);
+                    if (cols_1_1 && !cols_1_1.done && (_f = cols_1.return)) _f.call(cols_1);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -26879,7 +27181,7 @@
         CrudListComponent.prototype.validatePermission = function (rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var itemStatus, hasPermission, userData, userId, userIdUpper, userGroupIds, userOrgIds, managerTypes, userIdLastUpper_1, donViIdLastUpper_1;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     this.currentItem = rowData;
                     itemStatus = this.setting.workflowSetting.statuses.find(function (p) { return p.trangThaiContainer.ma == rowData.currentStateCode; });
                     hasPermission = false;
@@ -26946,12 +27248,12 @@
         };
         CrudListComponent.prototype.showActionWorkflow = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, buttonContexts, hasPermission;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _f, buttonContexts, hasPermission;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0: return [4 /*yield*/, this.getActionWorkflow(rowData)];
                         case 1:
-                            _b = __read.apply(void 0, [_c.sent(), 2]), buttonContexts = _b[0], hasPermission = _b[1];
+                            _f = __read.apply(void 0, [_g.sent(), 2]), buttonContexts = _f[0], hasPermission = _f[1];
                             this.buttonContexts = buttonContexts;
                             rowData.__hasPermission = hasPermission;
                             rowData.__actions = this.buttonContexts;
@@ -26965,11 +27267,11 @@
             return __awaiter(this, void 0, void 0, function () {
                 var hasPermission, buttonContexts, statusAction, actions;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.validatePermission(rowData)];
                         case 1:
-                            hasPermission = _b.sent();
+                            hasPermission = _f.sent();
                             buttonContexts = [];
                             if (!hasPermission) {
                                 buttonContexts = [];
@@ -27035,8 +27337,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var dataProcess_1, validateWf;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (!(workflowAction.actionOptions && !workflowAction.actionOptions.openDialog)) return [3 /*break*/, 2];
                             dataProcess_1 = {
@@ -27046,7 +27348,7 @@
                             };
                             return [4 /*yield*/, this.setting.baseService.validateProcessWorkflow(this.currentItem.id, workflowAction.ma, dataProcess_1)];
                         case 1:
-                            validateWf = _b.sent();
+                            validateWf = _f.sent();
                             this.handleResponse(validateWf, '', function (f) {
                                 _this.setting.baseService.processWorkflow(_this.currentItem.id, workflowAction.ma, dataProcess_1)
                                     .then(function (res) { return _this.handleResponse(res, workflowAction.ten + " th\u00E0nh c\u00F4ng", function (f) {
@@ -27070,7 +27372,7 @@
                             this.actionWorkflow = workflowAction;
                             this.headerWorkflow = workflowAction.ten;
                             this.showFormWorkflow = true;
-                            _b.label = 3;
+                            _f.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
@@ -27173,7 +27475,7 @@
             this.onAdd.emit();
         };
         CrudListComponent.prototype.xuatCacMucDaChon_backup = function () {
-            var e_2, _b;
+            var e_2, _f;
             if (this._groupField) {
                 this._notifierService.showWarning('Giao diện hiện tại chưa hỗ trợ xuất excel');
                 return;
@@ -27215,7 +27517,7 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (rowData_1_1 && !rowData_1_1.done && (_b = rowData_1.return)) _b.call(rowData_1);
+                    if (rowData_1_1 && !rowData_1_1.done && (_f = rowData_1.return)) _f.call(rowData_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
@@ -27358,8 +27660,8 @@
         CrudListComponent.prototype.checkHasPermissionInLastStatus = function (rowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var statusKetThuc;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             statusKetThuc = this.setting.workflowSetting.statuses.find(function (q) { return q.type == exports.EnumWFNhomTrangThai.KET_THUC; });
                             if (statusKetThuc == null) {
@@ -27372,46 +27674,46 @@
                             return [4 /*yield*/, this.validatePermission(rowData)];
                         case 1: 
                         // Kiểm tra permission
-                        return [2 /*return*/, _b.sent()];
+                        return [2 /*return*/, _f.sent()];
                     }
                 });
             });
         };
         CrudListComponent.prototype.showContextMenu = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, _c, _d, _e;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var _f, _g, _h, _j;
+                return __generator(this, function (_k) {
+                    switch (_k.label) {
                         case 0:
                             this.rowDataCurrent = rowData;
-                            _b = this;
+                            _f = this;
                             return [4 /*yield*/, this.menuButtons(rowData)];
                         case 1:
-                            _b.buttonContexts = _f.sent();
+                            _f.buttonContexts = _k.sent();
                             if (!(!this.setting.hiddenTrinhKy && !rowData.__hiddenTrinhKy)) return [3 /*break*/, 7];
-                            _d = this.setting.checkReadyToTrinhKy();
-                            if (!_d) return [3 /*break*/, 3];
+                            _h = this.setting.checkReadyToTrinhKy();
+                            if (!_h) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.setting.checkAllowTrinhKy(rowData)];
                         case 2:
-                            _d = (_f.sent());
-                            _f.label = 3;
+                            _h = (_k.sent());
+                            _k.label = 3;
                         case 3:
-                            _c = _d;
-                            if (!_c) return [3 /*break*/, 6];
-                            _e = !this.setting.checkPermisionTrinhKy;
-                            if (_e) return [3 /*break*/, 5];
+                            _g = _h;
+                            if (!_g) return [3 /*break*/, 6];
+                            _j = !this.setting.checkPermisionTrinhKy;
+                            if (_j) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.checkHasPermissionInLastStatus(rowData)];
                         case 4:
-                            _e = (_f.sent());
-                            _f.label = 5;
+                            _j = (_k.sent());
+                            _k.label = 5;
                         case 5:
-                            _c = (_e);
-                            _f.label = 6;
+                            _g = (_j);
+                            _k.label = 6;
                         case 6:
-                            if (_c) {
+                            if (_g) {
                                 this.buttonContexts.unshift({ label: this.setting.getLabelButtonTrinhKy(rowData), icon: 'pi pi-send', command: this.trinhKy.bind(this) });
                             }
-                            _f.label = 7;
+                            _k.label = 7;
                         case 7:
                             if (this.buttonContexts.length > 0) {
                                 this._showContextMenu(evt);
@@ -27988,7 +28290,7 @@
             return col.dataType == exports.DataType.datetime || col.dataType == exports.DataType.date || col.dataType == exports.DataType.boolean || col.dataType == exports.DataType.enum;
         };
         CrudListComponent.prototype.alignRightColumn = function (col) {
-            return col.dataType == exports.DataType.int || col.dataType == exports.DataType.decimal;
+            return col.dataType == exports.DataType.int || col.dataType == exports.DataType.decimal || col.dataType == exports.DataType.currency;
         };
         CrudListComponent.prototype.ngOnDestroy = function () {
             if (!this.disableKeypressControl) {
@@ -28004,10 +28306,10 @@
                 clearTimeout(this.timeout);
         };
         CrudListComponent.prototype.disableMultipleDelete = function () {
-            var e_3, _b;
+            var e_3, _f;
             try {
-                for (var _c = __values(this.model.selectedItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var item = _d.value;
+                for (var _g = __values(this.model.selectedItems), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var item = _h.value;
                     if (this.disableDelete(item)) {
                         return true;
                     }
@@ -28016,7 +28318,7 @@
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
@@ -28086,11 +28388,11 @@
         };
         CrudListComponent.prototype.processBaseData = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0: return [4 /*yield*/, this.preProcessData(this.model.dataSource)];
                         case 1:
-                            _b.sent();
+                            _f.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -28099,14 +28401,14 @@
         CrudListComponent.prototype.preProcessData = function (dataSource) {
             return __awaiter(this, void 0, void 0, function () {
                 var colHasPipe, _loop_3, this_2, colHasPipe_1, colHasPipe_1_1, col;
-                var e_4, _b;
-                return __generator(this, function (_c) {
+                var e_4, _f;
+                return __generator(this, function (_g) {
                     colHasPipe = this.setting.cols.filter(function (x) { return x.pipe; });
                     _loop_3 = function (col) {
-                        var e_5, _b;
+                        var e_5, _f;
                         var _loop_4 = function (item) {
                             this_2.transform(col.pipe, col.asyncPipe, item[col.field]).then(function (rs) {
-                                item["pipe__" + col.field + " "] = rs;
+                                item["pipe__" + col.field] = rs;
                             });
                         };
                         try {
@@ -28118,7 +28420,7 @@
                         catch (e_5_1) { e_5 = { error: e_5_1 }; }
                         finally {
                             try {
-                                if (dataSource_1_1 && !dataSource_1_1.done && (_b = dataSource_1.return)) _b.call(dataSource_1);
+                                if (dataSource_1_1 && !dataSource_1_1.done && (_f = dataSource_1.return)) _f.call(dataSource_1);
                             }
                             finally { if (e_5) throw e_5.error; }
                         }
@@ -28133,7 +28435,7 @@
                     catch (e_4_1) { e_4 = { error: e_4_1 }; }
                     finally {
                         try {
-                            if (colHasPipe_1_1 && !colHasPipe_1_1.done && (_b = colHasPipe_1.return)) _b.call(colHasPipe_1);
+                            if (colHasPipe_1_1 && !colHasPipe_1_1.done && (_f = colHasPipe_1.return)) _f.call(colHasPipe_1);
                         }
                         finally { if (e_4) throw e_4.error; }
                     }
@@ -28144,8 +28446,8 @@
         CrudListComponent.prototype.transform = function (pipe, asyncPipe, value) {
             return __awaiter(this, void 0, void 0, function () {
                 var val, val;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (this.cachedTransforms[value]) {
                                 return [2 /*return*/, this.cachedTransforms[value]];
@@ -28153,7 +28455,7 @@
                             if (!asyncPipe) return [3 /*break*/, 2];
                             return [4 /*yield*/, pipe.transform(value)];
                         case 1:
-                            val = _b.sent();
+                            val = _f.sent();
                             this.cachedTransforms[value] = val;
                             return [2 /*return*/, val];
                         case 2:
@@ -28247,7 +28549,7 @@
             return {};
         };
         CrudListComponent.prototype.getMinimizeData = function (model) {
-            var e_6, _b;
+            var e_6, _f;
             if (isLiteralObject(model)) {
                 if (model._dropdownvalue != null && model._dropdownvalue !== '') {
                     return model[model._dropdownvalue];
@@ -28273,7 +28575,7 @@
                 catch (e_6_1) { e_6 = { error: e_6_1 }; }
                 finally {
                     try {
-                        if (model_1_1 && !model_1_1.done && (_b = model_1.return)) _b.call(model_1);
+                        if (model_1_1 && !model_1_1.done && (_f = model_1.return)) _f.call(model_1);
                     }
                     finally { if (e_6) throw e_6.error; }
                 }
@@ -28421,7 +28723,7 @@
         };
         CrudListComponent.prototype.showSettingsPermission = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_f) {
                     if (this.creatingSearchInfo)
                         return [2 /*return*/];
                     this._showSettingsPermission = true;
@@ -28431,10 +28733,10 @@
         };
         CrudListComponent.prototype.createSearchSchema = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var searchInfo, _b, _c, col, control, e_7_1, _loop_5, this_3, _d, _e, field;
-                var e_7, _f, _g, e_8, _h;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
+                var searchInfo, _f, _g, col, control, e_7_1, _loop_5, this_3, _h, _j, field;
+                var e_7, _k, _l, e_8, _m;
+                return __generator(this, function (_o) {
+                    switch (_o.label) {
                         case 0:
                             if (this.setting.cols == null) {
                                 return [2 /*return*/, this._notifierService.showWarning('Bạn chưa cấu hình cột cho danh sách')];
@@ -28444,14 +28746,14 @@
                             searchInfo.schema = [];
                             searchInfo.fieldDropdown = {};
                             searchInfo.fieldSearchText = [];
-                            _j.label = 1;
+                            _o.label = 1;
                         case 1:
-                            _j.trys.push([1, 6, 7, 8]);
-                            _b = __values(this.setting.cols), _c = _b.next();
-                            _j.label = 2;
+                            _o.trys.push([1, 6, 7, 8]);
+                            _f = __values(this.setting.cols), _g = _f.next();
+                            _o.label = 2;
                         case 2:
-                            if (!!_c.done) return [3 /*break*/, 5];
-                            col = _c.value;
+                            if (!!_g.done) return [3 /*break*/, 5];
+                            col = _g.value;
                             if (!(col.allowFilter != false && col.rawColumn == null)) return [3 /*break*/, 4];
                             if (col.fullTextSearch) {
                                 if (searchInfo.fieldSearchText.indexOf(col.field) == -1) {
@@ -28464,9 +28766,9 @@
                             }
                             return [4 /*yield*/, this.setting.function.getSearchControl(col.field)];
                         case 3:
-                            control = _j.sent();
+                            control = _o.sent();
                             if (control != null) {
-                                (_g = searchInfo.schema).push.apply(_g, __spread(control));
+                                (_l = searchInfo.schema).push.apply(_l, __spread(control));
                             }
                             else {
                                 if (col.baseService || (col.dataSource && col.dataSource.length > 0)) {
@@ -28520,18 +28822,18 @@
                                     }
                                 }
                             }
-                            _j.label = 4;
+                            _o.label = 4;
                         case 4:
-                            _c = _b.next();
+                            _g = _f.next();
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_7_1 = _j.sent();
+                            e_7_1 = _o.sent();
                             e_7 = { error: e_7_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
-                                if (_c && !_c.done && (_f = _b.return)) _f.call(_b);
+                                if (_g && !_g.done && (_k = _f.return)) _k.call(_f);
                             }
                             finally { if (e_7) throw e_7.error; }
                             return [7 /*endfinally*/];
@@ -28551,15 +28853,15 @@
                                 };
                                 this_3 = this;
                                 try {
-                                    for (_d = __values(searchInfo.fieldSearchText), _e = _d.next(); !_e.done; _e = _d.next()) {
-                                        field = _e.value;
+                                    for (_h = __values(searchInfo.fieldSearchText), _j = _h.next(); !_j.done; _j = _h.next()) {
+                                        field = _j.value;
                                         _loop_5(field);
                                     }
                                 }
                                 catch (e_8_1) { e_8 = { error: e_8_1 }; }
                                 finally {
                                     try {
-                                        if (_e && !_e.done && (_h = _d.return)) _h.call(_d);
+                                        if (_j && !_j.done && (_m = _h.return)) _m.call(_h);
                                     }
                                     finally { if (e_8) throw e_8.error; }
                                 }
@@ -28625,15 +28927,19 @@
                 }
             }, 20);
         };
+        CrudListComponent.prototype.getTooltip = function (tooltip, field) {
+            var result = tooltip && tooltip[field] ? tooltip[field] : null;
+            return result;
+        };
         return CrudListComponent;
     }(ComponentBase));
     CrudListComponent.decorators = [
         { 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]=\"{crudList: this}\">\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\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\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\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></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                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"model.selectedItems.length > 0\" 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                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></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 [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (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]=\"hasTemplate('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    (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)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-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'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"showFormWorkflow\" #dialog [header]=\"headerWorkflow | translate\" [popupSize]=\"popupSizeWorkflow\"\r\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"showFormWorkflow = false\">\r\n    <div style=\"height: 100%\">\r\n        <simple-workflow-form #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [action]=\"actionWorkflow\" (onInvalidWorkflow)=\"handleInvalidWF($event)\" (onSaved)=\"handleProcessedWorflow()\"\r\n            (onCancel)=\"showFormWorkflow = false\">\r\n        </simple-workflow-form>\r\n    </div>\r\n</tn-dialog>\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%\">\r\n        <process-workflow-form #formBase [bussinessSetting]=\"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=\"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 [baseService]=\"setting.baseService\" [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<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-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=\"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        <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    </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=\"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                                <span 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                                </span>\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        <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    </p-table>\r\n    <after-view-checked></after-view-checked>\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 [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [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\" 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\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\">\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                <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\" [style.width]=\"widthCheckbox\">\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=\"'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=\"'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                (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                (click)=\"showSettingsWorkflow()\"></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            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\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 [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\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 *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\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\" class=\"no-padding center\">\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\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\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=\"fas fa-history\"\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\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        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\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\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                {{_crudService.renderDate(rowData[field], 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                {{_crudService.renderDateTime(rowData[field], 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]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\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=\"'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> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #entityWorkflowStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <span class=\"content\">{{rowData.statusString ? rowData.statusString : rowData.strcurrentStateCode}}</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            (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n    </div>\r\n</ng-template>\r\n<ng-template #workflowCoreStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <a class=\"content\" (click)=\"goToTask($event)\" href=\"javascript:;\">{{rowData.strworkflowCoreStatus}}</a>\r\n    </div>\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\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    </div>\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]=\"{crudList: this}\">\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\" (onOldest)=\"onOldest($event)\"\r\n                    (onNext)=\"onNext($event)\" (onPrev)=\"onPrev($event)\" (onLatest)=\"onLatest($event)\"\r\n                    (onChangeLimitPage)=\"savePageSize()\">\r\n                </paging-next-back-only>\r\n            </div>\r\n        </div>\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\r\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\r\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></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                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n                                class=\"p-button-text\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"model.selectedItems.length > 0\" 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                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\r\n                                type=\"button\" pButton pRipple\r\n                                label=\"{{ 'X\u00F3a' | translate }} ({{model.selectedItems.length}})\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></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 [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\r\n                            [loading]=\"model.loading\" (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]=\"hasTemplate('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    (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)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-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'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"showFormWorkflow\" #dialog [header]=\"headerWorkflow | translate\" [popupSize]=\"popupSizeWorkflow\"\r\n    [scrollBarStyleClass]=\"'fit-content'\" (onHide)=\"showFormWorkflow = false\">\r\n    <div style=\"height: 100%\">\r\n        <simple-workflow-form #formBase [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n            [action]=\"actionWorkflow\" (onInvalidWorkflow)=\"handleInvalidWF($event)\" (onSaved)=\"handleProcessedWorflow()\"\r\n            (onCancel)=\"showFormWorkflow = false\">\r\n        </simple-workflow-form>\r\n    </div>\r\n</tn-dialog>\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%\">\r\n        <process-workflow-form #formBase [bussinessSetting]=\"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=\"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 [baseService]=\"setting.baseService\" [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<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-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=\"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        <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    </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=\"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                                <span 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                                </span>\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        <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    </p-table>\r\n    <after-view-checked></after-view-checked>\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 [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\" style=\"z-index: 3 !important;\">\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\" 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\" [style.width]=\"widthOrderColumn\" class=\"stt nopad center\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" style=\"z-index: 3 !important;\">\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                <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\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.tricheckbox-custom-false]=\"checkedAll === false\"\r\n            [style.width]=\"widthCheckbox\">\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\" style=\"z-index: 3 !important;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\">\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=\"'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=\"'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 *ngSwitchCase=\"'fileUpload'\">\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            style=\"z-index: 3 !important;\" [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                (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                (click)=\"showSettingsWorkflow()\"></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\" style=\"z-index: 3 !important;\" [class.sticky]=\"setting.stickyColumn\"\r\n            [style.width]=\"widthFunctionColumn || _widthFunctionColumn\">\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 class=\"table-row\" [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\"\r\n        [ngClass]=\"mergeClassObj(rowData, { 'ui-state-highlight': rowData._checked })\" [pTooltip]=\"rowData.tooltip\"\r\n        tooltipPosition=\"top\" [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\"\r\n        (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td [style.width]=\"widthCheckbox\" class=\"chkbox link-or-action cell-checkbox\"\r\n                [class.sticky]=\"setting.stickyColumn\">\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 *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\"\r\n            [style.width]=\"widthOrderColumn\" class=\"stt\" style=\"text-align: center;\"\r\n            [class.sticky]=\"setting.stickyColumn\" [class.hidden-checkbox]=\"setting.hiddenCheckbox\" [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"getBookmarkColor(rowData, columns)\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\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\" class=\"no-padding center\">\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\">\r\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\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=\"fas fa-history\"\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\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\r\n                        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\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableDelete(rowData)\" pTooltip=\"{{'FORM.DELETE' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-danger link-or-action\"\r\n                        icon=\"pi pi-trash\" (click)=\"delete(rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                    <button *ngIf=\"setting.showMenuButtons && menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\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                {{_crudService.renderDate(rowData[field], 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                {{_crudService.renderDateTime(rowData[field], 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]}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'decimal'\">\r\n                {{rowData[field]}}\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=\"'boolean'\">\r\n                <ng-container *ngIf=\"!col.useTriStateCheckbox\">\r\n                    <p-checkbox class=\"boolean-data-type\" binary=\"true\" [pTooltip]=\"getTooltip(rowData._tooltip, field)\"\r\n                        tooltipPosition=\"top\" [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-checkbox>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"col.useTriStateCheckbox\">\r\n                    <p-triStateCheckbox class=\"boolean-data-type\" binary=\"true\"\r\n                        [pTooltip]=\"getTooltip(rowData._tooltip, field)\" tooltipPosition=\"top\"\r\n                        [disabled]=\"col.disableCheckBox\" [(ngModel)]=\"rowData[field]\">\r\n                    </p-triStateCheckbox>\r\n                </ng-container>\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> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #entityWorkflowStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <span class=\"content\">{{rowData.statusString ? rowData.statusString : rowData.strcurrentStateCode}}</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            (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n    </div>\r\n</ng-template>\r\n<ng-template #workflowCoreStatus let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <a class=\"content\" (click)=\"goToTask($event)\" href=\"javascript:;\">{{rowData.strworkflowCoreStatus}}</a>\r\n    </div>\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\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    </div>\r\n</ng-template>\r\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingFileInstanceId\"\r\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\r\n    </file-upload>\r\n\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\r\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n        [(ngModel)]=\"rowData.field\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\">\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        [fileDataService]=\"fileSetting.control.fileDataService\" [maxFileSize]=\"fileSetting.control.maxFileSize\"\r\n        [(value)]=\"rowData[field]\"\r\n        (onChanged)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.CHANGE)\"\r\n        (onInit)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.INIT)\"\r\n        (onSelect)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.SELECT)\"\r\n        (onRemove)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.DELETED)\"\r\n        (uploaded)=\"handleFieldValueChange(fileSetting, $event, rowData, eventType.UPLOADED)\">\r\n    </file-manager>\r\n</ng-template>",
                     providers: [i2$1.DecimalPipe, i2$1.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:80px;padding:0}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-container-search-inner{margin-bottom:-.5em}.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!important;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}::ng-deep crud-list .advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .main-container-search-inner .container-control>div{overflow:hidden}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::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>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
+                    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{background-color:#fff;min-width:80px;padding:0;position:sticky!important;right:0!important;z-index:2!important}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-container-search-inner{margin-bottom:-.5em}.chkbox{left:0!important}.chkbox,.stt{background-color:#fff;position:sticky!important;z-index:2!important}.stt{left:35px!important}.stt.hidden-checkbox,.table-row>td:not(.chkbox) .stt,.title-row>th:not(.sticky):not(.chkbox) .stt{left:0!important}.table-row>tr:has(.ui-state-highlight) .stt{background-color:#a6d5fa}.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!important;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}::ng-deep crud-list .advance-search-container{display:flex;justify-content:flex-end}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .main-container-search-inner .container-control>div{overflow:hidden}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::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>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
     ];
     CrudListComponent.ctorParameters = function () { return [
@@ -30550,31 +30856,67 @@
         };
         EntityPickerDataComponent.prototype.modifyGridInfo = function (gridInfo) {
             return __awaiter(this, void 0, void 0, function () {
-                var allow;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _a, _b, filter, value, allow;
+                var e_1, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             gridInfo.fields = this.advanceData.fields;
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                if (gridInfo.filters.length > 0) {
+                                    try {
+                                        for (_a = __values(gridInfo.filters), _b = _a.next(); !_b.done; _b = _a.next()) {
+                                            filter = _b.value;
+                                            value = this._commonService.tryParseJson(filter.value);
+                                            if (value.valid) {
+                                                if (filter.operator == exports.Operator.in) {
+                                                    filter.value = JSON.parse(filter.value).join(',');
+                                                }
+                                                else {
+                                                    filter.value = JSON.parse(filter.value).toString();
+                                                }
+                                            }
+                                        }
+                                    }
+                                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                                    finally {
+                                        try {
+                                            if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                                        }
+                                        finally { if (e_1) throw e_1.error; }
+                                    }
+                                }
+                            }
                             if (this.control.multiple) {
                                 if (this._value && this._value.length > 0) {
-                                    gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.notIn, this._value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, exports.Operator.notIn, this._value.join(',')));
+                                    }
+                                    else {
+                                        gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.notIn, this._value));
+                                    }
                                 }
                             }
                             else {
                                 if (this._value) {
-                                    gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.notEqual, this._value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, exports.Operator.notEqual, this._value.toString()));
+                                    }
+                                    else {
+                                        gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.notEqual, this._value));
+                                    }
                                 }
                             }
                             return [4 /*yield*/, appendDefaultFilter(gridInfo.filters, this.control.defaultFilters)];
                         case 1:
-                            _a.sent();
+                            _d.sent();
                             if (!this.control.modifyFilter) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.control.modifyFilter(gridInfo.filters, this)];
                         case 2:
-                            allow = _a.sent();
+                            allow = _d.sent();
                             if (allow === false)
                                 return [2 /*return*/, false];
-                            _a.label = 3;
+                            _d.label = 3;
                         case 3:
                             if (this.setting.columnSetting.sortField) {
                                 gridInfo.sorts.push({
@@ -30739,13 +31081,45 @@
         };
         EntityPickerSelectedComponent.prototype.modifyGridInfo = function (gridInfo) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _a, _b, filter, value;
+                var e_1, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             gridInfo.fields = this.advanceData.fields;
+                            if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                if (gridInfo.filters.length > 0) {
+                                    try {
+                                        for (_a = __values(gridInfo.filters), _b = _a.next(); !_b.done; _b = _a.next()) {
+                                            filter = _b.value;
+                                            value = this._commonService.tryParseJson(filter.value);
+                                            if (value.valid) {
+                                                if (filter.operator == exports.Operator.in) {
+                                                    filter.value = JSON.parse(filter.value).join(',');
+                                                }
+                                                else {
+                                                    filter.value = JSON.parse(filter.value).toString();
+                                                }
+                                            }
+                                        }
+                                    }
+                                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                                    finally {
+                                        try {
+                                            if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                                        }
+                                        finally { if (e_1) throw e_1.error; }
+                                    }
+                                }
+                            }
                             if (this.control.multiple) {
                                 if (this._value != null && this._value.length > 0) {
-                                    gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.in, this._value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, exports.Operator.in, this._value.join(',')));
+                                    }
+                                    else {
+                                        gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.in, this._value));
+                                    }
                                 }
                                 else {
                                     return [2 /*return*/, false];
@@ -30753,7 +31127,12 @@
                             }
                             else {
                                 if (this._value != null) {
-                                    gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.in, this._value));
+                                    if (this.control.coreVersion == exports.EnumCoreVersion.V4) {
+                                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, exports.Operator.in, this._value.toString()));
+                                    }
+                                    else {
+                                        gridInfo.filters.push(this.newFilter(this.control.valueField, exports.Operator.in, this._value));
+                                    }
                                 }
                                 else {
                                     return [2 /*return*/, false];
@@ -30761,7 +31140,7 @@
                             }
                             return [4 /*yield*/, appendDefaultFilter(gridInfo.filters, this.control.defaultFilters)];
                         case 1:
-                            _a.sent();
+                            _d.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -32756,7 +33135,7 @@
         };
         FileManagerComponent.prototype.modifyGridInfo = function (gridInfo) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     gridInfo.filters.push(this.newFilter('parentFolderId', exports.Operator.equal, this.data.currentFolderId));
                     return [2 /*return*/];
                 });
@@ -32765,7 +33144,7 @@
         FileManagerComponent.prototype.afterGetData = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _loop_1, this_1, ind;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     _loop_1 = function (ind) {
                         var item = this_1.model.dataSource[ind];
                         if (this_1._fileExplorerService.supportDigitalSignature(item.name)) {
@@ -32938,7 +33317,7 @@
         FileManagerComponent.prototype.openObject = function (explorerItem) {
             return __awaiter(this, void 0, void 0, function () {
                 var canViewOnline;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     if (explorerItem.isFile) {
                         canViewOnline = this._fileObjectService.isSupportedViewOnline(explorerItem.name);
                         if (canViewOnline) {
@@ -32979,7 +33358,7 @@
         FileManagerComponent.prototype.download = function (explorerItem) {
             return __awaiter(this, void 0, void 0, function () {
                 var model;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     model = this._downloadLinkService.getGenerateDownloadLinkModel(explorerItem);
                     this._downloadLinkService.download(model);
                     return [2 /*return*/];
@@ -32991,7 +33370,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var selectedItems, hasItems, arrModel;
                 var _this = this;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     selectedItems = this.model.selectedItems;
                     hasItems = selectedItems && selectedItems.length;
                     if (hasItems) {
@@ -33141,13 +33520,13 @@
             return __awaiter(this, void 0, void 0, function () {
                 var rs, breadcrumbs;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (!this.data.currentFolderId) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._folderService.getFullFolderPath(this.data.currentFolderId)];
                         case 1:
-                            rs = _b.sent();
+                            rs = _a.sent();
                             if (rs.success) {
                                 breadcrumbs = rs.data.map(function (f) {
                                     var item = {
@@ -33169,7 +33548,7 @@
                             return [3 /*break*/, 3];
                         case 2:
                             this.data.breadcrumbs = [];
-                            _b.label = 3;
+                            _a.label = 3;
                         case 3: return [2 /*return*/];
                     }
                 });
@@ -33186,12 +33565,12 @@
                     }).then(function (rs) {
                         var url = _this._fileExplorerService.getDownloadForSignUrl(rs.data);
                         var prms = {};
-                        prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + _this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
+                        prms['FileUploadHandler'] = _this._moduleConfig.environment.apiDomain.fileEndpoint + "/Signature/SavePhysicalSignedFile";
                         prms['SessionId'] = '';
                         prms['FileName'] = url;
                         // tslint:disable-next-line: variable-name
                         var json_prms = JSON.stringify(prms);
-                        vgca_sign_approved(json_prms, function (result) {
+                        vgca_sign_file(json_prms, function (result) {
                             var resultObj = JSON.parse(result);
                             if (resultObj.FileServer != '') {
                                 _this._fileExplorerService.saveSignedFile({
@@ -33208,7 +33587,7 @@
         };
         FileManagerComponent.prototype.shareFolder = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     this.forms.shareFolder.data = file;
                     this.forms.shareFolder.show = true;
                     return [2 /*return*/];
@@ -33217,7 +33596,7 @@
         };
         FileManagerComponent.prototype.shareFile = function (file) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
+                return __generator(this, function (_a) {
                     this.forms.shareFile.data = file;
                     this.forms.shareFile.show = true;
                     return [2 /*return*/];
@@ -33237,148 +33616,13 @@
         FileManagerComponent.prototype.onRowSelect = function (evt) {
             this.onSelected.emit(this.model.selectedItems);
         };
-        FileManagerComponent.prototype.signMultiple = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var selectedItems, hasItems;
-                return __generator(this, function (_b) {
-                    selectedItems = this.model.selectedItems;
-                    hasItems = selectedItems && selectedItems.length;
-                    if (hasItems) {
-                        if (selectedItems.length == 1) {
-                            this.signFile(selectedItems[0]);
-                        }
-                        else {
-                            this.signFileMultiple(selectedItems);
-                        }
-                    }
-                    return [2 /*return*/];
-                });
-            });
-        };
-        FileManagerComponent.prototype.signFileMultiple = function (lstFile) {
-            return __awaiter(this, void 0, void 0, function () {
-                var prms, rs, lstFile_1, lstFile_1_1, file, sourceFileId, sourceFile, rsConvert, result, url, e_1, result, url, e_2_1, json_prms;
-                var e_2, _b;
-                var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            prms = {};
-                            prms['Files'] = [];
-                            prms['FileUploadHandler'] = this._moduleConfig.environment.apiDomain.fileEndpoint + "/" + this._moduleConfig.environment.apiVersion + "/KySoFile/SavePhysicalSignedFile";
-                            prms['SessionId'] = '';
-                            return [4 /*yield*/, this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số các văn bản này?')];
-                        case 1:
-                            rs = _c.sent();
-                            if (!rs) return [3 /*break*/, 18];
-                            _c.label = 2;
-                        case 2:
-                            _c.trys.push([2, 15, 16, 17]);
-                            lstFile_1 = __values(lstFile), lstFile_1_1 = lstFile_1.next();
-                            _c.label = 3;
-                        case 3:
-                            if (!!lstFile_1_1.done) return [3 /*break*/, 14];
-                            file = lstFile_1_1.value;
-                            if (!this._fileObjectService.isTypeFileKySo(file.name))
-                                return [3 /*break*/, 13];
-                            sourceFileId = file.id;
-                            sourceFile = file;
-                            if (!this._fileExplorerService.needConvertBeforeSign(file.name)) return [3 /*break*/, 11];
-                            _c.label = 4;
-                        case 4:
-                            _c.trys.push([4, 9, , 10]);
-                            return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
-                                    id: sourceFileId,
-                                    name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
-                                    folderId: file.parentFolderId,
-                                    ownerType: this._userService.getCurrentUser().userId.toString(),
-                                })];
-                        case 5:
-                            rsConvert = _c.sent();
-                            if (!(!rsConvert || !rsConvert.success)) return [3 /*break*/, 6];
-                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
-                            return [3 /*break*/, 13];
-                        case 6: return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({ fileId: rsConvert.data })];
-                        case 7:
-                            result = _c.sent();
-                            if (result.success) {
-                                url = this._downloadLinkService.getDownloadForSignUrl(result.data);
-                                prms['Files'].push({
-                                    "FileID": rsConvert.data,
-                                    "FileName": this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
-                                    "URL": url,
-                                });
-                            }
-                            _c.label = 8;
-                        case 8: return [3 /*break*/, 10];
-                        case 9:
-                            e_1 = _c.sent();
-                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + file.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
-                            return [3 /*break*/, 13];
-                        case 10: return [3 /*break*/, 13];
-                        case 11: return [4 /*yield*/, this._fileExplorerService.generateLinkDownload({ fileId: sourceFileId })];
-                        case 12:
-                            result = _c.sent();
-                            if (result.success) {
-                                url = this._downloadLinkService.getDownloadForSignUrl(result.data);
-                                prms['Files'].push({
-                                    "FileID": sourceFileId,
-                                    "FileName": file.name,
-                                    "URL": url,
-                                });
-                            }
-                            _c.label = 13;
-                        case 13:
-                            lstFile_1_1 = lstFile_1.next();
-                            return [3 /*break*/, 3];
-                        case 14: return [3 /*break*/, 17];
-                        case 15:
-                            e_2_1 = _c.sent();
-                            e_2 = { error: e_2_1 };
-                            return [3 /*break*/, 17];
-                        case 16:
-                            try {
-                                if (lstFile_1_1 && !lstFile_1_1.done && (_b = lstFile_1.return)) _b.call(lstFile_1);
-                            }
-                            finally { if (e_2) throw e_2.error; }
-                            return [7 /*endfinally*/];
-                        case 17:
-                            json_prms = JSON.stringify(prms);
-                            vgca_sign_files(json_prms, function (result) {
-                                var _a;
-                                var resultObj = JSON.parse(result);
-                                if ((_a = resultObj.Files) === null || _a === void 0 ? void 0 : _a.length) {
-                                    resultObj.Files.forEach(function (item) { return __awaiter(_this, void 0, void 0, function () {
-                                        var _this = this;
-                                        return __generator(this, function (_b) {
-                                            this._fileExplorerService.saveSignedFile({
-                                                sourceFile: { id: item.FileID },
-                                                tempFileId: item.FileSignedURL,
-                                            }).then(function (rss) {
-                                                _this._triggerProcessData();
-                                                _this._notifierService.showSuccess('Ký số thành công');
-                                            });
-                                            return [2 /*return*/];
-                                        });
-                                    }); });
-                                }
-                                ;
-                            });
-                            _c.label = 18;
-                        case 18:
-                            ;
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
         return FileManagerComponent;
     }(DataListBase));
     FileManagerComponent.decorators = [
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'file-manager',
-                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\" [class.readonly]=\"readonly\">\r\n    <div class=\"p-grid fm-toolbar\">\r\n        <div class=\"fm-toolbar-path\">\r\n            <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n        </div>\r\n        <div *ngIf=\"!readonly && rootFolderId\" class=\"fm-toolbar-buttons\">\r\n            <button *ngIf=\"!hiddenCreateFolder\" pButton type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c\" tooltipPosition=\"top\"\r\n                icon=\"pi pi-folder\" class=\"p-button-text p-button-rounded\" iconPos=\"left\" (click)=\"createFolder()\">\r\n            </button>\r\n\r\n            <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i l\u00EAn\" tooltipPosition=\"top\" type=\"button\"\r\n                class=\"p-button-rounded p-button-text p-button-primary\" (click)=\"selectFile()\"></button>\r\n\r\n            <button *ngIf=\"canSelect()\" class=\"p-button-rounded p-button-text p-button-success\" pButton type=\"button\"\r\n                pTooltip=\"Di chuy\u1EC3n\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\" iconPos=\"left\"\r\n                (click)=\"moveExplorerItems()\">\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"canSetMove()\">\r\n                <button class=\"p-button-rounded p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"\u0110\u1EB7t \u1EDF \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\" iconPos=\"left\"\r\n                    (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button icon=\"pi pi-undo\" pButton class=\"p-button-rounded p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF qua\" tooltipPosition=\"top\" (click)=\"cancelMove()\">\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"hasSelect()\">\r\n                <button class=\"p-button-rounded p-button-text p-button-secondary\" pButton type=\"button\"\r\n                    pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\" iconPos=\"left\"\r\n                    (click)=\"downloadMultiple()\">\r\n                </button>\r\n                <button *ngIf=\"!control.uploadOnly\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"K\u00FD s\u1ED1 nhi\u1EC1u\" tooltipPosition=\"top\" icon=\"fas fa-signature\" iconPos=\"left\"\r\n                    label=\"K\u00FD s\u1ED1 nhi\u1EC1u\" (click)=\"signMultiple()\">\r\n                </button>\r\n                <button pButton type=\"button\" pTooltip=\"{{ 'X\u00F3a' | translate }}\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-trash\" iconPos=\"left\" class=\"p-button-rounded p-button-text p-button-danger\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fm-grid\">\r\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\r\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\r\n            (onReload)=\"_triggerProcessData($event)\" (onRowSelect)=\"onRowSelect($event)\">\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\"\r\n                    (click)=\"openObject(rowData)\">\r\n                </span>\r\n\r\n                <span class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\r\n                    {{rowData.name}}\r\n                    <div *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                        <i class=\"fas fa-signature\"></i>\r\n                    </div>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <ng-template #fileSize let-rowData='rowData'>\r\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\r\n                <div class=\"function-list\">\r\n                    <button class=\"p-button-rounded p-button-text\" pButton type=\"button\" tooltipPosition=\"top\"\r\n                        pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"\r\n                        (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text\" pButton type=\"button\"\r\n                            pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\r\n                        <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n                            (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </crud-list>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div class=\"nfl-toolbar\">\r\n        <button *ngIf=\"!readonly\" type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n            icon=\"fas fa-cloud-upload-alt\" label=\"T\u1EA3i l\u00EAn\" (click)=\"selectFile()\"></button>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon\">\r\n                </span>\r\n                <a class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\r\n                    <span>{{rowData.name}}</span>\r\n                    <div *ngIf=\"rowData.signatures\" class=\"signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                        <i class=\"fas fa-signature\"></i>\r\n                    </div>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"nfl-version\">\r\n                v{{rowData.currentFileVersion}}\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text\" pButton type=\"button\" tooltipPosition=\"top\"\r\n                        pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"\r\n                        (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text\" pButton type=\"button\" pTooltip=\"X\u00F3a\"\r\n                        tooltipPosition=\"top\" icon=\"pi pi-trash\" (click)=\"deleteFile(rowData)\"></button>\r\n\r\n                    <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n                        (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<p-fileUpload #fileControl [name]=\"fileInForm\" mode=\"basic\" [ngStyle]=\"{'display': 'none'}\" [chooseLabel]=\"chooseLabel\"\r\n    [multiple]=\"control?control.multiple:false\" [url]=\"apiUploadUrl\" [maxFileSize]=\"maxFileSize\" auto=\"true\"\r\n    [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onProgress)=\"onUploadProgress($event)\"\r\n    (onBeforeUpload)=\"onBeforeUpload($event)\" (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\">\r\n</p-fileUpload>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\r\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\r\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\r\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\r\n    </folder-form>\r\n</tn-dialog>\r\n\r\n<!-- \u0110\u1ED5i t\u00EAn file -->\r\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\r\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\r\n    </file-form>\r\n</tn-dialog>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n    [model]=\"forms.fileViewer.formData\" [readonly]=\"readonly\" (onClose)=\"closeFileViewer()\">\r\n</file-viewer>\r\n\r\n<!-- Xem phi\u00EAn b\u1EA3n -->\r\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\r\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\">\r\n    </file-version-list>\r\n</tn-dialog>\r\n\r\n<!--<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFile.formData\">\r\n</share-file>\r\n\r\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFolder.formData\">\r\n</share-folder>\r\n\r\n<signature-detail *ngIf=\"forms.signatureDetail.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.signatureDetail.formData\">\r\n</signature-detail> -->",
+                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\" [class.readonly]=\"readonly\">\r\n    <div class=\"p-grid fm-toolbar\">\r\n        <div class=\"fm-toolbar-path\">\r\n            <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n        </div>\r\n        <div *ngIf=\"!readonly && rootFolderId\" class=\"fm-toolbar-buttons\">\r\n            <button *ngIf=\"!hiddenCreateFolder\" pButton type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c\" tooltipPosition=\"top\"\r\n                icon=\"pi pi-folder\" class=\"p-button-text p-button-rounded\" iconPos=\"left\" (click)=\"createFolder()\">\r\n            </button>\r\n\r\n            <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i l\u00EAn\" tooltipPosition=\"top\" type=\"button\"\r\n                class=\"p-button-rounded p-button-text p-button-primary\" (click)=\"selectFile()\"></button>\r\n\r\n            <button *ngIf=\"canSelect()\" class=\"p-button-rounded p-button-text p-button-success\" pButton type=\"button\"\r\n                pTooltip=\"Di chuy\u1EC3n\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\" iconPos=\"left\"\r\n                (click)=\"moveExplorerItems()\">\r\n            </button>\r\n\r\n            <ng-container *ngIf=\"canSetMove()\">\r\n                <button class=\"p-button-rounded p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"\u0110\u1EB7t \u1EDF \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\" iconPos=\"left\"\r\n                    (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button icon=\"pi pi-undo\" pButton class=\"p-button-rounded p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF qua\" tooltipPosition=\"top\" (click)=\"cancelMove()\">\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"hasSelect()\">\r\n                <button class=\"p-button-rounded p-button-text p-button-secondary\" pButton type=\"button\"\r\n                    pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\" iconPos=\"left\"\r\n                    (click)=\"downloadMultiple()\">\r\n                </button>\r\n\r\n                <button pButton type=\"button\" pTooltip=\"{{ 'X\u00F3a' | translate }}\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-trash\" iconPos=\"left\" class=\"p-button-rounded p-button-text p-button-danger\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fm-grid\">\r\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\r\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\r\n            (onReload)=\"_triggerProcessData($event)\" (onRowSelect)=\"onRowSelect($event)\">\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\"\r\n                    (click)=\"openObject(rowData)\">\r\n                </span>\r\n\r\n                <span class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\r\n                    {{rowData.name}}\r\n                    <div *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                        <i class=\"fas fa-signature\"></i>\r\n                    </div>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <ng-template #fileSize let-rowData='rowData'>\r\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\r\n            </ng-template>\r\n\r\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\r\n                <div class=\"function-list\">\r\n                    <button class=\"p-button-rounded p-button-text\" pButton type=\"button\" tooltipPosition=\"top\"\r\n                        pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"\r\n                        (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text\" pButton type=\"button\"\r\n                            pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\r\n                        <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n                            (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </crud-list>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\r\n    <div class=\"nfl-toolbar\">\r\n        <button *ngIf=\"!readonly\" type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n            icon=\"fas fa-cloud-upload-alt\" label=\"T\u1EA3i l\u00EAn\" (click)=\"selectFile()\"></button>\r\n    </div>\r\n\r\n    <div class=\"nfl-grid\">\r\n        <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\r\n            <div class=\"nfl-no\">\r\n                {{i + 1}}.\r\n            </div>\r\n\r\n            <div class=\"nfl-name\">\r\n                <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon\">\r\n                </span>\r\n                <a class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\r\n                    <span>{{rowData.name}}</span>\r\n                    <div *ngIf=\"rowData.signatures\" class=\"signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\r\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\r\n                        <i class=\"fas fa-signature\"></i>\r\n                    </div>\r\n                </a>\r\n            </div>\r\n\r\n            <div class=\"nfl-version\">\r\n                v{{rowData.currentFileVersion}}\r\n            </div>\r\n\r\n            <div class=\"nfl-function\">\r\n                <ng-container *ngIf=\"!readonly\">\r\n                    <button class=\"p-button-rounded p-button-text\" pButton type=\"button\" tooltipPosition=\"top\"\r\n                        pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"\r\n                        (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text\" pButton type=\"button\" pTooltip=\"X\u00F3a\"\r\n                        tooltipPosition=\"top\" icon=\"pi pi-trash\" (click)=\"deleteFile(rowData)\"></button>\r\n\r\n                    <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\r\n                        (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\r\n            Ch\u01B0a c\u00F3 t\u00E0i li\u1EC7u \u0111\u01B0\u1EE3c t\u1EA3i l\u00EAn\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<p-fileUpload #fileControl [name]=\"fileInForm\" mode=\"basic\" [ngStyle]=\"{'display': 'none'}\" [chooseLabel]=\"chooseLabel\"\r\n    [multiple]=\"control.multiple\" [url]=\"apiUploadUrl\" [maxFileSize]=\"maxFileSize\" auto=\"true\"\r\n    [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onProgress)=\"onUploadProgress($event)\"\r\n    (onBeforeUpload)=\"onBeforeUpload($event)\" (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\">\r\n</p-fileUpload>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>\r\n\r\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\r\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\r\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\r\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\r\n    </folder-form>\r\n</tn-dialog>\r\n\r\n<!-- \u0110\u1ED5i t\u00EAn file -->\r\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\r\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\r\n    </file-form>\r\n</tn-dialog>\r\n\r\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\r\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n    [model]=\"forms.fileViewer.formData\" [readonly]=\"readonly\" (onClose)=\"closeFileViewer()\">\r\n</file-viewer>\r\n\r\n<!-- Xem phi\u00EAn b\u1EA3n -->\r\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\r\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\">\r\n    </file-version-list>\r\n</tn-dialog>\r\n\r\n<!--<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFile.formData\">\r\n</share-file>\r\n\r\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.shareFolder.formData\">\r\n</share-folder>\r\n\r\n<signature-detail *ngIf=\"forms.signatureDetail.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.signatureDetail.formData\">\r\n</signature-detail> -->",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -34647,9 +34891,11 @@
             this.decimalPlaces = 2;
             this.viewMode = false;
             this.inputStyleClass = '';
+            this.thousandSeperator = '.';
             this.onFocus = new i0.EventEmitter();
             this.onBlur = new i0.EventEmitter();
             this.onChanged = new i0.EventEmitter();
+            this.locale = 'vi-VN';
         }
         Object.defineProperty(MaskComponent.prototype, "placeholder", {
             set: function (value) {
@@ -34661,10 +34907,11 @@
             configurable: true
         });
         MaskComponent.prototype.ngOnInit = function () {
+            this.locale = this.thousandSeperator == '.' ? 'vi-VN' : 'en-US';
         };
         MaskComponent.prototype.writeValue = function (obj) {
             if (obj) {
-                this.model = this._numberPipe.transform(obj, '', 'vi-VN');
+                this.model = this._numberPipe.transform(obj, '', this.locale);
                 this.value = Number(this.model);
             }
             else if (obj === 0) {
@@ -34682,7 +34929,7 @@
             return 'separator.0';
         };
         MaskComponent.prototype.getThousandSeperator = function () {
-            return '.';
+            return this.thousandSeperator || '.';
         };
         MaskComponent.prototype.handleFocus = function () {
             this.onFocus.emit(this.value);
@@ -34714,7 +34961,7 @@
             }
         };
         MaskComponent.prototype.numberToStringVN = function (number) {
-            return this._numberPipe.transform(number, '', 'vi-VN');
+            return this._numberPipe.transform(number, '', this.locale);
         };
         MaskComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -34759,6 +35006,7 @@
         decimalPlaces: [{ type: i0.Input }],
         viewMode: [{ type: i0.Input }],
         inputStyleClass: [{ type: i0.Input }],
+        thousandSeperator: [{ type: i0.Input }],
         onFocus: [{ type: i0.Output }],
         onBlur: [{ type: i0.Output }],
         onChanged: [{ type: i0.Output }]
@@ -45266,8 +45514,10 @@
                 },] }
     ];
 
+    var moment$1 = moment___namespace;
     var TnDatePipe = /** @class */ (function () {
-        function TnDatePipe() {
+        function TnDatePipe(format) {
+            this.format = format;
         }
         TnDatePipe.prototype.addZero = function (value) {
             if (value < 10)
@@ -45277,6 +45527,8 @@
         TnDatePipe.prototype.transform = function (value, args) {
             if (value == null)
                 return '';
+            if (this.format)
+                return moment$1(value).format(this.format);
             var date = new Date(value);
             return this.addZero(date.getHours()) + ":" + this.addZero(date.getMinutes()) + ":" + this.addZero(date.getSeconds()) + ", Ng\u00E0y " + this.addZero(date.getDate()) + "/" + this.addZero(date.getMonth() + 1) + "/" + date.getFullYear();
         };
@@ -45286,7 +45538,10 @@
         { type: i0.Pipe, args: [{
                     name: 'tnDate'
                 },] }
-    ];
+    ];
+    TnDatePipe.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
+    ]; };
 
     var UserFormatPipe = /** @class */ (function () {
         function UserFormatPipe(_userService) {
@@ -47133,6 +47388,67 @@
         { type: ModuleConfigService }
     ]; };
 
+    var OrganizationBaseService = /** @class */ (function (_super) {
+        __extends(OrganizationBaseService, _super);
+        function OrganizationBaseService(http, injector, _moduleConfigService) {
+            var _this = _super.call(this, http, injector, _moduleConfigService.getConfig().environment.apiDomain.organizationEndpoint + "/organization") || this;
+            _this.ORGANIZATION_INFO_KEY = 'organization_info';
+            _this.RETRY_COUNT = 0;
+            _this.REPLAY_COUNT = 10;
+            _this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.organizationEndpoint;
+            _this._moduleConfig = _moduleConfigService.getConfig();
+            _this.organizationEndpoint = _this._moduleConfig.environment.apiDomain.organizationEndpoint + "/organization/";
+            return _this;
+        }
+        OrganizationBaseService.prototype.getOrganizationInfo = function (organizationId) {
+            var _this = this;
+            var storageItem = localStorage.getItem(this.ORGANIZATION_INFO_KEY + "_" + organizationId);
+            var organization = JSON.parse(storageItem);
+            if (organization) {
+                return new Promise(function (resolve, reject) { return resolve(organization); });
+            }
+            else {
+                return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                    var svUrl, result;
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!(organizationId == null)) return [3 /*break*/, 1];
+                                reject({});
+                                return [3 /*break*/, 3];
+                            case 1:
+                                if (!(organizationId > 0)) return [3 /*break*/, 3];
+                                svUrl = this.serviceUri + "/GetOrganizationInfo?id=" + organizationId;
+                                return [4 /*yield*/, this._http.get(svUrl).pipe(operators.shareReplay(this.REPLAY_COUNT), operators.retry(this.RETRY_COUNT), operators.map(function (repsonse) {
+                                        // save response to local storage here
+                                        localStorage.setItem(_this.ORGANIZATION_INFO_KEY + "_" + repsonse.data.id, JSON.stringify(repsonse.data));
+                                        return repsonse.data;
+                                    }, operators.catchError(function (err) { return _this.handleError(err, _this._injector); }))).toPromise()];
+                            case 2:
+                                result = _a.sent();
+                                resolve(result);
+                                _a.label = 3;
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                }); });
+            }
+        };
+        return OrganizationBaseService;
+    }(BaseService));
+    OrganizationBaseService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrganizationBaseService_Factory() { return new OrganizationBaseService(i0.ɵɵinject(i1$1.HttpClient), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(ModuleConfigService)); }, token: OrganizationBaseService, providedIn: "root" });
+    OrganizationBaseService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    OrganizationBaseService.ctorParameters = function () { return [
+        { type: i1$1.HttpClient },
+        { type: i0.Injector },
+        { type: ModuleConfigService }
+    ]; };
+
     var ErrorType = /** @class */ (function () {
         function ErrorType() {
         }
@@ -47261,6 +47577,66 @@
         return TemplateTextMany;
     }());
 
+    var FileUploadSetting = /** @class */ (function () {
+        function FileUploadSetting(init) {
+            this.entityKeyField = 'id';
+            this.readonly = false;
+            this.disabled = false;
+            this.sharedFolderType = exports.SharedFolderType.Tempt;
+            this.mode = exports.FileUploadMode.usingServiceFile;
+            this.layout = exports.EnumFileLayout.LIST;
+            this.multiple = false;
+            this.uploadOnly = false;
+            this.useBreadcrumbs = true;
+            this.useSignature = true;
+            this.control = new FileUploadControlSchema();
+            for (var key in init) {
+                this[key] = init[key];
+            }
+            this.control = new FileUploadControlSchema({
+                serviceCode: this.serviceCode,
+                entity: this.entity,
+                entityKeyField: this.entityKeyField,
+                readonly: this.readonly,
+                accept: this.accept,
+                mode: this.mode,
+                layout: this.layout,
+                sharedFolderType: this.sharedFolderType,
+                fileDataService: this.fileDataService,
+                multiple: this.multiple,
+                disabled: this.disabled
+            });
+        }
+        return FileUploadSetting;
+    }());
+    var FileManagerSetting = /** @class */ (function () {
+        function FileManagerSetting(init) {
+            this.mode = exports.FileManagerMode.multiple;
+            this.layout = exports.EnumFileLayout.SIMPLE;
+            this.readonly = true;
+            this.inTaiLieu = false;
+            this.inTaiLieuChung = false;
+            this.copyToFolderId = '';
+            this.entityKeyField = 'id';
+            this.control = new FileManagerControlSchema();
+            for (var key in init) {
+                this[key] = init[key];
+            }
+            this.control = new FileManagerControlSchema({
+                serviceCode: this.serviceCode,
+                entity: this.entity,
+                entityKeyField: this.entityKeyField,
+                readonly: this.readonly,
+                accept: this.accept,
+                mode: this.mode,
+                layout: this.layout,
+                fileDataService: this.fileDataService,
+                rootFolderName: this.rootFolderName
+            });
+        }
+        return FileManagerSetting;
+    }());
+
     (function (PermissionBase) {
         PermissionBase[PermissionBase["READ"] = 1] = "READ";
         PermissionBase[PermissionBase["EDIT"] = 2] = "EDIT";
@@ -47619,10 +47995,12 @@
     exports.FileExplorerService = FileExplorerService;
     exports.FileManagerComponent = FileManagerComponent;
     exports.FileManagerControlSchema = FileManagerControlSchema;
+    exports.FileManagerSetting = FileManagerSetting;
     exports.FileObjectService = FileObjectService;
     exports.FilePickerDialogComponent = FilePickerDialogComponent;
     exports.FileUploadComponent = FileUploadComponent;
     exports.FileUploadControlSchema = FileUploadControlSchema;
+    exports.FileUploadSetting = FileUploadSetting;
     exports.FileV4Service = FileV4Service;
     exports.Filter = Filter;
     exports.FolderService = FolderService;
@@ -47671,6 +48049,7 @@
     exports.NumberCompareValidator = NumberCompareValidator;
     exports.NumberOnlyValidator = NumberOnlyValidator;
     exports.NumberRangeControlSchema = NumberRangeControlSchema;
+    exports.OrganizationBaseService = OrganizationBaseService;
     exports.OrganizationFormatPipe = OrganizationFormatPipe;
     exports.OrganizationNameFormatPipe = OrganizationNameFormatPipe;
     exports.OrganizationPickerControlSchema = OrganizationPickerControlSchema;