tnx-shared 5.0.73 → 5.0.74

package/fesm2015/tnx-shared.js

@@ -1,5 +1,5 @@
 import { DatePipe, Location, DecimalPipe, CommonModule, registerLocaleData, APP_BASE_HREF } from '@angular/common';
-import { InjectionToken, ɵɵdefineInjectable, ɵɵinject, Injectable, Optional, Inject, INJECTOR, Injector, Directive, Input, Component, EventEmitter, ElementRef, ViewChild, Output, ContentChildren, TemplateRef, ComponentFactoryResolver, ApplicationRef, ContentChild, ChangeDetectorRef, forwardRef, Renderer2, HostListener, isDevMode, ChangeDetectionStrategy, ViewEncapsulation, NgZone, Pipe, NgModule, LOCALE_ID, NgModuleFactory, Compiler } from '@angular/core';
+import { InjectionToken, ɵɵdefineInjectable, ɵɵinject, Injectable, Optional, Inject, INJECTOR, Injector, Directive, Input, Component, EventEmitter, ElementRef, ViewChild, Output, ContentChildren, TemplateRef, ComponentFactoryResolver, ApplicationRef, ContentChild, ChangeDetectorRef, forwardRef, Renderer2, HostListener, isDevMode, ChangeDetectionStrategy, ViewEncapsulation, NgZone, Pipe, LOCALE_ID, NgModule, NgModuleFactory, Compiler } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { AngularSplitModule } from 'angular-split';
@@ -57,15 +57,13 @@ import { takeUntil, catchError, shareReplay, retry, map, filter, debounceTime, d
 import { __awaiter } from 'tslib';
 import stringify from 'fast-safe-stringify';
 import * as moment_ from 'moment';
-import moment___default from 'moment';
 import { isObject, sortBy, groupBy } from 'underscore';
 import { OAuthService, OAuthModule } from 'angular-oauth2-oidc';
 import { MessageService, ConfirmationService, PrimeNGConfig } from 'tn-custom-primeng/api';
 import { HttpClient, HttpHeaders, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { HubConnectionBuilder } from '@aspnet/signalr';
-import FileSaver, { saveAs } from 'file-saver';
+import { saveAs } from 'file-saver';
 import * as printJS_ from 'print-js';
-import printJS___default from 'print-js';
 import * as JWT_ from 'jwt-decode';
 import { DomSanitizer, Title, BrowserModule } from '@angular/platform-browser';
 import * as jQuery_ from 'jquery';
@@ -137,7 +135,8 @@ ComCtxConstants.ROOT = {
     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',
@@ -610,7 +609,7 @@ class NotifierService {
     showWarningByReponse(res) {
         let 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);
     }
     showBusinessError(message, key = '', header = 'Lỗi', life = this._timeOut) {
@@ -1951,6 +1950,14 @@ class CommonService {
             errorDetail: err
         };
     }
+    tryParseJson(data) {
+        try {
+            return { valid: true, value: JSON.parse(data) };
+        }
+        catch (e) {
+            return { valid: false, value: data };
+        }
+    }
 }
 CommonService.ɵprov = ɵɵdefineInjectable({ factory: function CommonService_Factory() { return new CommonService(ɵɵinject(ModuleConfigService)); }, token: CommonService, providedIn: "root" });
 CommonService.decorators = [
@@ -2785,7 +2792,12 @@ var EnumWorkflowCoreCodeSettingKey;
     EnumWorkflowCoreCodeSettingKey["MAC_DINH"] = "workflowCoreTrinhKy";
     EnumWorkflowCoreCodeSettingKey["PHE_DUYET_2_BUOC"] = "workflowCoreTrinhKy2Buoc";
     EnumWorkflowCoreCodeSettingKey["PHE_DUYET_3_BUOC"] = "workflowCoreTrinhKy3Buoc";
-})(EnumWorkflowCoreCodeSettingKey || (EnumWorkflowCoreCodeSettingKey = {}));
+})(EnumWorkflowCoreCodeSettingKey || (EnumWorkflowCoreCodeSettingKey = {}));
+var EnumCoreVersion;
+(function (EnumCoreVersion) {
+    EnumCoreVersion["V4"] = "V4";
+    EnumCoreVersion["V5"] = "V5";
+})(EnumCoreVersion || (EnumCoreVersion = {}));
 
 class ModelSchema {
     constructor(init) {
@@ -2859,6 +2871,7 @@ class CrudListSetting {
         this.function = new CrudListCustomFunction();
         this.popupHeader = '';
         this.popupSize = new PopupSize();
+        this.showMenuButtons = true;
         this.getCustomDataTrinhKy = (rowData) => ({});
         this.getLabelButtonTrinhKy = (rowData) => 'Trình ký';
         this.checkReadyToTrinhKy = () => true;
@@ -3123,6 +3136,7 @@ class FormControlBaseWithService extends FormControlBase {
         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 = EnumCoreVersion.V5;
         this.funcCompare = (item, value) => item[this.valueField] == value;
         for (const key in init) {
             this[key] = init[key];
@@ -3167,6 +3181,7 @@ class MaskControlSchema extends TextControlSchema {
         this.prefix = '';
         this.suffix = '';
         this.decimalPlaces = 2;
+        this.thousandSeperator = '.';
         for (const key in init) {
             this[key] = init[key];
         }
@@ -3310,7 +3325,6 @@ class FileManagerControlSchema extends FormControlBase {
         this.mode = FileManagerMode.multiple;
         this.layout = 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';
@@ -3812,6 +3826,7 @@ var DataType;
     DataType["decimal"] = "decimal";
     DataType["boolean"] = "boolean";
     DataType["enum"] = "enum";
+    DataType["currency"] = "currency";
 })(DataType || (DataType = {}));
 var ControlType;
 (function (ControlType) {
@@ -3892,7 +3907,35 @@ var ExportAllMode;
 (function (ExportAllMode) {
     ExportAllMode[ExportAllMode["ManualGetData"] = 0] = "ManualGetData";
     ExportAllMode[ExportAllMode["AutoGetData"] = 1] = "AutoGetData";
-})(ExportAllMode || (ExportAllMode = {}));
+})(ExportAllMode || (ExportAllMode = {}));
+var EventType;
+(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";
+})(EventType || (EventType = {}));
 
 var WorkflowCoreStatusEnum;
 (function (WorkflowCoreStatusEnum) {
@@ -5121,14 +5164,24 @@ class CrudService {
         if (model.hasOwnProperty(sourceField)) {
             valueFilter = model[sourceField];
             if (canAccessSubField(valueFilter)) {
-                valueFilter = valueFilter[subField];
+                if (isArray(valueFilter) && typeof subField === 'string') {
+                    valueFilter = valueFilter.map(x => 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(x => x[subField]);
+                    }
+                    else {
+                        valueFilter = valueFilter[subField];
+                    }
                 }
             }
             else {
@@ -5144,7 +5197,12 @@ class CrudService {
                     }
                 }
                 if (canAccessSubField(temp)) {
-                    valueFilter = temp[subField];
+                    if (isArray(temp)) {
+                        valueFilter = temp.map(x => x[subField]);
+                    }
+                    else {
+                        valueFilter = temp[subField];
+                    }
                 }
             }
         }
@@ -5157,6 +5215,9 @@ class CrudService {
             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(f => this.deQuyReplaceValue(tmpFilter.filters, f, model, rootModel));
@@ -5261,6 +5322,7 @@ class CrudService {
         });
     }
     mergeRefDataToDatasource(dataSource, schema, data) {
+        data !== null && data !== void 0 ? data : (data = []);
         const field = schema.field;
         let funcGetLabel = item => item[schema.displayField] || item['label'];
         if (schema.funcGetLabel) {
@@ -5536,6 +5598,21 @@ class BaseService {
         });
         return this.postGridInfo(apiUrl, gridInfo);
     }
+    getAllByFilter(filters, fields = '', sorts = [], plusUrl = '') {
+        let apiUrl = this.apiGetAll;
+        if (plusUrl != null && plusUrl != '')
+            apiUrl += `/${plusUrl}`;
+        const gridInfo = new GridInfo({
+            fields,
+            pageInfo: {
+                page: 1,
+                pageSize: 9999
+            },
+            sorts,
+            filters: filters ? filters : []
+        });
+        return this.postGridInfo(apiUrl, gridInfo);
+    }
     getAllByGridInfo(gridInfo, plusUrl = '') {
         let apiUrl = this.apiGetAll;
         if (plusUrl != null && plusUrl != '')
@@ -5948,7 +6025,7 @@ class GenerateLinkDownloadDTO {
 }
 
 // fix for build prod
-const printJS = printJS___default;
+const printJS = printJS_;
 class FileExplorerService {
     constructor(_http, _moduleConfig, _authenService, _commonSerivce, _moduleConfigService, _notifierService) {
         this._http = _http;
@@ -6114,10 +6191,10 @@ class FileExplorerService {
         return `${this._serviceUri}/DownloadLink/${hash}`;
     }
     getDownloadForSignUrl(hash) {
-        return `${this._serviceUri}/DownloadLink/downloadforsign/${hash}`;
+        return `${this._serviceUri}/Download/downloadforsign/${hash}`;
     }
     generateLinkDownload(model) {
-        const svUrl = `${this._serviceUri}/DownloadLink/GenerateDownloadLink`;
+        const svUrl = `${this._serviceUri}/Download/GenerateDownloadLink`;
         if (model.isFileVersion && !model.fileVersionId) {
             model.fileVersionId = model.fileId;
         }
@@ -6144,7 +6221,7 @@ class FileExplorerService {
         this._http.get(url, { responseType: 'blob' })
             .toPromise()
             .then(rs => {
-            FileSaver.saveAs(rs, fileName);
+            saveAs(rs, fileName);
         })
             .catch(err => {
             this._notifierService.showWarning('Lỗi tải file');
@@ -6294,13 +6371,13 @@ class FileExplorerService {
         return regex.test(ext);
     }
     saveSignedFile(data) {
-        return this._http.post(`${this._serviceUri}/KySoFile/SaveSignedFile`, data).toPromise();
+        return this._http.post(`${this._serviceUri}/Signature/SaveSignedFile`, data).toPromise();
     }
     getSignatureInfoByFileId(fileId) {
-        return this._http.get(`${this._serviceUri}/KySoFile/GetListSignatureByFileId?fileId=${fileId}`).toPromise();
+        return this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileId?fileId=${fileId}`).toPromise();
     }
     getSignatureInfoByFileVersionId(fileVersionId) {
-        return this._http.get(`${this._serviceUri}/KySoFile/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`).toPromise();
+        return this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`).toPromise();
     }
     getUploadFileVersionApiUrl() {
         return `${this._serviceUri}/FileVersion/SaveVersionOnEdit`;
@@ -6350,20 +6427,6 @@ class FileExplorerService {
         const svUrl = `${this._serviceUri}/FileObject/CreateServiceFileAnonymous`;
         return this._http.post(svUrl, serviceFileObjectDTO).pipe(catchError((err) => this.handleError(err))).toPromise();
     }
-    needConvertBeforeSign(fileName) {
-        if (fileName.lastIndexOf('.') === -1) {
-            return false;
-        }
-        const fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
-        if ((/(doc|docx|dot|dotm|dotx|xls|xlsx|ppt|pptx)$/i).test(fileType)) {
-            return true;
-        }
-        return false;
-    }
-    changeFileExtension(fileName, newExtension) {
-        const arr = fileName.split('.');
-        return fileName.replace(`.${arr[arr.length - 1]}`, `.${newExtension}`);
-    }
 }
 FileExplorerService.ɵprov = ɵɵdefineInjectable({ factory: function FileExplorerService_Factory() { return new FileExplorerService(ɵɵinject(HttpClient), ɵɵinject(ModuleConfigService), ɵɵinject(AuthenService), ɵɵinject(CommonService), ɵɵinject(ModuleConfigService), ɵɵinject(NotifierService)); }, token: FileExplorerService, providedIn: "root" });
 FileExplorerService.decorators = [
@@ -6752,9 +6815,6 @@ class DownloadLinkService extends BaseService {
         });
         return promise;
     }
-    getDownloadForSignUrl(hash) {
-        return `${this.serviceUri}/DownloadForSign/${hash}`;
-    }
 }
 DownloadLinkService.ɵprov = ɵɵdefineInjectable({ factory: function DownloadLinkService_Factory() { return new DownloadLinkService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService), ɵɵinject(CrudService), ɵɵinject(NotifierService)); }, token: DownloadLinkService, providedIn: "root" });
 DownloadLinkService.decorators = [
@@ -7555,6 +7615,7 @@ class UserService extends BaseService {
         }
         else {
             this._applicationContext.getRootContext().replaySubscribeOnce(ComCtxConstants.ROOT.USER_READY, rs => {
+                const firstTimeLogin = rs;
                 const accessToken = this._oauthService.getAccessToken();
                 const 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
@@ -7596,7 +7657,12 @@ class UserService extends BaseService {
                         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);
+                    }
                 }, err => {
                 });
             });
@@ -8116,9 +8182,12 @@ class PermissionService extends BaseService {
         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;
     }
     /**
      * Truyền vào danh sách permision cần check
@@ -8253,6 +8322,10 @@ class PermissionService extends BaseService {
             }
         });
     }
+    clearPermissionCache(lstModule) {
+        const url = `${this.serviceUri}/ClearPermissionCache`;
+        return this.defaultPost(url, lstModule);
+    }
 }
 PermissionService.ɵprov = ɵɵdefineInjectable({ factory: function PermissionService_Factory() { return new PermissionService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService), ɵɵinject(UserService), ɵɵinject(OAuthService), ɵɵinject(ApplicationContextService)); }, token: PermissionService, providedIn: "root" });
 PermissionService.decorators = [
@@ -9374,14 +9447,14 @@ class EntityWorkflowHistoryService extends BaseService {
         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`;
     }
     getLastHistory(tableName, filters = []) {
         const service = this.serviceManagers[tableName];
         if (service == undefined) {
             (this._injector.get(NotifierService)).showWarning('Bạn chưa đăng ký base service cho entity workflow history');
         }
-        const url = `${service.endPoint}/EntityWorkflowHistory/GetLastByFilter`;
+        const url = `${service.endPoint}/${this._moduleConfig.environment.apiVersion}/EntityWorkflowHistory/GetLastByFilter`;
         const gridInfo = {
             pageInfo: {
                 page: 1,
@@ -11532,6 +11605,10 @@ class CrudFormComponent extends ComponentBase {
             });
             this.onModelChanged.emit(event);
         }
+        else {
+            this._rootNode = new ControlTreeNode(this._modelData, this.formControls);
+            this._rootNode.setCrudForm(this);
+        }
     }
     ;
     ngOnInit() {
@@ -12455,6 +12532,9 @@ class CrudFormComponent extends ComponentBase {
                 if (eventType == 'hide') {
                     yield this.handleFieldValueChange(control, event, 'change', parentModel, parentPath, sourceNode, bubble);
                 }
+                else if (control.bindingFilters && eventType == 'change') {
+                    yield this.handleFieldValueChange(control, event, 'change', parentModel, parentPath, sourceNode, bubble);
+                }
             }
             else {
                 yield this.handleFieldValueChange(control, event, eventType, parentModel, parentPath, sourceNode, bubble);
@@ -13234,7 +13314,7 @@ class CrudFormComponent extends ComponentBase {
 CrudFormComponent.decorators = [
     { type: 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}"]
             },] }
@@ -14151,7 +14231,7 @@ class DataFormBase extends ComponentBase {
                     this.onSaved.emit();
                 }
                 else {
-                    this.handleInsertError();
+                    this.handleInsertError(response);
                 }
             }), error => {
                 if (!error.error.success && error.error.errorCheckExist) {
@@ -14166,7 +14246,7 @@ class DataFormBase extends ComponentBase {
     getPromiseActionInsert() {
         return this.setting.baseService.post(this.model.data, this.insertPlusUrl);
     }
-    handleInsertError() {
+    handleInsertError(response) {
     }
     onUpdate() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -14180,7 +14260,7 @@ class DataFormBase extends ComponentBase {
                     this.onSaved.emit();
                 }
                 else {
-                    this.handleUpdateError();
+                    this.handleUpdateError(response);
                 }
             }), error => {
                 if (!error.error.success && error.error.errorCheckExist) {
@@ -14192,7 +14272,7 @@ class DataFormBase extends ComponentBase {
             });
         });
     }
-    handleUpdateError() {
+    handleUpdateError(response) {
     }
     getPromiseActionUpdate() {
         return this.setting.baseService.put(this.model.data.id.toString(), this.model.data, this.updatePlusUrl);
@@ -14357,7 +14437,7 @@ class EntityWorkflowSettingService extends BaseService {
             (this._injector.get(NotifierService)).showWarning('Bạn chưa đăng ký base service cho entity workflow setting');
         }
         return new Promise((resolve, reject) => {
-            this.defaultPost(`${service.endPoint}/EntityWorkflowSetting/GetSetting/${service.entityName}`, {})
+            this.defaultPost(`${service.endPoint}/${this._moduleConfig.environment.apiVersion}/EntityWorkflowSetting/GetSetting/${service.entityName}`, {})
                 .then(res => {
                 if (res.success) {
                     const itemSetting = res.data;
@@ -14442,11 +14522,11 @@ class EntityWorkflowSettingService extends BaseService {
     }
     saveSetting(settingKey, data) {
         const 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);
     }
     removeSetting(settingKey) {
         const 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}`, {});
     }
 }
 EntityWorkflowSettingService.decorators = [
@@ -15569,6 +15649,8 @@ class CrudListComponent extends ComponentBase {
         });
         this.sourceIcon = {};
         this.stopCalculatingFunctionColumnWidth = false;
+        this.FileUploadMode = FileUploadMode;
+        this.eventType = EventType;
         this._unSubscribeAll = new Subject();
         this.handleSelectRow = (evt, data) => {
             if (this.setting.hasCustomHandleClickRow) {
@@ -15746,6 +15828,65 @@ class CrudListComponent extends ComponentBase {
             this.setting.pageSetting.page = 1;
             this.getData();
         };
+        this.handleFieldValueChange = (control, event, rowData, type) => __awaiter(this, void 0, void 0, function* () {
+            const eventData = {
+                event,
+                rowData,
+                type
+            };
+            switch (type) {
+                case EventType.CHANGE: {
+                    if (control.onChanged) {
+                        try {
+                            yield control.onChanged(eventData);
+                        }
+                        catch (_a) {
+                        }
+                    }
+                    break;
+                }
+                case EventType.INIT: {
+                    if (control.onInit) {
+                        try {
+                            yield control.onInit(eventData);
+                        }
+                        catch (_b) {
+                        }
+                    }
+                    break;
+                }
+                case EventType.DELETED: {
+                    if (control.onRemove) {
+                        try {
+                            yield control.onRemove(eventData);
+                        }
+                        catch (_c) {
+                        }
+                    }
+                    break;
+                }
+                case EventType.SELECT: {
+                    if (control.onSelected) {
+                        try {
+                            yield control.onSelected(eventData);
+                        }
+                        catch (_d) {
+                        }
+                    }
+                    break;
+                }
+                case EventType.UPLOADED: {
+                    if (control.onUploaded) {
+                        try {
+                            yield control.onUploaded(eventData);
+                        }
+                        catch (_e) {
+                        }
+                    }
+                    break;
+                }
+            }
+        });
         this._activatedRoute = this._injector.get(ActivatedRoute);
         this._router = this._injector.get(Router);
         this._customRouterService = this._injector.get(CustomRouterService);
@@ -17240,7 +17381,7 @@ class CrudListComponent extends ComponentBase {
         return col.dataType == DataType.datetime || col.dataType == DataType.date || col.dataType == DataType.boolean || col.dataType == DataType.enum;
     }
     alignRightColumn(col) {
-        return col.dataType == DataType.int || col.dataType == DataType.decimal;
+        return col.dataType == DataType.int || col.dataType == DataType.decimal || col.dataType == DataType.currency;
     }
     ngOnDestroy() {
         if (!this.disableKeypressControl) {
@@ -17336,7 +17477,7 @@ class CrudListComponent extends ComponentBase {
             for (const col of colHasPipe) {
                 for (const item of dataSource) {
                     this.transform(col.pipe, col.asyncPipe, item[col.field]).then(rs => {
-                        item[`pipe__${col.field} `] = rs;
+                        item[`pipe__${col.field}`] = rs;
                     });
                 }
             }
@@ -17758,14 +17899,18 @@ class CrudListComponent extends ComponentBase {
             }
         }, 20);
     }
+    getTooltip(tooltip, field) {
+        const result = tooltip && tooltip[field] ? tooltip[field] : null;
+        return result;
+    }
 }
 CrudListComponent.decorators = [
     { type: 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: [DecimalPipe, 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 = () => [
@@ -18274,8 +18419,17 @@ class DataListBase extends ComponentBase {
         return __awaiter(this, void 0, void 0, function* () {
         });
     }
+    validateEdit(rowData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+        });
+    }
     _edit(rowData, scopeDataEdit = {}) {
         return __awaiter(this, void 0, void 0, function* () {
+            const resultValidate = yield this.validateEdit(rowData);
+            if (!resultValidate) {
+                return;
+            }
             const flashShow = rowData[KeyFlashShow];
             delete rowData[KeyFlashShow];
             this.formModel.formState = FormState.EDIT;
@@ -18305,33 +18459,44 @@ class DataListBase extends ComponentBase {
     getPromiseDeleteItem(rowData) {
         return this.setting.baseService.delete(rowData.id);
     }
+    validateDelete(rowData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+        });
+    }
     _delete(rowData) {
-        if (rowData.__disableDelete) {
-            return;
-        }
-        this._notifierService.showDeleteConfirm().then(rs => {
-            if (!rs) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (rowData.__disableDelete) {
                 return;
             }
-            if (this.setting.baseService) {
-                this.getPromiseDeleteItem(rowData)
-                    .then(response => {
-                    if (response.success) {
-                        if (this.setting.showVersionButton) {
-                            this.context.fireEvent(ComCtxConstants.COMMON.RELOAD_DATA_VERSION, {}, true);
+            const resultValidate = yield this.validateDelete(rowData);
+            if (!resultValidate) {
+                return;
+            }
+            this._notifierService.showDeleteConfirm().then(rs => {
+                if (!rs) {
+                    return;
+                }
+                if (this.setting.baseService) {
+                    this.getPromiseDeleteItem(rowData)
+                        .then(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._triggerProcessData();
+                            this._notifierService.showWarningByReponse(response);
                         }
-                        this._notifierService.showDeleteDataSuccess();
-                    }
-                    else {
-                        this._notifierService.showWarningByReponse(response);
-                    }
-                }, error => {
-                    this._notifierService.showDeleteDataError();
-                });
-            }
+                    }, error => {
+                        this._notifierService.showDeleteDataError();
+                    });
+                }
+            });
         });
     }
     getPromiseDeleteItems(items) {
@@ -18640,7 +18805,11 @@ class DataListBase extends ComponentBase {
                                         promise = schema.baseService.getDataDropdown(schema.groupCode, arrValue, this.createDropdownOptions(schema));
                                     }
                                     else {
-                                        promise = schema.baseService.getDataDropdownByFilter([this.newFilter(schema.valueField, Operator.in, arrValue)], this.createDropdownOptions(schema));
+                                        const filters = [this.newFilter(schema.valueField, Operator.in, arrValue)];
+                                        if (schema.modifyFilter) {
+                                            schema.modifyFilter(filters);
+                                        }
+                                        promise = schema.baseService.getDataDropdownByFilter(filters, this.createDropdownOptions(schema));
                                     }
                                     if (schema.order != null) {
                                         const result = yield promise;
@@ -18682,6 +18851,7 @@ class DataListBase extends ComponentBase {
         });
     }
     mergeRefDataToDatasource(dataSource, schema, data) {
+        data !== null && data !== void 0 ? data : (data = []);
         const field = schema.field;
         let funcGetLabel = item => item[schema.displayField] || item['label'];
         if (schema.funcGetLabel) {
@@ -19748,7 +19918,12 @@ class AutoCompletePickerComponent extends ComponentBase {
     }
     buildFilterKeyword() {
         if (this.fieldSearchText.length == 1) {
-            this.getFilterOnSearch = value => this.newFilter(this.control.displayField, Operator.contain, value);
+            if (this.control.coreVersion == EnumCoreVersion.V4) {
+                this.getFilterOnSearch = value => this.newFilterV4(this.control.displayField, Operator.contain, value.toString());
+            }
+            else {
+                this.getFilterOnSearch = value => this.newFilter(this.control.displayField, Operator.contain, value);
+            }
         }
         else {
             this.getFilterOnSearch = value => {
@@ -19756,8 +19931,15 @@ class AutoCompletePickerComponent extends ComponentBase {
                     logic: 'or',
                     filters: []
                 });
-                for (const fieldSearch of this.fieldSearchText) {
-                    result.filters.push(this.newFilter(fieldSearch, Operator.contain, value));
+                if (this.control.coreVersion == EnumCoreVersion.V4) {
+                    for (const fieldSearch of this.fieldSearchText) {
+                        result.filters.push(this.newFilterV4(fieldSearch, Operator.contain, value.toString()));
+                    }
+                }
+                else {
+                    for (const fieldSearch of this.fieldSearchText) {
+                        result.filters.push(this.newFilter(fieldSearch, Operator.contain, value));
+                    }
                 }
                 return result;
             };
@@ -19819,15 +20001,28 @@ class AutoCompletePickerComponent extends ComponentBase {
     }
     getData() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.control.modifyInitSearchData) {
+                yield this.control.modifyInitSearchData(this);
+            }
             const filters = [];
             if (this.control.multiple) {
                 if (this.value && this.value.length > 0) {
-                    filters.push(this.newFilter(this.control.valueField, Operator.notIn, this.value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        filters.push(this.newFilterV4(this.control.valueField, Operator.notIn, this.value.join(',')));
+                    }
+                    else {
+                        filters.push(this.newFilter(this.control.valueField, Operator.notIn, this.value));
+                    }
                 }
             }
             else {
                 if (this.value) {
-                    filters.push(this.newFilter(this.control.valueField, Operator.notEqual, this.value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        filters.push(this.newFilterV4(this.control.valueField, Operator.notEqual, this.value.toString()));
+                    }
+                    else {
+                        filters.push(this.newFilter(this.control.valueField, Operator.notEqual, this.value));
+                    }
                 }
             }
             yield appendDefaultFilter(filters, this.control.defaultFilters);
@@ -20014,9 +20209,17 @@ class AutoCompletePickerComponent extends ComponentBase {
                 if (this.control.multiple) {
                     let dataSource = [];
                     if (this.value && this.value.length > 0) {
-                        const filters = [
-                            this.newFilter(this.control.valueField, Operator.in, this.value)
-                        ];
+                        let filters = [];
+                        if (this.control.coreVersion == EnumCoreVersion.V4) {
+                            filters = [
+                                this.newFilterV4(this.control.valueField, Operator.in, this.value.join(','))
+                            ];
+                        }
+                        else {
+                            filters = [
+                                this.newFilter(this.control.valueField, Operator.in, this.value)
+                            ];
+                        }
                         if (this.control.modifyFilter) {
                             const allow = yield this.control.modifyFilter(filters);
                             if (allow === false) {
@@ -20035,9 +20238,17 @@ class AutoCompletePickerComponent extends ComponentBase {
                 else {
                     let dataSource = [];
                     if (this.value) {
-                        const filters = [
-                            this.newFilter(this.control.valueField, Operator.equal, this.value)
-                        ];
+                        let filters = [];
+                        if (this.control.coreVersion == EnumCoreVersion.V4) {
+                            filters = [
+                                this.newFilterV4(this.control.valueField, Operator.equal, this.value.toString())
+                            ];
+                        }
+                        else {
+                            filters = [
+                                this.newFilter(this.control.valueField, Operator.equal, this.value)
+                            ];
+                        }
                         if (this.control.modifyFilter) {
                             const allow = yield this.control.modifyFilter(filters);
                             if (allow === false) {
@@ -20101,7 +20312,12 @@ class AutoCompletePickerComponent extends ComponentBase {
             if (this.control.multiple) {
                 if (obj != null && obj.length > 0) {
                     const filters = [];
-                    filters.push(this.newFilter(this.control.valueField, Operator.in, obj));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        filters.push(this.newFilterV4(this.control.valueField, Operator.in, obj.join(',')));
+                    }
+                    else {
+                        filters.push(this.newFilter(this.control.valueField, Operator.in, obj));
+                    }
                     if (this.control.modifyFilter) {
                         yield this.control.modifyFilter(filters);
                     }
@@ -20122,9 +20338,17 @@ class AutoCompletePickerComponent extends ComponentBase {
             }
             else {
                 if (obj != null) {
-                    const filters = [
-                        this.newFilter(this.control.valueField, Operator.equal, obj)
-                    ];
+                    let filters = [];
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        filters = [
+                            this.newFilterV4(this.control.valueField, Operator.equal, obj.toString())
+                        ];
+                    }
+                    else {
+                        filters = [
+                            this.newFilter(this.control.valueField, Operator.equal, obj)
+                        ];
+                    }
                     if (this.control.modifyFilter) {
                         yield this.control.modifyFilter(filters);
                     }
@@ -20193,6 +20417,7 @@ AutoCompletePickerComponent.ctorParameters = () => [
 AutoCompletePickerComponent.propDecorators = {
     control: [{ type: Input }],
     disabled: [{ type: Input }],
+    parentPath: [{ type: Input }],
     popupSize: [{ type: Input }],
     onSelect: [{ type: Output }],
     onUnSelect: [{ type: Output }],
@@ -20309,23 +20534,6 @@ class FileObjectService extends BaseService {
     getScanFileUploadEndpoint(correlationId) {
         return `${this.serviceCode}/CreateScannedFile/${correlationId}`;
     }
-    isTypeFileKySo(fileName) {
-        let fileExtension = this.getFileExtension(fileName);
-        if (fileExtension) {
-            fileExtension = fileExtension.toLowerCase();
-            if (fileExtension.indexOf('.') > -1) {
-                const arr = fileExtension.split('.');
-                fileExtension = arr[arr.length - 1];
-            }
-            if ((/(pdf|doc|docx|xls|xlsm|xlsx)$/i).test(fileExtension)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    getPublicDownloadLinkByFileId(fileId) {
-        return `${this.serviceUri}/public/${fileId}/download`;
-    }
 }
 FileObjectService.ɵprov = ɵɵdefineInjectable({ factory: function FileObjectService_Factory() { return new FileObjectService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService)); }, token: FileObjectService, providedIn: "root" });
 FileObjectService.decorators = [
@@ -21239,10 +21447,13 @@ class MenuService {
             }
         });
     }
-    renderMenuByAppCode(appCode) {
+    renderMenuByAppCode(scopeName, appCode) {
         return __awaiter(this, void 0, void 0, function* () {
             this._menuItems = [];
-            const menuUrl = `assets/menus/${appCode.toLocaleLowerCase()}.json`;
+            let menuUrl = `assets/menus/${appCode.toLocaleLowerCase()}.json`;
+            if (scopeName) {
+                menuUrl = `assets/menus/${scopeName.toLocaleLowerCase()}/${appCode.toLocaleLowerCase()}.json`;
+            }
             fetch(menuUrl).then((rs) => __awaiter(this, void 0, void 0, function* () {
                 const menu = JSON.parse(yield rs.text());
                 this.setMenuItems(menu);
@@ -21401,7 +21612,7 @@ class AppMenuComponent {
             // 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 = link => `/${appCodeLowerCase}${link}`;
         }
-        this._menuService.renderMenuByAppCode(appCode);
+        this._menuService.renderMenuByAppCode(this.environment.scopeName, appCode);
         this.model = this._menuService.getMenuItems();
         this._router.events.pipe(filter(event => event instanceof NavigationEnd))
             .subscribe(event => {
@@ -23757,7 +23968,7 @@ ReportQueueComponent.propDecorators = {
 };
 
 class CommonAppComponentComponent {
-    constructor(_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) {
+    constructor(_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) {
         this._globalService = _globalService;
         this._commonService = _commonService;
         this.renderer = renderer;
@@ -23786,6 +23997,7 @@ class CommonAppComponentComponent {
         this._menuService = _menuService;
         this._primengConfig = _primengConfig;
         this._storageService = _storageService;
+        this._permissionService = _permissionService;
         this.showQuickNote = true;
         this.allowAnonymous = false;
         this._unsubscribeAll = new Subject();
@@ -23938,6 +24150,15 @@ class CommonAppComponentComponent {
         root.data.allowAnonymous = this.allowAnonymous;
         // get current User
         this._userService.populateCurrentUser();
+        this._componentContextService.subscribe(ComCtxConstants.ROOT.NEED_CLEAR_PERMISSION_CACHE, () => __awaiter(this, void 0, void 0, function* () {
+            if (this.environment.authenticationSettings.coreVersion == 'v4') {
+                const clear = yield this.clearPermissionCacheByModule();
+                if (!clear.success) {
+                    this._notifierService.showWarning('Có vấn đề trong lúc clear cache quyền');
+                }
+            }
+            this._applicationContext.getRootContext().fireReplayEvent(ComCtxConstants.ROOT.USER_LOADED);
+        }));
         this._componentContextService.subscribe(ComCtxConstants.ROOT.KEY_DOWN_ARROWLEFT, (e) => {
             if (document.activeElement === this.cancelButton.nativeElement) {
                 this.okButton.nativeElement.focus();
@@ -24442,6 +24663,17 @@ class CommonAppComponentComponent {
             }
         }
     }
+    clearPermissionCacheByModule() {
+        let appSwitcher = this._moduleConfigService.getConfig().environment.appMetadata.appSwitcher;
+        if (!appSwitcher || !appSwitcher.length) {
+            appSwitcher = [];
+        }
+        let lstModule = appSwitcher.map(x => x.code);
+        if (!lstModule) {
+            lstModule = [];
+        }
+        return this._permissionService.clearPermissionCache(lstModule);
+    }
 }
 CommonAppComponentComponent.decorators = [
     { type: Component, args: [{
@@ -24479,7 +24711,8 @@ CommonAppComponentComponent.ctorParameters = () => [
     { type: ConfirmationService },
     { type: MenuService },
     { type: PrimeNGConfig },
-    { type: StorageService }
+    { type: StorageService },
+    { type: PermissionService }
 ];
 CommonAppComponentComponent.propDecorators = {
     okButton: [{ type: ViewChild, args: ['okButton',] }],
@@ -26893,14 +27126,39 @@ class EntityPickerDataComponent extends DataListBase {
     modifyGridInfo(gridInfo) {
         return __awaiter(this, void 0, void 0, function* () {
             gridInfo.fields = this.advanceData.fields;
+            if (this.control.coreVersion == EnumCoreVersion.V4) {
+                if (gridInfo.filters.length > 0) {
+                    for (const filter of gridInfo.filters) {
+                        const value = this._commonService.tryParseJson(filter.value);
+                        if (value.valid) {
+                            if (filter.operator == Operator.in) {
+                                filter.value = JSON.parse(filter.value).join(',');
+                            }
+                            else {
+                                filter.value = JSON.parse(filter.value).toString();
+                            }
+                        }
+                    }
+                }
+            }
             if (this.control.multiple) {
                 if (this._value && this._value.length > 0) {
-                    gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.notIn, this._value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, Operator.notIn, this._value.join(',')));
+                    }
+                    else {
+                        gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.notIn, this._value));
+                    }
                 }
             }
             else {
                 if (this._value) {
-                    gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.notEqual, this._value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, Operator.notEqual, this._value.toString()));
+                    }
+                    else {
+                        gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.notEqual, this._value));
+                    }
                 }
             }
             yield appendDefaultFilter(gridInfo.filters, this.control.defaultFilters);
@@ -27049,9 +27307,29 @@ class EntityPickerSelectedComponent extends DataListBase {
     modifyGridInfo(gridInfo) {
         return __awaiter(this, void 0, void 0, function* () {
             gridInfo.fields = this.advanceData.fields;
+            if (this.control.coreVersion == EnumCoreVersion.V4) {
+                if (gridInfo.filters.length > 0) {
+                    for (const filter of gridInfo.filters) {
+                        const value = this._commonService.tryParseJson(filter.value);
+                        if (value.valid) {
+                            if (filter.operator == Operator.in) {
+                                filter.value = JSON.parse(filter.value).join(',');
+                            }
+                            else {
+                                filter.value = JSON.parse(filter.value).toString();
+                            }
+                        }
+                    }
+                }
+            }
             if (this.control.multiple) {
                 if (this._value != null && this._value.length > 0) {
-                    gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.in, this._value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, Operator.in, this._value.join(',')));
+                    }
+                    else {
+                        gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.in, this._value));
+                    }
                 }
                 else {
                     return false;
@@ -27059,7 +27337,12 @@ class EntityPickerSelectedComponent extends DataListBase {
             }
             else {
                 if (this._value != null) {
-                    gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.in, this._value));
+                    if (this.control.coreVersion == EnumCoreVersion.V4) {
+                        gridInfo.filters.push(this.newFilterV4(this.control.valueField, Operator.in, this._value.toString()));
+                    }
+                    else {
+                        gridInfo.filters.push(this.newFilter(this.control.valueField, Operator.in, this._value));
+                    }
                 }
                 else {
                     return false;
@@ -28742,24 +29025,7 @@ class FileManagerComponent extends DataListBase {
     setDatasource(dataSource = []) {
         this._dataSource = dataSource;
         this._oldValue = this._value;
-        const value = [];
-        dataSource.forEach(item => {
-            value.push(item.id);
-            if (item.name) {
-                item.nameWithoutExtension = item.name;
-                const index = item.name.lastIndexOf('.');
-                if (index > -1) {
-                    item.nameWithoutExtension = item.name.substring(0, index);
-                }
-                if (item.extension) {
-                    item.extension = item.extension.toLowerCase();
-                }
-                item.tailFile = item.name.substring(index);
-                item.tailFileUpper = item.tailFile.toUpperCase();
-                item.isFile = item.fileExplorerItemType == FileExplorerItemType.File;
-            }
-        });
-        this._value = value;
+        this._value = dataSource.map(item => item.id);
         if (this._oldValue != null) {
             if (JSON.stringify(this._oldValue) != JSON.stringify(this._value)) {
                 this.fireEventChange();
@@ -28879,10 +29145,6 @@ class FileManagerComponent extends DataListBase {
             show: false,
             formData: {}
         };
-        this.forms[this.formIds.signatureDetail] = {
-            header: 'Thông tin chữ ký số',
-            show: false,
-        };
         this.forms[this.formIds.fileVersionList] = {
             header: 'Danh sách phiên bản',
             show: false,
@@ -29349,61 +29611,32 @@ class FileManagerComponent extends DataListBase {
     // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> SIGN.
     // TODO: Lưu ý xử lý trường double click vào nút
     signFile(file) {
-        this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số văn bản này?').then((rs) => __awaiter(this, void 0, void 0, function* () {
+        this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số văn bản này?').then(rs => {
             if (rs) {
-                let sourceFileId = file.id;
-                let sourceFile = file;
-                // Ký số file word - cần convert sang pdf trước
-                if (this._fileExplorerService.needConvertBeforeSign(file.name)) {
-                    // convert file before sign
-                    try {
-                        const rsConvert = yield this._fileExplorerService.convertDocumentToPdfAndSave({
-                            id: sourceFileId,
-                            name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
-                            folderId: file.parentFolderId,
-                            ownerType: this._userService.getCurrentUser().userId.toString(),
-                        });
-                        if (!rsConvert || !rsConvert.success) {
-                            this._notifierService.showWarning(`Có lỗi xảy ra khi chuyển đổi tài liệu ${file.name} thành pdf để ký. Vui lòng thử lại sau`);
-                            return;
-                        }
-                        else {
-                            this._notifierService.showSuccess(`Chuyển đổi tài liệu ${file.name} thành pdf thành công`);
-                            sourceFileId = rsConvert.data;
-                            sourceFile = { id: sourceFileId };
-                            this._triggerProcessData();
-                        }
-                    }
-                    catch (e) {
-                        this._notifierService.showWarning(`Có lỗi xảy ra khi chuyển đổi tài liệu ${file.name} thành pdf để ký. Vui lòng thử lại sau`);
-                        return;
-                    }
-                }
                 this._fileExplorerService.generateLinkDownload({
-                    fileId: sourceFileId,
+                    fileId: file.id
                 }).then(rs => {
-                    const url = this._downloadLinkService.getDownloadForSignUrl(rs.data);
+                    const url = this._fileExplorerService.getDownloadForSignUrl(rs.data);
                     const 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
                     const json_prms = JSON.stringify(prms);
-                    vgca_sign_approved(json_prms, (result) => {
+                    vgca_sign_file(json_prms, (result) => {
                         const resultObj = JSON.parse(result);
                         if (resultObj.FileServer != '') {
                             this._fileExplorerService.saveSignedFile({
-                                sourceFile: sourceFile,
-                                tempFileId: resultObj.FileServer,
+                                sourceFile: file,
+                                tempFileId: resultObj.FileServer
                             }).then(rss => {
-                                this._triggerProcessData();
                                 this._notifierService.showSuccess('Ký số thành công');
                             });
                         }
                     });
                 });
             }
-        }));
+        });
     }
     shareFolder(file) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -29424,107 +29657,18 @@ class FileManagerComponent extends DataListBase {
     }
     viewListSign(e, signatures) {
         e.stopPropagation();
-        this.model.advanceData = signatures;
+        this.forms.signatureDetail.data = signatures;
         this.forms.signatureDetail.show = true;
     }
     onRowSelect(evt) {
         this.onSelected.emit(this.model.selectedItems);
     }
-    signMultiple() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const selectedItems = this.model.selectedItems;
-            const hasItems = selectedItems && selectedItems.length;
-            if (hasItems) {
-                if (selectedItems.length == 1) {
-                    this.signFile(selectedItems[0]);
-                }
-                else {
-                    this.signFileMultiple(selectedItems);
-                }
-            }
-        });
-    }
-    signFileMultiple(lstFile) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const prms = {};
-            prms['Files'] = [];
-            prms['FileUploadHandler'] = `${this._moduleConfig.environment.apiDomain.fileEndpoint}/${this._moduleConfig.environment.apiVersion}/KySoFile/SavePhysicalSignedFile`;
-            prms['SessionId'] = '';
-            var rs = yield this._notifierService.showConfirm('Bạn có chắc chắn muốn ký số các văn bản này?');
-            if (rs) {
-                for (const file of lstFile) {
-                    if (!this._fileObjectService.isTypeFileKySo(file.name))
-                        continue;
-                    let sourceFileId = file.id;
-                    let sourceFile = file;
-                    if (this._fileExplorerService.needConvertBeforeSign(file.name)) {
-                        try {
-                            const rsConvert = yield this._fileExplorerService.convertDocumentToPdfAndSave({
-                                id: sourceFileId,
-                                name: this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
-                                folderId: file.parentFolderId,
-                                ownerType: this._userService.getCurrentUser().userId.toString(),
-                            });
-                            if (!rsConvert || !rsConvert.success) {
-                                this._notifierService.showWarning(`Có lỗi xảy ra khi chuyển đổi tài liệu ${file.name} thành pdf để ký. Vui lòng thử lại sau`);
-                                continue;
-                            }
-                            else {
-                                const result = yield this._fileExplorerService.generateLinkDownload({ fileId: rsConvert.data });
-                                if (result.success) {
-                                    const url = this._downloadLinkService.getDownloadForSignUrl(result.data);
-                                    prms['Files'].push({
-                                        "FileID": rsConvert.data,
-                                        "FileName": this._fileExplorerService.changeFileExtension(file.name, 'pdf'),
-                                        "URL": url,
-                                    });
-                                }
-                            }
-                        }
-                        catch (e) {
-                            this._notifierService.showWarning(`Có lỗi xảy ra khi chuyển đổi tài liệu ${file.name} thành pdf để ký. Vui lòng thử lại sau`);
-                            continue;
-                        }
-                    }
-                    else {
-                        const result = yield this._fileExplorerService.generateLinkDownload({ fileId: sourceFileId });
-                        if (result.success) {
-                            const url = this._downloadLinkService.getDownloadForSignUrl(result.data);
-                            prms['Files'].push({
-                                "FileID": sourceFileId,
-                                "FileName": file.name,
-                                "URL": url,
-                            });
-                        }
-                    }
-                }
-                const json_prms = JSON.stringify(prms);
-                vgca_sign_files(json_prms, (result) => {
-                    var _a;
-                    const resultObj = JSON.parse(result);
-                    if ((_a = resultObj.Files) === null || _a === void 0 ? void 0 : _a.length) {
-                        resultObj.Files.forEach((item) => __awaiter(this, void 0, void 0, function* () {
-                            this._fileExplorerService.saveSignedFile({
-                                sourceFile: { id: item.FileID },
-                                tempFileId: item.FileSignedURL,
-                            }).then(rss => {
-                                this._triggerProcessData();
-                                this._notifierService.showSuccess('Ký số thành công');
-                            });
-                        }));
-                    }
-                    ;
-                });
-            }
-            ;
-        });
-    }
 }
 FileManagerComponent.decorators = [
     { type: 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\r\n\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                        <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                    </ng-container>\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                </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<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\r\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\r\n    (onHide)=\"onCancelForm(formIds.signatureDetail)\">\r\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </signature-detail>\r\n</tn-dialog>",
+                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: NG_VALUE_ACCESSOR,
@@ -30405,12 +30549,6 @@ class FileUploadComponent extends ComponentBase {
         this.hasFile = false;
         this.showNoti = false;
         this.notification = null;
-        this.supportedExtensions = [
-            'pdf',
-            'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp',
-            'mp4', 'webm', 'ogg',
-            'mp3', 'wav', 'aac' // Âm thanh
-        ];
     }
     writeValue(obj) {
         this.fileId = obj;
@@ -30531,37 +30669,11 @@ class FileUploadComponent extends ComponentBase {
             this._downloadLinkService.download(model);
         }
     }
-    isViewableFile(url) {
-        var _a;
-        if (!url) {
-            return false;
-        }
-        try {
-            // Lấy phần mở rộng của file từ URL
-            const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            return extension ? this.supportedExtensions.includes(extension) : false;
-        }
-        catch (error) {
-            console.error('Lỗi khi kiểm tra đuôi file:', error);
-            return false;
-        }
-    }
-    onDownloadOrViewFile() {
-        if (this.isViewableFile(this.selectedFileName)) {
-            if (this.fileId) {
-                const url = this._fileObjectService.getPublicDownloadLinkByFileId(this.fileId);
-                window.open(url, '_blank');
-            }
-        }
-        else {
-            this.onDownloadFile();
-        }
-    }
 }
 FileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'file-upload',
-                template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\" style=\"font-size: 2rem\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadOrViewFile()\">\r\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\r\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" 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)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\r\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [maxFileSize]=\"maxFileSize\" accept=\"{{accept}}\"\r\n            pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\r\n            [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\r\n            (onError)=\"handleError($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>",
+                template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\" style=\"font-size: 2rem\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\" style=\"font-size: 2rem\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadFile()\">\r\n        <span *ngIf=\"!showNoti\">{{selectedFileName}}</span>\r\n        <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" 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)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" [auto]=\"false\" class=\"file-upload\" mode=\"basic\"\r\n            [chooseLabel]=\"chooseLabel\" name=\"file[]\" [maxFileSize]=\"maxFileSize\" accept=\"{{accept}}\"\r\n            pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\r\n            [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\r\n            [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\r\n            [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\r\n            [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\r\n            [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\r\n            [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" (onSelect)=\"onSelectFile($event)\"\r\n            (onError)=\"handleError($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -30712,9 +30824,11 @@ class MaskComponent {
         this.decimalPlaces = 2;
         this.viewMode = false;
         this.inputStyleClass = '';
+        this.thousandSeperator = '.';
         this.onFocus = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onChanged = new EventEmitter();
+        this.locale = 'vi-VN';
     }
     set placeholder(value) {
         if (value == null)
@@ -30722,10 +30836,11 @@ class MaskComponent {
         this._placeholder = value;
     }
     ngOnInit() {
+        this.locale = this.thousandSeperator == '.' ? 'vi-VN' : 'en-US';
     }
     writeValue(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) {
@@ -30743,7 +30858,7 @@ class MaskComponent {
         return 'separator.0';
     }
     getThousandSeperator() {
-        return '.';
+        return this.thousandSeperator || '.';
     }
     handleFocus() {
         this.onFocus.emit(this.value);
@@ -30775,7 +30890,7 @@ class MaskComponent {
         }
     }
     numberToStringVN(number) {
-        return this._numberPipe.transform(number, '', 'vi-VN');
+        return this._numberPipe.transform(number, '', this.locale);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -30819,6 +30934,7 @@ MaskComponent.propDecorators = {
     decimalPlaces: [{ type: Input }],
     viewMode: [{ type: Input }],
     inputStyleClass: [{ type: Input }],
+    thousandSeperator: [{ type: Input }],
     onFocus: [{ type: Output }],
     onBlur: [{ type: Output }],
     onChanged: [{ type: Output }]
@@ -31641,12 +31757,6 @@ class ServiceFileUploadComponent extends ComponentBase {
         this.onRemove = new EventEmitter();
         this.onChanged = new EventEmitter();
         this.dataModel = {};
-        this.supportedExtensions = [
-            'pdf',
-            'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp',
-            'mp4', 'webm', 'ogg',
-            'mp3', 'wav', 'aac' // Âm thanh
-        ];
         if (this._userService.isValidAccessToken()) {
             this.userId = this._userService.getUserIdCombine();
         }
@@ -31941,35 +32051,11 @@ class ServiceFileUploadComponent extends ComponentBase {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
-    isViewableFile(url) {
-        var _a;
-        if (!url) {
-            return false;
-        }
-        try {
-            // Lấy phần mở rộng của file từ URL
-            const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            return extension ? this.supportedExtensions.includes(extension) : false;
-        }
-        catch (error) {
-            console.error('Lỗi khi kiểm tra đuôi file:', error);
-            return false;
-        }
-    }
-    onDownloadOrViewFile() {
-        if (this.isViewableFile(this.selectedFileName)) {
-            const url = this._fileObjectService.getPublicDownloadLinkByFileId(this.fileId);
-            window.open(url, '_blank');
-        }
-        else {
-            this.onDownloadFile();
-        }
-    }
 }
 ServiceFileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'service-file-upload',
-                template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadOrViewFile()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" 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)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\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\" [accept]=\"accept\"\r\n            (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>",
+                template: "<div class=\"file-upload\">\r\n    <div class=\"fl-icon\">\r\n        <i *ngIf=\"loading\" class=\"pi pi-spin pi-spinner\"></i>\r\n        <i *ngIf=\"!loading\" class=\"pi pi-file-o\"></i>\r\n    </div>\r\n\r\n    <div class=\"fl-file-name\" (click)=\"onDownloadFile()\">\r\n        <div>\r\n            <ng-container *ngIf=\"!showNoti\">\r\n                <span pTooltip=\"{{selectedFileName}}\">{{selectedFileNameShort}}</span>\r\n                <span *ngIf=\"extension\">.{{extension}} </span>\r\n            </ng-container>\r\n            <span *ngIf=\"showNoti\"> {{notification}} </span>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"fl-buttons\">\r\n        <button *ngIf=\"!hasFile && !readonly\" pTooltip=\"Ch\u1ECDn file\" class=\"fl-choose\"\r\n            class=\"link-or-action p-button-text p-button-rounded fl-choose\" tooltipPosition=\"top\" pButton type=\"button\"\r\n            icon=\"pi pi-plus\" (click)=\"onOpenSelect()\"></button>\r\n\r\n        <button *ngIf=\"hasFile && !readonly\" (click)=\"onRemoveFile()\"\r\n            class=\"link-or-action p-button-text p-button-rounded p-button-danger fl-remove\" pTooltip=\"X\u00F3a file\"\r\n            tooltipPosition=\"top\" pButton type=\"button\" icon=\"pi pi-trash\"></button>\r\n\r\n        <button [disabled]=\"!menu || !menu.length\" 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)\"></button>\r\n    </div>\r\n\r\n    <div style=\"display: none;\">\r\n        <p-fileUpload #file [accept]=\"accept\" class=\"file-upload\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file[]\"\r\n            [maxFileSize]=\"control.maxFileSize\" pTooltip=\"Ch\u1ECDn t\u1EEB m\u00E1y t\u00EDnh\" toolStipPosition=\"top\" multiple=\"single\"\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\" [accept]=\"accept\"\r\n            (onSelect)=\"onSelectFile($event)\">\r\n        </p-fileUpload>\r\n    </div>\r\n\r\n</div>\r\n\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"menu\" styleClass=\"fm-contextMenu-panel\">\r\n</p-contextMenu>",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -40147,7 +40233,11 @@ SummaryPipe.decorators = [
             },] }
 ];
 
+const moment$1 = moment_;
 class TnDatePipe {
+    constructor(format) {
+        this.format = format;
+    }
     addZero(value) {
         if (value < 10)
             return `0${value}`;
@@ -40156,6 +40246,8 @@ class TnDatePipe {
     transform(value, args) {
         if (value == null)
             return '';
+        if (this.format)
+            return moment$1(value).format(this.format);
         let date = new Date(value);
         return `${this.addZero(date.getHours())}:${this.addZero(date.getMinutes())}:${this.addZero(date.getSeconds())}, Ngày ${this.addZero(date.getDate())}/${this.addZero(date.getMonth() + 1)}/${date.getFullYear()}`;
     }
@@ -40164,6 +40256,9 @@ TnDatePipe.decorators = [
     { type: Pipe, args: [{
                 name: 'tnDate'
             },] }
+];
+TnDatePipe.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
 ];
 
 class UserFormatPipe {
@@ -40286,68 +40381,6 @@ UsersFormatPipe.ctorParameters = () => [
     { type: UserService }
 ];
 
-// fix for build prod
-const moment$1 = moment___default;
-class SignatureDetailComponent extends ComponentBase {
-    constructor(injector) {
-        super(injector);
-    }
-    ngOnInit() {
-        this.model.data = this.parentModel.advanceData;
-        this.buildTree();
-    }
-    buildTree() {
-        const nodes = [];
-        for (const ind in this.model.data) {
-            const item = this.model.data[ind];
-            const childNodes = { expanded: true, children: [] };
-            childNodes.label = `${item.reason}`;
-            childNodes.expandedIcon = 'fas fa-signature';
-            childNodes.collapsedIcon = 'fas fa-signature';
-            childNodes.leaf = false;
-            if (item.reason) {
-                childNodes.children.push({
-                    label: 'Người ký: ' + item.certificate.subject.nameOfSigner,
-                    expandedIcon: 'fas fa-user-tag',
-                    collapsedIcon: 'fas fa-user-tag',
-                    leaf: true
-                });
-            }
-            childNodes.children.push({
-                label: 'Đơn vị: ' + item.certificate.subject.organizationUnit + ' - ' + item.certificate.subject.organization,
-                expandedIcon: 'fas fa-building',
-                collapsedIcon: 'fas fa-building',
-                leaf: true
-            });
-            childNodes.children.push({
-                label: 'Chứng thư cấp bởi: ' + item.certificate.issuerDN.nameOfIssuer,
-                expandedIcon: 'fas fa-certificate',
-                collapsedIcon: 'fas fa-certificate',
-                leaf: true
-            });
-            childNodes.children.push({
-                label: 'Thời gian ký: ' + moment$1(item.signDate).format('D/MM/Y hh:mm:ss Z'),
-                expandedIcon: 'fas fa-clock',
-                collapsedIcon: 'fas fa-clock',
-                leaf: true
-            });
-            nodes.push(childNodes);
-        }
-        this.model.dataSource = nodes;
-    }
-}
-SignatureDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'signature-detail',
-                template: "<div class=\"tree-signature\">\r\n    <p-tree [value]=\"model.dataSource\" [filter]=\"true\" [emptyMessage]=\"'Kh\u00F4ng c\u00F3 ch\u1EEF k\u00FD'\" styleClass=\"signature-tree\">\r\n    </p-tree>\r\n</div>",
-                providers: [ComponentContextService],
-                styles: [":host::ng-deep .signature-tree{border:none;width:100%}:host::ng-deep .signature-tree .ui-treenode-icon{color:#888;padding-right:10px}:host::ng-deep .signature-tree span.fas.fa-signature+span{font-weight:700}:host::ng-deep .signature-tree span.ui-treenode-icon.fas.fa-signature{color:#212529!important;padding-left:5px}:host::ng-deep .signature-tree span.ui-tree-toggler{color:#212529!important}"]
-            },] }
-];
-SignatureDetailComponent.ctorParameters = () => [
-    { type: Injector }
-];
-
 function coreDeclaration() {
     return [
         AddressComponent,
@@ -40477,8 +40510,7 @@ function coreDeclaration() {
         FilePickerDialogComponent,
         AddNewsComponent,
         CommonDashboardComponent,
-        NotFoundComponent,
-        SignatureDetailComponent
+        NotFoundComponent
     ];
 }
 function coreModuleImport() {
@@ -41915,6 +41947,54 @@ AppListService.ctorParameters = () => [
     { type: ModuleConfigService }
 ];
 
+class OrganizationBaseService extends BaseService {
+    constructor(http, injector, _moduleConfigService) {
+        super(http, injector, `${_moduleConfigService.getConfig().environment.apiDomain.organizationEndpoint}/organization`);
+        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/`;
+    }
+    getOrganizationInfo(organizationId) {
+        const storageItem = localStorage.getItem(this.ORGANIZATION_INFO_KEY + "_" + organizationId);
+        const organization = JSON.parse(storageItem);
+        if (organization) {
+            return new Promise((resolve, reject) => resolve(organization));
+        }
+        else {
+            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                if (organizationId == null) {
+                    reject({});
+                }
+                else {
+                    if (organizationId > 0) {
+                        const svUrl = `${this.serviceUri}/GetOrganizationInfo?id=${organizationId}`;
+                        const result = yield this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                            // save response to local storage here
+                            localStorage.setItem(this.ORGANIZATION_INFO_KEY + "_" + repsonse.data.id, JSON.stringify(repsonse.data));
+                            return repsonse.data;
+                        }, catchError((err) => this.handleError(err, this._injector)))).toPromise();
+                        resolve(result);
+                    }
+                }
+            }));
+        }
+    }
+}
+OrganizationBaseService.ɵprov = ɵɵdefineInjectable({ factory: function OrganizationBaseService_Factory() { return new OrganizationBaseService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService)); }, token: OrganizationBaseService, providedIn: "root" });
+OrganizationBaseService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+OrganizationBaseService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: Injector },
+    { type: ModuleConfigService }
+];
+
 class ErrorType {
 }
 ErrorType.REQUIRED = 'required';
@@ -42021,18 +42101,62 @@ class TemplateTextItem {
 class TemplateTextMany {
 }
 
-class ServiceRequestModel {
-    constructor() {
-        this.service = '';
-        this.entityInstanceId = '';
-        this.parent = null;
-        this.serviceCode = '';
-        this.entity = '';
-        this.entityKey = '';
+class FileUploadSetting {
+    constructor(init) {
+        this.entityKeyField = 'id';
+        this.readonly = false;
+        this.disabled = false;
+        this.sharedFolderType = SharedFolderType.Tempt;
+        this.mode = FileUploadMode.usingServiceFile;
+        this.layout = EnumFileLayout.LIST;
+        this.multiple = false;
+        this.uploadOnly = false;
+        this.useBreadcrumbs = true;
+        this.useSignature = true;
+        this.control = new FileUploadControlSchema();
+        for (const 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
+        });
+    }
+}
+class FileManagerSetting {
+    constructor(init) {
+        this.mode = FileManagerMode.multiple;
+        this.layout = EnumFileLayout.SIMPLE;
+        this.readonly = true;
+        this.inTaiLieu = false;
+        this.inTaiLieuChung = false;
+        this.copyToFolderId = '';
+        this.entityKeyField = 'id';
+        this.control = new FileManagerControlSchema();
+        for (const 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
+        });
     }
-}
-
-class FileVersionDTO {
 }
 
 var PermissionBase;
@@ -42247,5 +42371,5 @@ DynamicComponentService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AccessDeniedComponent, Action, AddressControlSchema, AddressService, AdvanceSearchData, AdvanceSearchSetting, AppComponentBase, AppListService, ApplicationContextService, ApprovalPipe, ArrayPair, AtLeastOneRowTableValidator, AuthenService, AuthorizeDirective, AutoCompleteControlSchema, AutoCompletePickerControlSchema, AutocompleteDatasourceComponent, AvatarUploaderComponent, BaseMenuService, BaseModule, BaseService, BooleanFormatPipe, ButtonControlSchema, CONFIG_CALENDAR_VIETNAMESE, CalculationEngineService, CanBoHoSoService, CellExcel, CheckBoxListControlSchema, CheckControlVisibleService, CheckDuplicateFieldsValidator, CheckDuplicateValidator, CheckboxControlSchema, ClientV5Service, CoCauToChucControlSchema, CoCauToChucPickerComponent, CoCauToChucPickerControlSchema, CoCauToChucService, ColorControlSchema, ColorPickerControlSchema, Column, ColumnSchemaBase, ColumnSetting, ColumnSettingDetail, ComCtxConstants, CommandType, CommonAppComponentComponent, CommonDashboardComponent, CommonErrorCode, CommonService, CompareValidator, ComponentBase, ComponentConstants, ComponentContextService, ConditionalBuilderService, CongViecPickerControlSchema, ContainerSchema, ControlTreeNode, ControlType, ConvertMoneyToWordPipe, CoreConfigService, CrudBase, CrudFormComponent, CrudFormCustomFunction, CrudFormData, CrudFormSetting, CrudListComponent, CrudListConfig, CrudListCustomFunction, CrudListData, CrudListHelper, CrudListSetting, CrudService, CustomControlSchema, CustomRouterService, DanhmucApiService, DataExcel, DataFormBase, DataListBase, DataSourceControlSchema, DataSourceStateType, DataSourceTargetType, DataSourceUserRule, DataSourceUserSender, DataSourceWorkflowCoreStatus, DataType, DateCompareValidator, DateTimeControlSchema, DateTimeRangeControlSchema, DbOrganizationOrganizationService, DbOrganizationPositionService, Deadline, DeadlineType, DhvinhGuardService, DialogModel, DomService, DownloadLinkService, DropdownComponent, DropdownControlSchema, DropdownOptions, DynamicComponentService, ENUM_DON_VI_HANH_CHINH, EXPLORER_TYPES, EXPORT_VERSION_V4, EXPORT_VERSION_V5, EditFileCommand, EditorControlSchema, EformService, EmailValidator, EntityMedataDataSetting, EntityMetadataService, EntityPickerColumn, EntityPickerControlSchema, EntityWorkflowType, EnumActionType, EnumControlPickerType, EnumFileLayout, EnumGetRefType, EnumStateType, EnumTargetType, EnumTypeSplash, EnumUserRule, EnumWFNhomTrangThai, EnumWorkflowCoreCodeSettingKey, ErrorType, EventData, ExactOneValueInTableValidator, ExportAllMode, ExportItem, ExportItemType, ExportItemsMode, ExportManyModel, ExportManyResultModel, ExportModel, ExportService, ExportWithoutTemplateModel, Extension, FILE_TYPES, FieldDefineIsWorkflowControl, FileDataService, FileExplorerItem, FileExplorerItemType, FileExplorerNewService, FileExplorerService, FileManagerComponent, FileManagerControlSchema, FileManagerMode, FileObjectService, FilePickerDialogComponent, FileUploadComponent, FileUploadControlSchema, FileUploadMode, FileV4Service, FileVersionDTO, FileVersionService, Filter, FolderService, FormControlBase, FormControlBaseWithService, FormSchemaBase, FormSchemaBaseWithService, FormState, Gender, GenerateLinkDownloadDTO, GenericGuardService, GetRefDataSchema, GlobalService, GmailCorrector, GridInfo, GuardService, GuardSvService, HeightType, HighPerformanceService, HighlightPipe, HtmlFormatPipe, ImageService, KeyFieldGetRefType, KeyFlashShow, KeyValueComponent, KeyValueControlSchema, LabelSchema, LabelWFNhomTrangThai, LabelWorkflowCoreStatus, LengthValidator, ListHelperService, LoaiPhieuDeXuat, LocalCacheService, LowerCorrector, MA_THONG_BAO_PHAN_HE, ManagerType, MaskControlSchema, MasterDataItem, MasterDataPipe, MasterDataService, MenuService, MethodResult, ModelSchema, ModuleConfigService, MultiTranslateHttpLoader, MultipleReferenceDataFormatPipe, MyDriveService, NodeService, NotFoundComponent, NotificationObjectType, NotificationService, NotifierService, NumberCompareValidator, NumberOnlyValidator, NumberRangeControlSchema, Operator, OrganizationFormatPipe, OrganizationNameFormatPipe, OrganizationPickerControlSchema, OrganizationService, OrganizationsFormatPipe, PageInfo, PageSetting, Pair, Pattern, PermissionBase, PermissionConstant, PermissionService, PermissionStorage, PermissionTypes, PermissionUtilsComponent, PersonalSetting, PhoneNumberValidator, PhoneValidator, PopupSize, PositionService, PrintService, PublicFunction, QueryBuilderComponent, QueryBuilderGroupComponent, QueryBuilderRuleComponent, QueryGroup, QueryRule, RadioButtonListControlSchema, RandomDataService, RefField, ReferenceDataFormatPipe, RequiredFieldsValidator, RequiredValidator, RowColorOption, RowExcel, SHARE_COMPONENT_ID, SHARE_EVENT, SafeHtmlPipe, SafeStylePipe, SafeUrlPipe, SameValueValidator, SchemaBase, SecurePipe, ServiceFileUploadComponent, ServiceRequestModel, SessionTypes, SharedFolderType, SignalRService, SimpleDicItem, SimpleDictionary, Sort, SortDirs, SpanControlSchema, SplashComponentComponent, StartupBusinessComponentBase, StateComponent, StateMachineTopic, StateMachinesConnectionMetadataComponent, StateMachinesDesignerComponent, StateMachinesService, StateMetadataComponent, Status, StatusAction, StatusGroup, StatusOption, StatusOrg, StatusUser, StorageService, StorageUpdatedService, StringFormatPipe, SummaryPipe, SwitchControlSchema, TBL_DM_COSODAOTAO_CONSTS, TBL_DM_PHONGHOC_CONSTS, TBL_KTX_NGUOITHUE_HOSO, TBL_TS_PHIEUDEXUAT, TBL_TS_TAISANCODINH_CONSTS, TableSchema, TemplateConstant, TemplateControlSchema, TemplateInstanceService, TemplateService, TemplateTextItem, TemplateTextMany, TemplateTextV4Service, TemplateType, TemplateV4Service, TenContainer, TextAlign, TextAreaControlSchema, TextControlSchema, TextControlSchemaWithService, TitleSchema, TnClientCommand, TnClientService, TnComponentConfig, TnCustomScrollbarComponent, TnDatePipe, TnReorderableColumnDirective, TnReorderableRowDirective, TnSortIcon, TnSortableColumnDirective, TnUser, TnxSharedModule, TopicReloadNotification, TrangThaiMasterData, TrangThais, TreeDataOption, TrimCorrector, TrimEndCorrector, TrimStartCorrector, TypeDanhMucAPI, UniqueFieldInTableValidator, UniqueNumberService, UpperCorrector, UserFormatPipe, UserGroupService, UserPickerControlSchema, UserService, UserV5Service, UsersFormatPipe, Validation, VanBanPickerControlSchema, VirtualBaseService, WorkflowConfigAdvance, WorkflowCoreStatusEnum, WorkflowFieldStateCode, WorkflowPermissionDetailService, WorkflowPickerComponent, WorkflowService, WorkflowSetting, WorkflowSettingNew, WrapPickerControlSchema, addDay, addZero, appendDefaultFilter, clearAll, clone, cloneOld, coreDeclaration, coreModuleImport, coreProvider, createJsPlumnInstance, createOrgPickerControl, createRolePickerControl, createUserGroupPickerControl, createUserPickerControl, dataSourceIcon$1 as dataSourceIcon, dateDiff, genQueryFromFilters, getDateFromStringDateVN, getDayOfWeek, getEnvironmentByName, getEnvironmentData, getListMenuByName, getMenuData, getMonday, getStringDate, getStringDateTime, getStringDateVN, getStringDateVNLocal, getTimeSpan, isArray, isBoolean, isDate, isFunction, isLiteralObject, isNumber, isObjectOld, isRegular, isSimpleType, isString, isValidDate, keyUserSurveyLocal, maximumPageSize, mergeJSON, mergeJSONOld, moduleConfigFunc, multipleSort, romanize, setMetadataConnection, translateStateMachine, ɵ0, ɵ1, ɵ10, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9, AddressComponent as ɵa, DropdownService as ɵb, EntityPermissionComponent as ɵba, DM_ChucVuService as ɵbb, RoleService as ɵbc, EntityPermissionService as ɵbd, EquationEditorComponent as ɵbe, MaskComponent as ɵbf, NumberPickerRangeComponent as ɵbg, PagingNextBackOnlyComponent as ɵbh, RadioButtonListComponent as ɵbi, VanBanPickerComponent as ɵbj, VanBanDenService as ɵbk, VanBanDiService as ɵbl, VanBanPickerDialogComponent as ɵbm, VanbanDiPickerComponent as ɵbn, VanbanDenPickerComponent as ɵbo, CongViecPickerComponent as ɵbp, CongViecService as ɵbq, TaskWorkflowHistoriesService as ɵbr, SettingsComponent as ɵbs, SettingsRowComponent as ɵbt, SettingsWorkflowComponent as ɵbu, SettingsWorkflowNo1Component as ɵbv, SimpleWorkflowFormComponent as ɵbw, ProcessWorkflowFormComponent as ɵbx, WorkflowHistoryService as ɵby, ProcessWorkflowTargetComponent as ɵbz, EntityPickerService as ɵc, SplashComponentV1Component as ɵca, SplashComponentV2Component as ɵcb, StateMachinesConnectionReceiverComponent as ɵcc, StateMachinesConnectionReceiverUserComponent as ɵcd, StateMachinesConnectionReceiverDepartmentComponent as ɵce, StateMachinesConnectionReceiverGroupComponent as ɵcf, StateMachinesConnectionReceiverRoleComponent as ɵcg, StateMachinesConnectionSenderComponent as ɵch, StartWorkflowComponent as ɵci, WorkflowSettingsService as ɵcj, WorkflowSettingNewComponent as ɵck, DmLoaiCongViecService as ɵcl, TnDialogComponent as ɵcm, TnColorPickerComponent as ɵcn, TnTinymceComponent as ɵco, TnTabViewComponent as ɵcp, TableDetailFormComponent as ɵcq, FileIconPipe as ɵcr, FileSizePipe as ɵcs, QuickAddFormComponent as ɵct, PreventShiftTabDirective as ɵcu, UserPickerComponent as ɵcv, UserPickerBoxComponent as ɵcw, TnAppHelpComponent as ɵcx, PathNameService as ɵcy, HelperCurrentPageComponent as ɵcz, ExceptionHandlerService as ɵd, TnAppNotificationListComponent as ɵda, TnAppNotificationComponent as ɵdb, FolderFormComponent as ɵdc, FileFormComponent as ɵdd, FileViewerComponent as ɵde, FileVersionListComponent as ɵdf, WorkflowHistoryComponent as ɵdg, EntityWorkflowHistoryService as ɵdh, WorkflowHistoryDialogComponent as ɵdi, WorkflowHistoryNewComponent as ɵdj, WorkflowSettingComponent as ɵdk, EntityWorkflowSettingService as ɵdl, WorkflowSettingDialogComponent as ɵdm, QrCodeGeneratorComponent as ɵdn, AccessDeniedV1Component as ɵdo, AddNewsComponent as ɵdp, ArticleService as ɵdq, NewsCategoryService as ɵdr, SignatureDetailComponent as ɵds, CheckReadyComponent as ɵdt, SendAccessTokenInterceptor as ɵdu, LogInterceptor as ɵdv, PermissionUtilsInterceptor as ɵdw, CanBo_HoSoService as ɵe, AfterViewCheckedComponent as ɵf, AdvanceSearchComponent as ɵg, AppRootMenuComponent as ɵh, AppTopBarComponent as ɵi, AppTopBarV1Component as ɵj, AppTopBarV2Component as ɵk, AppProfileComponent as ɵl, AppSubMenuComponent as ɵm, AppMenuComponent as ɵn, AutoCompletePickerComponent as ɵo, CheckBoxListComponent as ɵp, ReportQueueComponent as ɵq, CoCauToChucPickerListComponent as ɵr, DatetimePickerComponent as ɵs, DatetimePickerRangeComponent as ɵt, DynamicNodeComponent as ɵu, EntityPickerBoxComponent as ɵv, EntityPickerDataComponent as ɵw, EntityPickerSelectedComponent as ɵx, EntityPickerComponent as ɵy, EntityPickerDialogComponent as ɵz };
+export { AccessDeniedComponent, Action, AddressControlSchema, AddressService, AdvanceSearchData, AdvanceSearchSetting, AppComponentBase, AppListService, ApplicationContextService, ApprovalPipe, ArrayPair, AtLeastOneRowTableValidator, AuthenService, AuthorizeDirective, AutoCompleteControlSchema, AutoCompletePickerControlSchema, AutocompleteDatasourceComponent, AvatarUploaderComponent, BaseMenuService, BaseModule, BaseService, BooleanFormatPipe, ButtonControlSchema, CONFIG_CALENDAR_VIETNAMESE, CalculationEngineService, CanBoHoSoService, CellExcel, CheckBoxListControlSchema, CheckControlVisibleService, CheckDuplicateFieldsValidator, CheckDuplicateValidator, CheckboxControlSchema, ClientV5Service, CoCauToChucControlSchema, CoCauToChucPickerComponent, CoCauToChucPickerControlSchema, CoCauToChucService, ColorControlSchema, ColorPickerControlSchema, Column, ColumnSchemaBase, ColumnSetting, ColumnSettingDetail, ComCtxConstants, CommandType, CommonAppComponentComponent, CommonDashboardComponent, CommonErrorCode, CommonService, CompareValidator, ComponentBase, ComponentConstants, ComponentContextService, ConditionalBuilderService, CongViecPickerControlSchema, ContainerSchema, ControlTreeNode, ControlType, ConvertMoneyToWordPipe, CoreConfigService, CrudBase, CrudFormComponent, CrudFormCustomFunction, CrudFormData, CrudFormSetting, CrudListComponent, CrudListConfig, CrudListCustomFunction, CrudListData, CrudListHelper, CrudListSetting, CrudService, CustomControlSchema, CustomRouterService, DanhmucApiService, DataExcel, DataFormBase, DataListBase, DataSourceControlSchema, DataSourceStateType, DataSourceTargetType, DataSourceUserRule, DataSourceUserSender, DataSourceWorkflowCoreStatus, DataType, DateCompareValidator, DateTimeControlSchema, DateTimeRangeControlSchema, DbOrganizationOrganizationService, DbOrganizationPositionService, Deadline, DeadlineType, DhvinhGuardService, DialogModel, DomService, DownloadLinkService, DropdownComponent, DropdownControlSchema, DropdownOptions, DynamicComponentService, ENUM_DON_VI_HANH_CHINH, EXPLORER_TYPES, EXPORT_VERSION_V4, EXPORT_VERSION_V5, EditFileCommand, EditorControlSchema, EformService, EmailValidator, EntityMedataDataSetting, EntityMetadataService, EntityPickerColumn, EntityPickerControlSchema, EntityWorkflowType, EnumActionType, EnumControlPickerType, EnumCoreVersion, EnumFileLayout, EnumGetRefType, EnumStateType, EnumTargetType, EnumTypeSplash, EnumUserRule, EnumWFNhomTrangThai, EnumWorkflowCoreCodeSettingKey, ErrorType, EventData, EventType, ExactOneValueInTableValidator, ExportAllMode, ExportItem, ExportItemType, ExportItemsMode, ExportManyModel, ExportManyResultModel, ExportModel, ExportService, ExportWithoutTemplateModel, Extension, FILE_TYPES, FieldDefineIsWorkflowControl, FileDataService, FileExplorerService, FileManagerComponent, FileManagerControlSchema, FileManagerMode, FileManagerSetting, FileObjectService, FilePickerDialogComponent, FileUploadComponent, FileUploadControlSchema, FileUploadMode, FileUploadSetting, FileV4Service, Filter, FolderService, FormControlBase, FormControlBaseWithService, FormSchemaBase, FormSchemaBaseWithService, FormState, Gender, GenerateLinkDownloadDTO, GenericGuardService, GetRefDataSchema, GlobalService, GmailCorrector, GridInfo, GuardService, GuardSvService, HeightType, HighPerformanceService, HighlightPipe, HtmlFormatPipe, ImageService, KeyFieldGetRefType, KeyFlashShow, KeyValueComponent, KeyValueControlSchema, LabelSchema, LabelWFNhomTrangThai, LabelWorkflowCoreStatus, LengthValidator, ListHelperService, LoaiPhieuDeXuat, LocalCacheService, LowerCorrector, MA_THONG_BAO_PHAN_HE, ManagerType, MaskControlSchema, MasterDataItem, MasterDataPipe, MasterDataService, MenuService, MethodResult, ModelSchema, ModuleConfigService, MultiTranslateHttpLoader, MultipleReferenceDataFormatPipe, NodeService, NotFoundComponent, NotificationObjectType, NotificationService, NotifierService, NumberCompareValidator, NumberOnlyValidator, NumberRangeControlSchema, Operator, OrganizationBaseService, OrganizationFormatPipe, OrganizationNameFormatPipe, OrganizationPickerControlSchema, OrganizationService, OrganizationsFormatPipe, PageInfo, PageSetting, Pair, Pattern, PermissionBase, PermissionConstant, PermissionService, PermissionStorage, PermissionTypes, PermissionUtilsComponent, PersonalSetting, PhoneNumberValidator, PhoneValidator, PopupSize, PositionService, PrintService, PublicFunction, QueryBuilderComponent, QueryBuilderGroupComponent, QueryBuilderRuleComponent, QueryGroup, QueryRule, RadioButtonListControlSchema, RandomDataService, RefField, ReferenceDataFormatPipe, RequiredFieldsValidator, RequiredValidator, RowColorOption, RowExcel, SHARE_COMPONENT_ID, SHARE_EVENT, SafeHtmlPipe, SafeStylePipe, SafeUrlPipe, SameValueValidator, SchemaBase, SecurePipe, ServiceFileUploadComponent, SessionTypes, SharedFolderType, SignalRService, SimpleDicItem, SimpleDictionary, Sort, SortDirs, SpanControlSchema, SplashComponentComponent, StartupBusinessComponentBase, StateComponent, StateMachineTopic, StateMachinesConnectionMetadataComponent, StateMachinesDesignerComponent, StateMachinesService, StateMetadataComponent, Status, StatusAction, StatusGroup, StatusOption, StatusOrg, StatusUser, StorageService, StorageUpdatedService, StringFormatPipe, SummaryPipe, SwitchControlSchema, TBL_DM_COSODAOTAO_CONSTS, TBL_DM_PHONGHOC_CONSTS, TBL_KTX_NGUOITHUE_HOSO, TBL_TS_PHIEUDEXUAT, TBL_TS_TAISANCODINH_CONSTS, TableSchema, TemplateConstant, TemplateControlSchema, TemplateInstanceService, TemplateService, TemplateTextItem, TemplateTextMany, TemplateTextV4Service, TemplateType, TemplateV4Service, TenContainer, TextAlign, TextAreaControlSchema, TextControlSchema, TextControlSchemaWithService, TitleSchema, TnClientCommand, TnClientService, TnComponentConfig, TnCustomScrollbarComponent, TnDatePipe, TnReorderableColumnDirective, TnReorderableRowDirective, TnSortIcon, TnSortableColumnDirective, TnUser, TnxSharedModule, TopicReloadNotification, TrangThaiMasterData, TrangThais, TreeDataOption, TrimCorrector, TrimEndCorrector, TrimStartCorrector, TypeDanhMucAPI, UniqueFieldInTableValidator, UniqueNumberService, UpperCorrector, UserFormatPipe, UserGroupService, UserPickerControlSchema, UserService, UserV5Service, UsersFormatPipe, Validation, VanBanPickerControlSchema, VirtualBaseService, WorkflowConfigAdvance, WorkflowCoreStatusEnum, WorkflowFieldStateCode, WorkflowPermissionDetailService, WorkflowPickerComponent, WorkflowService, WorkflowSetting, WorkflowSettingNew, WrapPickerControlSchema, addDay, addZero, appendDefaultFilter, clearAll, clone, cloneOld, coreDeclaration, coreModuleImport, coreProvider, createJsPlumnInstance, createOrgPickerControl, createRolePickerControl, createUserGroupPickerControl, createUserPickerControl, dataSourceIcon$1 as dataSourceIcon, dateDiff, genQueryFromFilters, getDateFromStringDateVN, getDayOfWeek, getEnvironmentByName, getEnvironmentData, getListMenuByName, getMenuData, getMonday, getStringDate, getStringDateTime, getStringDateVN, getStringDateVNLocal, getTimeSpan, isArray, isBoolean, isDate, isFunction, isLiteralObject, isNumber, isObjectOld, isRegular, isSimpleType, isString, isValidDate, keyUserSurveyLocal, maximumPageSize, mergeJSON, mergeJSONOld, moduleConfigFunc, multipleSort, romanize, setMetadataConnection, translateStateMachine, ɵ0, ɵ1, ɵ10, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9, AddressComponent as ɵa, DropdownService as ɵb, EntityPermissionComponent as ɵba, DM_ChucVuService as ɵbb, RoleService as ɵbc, EntityPermissionService as ɵbd, EquationEditorComponent as ɵbe, MaskComponent as ɵbf, NumberPickerRangeComponent as ɵbg, PagingNextBackOnlyComponent as ɵbh, RadioButtonListComponent as ɵbi, VanBanPickerComponent as ɵbj, VanBanDenService as ɵbk, VanBanDiService as ɵbl, VanBanPickerDialogComponent as ɵbm, VanbanDiPickerComponent as ɵbn, VanbanDenPickerComponent as ɵbo, CongViecPickerComponent as ɵbp, CongViecService as ɵbq, TaskWorkflowHistoriesService as ɵbr, SettingsComponent as ɵbs, SettingsRowComponent as ɵbt, SettingsWorkflowComponent as ɵbu, SettingsWorkflowNo1Component as ɵbv, SimpleWorkflowFormComponent as ɵbw, ProcessWorkflowFormComponent as ɵbx, WorkflowHistoryService as ɵby, ProcessWorkflowTargetComponent as ɵbz, EntityPickerService as ɵc, SplashComponentV1Component as ɵca, SplashComponentV2Component as ɵcb, StateMachinesConnectionReceiverComponent as ɵcc, StateMachinesConnectionReceiverUserComponent as ɵcd, StateMachinesConnectionReceiverDepartmentComponent as ɵce, StateMachinesConnectionReceiverGroupComponent as ɵcf, StateMachinesConnectionReceiverRoleComponent as ɵcg, StateMachinesConnectionSenderComponent as ɵch, StartWorkflowComponent as ɵci, WorkflowSettingsService as ɵcj, WorkflowSettingNewComponent as ɵck, DmLoaiCongViecService as ɵcl, TnDialogComponent as ɵcm, TnColorPickerComponent as ɵcn, TnTinymceComponent as ɵco, TnTabViewComponent as ɵcp, TableDetailFormComponent as ɵcq, FileIconPipe as ɵcr, FileSizePipe as ɵcs, QuickAddFormComponent as ɵct, PreventShiftTabDirective as ɵcu, UserPickerComponent as ɵcv, UserPickerBoxComponent as ɵcw, TnAppHelpComponent as ɵcx, PathNameService as ɵcy, HelperCurrentPageComponent as ɵcz, ExceptionHandlerService as ɵd, TnAppNotificationListComponent as ɵda, TnAppNotificationComponent as ɵdb, MyDriveService as ɵdc, FileVersionService as ɵdd, FileExplorerNewService as ɵde, FolderFormComponent as ɵdf, FileFormComponent as ɵdg, FileViewerComponent as ɵdh, FileVersionListComponent as ɵdi, WorkflowHistoryComponent as ɵdj, EntityWorkflowHistoryService as ɵdk, WorkflowHistoryDialogComponent as ɵdl, WorkflowHistoryNewComponent as ɵdm, WorkflowSettingComponent as ɵdn, EntityWorkflowSettingService as ɵdo, WorkflowSettingDialogComponent as ɵdp, QrCodeGeneratorComponent as ɵdq, AccessDeniedV1Component as ɵdr, AddNewsComponent as ɵds, ArticleService as ɵdt, NewsCategoryService as ɵdu, CheckReadyComponent as ɵdv, SendAccessTokenInterceptor as ɵdw, LogInterceptor as ɵdx, PermissionUtilsInterceptor as ɵdy, CanBo_HoSoService as ɵe, AfterViewCheckedComponent as ɵf, AdvanceSearchComponent as ɵg, AppRootMenuComponent as ɵh, AppTopBarComponent as ɵi, AppTopBarV1Component as ɵj, AppTopBarV2Component as ɵk, AppProfileComponent as ɵl, AppSubMenuComponent as ɵm, AppMenuComponent as ɵn, AutoCompletePickerComponent as ɵo, CheckBoxListComponent as ɵp, ReportQueueComponent as ɵq, CoCauToChucPickerListComponent as ɵr, DatetimePickerComponent as ɵs, DatetimePickerRangeComponent as ɵt, DynamicNodeComponent as ɵu, EntityPickerBoxComponent as ɵv, EntityPickerDataComponent as ɵw, EntityPickerSelectedComponent as ɵx, EntityPickerComponent as ɵy, EntityPickerDialogComponent as ɵz };
 //# sourceMappingURL=tnx-shared.js.map