tnx-shared 5.1.26 → 5.1.30

package/fesm2015/tnx-shared.js

@@ -55,6 +55,7 @@ import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from '@angular
 import { Subject, ReplaySubject, combineLatest, forkJoin, from } from 'rxjs';
 import { takeUntil, catchError, shareReplay, retry, map, filter, debounceTime, distinctUntilChanged, mergeMap } from 'rxjs/operators';
 import { __awaiter } from 'tslib';
+import { v4 } from 'uuid';
 import stringify from 'fast-safe-stringify';
 import * as moment_ from 'moment';
 import { isObject, sortBy, groupBy } from 'underscore';
@@ -605,7 +606,7 @@ class NotifierService {
             life
         });
     }
-    showWarningByReponse(res) {
+    showWarningByResponse(res) {
         let message = res.message;
         if (!message)
             message = res.error;
@@ -883,23 +884,7 @@ class CommonService {
         this.STORAGE_KEY = 'CLIPBOARD_CONTENT';
     }
     guid() {
-        function s4() {
-            return Math.floor((1 + Math.random()) * 0x10000)
-                .toString(16)
-                .substring(1);
-        }
-        return (s4() +
-            s4() +
-            '-' +
-            s4() +
-            '-' +
-            s4() +
-            '-' +
-            s4() +
-            '-' +
-            s4() +
-            s4() +
-            s4());
+        return v4();
     }
     randomString() {
         return this.guid();
@@ -4641,16 +4626,16 @@ class CrudService {
                     return Math.ceil(milisecond / 3600000) + ' giờ trước';
                 }
                 else {
-                    return ('Hôm qua lúc ' +
-                        this.datePipe.transform(datetime, 'HH:mm'));
+                    return ('Hôm qua lúc '
+                        + this.datePipe.transform(datetime, 'HH:mm'));
                 }
             }
             if (milisecond >= 86400000) {
-                if (datetime.getDate() == now.getDate() - 1 &&
-                    datetime.getMonth() == now.getMonth() &&
-                    datetime.getYear() == now.getYear()) {
-                    return ('Hôm qua lúc ' +
-                        this.datePipe.transform(datetime, 'HH:mm'));
+                if (datetime.getDate() == now.getDate() - 1
+                    && datetime.getMonth() == now.getMonth()
+                    && datetime.getYear() == now.getYear()) {
+                    return ('Hôm qua lúc '
+                        + this.datePipe.transform(datetime, 'HH:mm'));
                 }
                 else {
                     return this.datePipe.transform(datetime, 'dd/MM/yyyy HH:mm');
@@ -4685,25 +4670,25 @@ class CrudService {
                     return Math.ceil(milisecond / 3600000) + ' giờ nữa';
                 }
                 else {
-                    return ('Ngày mai lúc ' +
-                        this.datePipe.transform(datetime, 'HH:mm'));
+                    return ('Ngày mai lúc '
+                        + this.datePipe.transform(datetime, 'HH:mm'));
                 }
             }
             if (milisecond >= 86400000) {
-                if (datetime.getDate() == now.getDate() - 1 &&
-                    datetime.getMonth() == now.getMonth() &&
-                    datetime.getYear() == now.getYear()) {
-                    return ('Ngày mai lúc ' +
-                        this.datePipe.transform(datetime, 'HH:mm'));
-                }
-                if (datetime.getDate() == now.getDate() - 2 &&
-                    datetime.getMonth() == now.getMonth() &&
-                    datetime.getYear() == now.getYear()) {
+                if (datetime.getDate() == now.getDate() - 1
+                    && datetime.getMonth() == now.getMonth()
+                    && datetime.getYear() == now.getYear()) {
+                    return ('Ngày mai lúc '
+                        + this.datePipe.transform(datetime, 'HH:mm'));
+                }
+                if (datetime.getDate() == now.getDate() - 2
+                    && datetime.getMonth() == now.getMonth()
+                    && datetime.getYear() == now.getYear()) {
                     return 'Hai ngày nữa';
                 }
-                else if (datetime.getDate() == now.getDate() - 3 &&
-                    datetime.getMonth() == now.getMonth() &&
-                    datetime.getYear() == now.getYear()) {
+                else if (datetime.getDate() == now.getDate() - 3
+                    && datetime.getMonth() == now.getMonth()
+                    && datetime.getYear() == now.getYear()) {
                     return 'Ba ngày nữa';
                 }
                 else {
@@ -4723,8 +4708,8 @@ class CrudService {
             return this.datePipe.transform(datetime, 'dd/MM/yyyy');
         }
         const now = new Date();
-        if (datetime.getMonth() == now.getMonth() &&
-            datetime.getYear() == now.getYear()) {
+        if (datetime.getMonth() == now.getMonth()
+            && datetime.getYear() == now.getYear()) {
             const days = datetime.getDate() - now.getDate();
             if (days == 0) {
                 return 'Hôm nay';
@@ -4755,7 +4740,8 @@ class CrudService {
             return this.datePipe.transform(datetime, 'dd/MM/yyyy');
         }
     }
-    hideControlAndLabel() { }
+    hideControlAndLabel() {
+    }
     buildFilter(field, operator, value) {
         return new Filter({ field, operator, value });
     }
@@ -4858,7 +4844,8 @@ class CrudService {
                             this.createDropdownOptions(schema));
                         }
                         promise.then(res => {
-                            let funcSetValueRow = (rowItem, data) => { };
+                            let funcSetValueRow = (rowItem, data) => {
+                            };
                             if (schema.funcSetValueRow) {
                                 funcSetValueRow = schema.funcSetValueRow;
                             }
@@ -5164,19 +5151,24 @@ class CrudService {
                 this._injector.get(NotifierService).showWarning('Có lỗi xảy ra. Liên hệ quản trị viên để biết thêm chi tiết.');
             }
             else {
-                if (res.message != null && res.message != '')
+                if (res.message != null && res.message != '') {
                     this._injector.get(NotifierService).showWarning(res.message);
-                else
+                }
+                else {
                     this._injector.get(NotifierService).showWarning(res.error);
+                }
             }
-            if (callBackError)
+            if (callBackError) {
                 callBackError(res);
+            }
             return;
         }
-        if (message)
+        if (message) {
             this._injector.get(NotifierService).showSuccess(message);
-        if (callBack)
+        }
+        if (callBack) {
             callBack(res);
+        }
     }
     handleReponsePromise(res, messageSuccess) {
         return new Promise((resolve, reject) => {
@@ -5214,8 +5206,8 @@ class CrudService {
     }
     deQuyReplaceValue(filters, filter, model, rootModel) {
         let valueFilter = null;
-        var sourceField = filter.sourceField;
-        var subField = filter.subField;
+        const sourceField = filter.sourceField;
+        const subField = filter.subField;
         const canAccessSubField = (value) => {
             return subField != null
                 && subField !== ''
@@ -5223,14 +5215,16 @@ class CrudService {
         };
         if (model.hasOwnProperty(sourceField)) {
             valueFilter = model[sourceField];
-            if (canAccessSubField(valueFilter))
+            if (canAccessSubField(valueFilter)) {
                 valueFilter = valueFilter[subField];
+            }
         }
         else if (rootModel) {
             if (rootModel.hasOwnProperty(sourceField)) {
                 valueFilter = rootModel[sourceField];
-                if (canAccessSubField(valueFilter))
+                if (canAccessSubField(valueFilter)) {
                     valueFilter = valueFilter[subField];
+                }
             }
             else {
                 const fields = sourceField.split('.');
@@ -5244,25 +5238,30 @@ class CrudService {
                         break;
                     }
                 }
-                if (canAccessSubField(temp))
+                if (canAccessSubField(temp)) {
                     valueFilter = temp[subField];
+                }
             }
         }
-        if (filter.logic == null && (valueFilter == null || valueFilter === '' || valueFilter.length == 0))
+        if (filter.logic == null && (valueFilter == null || valueFilter === '' || valueFilter.length == 0)) {
             return;
+        }
         const tmpFilter = new Filter(filter);
         delete tmpFilter.sourceField;
-        if (tmpFilter.funcGetValue)
+        if (tmpFilter.funcGetValue) {
             valueFilter = tmpFilter.funcGetValue(valueFilter);
+        }
         tmpFilter.value = JSON.stringify(valueFilter);
         tmpFilter.filters = [];
         if (filter.logic && filter.filters) {
             filter.filters.forEach(f => this.deQuyReplaceValue(tmpFilter.filters, f, model, rootModel));
-            if (tmpFilter.filters.length > 0)
+            if (tmpFilter.filters.length > 0) {
                 filters.push(tmpFilter);
+            }
         }
-        else
+        else {
             filters.push(tmpFilter);
+        }
     }
     getWorkflowCoreStatusText(workflowCoreStatusValue) {
         const item = DataSourceWorkflowCoreStatus.find(x => x.id == workflowCoreStatusValue);
@@ -5362,7 +5361,8 @@ class CrudService {
         if (schema.funcGetLabel) {
             funcGetLabel = schema.funcGetLabel;
         }
-        let funcSetValueRow = (rowItem, data) => { };
+        let funcSetValueRow = (rowItem, data) => {
+        };
         let funcGetRefDataRow = (refItems) => {
             return refItems.map(item => funcGetLabel(item)).join(`${schema.separator} `);
         };
@@ -5513,14 +5513,17 @@ class BaseService {
                     }
                 }
             });
-            if (apiUrl.indexOf('?') == -1)
+            if (apiUrl.indexOf('?') == -1) {
                 apiUrl += `?`;
-            else
+            }
+            else {
                 apiUrl += `&`;
+            }
             apiUrl += `_keySignalr=${topic}`;
             this._http.get(apiUrl)
                 .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise()
-                .then(res => { })
+                .then(res => {
+            })
                 .catch(err => {
                 this.unSubscribeSignalR(topic);
                 reject(err);
@@ -5541,14 +5544,17 @@ class BaseService {
                     }
                 }
             });
-            if (apiUrl.indexOf('?') == -1)
+            if (apiUrl.indexOf('?') == -1) {
                 apiUrl += `?`;
-            else
+            }
+            else {
                 apiUrl += `&`;
+            }
             apiUrl += `_keySignalr=${topic}`;
             this._http.post(apiUrl, data)
                 .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise()
-                .then(res => { })
+                .then(res => {
+            })
                 .catch(err => {
                 this.unSubscribeSignalR(topic);
                 reject(err);
@@ -5801,8 +5807,12 @@ class BaseService {
         const url = `${this.serviceUri}/${id}`;
         return this.defaultGet(url);
     }
-    getDetailWithPermission(id) {
-        const url = `${this.serviceUri}/DetailWithPermission/${id}`;
+    getDetailWithPermission(id, pid = null) {
+        const url = `${this.serviceUri}/DetailWithPermission/${id}?pid=${pid}`;
+        return this.defaultGet(url);
+    }
+    getDetailByPid(pid) {
+        const url = `${this.serviceUri}/DetailWithByPid/${pid}`;
         return this.defaultGet(url);
     }
     getByInstanceId(instanceId) {
@@ -5855,6 +5865,10 @@ class BaseService {
         const url = `${this.serviceUri}/${id}`;
         return this._http.delete(url).toPromise();
     }
+    deleteById(id) {
+        const url = `${this.serviceUri}/${id}`;
+        return this._http.delete(url).pipe(catchError((err) => this.handleError(err, this._injector))).toPromise();
+    }
     deleteMany(lstId) {
         const url = `${this.serviceUri}/DeleteManyAsync/${lstId}`;
         return this._http.delete(url).toPromise();
@@ -6028,6 +6042,16 @@ class BaseService {
     choYKien(itemWorkflowHistory) {
         return this.defaultPost(`${this.serviceUri}/ChoYKienBase`, itemWorkflowHistory);
     }
+    getSharedKey(ids) {
+        return this.defaultPost(`${this.serviceUri}/GetSharedKeyItemBase`, {
+            listGuidValue: ids
+        });
+    }
+    deleteLinkSharing(ids) {
+        return this.defaultPost(`${this.serviceUri}/DeleteLinkSharing`, {
+            listGuidValue: ids
+        });
+    }
     rollback(rowData, lstObjectName) {
         return this.defaultPost(`${this.serviceUri}/RollbackBase/${rowData.__workflowCode}/${rowData.id}`, {
             ListStringValue: lstObjectName
@@ -7835,6 +7859,12 @@ class UserService extends BaseService {
             });
         }
     }
+    /**
+     * Hàm dùng để lấy thông tin cơ bản nhiều người dùng dựa vào userName,
+     * hiện tại chưa có thông tin về đơn vị và chức vụ người dùng để giảm load và vì chưa dùng đến
+     * @param {string} userName
+     * @return {Promise<BasicUserInfo[]>
+     */
     getBasicUserInfoByUserName(userName) {
         const storageItem = localStorage.getItem(this.USER_INFO_KEY + '_' + userName);
         const user = JSON.parse(storageItem);
@@ -7863,23 +7893,31 @@ class UserService extends BaseService {
             }));
         }
     }
-    getBasicUsersInfoByUserName(userNames) {
-        const storageItem = localStorage.getItem(this.USER_INFO_KEY);
-        const userInfos = JSON.parse(storageItem);
-        const check = userInfos ? userNames.indexOf(userInfos['userName']) > -1 : null;
-        if (check) {
-            return new Promise((resolve, reject) => resolve(userInfos));
-        }
-        else {
-            return new Promise((resolve, reject) => {
-                const svUrl = `${this.serviceUri}/GetBasicUsersInfoByUserName?userNames=${userNames}`;
-                this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
-                    resolve(success);
-                }).catch(err => {
-                    resolve([]);
-                });
-            });
-        }
+    /**
+     * Hàm dùng để lấy thông tin cơ bản nhiều người dùng dựa vào userName,
+     * hiện tại chưa có thông tin về đơn vị và chức vụ người dùng để giảm load và vì chưa dùng đến
+     * @param {string} userNames
+     * @return {Promise<BasicUserInfo[]>
+     */
+    getBasicUsersInfoByUserNames(userNames) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const storageItem = localStorage.getItem(this.USER_INFO_KEY);
+            const userInfos = JSON.parse(storageItem);
+            const check = userInfos ? userNames.indexOf(userInfos['userName']) > -1 : null;
+            if (check) {
+                return userInfos;
+            }
+            else {
+                const svUrl = `${this.serviceUri}/GetBasicUsersInfoByUserNames?userNames=${userNames}`;
+                return yield this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => {
+                    localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.map(x => {
+                        if (x.userName)
+                            return x.userName;
+                    }), JSON.stringify(repsonse.data));
+                    return repsonse.data;
+                })).toPromise().catch(err => []);
+            }
+        });
     }
     convertListUserIdToString(userIds) {
         if (userIds.length > 0) {
@@ -7887,14 +7925,14 @@ class UserService extends BaseService {
         }
         return ',';
     }
-    fillBasicUserInfo(dataSource, propertyName, users) {
+    fillBasicUserInfo(dataSource, propertyName) {
         dataSource.forEach(item => {
             const userId = item[propertyName].id ? item[propertyName].id : item[propertyName];
             // tslint:disable-next-line:no-shadowed-variable
-            const user = users.find(user => user.id === userId);
-            if (user) {
-                item[propertyName] = user;
-            }
+            // const user = users.find(user => user.id === userId);
+            // if (user) {
+            //     item[propertyName] = user;
+            // }
         });
         return dataSource;
     }
@@ -9306,23 +9344,38 @@ class TnCustomScrollbarComponent {
         const divs = this.elementRef.getElementsByClassName('ps-content');
         if (divs && divs.length > 0) {
             const contentDiv = divs[0];
-            const scrollYs = contentDiv.parentElement.getElementsByClassName('ps__thumb-y');
-            if (scrollYs && scrollYs.length > 0) {
-                setTimeout(() => {
-                    this.checkScrollBar(contentDiv, scrollYs[0]);
-                }, this._intervalTime);
+            const scrollYHolder = this.findNext(contentDiv, 'ps__rail-y');
+            if (scrollYHolder) {
+                const scrollYs = scrollYHolder.getElementsByClassName('ps__thumb-y');
+                if (scrollYs && scrollYs.length > 0) {
+                    setTimeout(() => {
+                        this.checkScrollBar(contentDiv, scrollYs[0]);
+                    }, this._intervalTime);
+                }
             }
         }
     }
+    findNext(curentNode, className) {
+        let nextSibling = curentNode.nextSibling;
+        while (nextSibling) {
+            if (nextSibling.classList && nextSibling.classList.contains(className)) {
+                return nextSibling;
+            }
+            nextSibling = nextSibling.nextSibling;
+        }
+        return null;
+    }
     checkScrollBar(contentDiv, scrollY) {
         try {
             const contentHeight = contentDiv.clientHeight;
             const holderHeight = contentDiv.parentElement.clientHeight;
-            if (holderHeight >= contentHeight) {
-                scrollY.style.display = 'none';
-            }
-            else {
-                scrollY.style.display = '';
+            if (holderHeight > 0) {
+                if (holderHeight >= contentHeight) {
+                    scrollY.style.display = 'none';
+                }
+                else {
+                    scrollY.style.display = '';
+                }
             }
             if (this._checkScrollBar) {
                 setTimeout(() => {
@@ -14206,7 +14259,7 @@ class DataFormBase extends ComponentBase {
     }
     getObjectDetail() {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.setting.baseService.getDetailWithPermission(this.model.data.id);
+            return yield this.setting.baseService.getDetailWithPermission(this.model.data.id, this.model.data.pid);
         });
     }
     getDetailCustom() {
@@ -14293,7 +14346,7 @@ class DataFormBase extends ComponentBase {
             this.model.data = data;
             this.checkPermission(data.basePermission);
             if (this.crudForm) {
-                this.crudForm.switchViewMode(true);
+                this.crudForm.switchViewMode(this.__isFormView);
                 this.crudForm.data = data;
                 this.crudForm.setIsLoadedDataEdit(true);
             }
@@ -15851,6 +15904,7 @@ class CrudListComponent extends ComponentBase {
         this.escape = true;
         this.config = new CrudListConfig();
         this.enableReorderRow = false;
+        this.disableShare = false;
         this.fieldOrder = '_index';
         this._style = {};
         this._dataSource = [];
@@ -15928,6 +15982,10 @@ class CrudListComponent extends ComponentBase {
         this.workflowHistoryModel = new DialogModel({
             header: 'Xem lịch sử'
         });
+        this.permissionSharingModel = new DialogModel({
+            header: 'Xem danh sách link chia sẻ',
+            popupSize: new PopupSize({ width: 1100, height: 650 }),
+        });
         this.congViecModel = new DialogModel({
             header: 'Chạy quy trình công việc',
             popupSize: new PopupSize({ width: 1100, height: 650 }),
@@ -16175,8 +16233,10 @@ class CrudListComponent extends ComponentBase {
         }
         this.initColumnSchema(this.setting.cols);
         this.createSearchSchema();
-        if (!this.setting.hiddenTrinhKy && !this.menuButtons) {
-            this.menuButtons = () => [];
+        if (!this.setting.hiddenTrinhKy || !this.disableShare) {
+            if (!this.menuButtons) {
+                this.menuButtons = () => [];
+            }
         }
         // Nếu mà ẩn advancesearch => sẽ không có trigger load data từ advance search => phải tự gọi getData ở OnInit
         if (this.setting.hiddenAdvanceSearch) {
@@ -17207,6 +17267,43 @@ class CrudListComponent extends ComponentBase {
                 .catch(err => this.hideWaitBox());
         }
     }
+    createShareLink() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rowData = this.rowDataCurrent;
+            const dicPermissionId = (yield this.setting.baseService.getSharedKey([rowData.id])).data;
+            if (!dicPermissionId) {
+                this._notifierService.showWarning('Bạn không có quyền chia sẻ bản ghi');
+            }
+            const dicState = yield this.setting.getItemState([rowData]);
+            const shareLink = this.generateShareLink(rowData.id, dicPermissionId[rowData.id], dicState[rowData.id]);
+            this.copyToClipboard(shareLink);
+            this._notifierService.showSuccess('Copy đường dẫn chia sẻ vào clipboard thành công');
+        });
+    }
+    createShareLinkMultiple() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ids = this.model.selectedItems.map(q => q.id);
+            const dicPermissionId = (yield this.setting.baseService.getSharedKey(ids)).data;
+            if (!dicPermissionId) {
+                this._notifierService.showWarning('Bạn không có quyền chia sẻ bản ghi');
+            }
+            const dicState = yield this.setting.getItemState(this.model.selectedItems);
+            let content = '';
+            ids.forEach(id => {
+                content += `${this.generateShareLink(id, dicPermissionId[id], dicState[id])}\n`;
+            });
+            this.copyToClipboard(content);
+            this._notifierService.showSuccess('Copy đường dẫn chia sẻ vào clipboard thành công');
+        });
+    }
+    generateShareLink(id, pid, state) {
+        let result = `${top.location.origin}${top.location.pathname}?pid=${pid}`;
+        result += `serviceCode=${this.setting.baseService.serviceCode}`;
+        result += `&entity=${this.setting.baseService.entityName}`;
+        result += `&entityKey=${id}`;
+        result += `&state=${encodeURIComponent(JSON.stringify(state))}`;
+        return result;
+    }
     checkHasPermissionInLastStatus(rowData) {
         return __awaiter(this, void 0, void 0, function* () {
             const statusKetThuc = this.setting.workflowSetting.statuses.find(q => q.type == EnumWFNhomTrangThai.KET_THUC);
@@ -17233,6 +17330,9 @@ class CrudListComponent extends ComponentBase {
                     this.buttonContexts.unshift({ label: this.setting.getLabelButtonTrinhKy(rowData), icon: 'pi pi-send', command: this.trinhKy.bind(this) });
                 }
             }
+            if (!this.disableShare) {
+                this.buttonContexts.push({ label: 'Chia sẻ', icon: 'pi pi-link', command: this.createShareLink.bind(this) }, { label: 'Danh sách chia sẻ', icon: 'pi pi-list', command: this.showLinkSharing.bind(this) });
+            }
             if (this.buttonContexts.length > 0) {
                 this._showContextMenu(evt);
             }
@@ -18288,6 +18388,9 @@ class CrudListComponent extends ComponentBase {
     showSettingsWorkflowNew() {
         this.workflowSettingModel.showEditForm = true;
     }
+    showLinkSharing() {
+        this.permissionSharingModel.showEditForm = true;
+    }
     onSaveWorkflowSettings(event) {
         this.setting.workflowSetting = event;
         this._commonService.reloadPage();
@@ -18342,7 +18445,7 @@ 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\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                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                            <button\r\n                                *ngIf=\"!hiddenCopyLink && model.selectedItems.length > 0 && !disableMultipleCopyLink()\"\r\n                                label=\"Sao ch\u00E9p li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                pTooltip=\"{{'Sao ch\u00E9p li\u00EAn k\u1EBFt' | translate}}\" tooltipPosition=\"top\"\r\n                                class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"copyLinkMultiple()\"></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<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n    (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [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 [businessSetting]=\"setting\" [item]=\"currentItem\"\r\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"setting\" [rowItem]=\"choYKienModel.data.rowData\"\r\n            (onSaved)=\"choYKienModel.showEditForm = false\" (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [businessSetting]=\"setting\" [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<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n    (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<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            <button *ngIf=\"!setting.hiddenSettingWorkflowNew\" 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)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\"\r\n            [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=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" 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=\"!rowData.hiddenCopyLink\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableCopyLink(rowData)\" pTooltip=\"{{'Sao ch\u00E9p li\u00EAn k\u1EBFt' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                        icon=\"pi pi-link\" (click)=\"copyLink(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-info 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 #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflowNew($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflowNew(rowData)\"></button>\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\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\r\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\r\n                                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                            <button\r\n                                *ngIf=\"!hiddenCopyLink && model.selectedItems.length > 0 && !disableMultipleCopyLink()\"\r\n                                label=\"Sao ch\u00E9p li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                pTooltip=\"{{'Sao ch\u00E9p li\u00EAn k\u1EBFt' | translate}}\" tooltipPosition=\"top\"\r\n                                class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"copyLinkMultiple()\"></button>\r\n                            <button *ngIf=\"!disableShare && model.selectedItems.length > 0\" label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\"\r\n                                type=\"button\" pButton pRipple [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\"\r\n                                tooltipPosition=\"top\"\r\n                                class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [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<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n    (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [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 [businessSetting]=\"setting\" [item]=\"currentItem\"\r\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"setting\" [rowItem]=\"choYKienModel.data.rowData\"\r\n            (onSaved)=\"choYKienModel.showEditForm = false\" (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [businessSetting]=\"setting\" [item]=\"currentItem\"\r\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n    (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<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            <button *ngIf=\"!setting.hiddenSettingWorkflowNew\" 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)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\"\r\n            [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=\"pi pi-calendar\"\r\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\r\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\r\n                    <button *ngIf=\"!rowData.hiddenEdit\" 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=\"!rowData.hiddenCopyLink\" type=\"button\" pButton pRipple\r\n                        [disabled]=\"disableCopyLink(rowData)\" pTooltip=\"{{'Sao ch\u00E9p li\u00EAn k\u1EBFt' | translate}}\"\r\n                        tooltipPosition=\"top\" class=\"p-button-rounded p-button-text p-button-info link-or-action\"\r\n                        icon=\"pi pi-link\" (click)=\"copyLink(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-info 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 #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode\" pButton class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\"\r\n            style=\"border: 1px solid #7ca9cd;\" pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflowNew($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflowNew(rowData)\"></button>\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>",
                 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}.main-title>h1{font-size:1.2em}.filter-row>th:not(.sticky):not(.chkbox){padding:3px!important}.container-text-workflow{align-items:center;display:flex;justify-content:center}.container-text-workflow .link-or-action{color:#2196f3;cursor:pointer}.container-text-workflow .content{flex:1 1}.btnReload{height:2rem;left:50%;position:absolute;top:50%;transform:translate(-50%,calc(-50% - 1px));width:2rem}.toggle-showfull{color:#00f;cursor:pointer;font-size:.8rem;font-weight:700;white-space:nowrap}::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 .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}}"]
             },] }
@@ -18407,6 +18510,7 @@ CrudListComponent.propDecorators = {
     templatesFromParent: [{ type: Input }],
     childrenFromParent: [{ type: Input }],
     menuButtons: [{ type: Input }],
+    disableShare: [{ type: Input }],
     fieldOrder: [{ type: Input }],
     style: [{ type: Input }],
     tableClass: [{ type: Input }],
@@ -18629,15 +18733,19 @@ class DataListBase extends ComponentBase {
         }
         this.checkAllowTrinhKy = this.checkAllowTrinhKy.bind(this);
         this.setting.checkAllowTrinhKy = this.checkAllowTrinhKy;
+        this.setting.getItemState = this.getItemState;
+        this.getItemState = this.getItemState.bind(this);
         this.getMenuButtons = this.getMenuButtons.bind(this);
         this.loadItemFromQueryParam();
     }
     loadItemFromQueryParam() {
         if (this.loadDetailFromQueryParam === undefined || this.loadDetailFromQueryParam === true) {
             let idInQueryString = null;
+            let pid = null; // permission Id được người khác share
             if (this._activatedRoute.snapshot
                 && this._activatedRoute.snapshot.queryParams) {
                 idInQueryString = this._activatedRoute.snapshot.queryParams.id;
+                pid = this._activatedRoute.snapshot.queryParams.pid;
             }
             if (idInQueryString) {
                 // get detail data
@@ -18658,8 +18766,30 @@ class DataListBase extends ComponentBase {
                     this._notifierService.showWarning('Không tìm thấy bản ghi cần xem chi tiết');
                 });
             }
+            else if (pid) {
+                this.loadDetailPid(pid);
+            }
         }
     }
+    loadDetailPid(pid) {
+        this.setting.baseService.getDetailByPid(pid)
+            .then(res => this.handleResponse(res, '', f => {
+            if (!res.data) {
+                this._notifierService.showWarning('Không tìm thấy bản ghi cần xem chi tiết');
+            }
+            if ((res.data.basePermission & PermissionBase.EDIT) == PermissionBase.EDIT
+                || (res.data.basePermission & PermissionBase.READ) == PermissionBase.READ) {
+                res.data.pid = pid;
+                this._edit(res.data);
+            }
+            else {
+                this._notifierService.showWarning('Bạn không có quyền xem bản ghi');
+            }
+        })).catch(err => {
+            console.error('error on get detail from querystring', err);
+            this._notifierService.showWarning('Không tìm thấy bản ghi cần xem chi tiết');
+        });
+    }
     ngAfterViewInit() {
         this.handleAfterViewInit();
     }
@@ -18850,6 +18980,15 @@ class DataListBase extends ComponentBase {
             this.crudList.buildFilterColumn([colForAdmin]);
         }
     }
+    getItemState(lstRowData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {};
+            lstRowData.forEach(item => {
+                result[item.id] = {};
+            });
+            return result;
+        });
+    }
     checkAllowTrinhKy(rowData) {
         return __awaiter(this, void 0, void 0, function* () {
             return true;
@@ -18981,6 +19120,7 @@ class DataListBase extends ComponentBase {
     }
     cloneData(rowData) {
         return {
+            pid: rowData.pid,
             id: rowData[this.setting.entityKey]
         };
     }
@@ -19008,7 +19148,7 @@ class DataListBase extends ComponentBase {
                         this._notifierService.showDeleteDataSuccess();
                     }
                     else {
-                        this._notifierService.showWarningByReponse(response);
+                        this._notifierService.showWarningByResponse(response);
                     }
                 }, error => {
                     this._notifierService.showDeleteDataError();
@@ -19032,7 +19172,7 @@ class DataListBase extends ComponentBase {
                         this._notifierService.showDeleteDataSuccess();
                     }
                     else {
-                        this._notifierService.showWarningByReponse(response);
+                        this._notifierService.showWarningByResponse(response);
                     }
                 });
             }
@@ -19244,7 +19384,7 @@ class DataListBase extends ComponentBase {
                 const dataStatus = (yield this._workflowPermissionDetailService.getAll([
                     this.newFilter('itemId', Operator.in, dataSource.map(q => q.id)),
                     this.newFilter('userId', Operator.equal, userIdCurrent)
-                ], 'itemId,userId,trangThai,textTrangThai,workflowCode,allowEdit,permission')).data;
+                ], 'itemId,userId,trangThai,textTrangThai,workflowCode,permission')).data;
                 if (dataStatus == null) {
                     return this._notifierService.showWarning('Không lấy được thông tin trạng thái hiện tại của bản ghi');
                 }
@@ -19257,7 +19397,7 @@ class DataListBase extends ComponentBase {
                         };
                     }
                     else {
-                        itemStatus = lstItemStatus.find(q => q.allowEdit);
+                        itemStatus = lstItemStatus.find(q => (q.permission & PermissionBase.EDIT) == PermissionBase.EDIT);
                         if (itemStatus == null) {
                             itemStatus = lstItemStatus[0];
                         }
@@ -19265,7 +19405,6 @@ class DataListBase extends ComponentBase {
                     rowItem.__trangThai = itemStatus.trangThai;
                     rowItem.__textTrangThai = itemStatus.textTrangThai;
                     rowItem.__workflowCode = itemStatus.workflowCode;
-                    rowItem.__allowEdit = itemStatus.allowEdit;
                     rowItem.__permission = itemStatus.permission;
                     rowItem.__disableEdit = true;
                     rowItem.__disableDelete = true;
@@ -28880,6 +29019,8 @@ class FileManagerComponent extends DataListBase {
             },
             breadcrumbs: []
         };
+        this.showAttachLinkBox = false;
+        this.typedLink = '';
         this._moduleConfig = this._moduleConfigService.getConfig();
         this.apiUploadUrl = this._fileObjectService.getUploadUrl();
         this.userId = this._userService.getUserIdCombine();
@@ -29122,30 +29263,35 @@ class FileManagerComponent extends DataListBase {
                     visible: this._deviceDetectorService.isDesktop()
                 },
                 {
-                    label: 'Xem các phiên bản khác', icon: 'fas fa-history', command: () => {
-                        this.openFileVersions(item);
-                    }
+                    label: 'Ký số', icon: 'fas fa-signature', command: () => {
+                        this.signFile(item);
+                    },
+                    visible: !this.readonly
                 },
                 {
-                    label: 'Tải về bản công khai', icon: 'fas fa-download', command: () => {
+                    label: 'Tải về', icon: 'fas fa-download', command: () => {
                         this.download(item);
                     }
                 },
                 {
-                    label: 'Ký số', icon: 'fas fa-signature', command: () => {
-                        this.signFile(item);
-                    },
-                    visible: !this.readonly
+                    label: 'Sao chép đường dẫn', icon: 'fas fa-link', command: () => {
+                        this.copyDownloadLink(item);
+                    }
                 },
                 {
-                    label: 'Xóa tệp tin', icon: 'far fa-trash-alt', command: () => {
-                        this.deleteFile(item);
+                    label: 'Đổi tên', icon: 'fas fa-eraser', command: () => {
+                        this.renameFile(item);
                     },
                     visible: !this.readonly
                 },
                 {
-                    label: 'Đổi tên', icon: 'fas fa-eraser', command: () => {
-                        this.renameFile(item);
+                    label: 'Xem các phiên bản khác', icon: 'fas fa-history', command: () => {
+                        this.openFileVersions(item);
+                    }
+                },
+                {
+                    label: 'Xóa tệp tin', icon: 'far fa-trash-alt', command: () => {
+                        this.deleteFile(item);
                     },
                     visible: !this.readonly
                 }
@@ -29375,7 +29521,7 @@ class FileManagerComponent extends DataListBase {
                     this._notifierService.showDeleteDataSuccess();
                 }
                 else {
-                    this._notifierService.showWarningByReponse(response);
+                    this._notifierService.showWarningByResponse(response);
                 }
             });
         });
@@ -29387,6 +29533,24 @@ class FileManagerComponent extends DataListBase {
             this._downloadLinkService.download(model);
         });
     }
+    copyDownloadLink(explorerItem) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const model = this._downloadLinkService.getGenerateDownloadLinkModel(explorerItem);
+            this._downloadLinkService.generateDownloadLink(model)
+                .then(rs => {
+                if (rs.success) {
+                    this._commonService.copyMessage(this._downloadLinkService.getAnonymousDownloadUrl(rs.data));
+                    this._notifierService.showSuccess('Đã sao chép vào bộ nhớ tạm. Đường dẫn này sẽ hết hạn sau 60 giây!');
+                }
+                else {
+                    this._notifierService.showWarning('Không thể sao chép liên kết tải tệp tin!');
+                }
+            })
+                .catch(err => {
+                this._notifierService.showWarning('Không thể sao chép liên kết tải tệp tin!');
+            });
+        });
+    }
     // Tải nhiều thư mục/ tệp.
     downloadMultiple() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -29463,7 +29627,7 @@ class FileManagerComponent extends DataListBase {
                 this.data.moving = {};
             }
             else {
-                this._notifierService.showWarningByReponse(response);
+                this._notifierService.showWarningByResponse(response);
             }
         });
     }
@@ -29622,12 +29786,40 @@ class FileManagerComponent extends DataListBase {
     onRowSelect(evt) {
         this.onSelected.emit(this.model.selectedItems);
     }
+    addAttachLink() {
+        if (this.typedLink && this.typedLink.length > 0) {
+            const obj = this.parseAttachLink(this.typedLink);
+            if (obj) {
+                // do logic copy file by hash
+                alert(obj);
+                this.typedLink = '';
+                this.showAttachLinkBox = false;
+                this.getFolderContent(this.data.currentFolderId);
+                this._notifierService.showSuccess('Tải thành công!');
+            }
+            else {
+                this._notifierService.showWarning('Không hỗ trợ liên kết từ hệ thống khác hoặc liên kết không đúng!');
+            }
+        }
+    }
+    parseAttachLink(link) {
+        if (link) {
+            const parts = link.split('/file/v5/DownloadLink/Download/');
+            if (parts.length == 2) {
+                return parts[1];
+            }
+        }
+        return null;
+    }
+    focusInput(input) {
+        input.focus();
+    }
 }
 FileManagerComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'file-manager',
-                template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\">\r\n    <div class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\r\n                    tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\r\n                    (click)=\"createFolder()\">\r\n                </button>\r\n\r\n                <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\r\n                    (click)=\"selectFile()\"></button>\r\n\r\n                <button *ngIf=\"canSelect()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\"\r\n                    iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\"\r\n                    iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" icon=\"pi pi-undo\" pButton class=\"p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\r\n                    (click)=\"cancelMove()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"hasSelect()\" pButton type=\"button\"\r\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n            </ng-container>\r\n            <button *ngIf=\"readonly && hasSelect()\" class=\"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\" label=\"T\u1EA3i v\u1EC1\"\r\n                (click)=\"downloadMultiple()\">\r\n            </button>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\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\" (onReload)=\"_triggerProcessData($event)\"\r\n            class=\"--auto-height-content --no-wrapper-padding\" (onRowSelect)=\"onRowSelect($event)\">\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\"\r\n                    [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    {{rowData.name}}\r\n                    <div class=\"pull-right signature\" (click)=\"viewListSign($event, rowData.signatures)\"\r\n                        *ngIf=\"rowData.signatures\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\" tooltipPosition=\"top\">\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                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\r\n                            tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton\r\n                            type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\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 link-or-action\" pTooltip=\"Th\u00EAm\"\r\n                            tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    </ng-container>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\r\n                        (click)=\"download(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 *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\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 : !rowData.isFile\">\r\n                </span>\r\n                <!-- <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>{{rowData.nameWithoutExtension}}</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                <a (click)=\"openObject(rowData)\" class=\"file-ex-extension\">{{rowData.extension}}</a> -->\r\n\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.nameWithoutExtension}}</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                    </span>\r\n                    <span class=\"file-ex-extension\">{{rowData.extension}}</span>\r\n                </a>\r\n            </div>\r\n\r\n            <div *ngIf=\"rowData.isFile\" 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 link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></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 link-or-action\" pTooltip=\"Th\u00EAm\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </ng-container>\r\n\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-cloud-download\"></button>\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<ng-template #breadCrumb>\r\n    <div *ngIf=\"data.breadcrumbs.length > 0\" class=\"fm-toolbar-path\">\r\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file\"\r\n    [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\" (onClose)=\"closeFileViewer()\" [readonly]=\"readonly\">\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\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\r\n\r\n<signature-detail *ngIf=\"forms.signatureDetail.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\r\n    [model]=\"forms.signatureDetail.formData\">\r\n</signature-detail> -->",
+                template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout\">\r\n    <div class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\r\n                    tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\r\n                    (click)=\"createFolder()\">\r\n                </button>\r\n\r\n                <button pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\r\n                    (click)=\"selectFile()\"></button>\r\n\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n\r\n                <button *ngIf=\"canSelect()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" icon=\"fas fa-arrows-alt\"\r\n                    iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" class=\"p-button-text p-button-success\" pButton type=\"button\"\r\n                    pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\" icon=\"far fa-hand-paper\"\r\n                    iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"canSetMove()\" icon=\"pi pi-undo\" pButton class=\"p-button-text p-button-secondary\"\r\n                    type=\"button\" pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\r\n                    (click)=\"cancelMove()\">\r\n                </button>\r\n\r\n                <button *ngIf=\"hasSelect()\" pButton type=\"button\"\r\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\r\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\r\n            </ng-container>\r\n            <button *ngIf=\"readonly && hasSelect()\" class=\"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\" label=\"T\u1EA3i v\u1EC1\"\r\n                (click)=\"downloadMultiple()\">\r\n            </button>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\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\" (onReload)=\"_triggerProcessData($event)\"\r\n            class=\"--auto-height-content --no-wrapper-padding\" (onRowSelect)=\"onRowSelect($event)\">\r\n\r\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\r\n                <span (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\"\r\n                    [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\r\n                </span>\r\n\r\n                <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    {{rowData.name}}\r\n                    <div class=\"pull-right signature\" (click)=\"viewListSign($event, rowData.signatures)\"\r\n                        *ngIf=\"rowData.signatures\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\" tooltipPosition=\"top\">\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                    <ng-container *ngIf=\"!readonly\">\r\n                        <button class=\"p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\r\n                            tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\r\n\r\n                        <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton\r\n                            type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\r\n                            (click)=\"deleteFile(rowData)\"></button>\r\n\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 link-or-action\" pTooltip=\"Th\u00EAm\"\r\n                            tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    </ng-container>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\r\n                        (click)=\"download(rowData)\"></button>\r\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                        (click)=\"copyDownloadLink(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 *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\r\n        <div class=\"fm-toolbar-buttons\">\r\n            <ng-container *ngIf=\"!readonly\">\r\n                <button *ngIf=\"!hiddenCreateFolder\" (click)=\"createFolder()\" pButton pRipple type=\"button\"\r\n                    pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\"\r\n                    label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\">\r\n                </button>\r\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\r\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" label=\"T\u1EA3i l\u00EAn\"></button>\r\n                <button pButton icon=\"pi pi-link\" pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\"\r\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\r\n                    (click)=\"showAttachLinkBox = true\"></button>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\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 : !rowData.isFile\">\r\n                </span>\r\n                <!-- <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>{{rowData.nameWithoutExtension}}</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                <a (click)=\"openObject(rowData)\" class=\"file-ex-extension\">{{rowData.extension}}</a> -->\r\n\r\n                <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\r\n                    <span>\r\n                        <span>{{rowData.nameWithoutExtension}}</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                    </span>\r\n                    <span class=\"file-ex-extension\">{{rowData.extension}}</span>\r\n                </a>\r\n            </div>\r\n\r\n            <div *ngIf=\"rowData.isFile\" 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 link-or-action\" (click)=\"onButtonClick(rowData)\"\r\n                        pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\r\n                        icon=\"{{getButtonIcon(rowData)}}\"></button>\r\n\r\n                    <button class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\r\n                        (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\r\n                        icon=\"pi pi-trash\"></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 link-or-action\" pTooltip=\"Th\u00EAm\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                </ng-container>\r\n\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\r\n                    icon=\"pi pi-cloud-download\"></button>\r\n                <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\r\n                    pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\r\n                    (click)=\"copyDownloadLink(rowData)\"></button>\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<ng-template #breadCrumb>\r\n    <div *ngIf=\"data.breadcrumbs.length > 0\" class=\"fm-toolbar-path\">\r\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\r\n    </div>\r\n</ng-template>\r\n\r\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" name=\"file\"\r\n    [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\" (onClose)=\"closeFileViewer()\" [readonly]=\"readonly\">\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<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\"\r\n  [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\" [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\r\n  <div class=\"p-col-12\">\r\n    <div class=\"p-grid\">\r\n      <div class=\"p-md-10\">\r\n        <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\" (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\"/>\r\n      </div>\r\n      <div class=\"p-md-2\">\r\n        <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\r\n</tn-dialog>\r\n<!--\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\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,
@@ -30341,7 +30533,7 @@ class FileViewerComponent extends ComponentBase {
                     this.onClose.next(true);
                 }
                 else {
-                    this._notifierService.showWarningByReponse(response);
+                    this._notifierService.showWarningByResponse(response);
                 }
             });
         });
@@ -32837,7 +33029,12 @@ var EnumWorkflowHistoryStatus;
     EnumWorkflowHistoryStatus[EnumWorkflowHistoryStatus["IN_MAIN_THREAD"] = 0] = "IN_MAIN_THREAD";
     EnumWorkflowHistoryStatus[EnumWorkflowHistoryStatus["NOT_IN_MAIN_THREAD"] = 1] = "NOT_IN_MAIN_THREAD";
     EnumWorkflowHistoryStatus[EnumWorkflowHistoryStatus["RECALLED"] = 2] = "RECALLED";
-})(EnumWorkflowHistoryStatus || (EnumWorkflowHistoryStatus = {}));
+})(EnumWorkflowHistoryStatus || (EnumWorkflowHistoryStatus = {}));
+var EnumPermissionType;
+(function (EnumPermissionType) {
+    EnumPermissionType[EnumPermissionType["MAIN"] = 0] = "MAIN";
+    EnumPermissionType[EnumPermissionType["SHARE"] = 1] = "SHARE"; // Bản ghi tạo ra để chia sẻ
+})(EnumPermissionType || (EnumPermissionType = {}));
 
 const StateMachineTopic = {
     CONNECTION_CHANGE: 'CONNECTION_CHANGE'
@@ -35520,6 +35717,7 @@ class TnDialogComponent {
         this.closeOnEscape = true;
         this.showFooter = true;
         this.hiddenSave = true;
+        this.maximizable = true;
         this.scrollConfig = { suppressScrollX: true, suppressScrollY: false };
         this.scrollStyle = {};
         this.onSave = new EventEmitter();
@@ -35594,7 +35792,7 @@ class TnDialogComponent {
 TnDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'tn-dialog',
-                template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"true\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\" (onShow)=\"handleShowDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n    </p-footer>\r\n</p-dialog>",
+                template: "<p-dialog #dialog [closeOnEscape]=\"closeOnEscape\" [appendTo]=\"'body'\" [focusOnShow]=\"false\" [focusTrap]=\"false\"\r\n    [header]=\"header | translate\" [(visible)]=\"visible\" [modal]=\"modal\" [responsive]=\"true\" [maximizable]=\"maximizable\"\r\n    [autoZIndex]=\"true\" [styleClass]=\"styleClass\" [maskStyleClass]=\"maskClass\"\r\n    [style]=\"{'width': popupSize.width + 'px', 'min-width': popupSize.width + 'px', 'height': popupSize.height + 'px', 'min-height': popupSize.height + 'px'}\"\r\n    (onShow)=\"handleShowDialog($event)\" (onHide)=\"handleHideDialog($event)\" (onShow)=\"handleShowDialog($event)\">\r\n    <tn-custom-scrollbar #scrollbar [useDefaultScrollBar]=\"useDefaultScrollBar\" [class]=\"scrollBarStyleClass\"\r\n        [config]=\"scrollConfig\" [style]=\"scrollStyle\" class=\"tn-dialog-scrollbar\">\r\n        <ng-content></ng-content>\r\n    </tn-custom-scrollbar>\r\n    <p-footer *ngIf=\"showFooter && formBase && formBase.buttonTemplate\">\r\n        <ng-container *ngTemplateOutlet=\"formBase.buttonTemplate\">\r\n        </ng-container>\r\n    </p-footer>\r\n    <p-footer *ngIf=\"showFooter && footer\">\r\n        <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n    </p-footer>\r\n</p-dialog>",
                 styles: [""]
             },] }
 ];
@@ -35622,6 +35820,7 @@ TnDialogComponent.propDecorators = {
     positionTop: [{ type: Input }],
     minY: [{ type: Input }],
     hiddenSave: [{ type: Input }],
+    maximizable: [{ type: Input }],
     onSave: [{ type: Output }],
     onCancel: [{ type: Output }],
     onShow: [{ type: Output }],
@@ -37582,6 +37781,140 @@ ChoYKienFormComponent.propDecorators = {
     rowItem: [{ type: Input }]
 };
 
+class WorkflowPermissionService extends BaseService {
+    constructor(http, injector, _moduleConfigService) {
+        super(http, injector, `${_moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint}/WorkflowPermission`);
+        this.entityName = 'WorkflowPermission';
+        this.serviceCode = 'workflow';
+        this.endPoint = _moduleConfigService.getConfig().environment.apiDomain.workflowEndpoint;
+    }
+}
+WorkflowPermissionService.ɵprov = ɵɵdefineInjectable({ factory: function WorkflowPermissionService_Factory() { return new WorkflowPermissionService(ɵɵinject(HttpClient), ɵɵinject(INJECTOR), ɵɵinject(ModuleConfigService)); }, token: WorkflowPermissionService, providedIn: "root" });
+WorkflowPermissionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+WorkflowPermissionService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: Injector },
+    { type: ModuleConfigService }
+];
+
+class PermissionSharingComponent extends DataListBase {
+    constructor(_injector, _workflowPermissionService) {
+        super(_injector);
+        this._injector = _injector;
+        this._workflowPermissionService = _workflowPermissionService;
+    }
+    ngOnInit() {
+        this.setting.baseService = this._workflowPermissionService;
+        this.setting.settingKey = 'permission-sharing';
+        this.setting.title = '';
+        this.setting.heightType = HeightType.dynamic;
+        this.setting.showEditLink = false;
+        this.setting.hiddenToolbar = true;
+        this.setting.hiddenWorkflowColumn = true;
+        this.setting.hiddenSettingWorkflow = true;
+        this.setting.hiddenSettingWorkflowNew = true;
+        this.setting.hiddenSettingPermission = true;
+        this.init();
+    }
+    init() {
+        this.setting.modelSchemas = [
+            new ModelSchema({ field: 'userIdCreated', name: 'Người chia sẻ', fullName: 'Người chia sẻ', description: '' }),
+            new ModelSchema({ field: 'permission', name: 'Quyền', fullName: 'Quyền', description: '' }),
+            new ModelSchema({ field: 'created', name: 'Thời gian', fullName: 'Thời gian', description: '' }),
+        ];
+        this.setting.cols = [
+            new ColumnSchemaBase({
+                field: 'userIdCreated',
+                baseService: this._userService,
+                displayField: 'fullNameNew'
+            }),
+            new ColumnSchemaBase({
+                field: 'strPermissions',
+                label: this._translateService.instant('Quyền'),
+            }),
+            new ColumnSchemaBase({
+                field: 'created',
+                dataType: 'datetime',
+                width: '20%'
+            })
+        ];
+        this.model.ready = true;
+        super.ngOnInit();
+    }
+    modifyGridInfo(gridInfo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            gridInfo.filters.unshift(this.newFilter('itemId', Operator.equal, this.item.id), this.newFilter('type', Operator.equal, EnumPermissionType.SHARE));
+            gridInfo.sorts.unshift(this.newSort('created', -1));
+        });
+    }
+    beforeRenderDataSource(dataSource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const separator = ', ';
+            dataSource.forEach(item => {
+                item.hiddenEdit = true;
+                item.hiddenCopyLink = true;
+                // Tổng hợp quyền của bản ghi
+                let strPermissions = '';
+                if (this.checkHasPermission(item.permission, PermissionBase.READ)) {
+                    strPermissions += `xem${separator}`;
+                }
+                if (this.checkHasPermission(item.permission, PermissionBase.EDIT)) {
+                    strPermissions += `sửa${separator}`;
+                }
+                if (this.checkHasPermission(item.permission, PermissionBase.DELETE)) {
+                    strPermissions += `xóa${separator}`;
+                }
+                if (strPermissions.length > 0) {
+                    strPermissions = strPermissions.substring(0, strPermissions.length - separator.length);
+                    strPermissions = strPermissions.substring(0, 1).toUpperCase() + strPermissions.substring(1);
+                }
+                item.strPermissions = strPermissions;
+            });
+        });
+    }
+    checkHasPermission(permission, permissionCheck) {
+        return (permission & permissionCheck) == permissionCheck;
+    }
+    delete(item) {
+        this.deletePermissionSharing([item.id]);
+    }
+    deleteMultiple(items) {
+        this.deletePermissionSharing(items.map(q => q.id));
+    }
+    deletePermissionSharing(ids) {
+        if (ids.length == 0) {
+            return this._notifierService.showWarning('Bạn chưa chọn link muốn xóa');
+        }
+        this._notifierService.showConfirm('Bạn có chắc chắn muốn xóa link đã chọn')
+            .then(res => {
+            if (!res)
+                return;
+            this.baseService.deleteLinkSharing(ids)
+                .then(res => this.handleResponse(res, 'Xóa thành công', f => this._triggerProcessData()));
+        });
+    }
+}
+PermissionSharingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'permission-sharing',
+                template: "<crud-list *ngIf=\"model.ready\" #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\"\r\n    [disableShare]=\"true\" [hiddenCopyLink]=\"true\" [hiddenAdd]=\"true\" (onReload)=\"_triggerProcessData($event)\"\r\n    (onAdd)=\"_add($event)\" (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"delete($event)\"\r\n    (onDeleteMultiple)=\"deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\">\r\n</crud-list>",
+                providers: [ComponentContextService],
+                styles: [".state-designer-container>div:first-child{font-size:.9em;font-weight:700;padding:.5em 0}.container-receiver div{margin-bottom:10px}.container-receiver div:last-child{margin-bottom:0}::ng-deep workflow-history-new tr.recalled{opacity:.5}"]
+            },] }
+];
+PermissionSharingComponent.ctorParameters = () => [
+    { type: Injector },
+    { type: WorkflowPermissionService }
+];
+PermissionSharingComponent.propDecorators = {
+    baseService: [{ type: Input }],
+    item: [{ type: Input }]
+};
+
 class CanBoHoSoService extends BaseService {
     constructor(http, injector, _moduleConfigService) {
         super(http, injector, `${_moduleConfigService.getConfig().environment.apiDomain.canboEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/CanBo_HoSo`);
@@ -38456,6 +38789,9 @@ class WorkflowHistoryNewComponent extends DataListBase {
                             item.jsonModelChange = [];
                         }
                     }
+                    else if (item.actionCode == ActionThuHoiBase) {
+                        item.class = 'recalled';
+                    }
                 }
                 else if (item.status == EnumWorkflowHistoryStatus.RECALLED) {
                     item.class = 'recalled';
@@ -39239,7 +39575,7 @@ class BaseCauHinhWorkflowDetailComponent extends ComponentBase {
 BaseCauHinhWorkflowDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'base-cauhinh-workflow-detail',
-                template: "<workflow-picker #workflowPicker *ngIf=\"readyGenWorkflow\" #formBase [data]=\"workflowData\" [showButtonSave]=\"true\"\r\n    (onSaveSetting)=\"handleSave($event)\"></workflow-picker>\r\n<after-view-checked *ngIf=\"hasCountDown\" (loaded)=\"handleReadyToGetWorkflowData()\">\r\n</after-view-checked>",
+                template: "<workflow-picker #workflowPicker *ngIf=\"readyGenWorkflow\" #formBase [data]=\"workflowData\" [showButtonSave]=\"true\"\r\n    (onSaveSetting)=\"handleSave($event)\"></workflow-picker>\r\n<after-view-checked *ngIf=\"hasCountDown\" (loaded)=\"handleReadyToGetWorkflowData()\">\r\n</after-view-checked>\r\n",
                 providers: [ComponentContextService],
                 styles: [".container-task-info .percent-done{background-color:#f0f0f0;border-radius:2px;height:5px;margin-top:5px;overflow:hidden;position:relative}.container-task-info .percent-done .detail{border-radius:2px;color:#fff;font-size:13px;height:5px;left:0;position:absolute;text-align:center;top:0}"]
             },] }
@@ -39410,8 +39746,10 @@ class BaseCongviecDinhkemComponent extends DataListBase {
         this.fileDataService = fileDataService;
         this.formState = FormState.VIEW;
         this.layoutFile = EnumFileLayout;
-        this.formModel = {};
         this.enumFormState = FormState;
+        this.formModel = {};
+        this.showAttachLinkBox = false;
+        this.typedLink = '';
     }
     ngOnInit() {
         this.setting.objectName = 'mục đính kèm';
@@ -39491,37 +39829,59 @@ class BaseCongviecDinhkemComponent extends DataListBase {
         return __awaiter(this, void 0, void 0, function* () {
             const content = this._commonService.pasteByStorage();
             if (content) {
-                const obj = this.parseFromClipboard(content);
-                console.log('obj parsed', obj);
+                const obj = this.parseAttachLink(content);
                 if (obj.length > 0) {
-                    this._notifierService.showSuccess('Đang thêm mục đính kèm');
                     this._congViecDinhKemService.themDinhKemNghiepVu(this.taskId, obj).then(rs => {
                         if (rs.success) {
-                            this._notifierService.showSuccess('Thêm mục đính kèm thành công');
+                            this._notifierService.showSuccess('Thêm mục đính kèm thành công!');
                             this.reload();
                             this._commonService.clearClipboardStorage();
                         }
                         else {
-                            this._notifierService.showWarning('Thêm mục đính kèm không thành công');
+                            this.showAttachLinkBox = true;
                         }
                     }).catch(err => {
-                        console.error(err);
-                        this._notifierService.showWarning('Thêm mục đính kèm không thành công');
+                        this.showAttachLinkBox = true;
                     });
                 }
                 else {
-                    this._notifierService.showWarning('Không tìm thấy mục đính kèm trong bộ nhớ tạm, vui lòng sao chép mục đính kèm vào bộ nhớ tạm trước khi thêm');
+                    this.showAttachLinkBox = true;
                 }
             }
             else {
-                this._notifierService.showWarning('Không tìm thấy mục đính kèm trong bộ nhớ tạm, vui lòng sao chép mục đính kèm vào bộ nhớ tạm trước khi thêm');
+                this.showAttachLinkBox = true;
             }
         });
     }
+    addAttachLink() {
+        if (this.typedLink && this.typedLink.length > 0) {
+            const obj = this.parseAttachLink(this.typedLink);
+            if (obj.length > 0) {
+                this._congViecDinhKemService.themDinhKemNghiepVu(this.taskId, obj).then(rs => {
+                    if (rs.success) {
+                        this._notifierService.showSuccess('Thêm mục đính kèm thành công!');
+                        this.showAttachLinkBox = false;
+                        this.typedLink = '';
+                        this.reload();
+                    }
+                    else {
+                        this._notifierService.showWarning('Liên kết không hợp lệ!');
+                    }
+                }).catch(err => {
+                    this._notifierService.showWarning('Liên kết không hợp lệ!');
+                });
+            }
+            else {
+                this._notifierService.showWarning('Liên kết không hợp lệ!');
+            }
+        }
+    }
+    focusInput(input) {
+        input.focus();
+    }
     // http://localhost:27230/universal-link?serviceCode=congviec&entity=DM_Priority&entityKey=0911f3e7-3db0-4b68-87cd-07d425741e9e&state=&sourcePath=http://localhost:27230/dm-priority
-    parseFromClipboard(content) {
+    parseAttachLink(content) {
         const links = content.split('\r\n');
-        console.log('links', links);
         const op = [];
         for (const link of links) {
             const temp = link.split('universal-link')[1];
@@ -39565,7 +39925,7 @@ class BaseCongviecDinhkemComponent extends DataListBase {
 BaseCongviecDinhkemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'base-congviec-dinhkem',
-                template: "<crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [hiddenAdd]=\"true\"\r\n  [hiddenEdit]=\"true\" [hiddenDelete]=\"true\" [hiddenCopyLink]=\"true\" (onReload)=\"_triggerProcessData($event)\"\r\n  (onView)=\"viewLinkItem($event)\" (onDelete)=\"deleteLinkItem($event)\"\r\n  (onDeleteMultiple)=\"deleteLinkItemMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\r\n  <ng-template #tieuDe let-rowData=\"rowData\">\r\n    {{rowData.tenHienThiDoiTuong}}: [{{rowData.tieuDe}}]\r\n  </ng-template>\r\n  <ng-template #buttonAfterToolbar>\r\n    <button *ngIf=\"formState == enumFormState.EDIT || formState == enumFormState.ADD\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\r\n      class=\"p-button-text p-button-primary\" pTooltip=\"Th\u00EAm m\u1EDBi t\u1EEB b\u1ED9 nh\u1EDB t\u1EA1m\" (click)=\"themDinhKem()\"></button>\r\n    <button type=\"button\" *ngIf=\"(formState == enumFormState.EDIT  || formState == enumFormState.ADD) && model.selectedItems.length > 0\" pButton pRipple\r\n      label=\"X\u00F3a\" icon=\"pi pi-trash\" class=\"p-button-rounded p-button-text p-button-danger\"\r\n      (click)=\"deleteLinkItemMultiple($event)\"></button>\r\n  </ng-template>\r\n  <ng-template #function let-rowData=\"rowData\">\r\n    <button *ngIf=\"formState == enumFormState.EDIT || formState == enumFormState.ADD\" type=\"button\" pButton pRipple icon=\"pi pi-trash\"\r\n      class=\"p-button-rounded p-button-text p-button-danger\" pTooltip=\"H\u1EE7y \u0111\u00EDnh k\u00E8m\" tooltipPosition=\"top\"\r\n      (click)=\"deleteLinkItem(rowData)\"></button>\r\n  </ng-template>\r\n  <ng-template #fileDinhKem let-rowData=\"rowData\">\r\n    <file-manager [readonly]=\"true\" [serviceCode]=\"rowData.serviceCode\" [entity]=\"rowData.entity\"\r\n      [entityKey]=\"rowData.entityKey\" [layout]=\"layoutFile.SIMPLE\" [fileDataService]=\"fileDataService\">\r\n    </file-manager>\r\n  </ng-template>\r\n</crud-list>\r\n\r\n<tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n  [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n  <base-congviec-dinhkem-form #formBase [taskId]=\"taskId\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n    [model]=\"formModel\" (onSaved)=\"showDetailForm = false;crudList.reload()\" (onCancel)=\"_handleCancel($event)\"\r\n    (onAfterSaved)=\"onAfterSaved($event)\">\r\n  </base-congviec-dinhkem-form>\r\n</tn-dialog>",
+                template: "<crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"model.dataSource\" [hiddenAdd]=\"true\"\r\n    [hiddenEdit]=\"true\" [hiddenDelete]=\"true\" [hiddenCopyLink]=\"true\" (onReload)=\"_triggerProcessData($event)\"\r\n    (onView)=\"viewLinkItem($event)\" (onDelete)=\"deleteLinkItem($event)\"\r\n    (onDeleteMultiple)=\"deleteLinkItemMultiple($event)\" (onReloaded)=\"_unmarkLoading()\">\r\n    <ng-template #tieuDe let-rowData=\"rowData\">\r\n        {{rowData.tenHienThiDoiTuong}}: [{{rowData.tieuDe}}]\r\n    </ng-template>\r\n    <ng-template #buttonAfterToolbar>\r\n        <button *ngIf=\"formState == enumFormState.EDIT || formState == enumFormState.ADD\" type=\"button\" pButton pRipple\r\n            label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\" class=\"p-button-text p-button-primary\" (click)=\"themDinhKem()\"></button>\r\n        <button type=\"button\"\r\n            *ngIf=\"(formState == enumFormState.EDIT  || formState == enumFormState.ADD) && model.selectedItems.length > 0\"\r\n            pButton pRipple label=\"X\u00F3a\" icon=\"pi pi-trash\" class=\"p-button-rounded p-button-text p-button-danger\"\r\n            (click)=\"deleteLinkItemMultiple($event)\"></button>\r\n    </ng-template>\r\n    <ng-template #function let-rowData=\"rowData\">\r\n        <button *ngIf=\"formState == enumFormState.EDIT || formState == enumFormState.ADD\" type=\"button\" pButton pRipple\r\n            icon=\"pi pi-trash\" class=\"p-button-rounded p-button-text p-button-danger\" pTooltip=\"H\u1EE7y \u0111\u00EDnh k\u00E8m\"\r\n            tooltipPosition=\"top\" (click)=\"deleteLinkItem(rowData)\"></button>\r\n    </ng-template>\r\n    <ng-template #fileDinhKem let-rowData=\"rowData\">\r\n        <file-manager [readonly]=\"true\" [serviceCode]=\"rowData.serviceCode\" [entity]=\"rowData.entity\"\r\n            [entityKey]=\"rowData.entityKey\" [layout]=\"layoutFile.SIMPLE\" [fileDataService]=\"fileDataService\">\r\n        </file-manager>\r\n    </ng-template>\r\n</crud-list>\r\n\r\n<tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-dinhkem-form #formBase [taskId]=\"taskId\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" (onSaved)=\"showDetailForm = false;crudList.reload()\" (onCancel)=\"_handleCancel($event)\"\r\n        (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-dinhkem-form>\r\n</tn-dialog>\r\n\r\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\r\n    [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\r\n    <div class=\"p-col-12\">\r\n        <div class=\"p-grid\">\r\n            <div class=\"p-md-10\">\r\n                <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB ph\u00E2n h\u1EC7 kh\u00E1c...\" pInputText\r\n                    class=\"p-col-12\" [(ngModel)]=\"typedLink\" (keyup.enter)=\"addAttachLink()\" />\r\n            </div>\r\n            <div class=\"p-md-2\">\r\n                <button type=\"button\" pButton class=\"p-button-primary p-col-12\" label=\"Ok\"\r\n                    [disabled]=\"typedLink != ''? null : true\" (click)=\"addAttachLink()\"></button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\r\n</tn-dialog>",
                 providers: [ComponentContextService],
                 styles: [""]
             },] }
@@ -39668,6 +40028,12 @@ class BaseCongViecFormComponent extends DataFormBase {
         this.autoFocus = true;
         this.enumFormState = FormState;
         this.enumLoaiDanhSachCongViec = EnumLoaiDanhSachCongViec;
+        this.users = {
+            taskName: '',
+            assigner: 0,
+            assignee: 0,
+            relatedUsers: [],
+        };
         this.tabDataChild = [
             {
                 code: 'fileDinhKem',
@@ -39683,6 +40049,11 @@ class BaseCongViecFormComponent extends DataFormBase {
                 code: 'taskLienQuan',
                 icon: 'pi pi-share-alt',
                 label: 'Công việc liên quan'
+            },
+            {
+                code: 'traoDoiCongViec',
+                icon: 'pi pi-comment',
+                label: 'Trao đổi công việc',
             }
         ];
         this.handleChangeLoaiCongViecWhenAdd = (evt) => __awaiter(this, void 0, void 0, function* () {
@@ -39690,6 +40061,9 @@ class BaseCongViecFormComponent extends DataFormBase {
                 yield this.loadWorkflowByLoaiCongViec(evt, evt.model.id);
             }
         });
+        this.users.assigner = 0;
+        this.users.assignee = 0;
+        this.users.relatedUsers = [];
     }
     set tenCongViec(value) {
         this._tenCongViec = value;
@@ -39784,18 +40158,24 @@ class BaseCongViecFormComponent extends DataFormBase {
             this.setWorkflowDatasource(evt, workflowSetting);
         });
     }
-    onBeforeSave() {
-    }
     onAfterSave(res) {
         if (this.model.formState == FormState.ADD && res && res.success && res.data) {
             this.onAfterSaved.emit(res.data);
         }
     }
+    onTabChange(evt) {
+        this.currentTabIndex = evt.index;
+        this.users.taskName = this.model.data.ten;
+    }
+    forcusToFirstInputControl(event) {
+        event.preventDefault();
+        this.context.fireEvent(ComCtxConstants.COMMON.FOCUS_TO_FIRST_INPUT_CONTROL);
+    }
 }
 BaseCongViecFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'base-congviec-form',
-                template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n    [autoFocus]=\"autoFocus\" (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<base-congviec-dinhkem [loadDetailFromQueryParam]=\"false\" [formState]=\"model.formState\" [taskId]=\"model.data.id\">\r\n</base-congviec-dinhkem>\r\n<div class=\"tab-child\">\r\n    <tn-tabview [data]=\"tabDataChild\">\r\n        <ng-template #fileDinhKem>\r\n            <file-manager [loadDetailFromQueryParam]=\"false\" [serviceCode]=\"setting.baseService.serviceCode\"\r\n                [entity]=\"setting.baseService.entityName\" [entityKey]=\"model.data.id\"\r\n                [readonly]=\"model.formState == enumFormState.VIEW\">\r\n            </file-manager>\r\n        </ng-template>\r\n        <ng-template #taskChild>\r\n            <div style=\"height: 100%\">\r\n                <base-congviec [loadDetailFromQueryParam]=\"false\" [isChildView]=\"true\" [formState]=\"model.formState\"\r\n                    [loaiDanhSach]=\"enumLoaiDanhSachCongViec.CongViecCon\" [idCongViec]=\"model.data.id\">\r\n                </base-congviec>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #taskLienQuan>\r\n            <base-congviec [loadDetailFromQueryParam]=\"false\" [isChildView]=\"true\" [formState]=\"model.formState\"\r\n                [loaiDanhSach]=\"enumLoaiDanhSachCongViec.CongViecLienQuan\" [idCongViec]=\"model.data.id\">\r\n            </base-congviec>\r\n        </ng-template>\r\n    </tn-tabview>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n        class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>",
+                template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\r\n           [autoFocus]=\"autoFocus\" (onFormReady)=\"_handleFormReady($event)\">\r\n</crud-form>\r\n<base-congviec-dinhkem [loadDetailFromQueryParam]=\"false\" [formState]=\"model.formState\" [taskId]=\"model.data.id\">\r\n</base-congviec-dinhkem>\r\n<div class=\"tab-child\">\r\n    <tn-tabview [data]=\"tabDataChild\" (onTabChange)=\"onTabChange($event)\">\r\n        <ng-template #fileDinhKem>\r\n            <file-manager [loadDetailFromQueryParam]=\"false\" [serviceCode]=\"setting.baseService.serviceCode\"\r\n                          [entity]=\"setting.baseService.entityName\" [entityKey]=\"model.data.id\"\r\n                          [readonly]=\"model.formState == enumFormState.VIEW\">\r\n            </file-manager>\r\n        </ng-template>\r\n        <ng-template #taskChild>\r\n            <div style=\"height: 100%\">\r\n                <base-congviec [loadDetailFromQueryParam]=\"false\" [isChildView]=\"true\" [formState]=\"model.formState\"\r\n                               [loaiDanhSach]=\"enumLoaiDanhSachCongViec.CongViecCon\" [idCongViec]=\"model.data.id\">\r\n                </base-congviec>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #taskLienQuan>\r\n            <base-congviec [loadDetailFromQueryParam]=\"false\" [isChildView]=\"true\" [formState]=\"model.formState\"\r\n                           [loaiDanhSach]=\"enumLoaiDanhSachCongViec.CongViecLienQuan\" [idCongViec]=\"model.data.id\">\r\n            </base-congviec>\r\n        </ng-template>\r\n        <ng-template #traoDoiCongViec>\r\n            <div style=\"height: 350px;\">\r\n                <chat-box [showSendMessageBox]=\"false\" [serviceCode]=\"'congviec'\" [entity]=\"'congviec'\"\r\n                          [taskId]=\"model.data.id\" [parentModel]=\"model\" [parentContext]=\"context\"\r\n                          [users]=\"users\"\r\n                ></chat-box>\r\n            </div>\r\n            <chat-send-message-box [parentContext]=\"context\">\r\n            </chat-send-message-box>\r\n        </ng-template>\r\n    </tn-tabview>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"pi pi-save\"\r\n            class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\" (click)=\"_handleSave($event)\"></button>\r\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\r\n</ng-template>\r\n",
                 providers: [ComponentContextService],
                 styles: [".tab-child{padding:1em}"]
             },] }
@@ -40116,7 +40496,7 @@ class BaseCongViecComponent extends DataListBase {
                     this.reload();
                 }
                 else {
-                    this._notifierService.showWarningByReponse(response);
+                    this._notifierService.showWarningByResponse(response);
                 }
             }, error => {
                 this._notifierService.showDeleteDataError();
@@ -40130,7 +40510,7 @@ class BaseCongViecComponent extends DataListBase {
                     this.reload();
                 }
                 else {
-                    this._notifierService.showWarningByReponse(response);
+                    this._notifierService.showWarningByResponse(response);
                 }
             }, error => {
                 this._notifierService.showDeleteDataError();
@@ -41815,6 +42195,1180 @@ UsersFormatPipe.ctorParameters = () => [
     { type: UserService }
 ];
 
+class ServiceRequestModel {
+    constructor(init) {
+        this.service = '';
+        this.entityInstanceId = '';
+        this.parent = null;
+        this.serviceCode = '';
+        this.entity = '';
+        this.entityKey = '';
+        for (const key in init) {
+            this[key] = init[key];
+        }
+    }
+}
+
+class ContentsService extends BaseService {
+    constructor(_injector, _httpClient, _moduleConfigService, _fileService) {
+        super(_httpClient, _injector, `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/Contents`);
+        this._moduleConfigService = _moduleConfigService;
+        this._fileService = _fileService;
+        this.entityName = 'Contents';
+        this.serviceCode = 'chat';
+        this.endPoint = `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}`;
+    }
+    getByService(model, page = 0) {
+        const { serviceCode, entity, entityKey } = model;
+        const url = `${this.serviceUri}/GetByService?serviceCode=${serviceCode}&entity=${entity}&entityKey=${entityKey}&page=${page}`;
+        return this.defaultGet(url);
+    }
+    getByTaskId(model, taskId) {
+        const { serviceCode, entity, entityKey } = model;
+        const url = `${this.serviceUri}/GetByTaskId?serviceCode=${serviceCode}&entity=${entity}&entityKey=${entityKey}&taskId=${taskId}`;
+        return this.defaultGet(url);
+    }
+    getContentById(data) {
+        let url = `${this.serviceUri}/GetByChatId/${data.instanceId}`;
+        if (data.page) {
+            url += `${url}?page=${data.page}`;
+        }
+        return this.defaultGet(url);
+    }
+    sendMessage(messageContent) {
+        const url = `${this.serviceUri}/SendMessage`;
+        return this.defaultPost(url, messageContent);
+    }
+    markAsReadAllContents(chatId) {
+        const url = `${this.serviceUri}ReadInfo/MarkAsReadAllContents/${chatId}`;
+        return this.defaultPost(url, chatId);
+    }
+}
+ContentsService.ɵprov = ɵɵdefineInjectable({ factory: function ContentsService_Factory() { return new ContentsService(ɵɵinject(INJECTOR), ɵɵinject(HttpClient), ɵɵinject(ModuleConfigService), ɵɵinject(FileExplorerService)); }, token: ContentsService, providedIn: "root" });
+ContentsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+ContentsService.ctorParameters = () => [
+    { type: Injector },
+    { type: HttpClient },
+    { type: ModuleConfigService },
+    { type: FileExplorerService }
+];
+
+class StatusExtendsService extends BaseService {
+    constructor(_injector, _http, _moduleConfigService) {
+        super(_http, _injector, `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/StatusExtends`);
+        this._moduleConfigService = _moduleConfigService;
+        this.entityName = 'StatusExtends';
+        this.serviceCode = 'chat';
+        this.endPoint = `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}`;
+    }
+    insertUserOnline(chatId) {
+        const statusExtends = { chatId: chatId };
+        const url = `${this.serviceUri}/InsertUserOnline`;
+        return this.defaultPost(url, statusExtends);
+    }
+    removeUserOnline(id) {
+        return this.deleteById(id);
+    }
+}
+StatusExtendsService.ɵprov = ɵɵdefineInjectable({ factory: function StatusExtendsService_Factory() { return new StatusExtendsService(ɵɵinject(INJECTOR), ɵɵinject(HttpClient), ɵɵinject(ModuleConfigService)); }, token: StatusExtendsService, providedIn: "root" });
+StatusExtendsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+StatusExtendsService.ctorParameters = () => [
+    { type: Injector },
+    { type: HttpClient },
+    { type: ModuleConfigService }
+];
+
+class ChatService extends BaseService {
+    constructor(_injector, _httpClient, _moduleConfigService, _folderService, _myDriveService, _fileService, _contentService, _statusService) {
+        super(_httpClient, _injector, `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/Instances`);
+        this._moduleConfigService = _moduleConfigService;
+        this._folderService = _folderService;
+        this._myDriveService = _myDriveService;
+        this._fileService = _fileService;
+        this._contentService = _contentService;
+        this._statusService = _statusService;
+        this.entityName = 'Instances';
+        this.serviceCode = 'chat';
+        this.SERVICE = 'chat';
+        this.ENTITY_CONTENT = 'contents';
+        this.endPoint = `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}`;
+    }
+    getListAttachment(id) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const request = new ServiceRequestModel({
+                service: this.SERVICE,
+                serviceCode: this.SERVICE,
+                entity: this.ENTITY_CONTENT,
+                entityInstanceId: id,
+                entityKey: 'id',
+            });
+            // const result = await this._folderService.getServiceFolderId(request);
+            // if (!result.success || !result.data) {
+            //     return [];
+            // }
+            // const folder = await this._folderService.getDetail(result.data);
+            // // const folder = await this._myDriveService.getByFolderId(result.data);
+            // if (result.success) {
+            //     if (folder.data.length > 0) {
+            //         return folder.data.map(x => {
+            //             const item = <any>{
+            //                 id: x.id,
+            //                 fileName: x.name,
+            //                 type: this._commonService.isImage(x.name) ? 'image' : ''
+            //             };
+            //
+            //             item.url = this._fileService.getFileDownloadUrl(x.id);
+            //
+            //             return item;
+            //         });
+            //     }
+            // }
+            return [];
+        });
+    }
+    getChatId(model) {
+        const { serviceCode, entity, entityKey } = model;
+        const url = `${this.serviceUri}/GetIdByService?serviceCode=${serviceCode}&entity=${entity}&entityKey=${entityKey}`;
+        return this.defaultGet(url);
+    }
+    getChatIdByTask(serviceRequest, taskId) {
+        const { serviceCode, entity, entityKey } = serviceRequest;
+        const url = `${this.serviceUri}/GetIdByTaskId?serviceCode=${serviceCode}&entity=${entity}&entityKey=${entityKey}&taskId=${taskId}`;
+        return this.defaultGet(url);
+    }
+    getByService(model, page = 0) {
+        return this._contentService.getByService(model, page);
+    }
+    getContentByTaskId(serviceRequest, taskId) {
+        return this._contentService.getByTaskId(serviceRequest, taskId);
+    }
+    markAsReadAllContents(chatId) {
+        return this._contentService.markAsReadAllContents(chatId);
+    }
+    sendMessage(messageContent) {
+        return this._contentService.sendMessage(messageContent);
+    }
+    insertUserOnline(chatId) {
+        return this._statusService.insertUserOnline(chatId);
+    }
+    removeUserOnline(id) {
+        return this._statusService.removeUserOnline(id);
+    }
+}
+ChatService.ɵprov = ɵɵdefineInjectable({ factory: function ChatService_Factory() { return new ChatService(ɵɵinject(INJECTOR), ɵɵinject(HttpClient), ɵɵinject(ModuleConfigService), ɵɵinject(FolderService), ɵɵinject(MyDriveService), ɵɵinject(FileExplorerService), ɵɵinject(ContentsService), ɵɵinject(StatusExtendsService)); }, token: ChatService, providedIn: "root" });
+ChatService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+ChatService.ctorParameters = () => [
+    { type: Injector },
+    { type: HttpClient },
+    { type: ModuleConfigService },
+    { type: FolderService },
+    { type: MyDriveService },
+    { type: FileExplorerService },
+    { type: ContentsService },
+    { type: StatusExtendsService }
+];
+
+class MessageBoardService extends BaseService {
+    constructor(_injector, _http, _moduleConfigService) {
+        super(_http, _injector, `${_moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}/${_moduleConfigService.getConfig().environment.apiVersion}/MessageBoards`);
+        this._moduleConfigService = _moduleConfigService;
+        this.entityName = 'MessageBoards';
+        this.serviceCode = 'chat';
+        this.endPoint = `${this._moduleConfigService.getConfig().environment.apiDomain.chatEndpoint}`;
+    }
+    pinMessage(messageId, pinned, correlationId) {
+        const url = `${this.serviceUri}/PinnedMessage`;
+        return this.defaultPost(url, { pinned: pinned, id: messageId, correlationId: correlationId });
+    }
+    getLatestPinnedMessage(chatId) {
+        const url = `${this.serviceUri}/GetLatestPinnedMessage?chatId=${chatId}`;
+        return this.defaultGet(url);
+    }
+    getListPinnedMessage(chatId) {
+        const url = `${this.serviceUri}/GetListPinnedMessage?chatId=${chatId}`;
+        return this.defaultGet(url);
+    }
+}
+MessageBoardService.ɵprov = ɵɵdefineInjectable({ factory: function MessageBoardService_Factory() { return new MessageBoardService(ɵɵinject(INJECTOR), ɵɵinject(HttpClient), ɵɵinject(ModuleConfigService)); }, token: MessageBoardService, providedIn: "root" });
+MessageBoardService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+MessageBoardService.ctorParameters = () => [
+    { type: Injector },
+    { type: HttpClient },
+    { type: ModuleConfigService }
+];
+
+class CheckControlVisibleService {
+    constructor() { }
+    checkDisplayStatus(elem) {
+        return new Promise((resolve, reject) => {
+            this.doCheck(resolve, elem);
+        });
+    }
+    doCheck(resolve, elem) {
+        let timeoutCheckDisplayStatus;
+        timeoutCheckDisplayStatus = setTimeout(() => {
+            this.doCheck(resolve, elem);
+        }, 100);
+        var newStatus = this.isVisible(elem);
+        if (newStatus) {
+            setTimeout(() => {
+                // show control
+                resolve(true);
+            });
+            clearTimeout(timeoutCheckDisplayStatus);
+        }
+    }
+    isVisible(elem) {
+        const style = getComputedStyle(elem);
+        if (style.display === 'none')
+            return false;
+        if (style.visibility !== 'visible')
+            return false;
+        if (+style.opacity < 0.1)
+            return false;
+        if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
+            elem.getBoundingClientRect().width === 0) {
+            return false;
+        }
+        const elemCenter = {
+            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
+            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
+        };
+        let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
+        if (pointContainer) {
+            do {
+                if (pointContainer === elem)
+                    return true;
+            } while (pointContainer = pointContainer.parentNode);
+        }
+        return false;
+    }
+}
+CheckControlVisibleService.ɵprov = ɵɵdefineInjectable({ factory: function CheckControlVisibleService_Factory() { return new CheckControlVisibleService(); }, token: CheckControlVisibleService, providedIn: "root" });
+CheckControlVisibleService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+CheckControlVisibleService.ctorParameters = () => [];
+
+const NEW_MESSAGE = 'NewMessage';
+const PINNED_CHANGED = 'PinnedChanged';
+var NotificationType;
+(function (NotificationType) {
+    NotificationType[NotificationType["NewMessage"] = 0] = "NewMessage";
+    NotificationType[NotificationType["PinnedChanged"] = 1] = "PinnedChanged";
+})(NotificationType || (NotificationType = {}));
+var MessageType;
+(function (MessageType) {
+    MessageType[MessageType["TEXT"] = 0] = "TEXT";
+    MessageType[MessageType["FILE"] = 1] = "FILE";
+})(MessageType || (MessageType = {}));
+
+// fix for build prod
+const moment$1 = moment_;
+class ChatBoxComponent extends ComponentBase {
+    constructor(injector, _chatService, _messageBoardService, _userService, _checkControlVisible, _signalrService, _fileService, _crudService, _notifierService, _moduleConfigService) {
+        super(injector);
+        this._chatService = _chatService;
+        this._messageBoardService = _messageBoardService;
+        this._userService = _userService;
+        this._checkControlVisible = _checkControlVisible;
+        this._signalrService = _signalrService;
+        this._fileService = _fileService;
+        this._crudService = _crudService;
+        this._notifierService = _notifierService;
+        this._moduleConfigService = _moduleConfigService;
+        this.showSendMessageBox = true;
+        this.userPickerForm = {
+            selectedValue: [],
+            data: null,
+        };
+        this.topic = '';
+        this.firstTime = true;
+        this.multiple = true;
+        this.showAddNoteForm = false;
+        this.fileApi = '';
+        this.peopleAll = [];
+        this.correlationIds = [];
+        this.attachments = [];
+        this.image = '';
+        this.peopleAllUsers = [];
+        this.peopleRelatedUsers = [];
+        this.editFormModel = {};
+        this._moduleConfig = this._moduleConfigService.getConfig();
+        this.environment = this._moduleConfig.environment;
+        this.defaultAvatar = this.environment.appMetadata.main.defaultMaleAvatar;
+        this.fileApi = this.environment.apiDomain.fileEndpoint;
+        this.model.userPickerForm = { popupSize: PopupSize, data: {} };
+        this.model.quickNoteForm = { popupSize: {}, data: {} };
+        this.context.subscribe('QUICK_NOTE_POPUP.CLOSE_POPUP', response => {
+            this.model.editFormModel.showQuickNoteForm = false;
+        });
+    }
+    updateUsers(assignee, assigner, relatedUser) {
+        this.assignee = assignee;
+        this.assigner = assigner;
+        this.relatedUser = relatedUser;
+        let all = [];
+        all.push(assignee);
+        all.push(assigner);
+        if (this.relatedUser.length > 0) {
+            all = all.concat(relatedUser);
+        }
+        this.peopleAll = all.filter((x, i, a) => a.indexOf(x) == i);
+    }
+    ngOnInit() {
+        this.initClassVar();
+        this.getMessages(null);
+        this._chatService.getChatIdByTask(this.serviceRequestModel, this.taskId).then(rs => {
+            if (!rs.success)
+                this._notifierService.showWarning(rs.message);
+            if (!rs.data)
+                return;
+            this.model.id = rs.data;
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_INSTANCE_ID_LOADED, this.model.id);
+            this.topic = `chat.${this.model.id}`;
+            this._signalrService.start(null, this.topic, data => this.handleChanges(data));
+            // get pinned message
+            if (this.model.id) {
+                this._messageBoardService.getLatestPinnedMessage(this.model.id).then(rs => {
+                    if (rs.data) {
+                        this.model.pinnedMessage = rs.data.content;
+                    }
+                });
+            }
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_MESSAGE_SENDING, (data) => __awaiter(this, void 0, void 0, function* () {
+            this.model.correlationIds.push(data.message.correlationId);
+            if (data.attachments && data.attachments.length > 0) {
+                data.attachments = data.attachments.map(x => {
+                    x.url = null;
+                    return x;
+                });
+            }
+            const temp = yield this.appendMessage(data.message.messageContent, 'own', 'sending', this.currentUser.userName, data.attachments, data.message.correlationId, false);
+            console.log(temp);
+        }));
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_MESSAGE_SENT, data => {
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_LOAD_MORE, data => {
+            // this.getMessages(this.model.createdFrom);
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_SCROLLING, scrolling => {
+            if (scrolling) {
+                this.model.scrolling = true;
+            }
+            else {
+                this.model.scrolling = false;
+                this.model.newMessageNotUpdatedCount = 0;
+            }
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_HAS_NEW_MESSAGE_NOT_UPDATED, count => {
+            this.model.scrolling = count !== 0;
+            this.model.newMessageNotUpdatedCount = count;
+        });
+        this.context.subscribe('CLOSE_POPUP', rs => {
+            this.model.userPickerForm.show = false;
+            this.parentContext.fireEvent('TASK.RELATED_USER_CHANGED', rs);
+        });
+        this.parentContext.subscribe('TASK.DATA_CHANGED', rs => {
+            this.updateUsers(rs.assignee, rs.assigner, rs.relatedUser);
+        });
+    }
+    handleChanges(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newMessage = JSON.parse(data);
+            if (!newMessage || !newMessage.data) {
+                this._notifierService.showWarning('SYS_ERR_DEV: Lỗi SignalR');
+                return;
+            }
+            switch (newMessage.notificationType) {
+                case NotificationType.NewMessage:
+                case NEW_MESSAGE: {
+                    yield this.handleNewMessageNotification(newMessage.data);
+                    break;
+                }
+                case NotificationType.PinnedChanged:
+                case PINNED_CHANGED: {
+                    const ind = this.model.correlationIds.findIndex(x => x == newMessage.correlationId);
+                    if (ind > -1) {
+                        this.model.correlationIds.splice(ind, 1);
+                    }
+                    else {
+                        yield this.handlePinnedChangeNotification(newMessage.data);
+                    }
+                    break;
+                }
+            }
+        });
+    }
+    initClassVar() {
+        this.fileViewerModel = {
+            data: {},
+            showEditForm: false,
+        };
+        this.userPickerControl = new UserPickerControlSchema({
+            field: 'id',
+            label: '',
+            fullLabel: '',
+            multiple: true,
+            hiddenCheck: () => this.userPickerForm.show,
+        });
+        this.serviceRequestModel = {
+            service: this.serviceCode,
+            serviceCode: this.serviceCode,
+            entity: this.entity,
+            entityKey: 'id',
+            entityInstanceId: this.taskId
+        };
+        this.model.dataSource = [];
+        this.model.correlationIds = [];
+        this.model.attachments = [];
+        this.model.maxFileSize = 3000000;
+        this.model.img = {};
+        this.currentUser = this._userService.getCurrentUser();
+        this.peopleAllUsers = [];
+        this.peopleRelatedUsers = [];
+        this.model.editFormModel = [];
+        if (this.users) {
+            this.model.taskName = this.users.taskName;
+            this.updateUsers(this.users.assignee, this.users.assigner, this.users.relatedUsers);
+            this.getRelatedUserInfo();
+        }
+    }
+    getRelatedUserInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const peopleRelatedUsers = yield this._userService.getBasicUsersInfo(this.relatedUser.join());
+            if (peopleRelatedUsers == null || peopleRelatedUsers.length == 0) {
+                return;
+            }
+            for (const item of peopleRelatedUsers) {
+                this.peopleRelatedUsers.push({
+                    title: item.fullName,
+                    label: item.fullName,
+                    value: item.id
+                });
+            }
+        });
+    }
+    handlePinnedChangeNotification(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (data.pinned) {
+                this.model.pinnedMessage = data.message;
+            }
+            else {
+                this.model.pinnedMessage = null;
+            }
+        });
+    }
+    handleNewMessageNotification(newMessage) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const ind = this.model.correlationIds.findIndex(x => x == newMessage.correlationId);
+            if (newMessage.messageType == MessageType.FILE) {
+                newMessage.attachments = yield this._chatService.getListAttachment(newMessage.id);
+            }
+            if (ind === -1) {
+                yield this.appendMessage(newMessage.content, this.getTypeOfMessage(newMessage.createdBy), 'received', newMessage.createdBy, newMessage.attachments, '', true);
+            }
+            else {
+                this.updateMessage(newMessage.correlationId, newMessage);
+                this.model.correlationIds.splice(ind, 1);
+            }
+        });
+    }
+    getMessages(createdFrom) {
+        this._chatService.getContentByTaskId(this.serviceRequestModel, this.taskId).then((rs) => __awaiter(this, void 0, void 0, function* () {
+            const currentUserName = this.currentUser.userName;
+            let nearByCreated = '';
+            let index = 0;
+            let userNames = '';
+            if (!rs.success) {
+                return this._notifierService.showWarning(rs.message);
+            }
+            for (const item of rs.data) {
+                if (item.createdBy && item.createdBy != '')
+                    userNames += `${index == 0 ? '' : ','}${item.createdBy}`;
+                if (index === 0)
+                    this.model.createdFrom = item.created;
+                item.type = item.createdBy === currentUserName ? 'own' : 'from';
+                if (item.messageType === MessageType.FILE) {
+                    item.attachments = yield this._chatService.getListAttachment(item.id);
+                }
+                item.isLastMessageFlow = false;
+                if (item.createdBy !== nearByCreated) {
+                    if (+item > -0) {
+                        rs.data[+item - 1].isLastMessageFlow = true;
+                    }
+                    nearByCreated = item.createdBy;
+                    item.isFirstMessageFlow = true;
+                }
+                else {
+                    item.isFirstMessageFlow = false;
+                }
+                if (+index === rs.data.length - 1)
+                    item.isLastMessageFlow = true;
+                index++;
+            }
+            if (createdFrom) {
+                this.model.dataSource = [...rs.data, ...this.model.dataSource];
+            }
+            else {
+                this.model.dataSource = rs.data;
+            }
+            if (userNames != '') {
+                const userInfos = yield this._userService.getBasicUsersInfoByUserNames(userNames);
+                if (userInfos != null) {
+                    for (const item of this.model.dataSource) {
+                        const user = userInfos.find(x => x.userName == item.createdBy);
+                        if (!user) {
+                            continue;
+                        }
+                        item.avatar = user.avatar;
+                        item.fullName = user.fullName;
+                    }
+                }
+            }
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_DATA_LOADED, true);
+        }));
+    }
+    scrollToBottom(speed = 0, force = false, sent) {
+        if (!this.model.scrolling) {
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_HAS_NEW_MESSAGE, { speed, force: true });
+        }
+        else if (sent !== false) {
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_HAS_NEW_MESSAGE, { speed, force });
+        }
+    }
+    appendMessage(message, type, status, createdBy, attachments = [], correlationId = '', sent) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            let fullName = '';
+            let avatar = '';
+            const user = yield this._userService.getBasicUserInfoByUserName(createdBy);
+            fullName = (_a = user.fullName) !== null && _a !== void 0 ? _a : '';
+            avatar = (_b = user.avatar) !== null && _b !== void 0 ? _b : '';
+            if (attachments && attachments.length > 0) {
+                const clonedAttachment = JSON.parse(JSON.stringify(attachments));
+                this.model.dataSource.push({
+                    created: new Date(),
+                    createdBy: createdBy,
+                    fullName: fullName,
+                    status: status,
+                    type: type,
+                    avatar: avatar,
+                    attachments: clonedAttachment,
+                    correlationId: correlationId,
+                    isFirstMessageFlow: false,
+                    isLastMessageFlow: false,
+                    sent: sent
+                });
+                this.updateFirstOrLastMessage();
+            }
+            if (message && message.trim() != '') {
+                this.model.dataSource.push({
+                    created: new Date(),
+                    createdBy: createdBy,
+                    fullName: fullName,
+                    content: message,
+                    status: status,
+                    type: type,
+                    avatar: avatar,
+                    correlationId: correlationId,
+                    isFirstMessageFlow: false,
+                    isLastMessageFlow: false,
+                    sent: sent
+                });
+                this.updateFirstOrLastMessage();
+            }
+            return this.model.dataSource;
+        });
+    }
+    updateFirstOrLastMessage() {
+        if (this.model.dataSource.length > 0) {
+            const length = this.model.dataSource.length;
+            if (length === 1) {
+                this.model.dataSource[0].isFirstMessageFlow = true;
+            }
+            else {
+                const createdBy = this.model.dataSource[length - 2].createdBy;
+                const createdBy2 = this.model.dataSource[length - 1].createdBy;
+                if (createdBy !== createdBy2) {
+                    this.model.dataSource[length - 2].isLastMessageFlow = true;
+                    this.model.dataSource[length - 1].isFirstMessageFlow = true;
+                }
+                else {
+                    this.model.dataSource[length - 2].isLastMessageFlow = false;
+                    this.model.dataSource[length - 1].isLastMessageFlow = true;
+                }
+            }
+        }
+    }
+    updateMessage(correlationId, message) {
+        const item = this.model.dataSource.find(x => x.correlationId === correlationId);
+        if (item) {
+            if (message.attachments && message.attachments.length > 0) {
+                item.attachments = message.attachments;
+            }
+            item.id = message.id;
+            item.sent = true;
+        }
+    }
+    updateMessageStatus(message, status, errorMessage = '') {
+        const item = this.model.dataSource.find(x => x.message === message);
+        item.status = status;
+        item.errorMessage = errorMessage;
+    }
+    getDisplayStatus(status) {
+        switch (status) {
+            case 'sending':
+                return 'Đang gửi';
+            case 'sent':
+                return 'Đã gửi';
+            default:
+                return '';
+        }
+    }
+    ngOnDestroy() {
+        // unscrible signalr
+        this._signalrService.unSubscribeViewCode(null, this.topic);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_MESSAGE_SENDING);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_MESSAGE_SENT);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_LOAD_MORE);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_SCROLLING);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_HAS_NEW_MESSAGE_NOT_UPDATED);
+        super.ngOnDestroy();
+    }
+    getTypeOfMessage(createdBy) {
+        return createdBy === this.currentUser.userName ? 'own' : 'from';
+    }
+    trackByFunc(index, item) {
+        return item.id;
+    }
+    trackAttachmentByFunc(index, item) {
+        return item.fileName;
+    }
+    handlePaste(event) {
+        const objectData = this.getImageClipboardData(event);
+        if (objectData) {
+            this.model.attachments.push({
+                type: 'image',
+                url: objectData.url,
+                data: objectData.blob,
+                fileName: this._commonService.guid() + '.png'
+            });
+        }
+    }
+    getImageClipboardData(e) {
+        for (let i = 0; i < e.clipboardData.items.length; i++) {
+            const item = e.clipboardData.items[i];
+            if (item.type.indexOf('image') != -1) {
+                const imageObj = item.getAsFile();
+                if (imageObj.size < this.model.maxFileSize) {
+                    return { url: URL.createObjectURL(imageObj), blob: imageObj };
+                }
+                else {
+                    return null;
+                }
+            }
+        }
+        return null;
+    }
+    viewOrDownloadFile(evt, attachmentItem) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._fileService.isSupportedViewOnline(attachmentItem.fileName)) {
+                // this.model.fileViewer.data = {};
+                // this.model.fileViewer.data.fileId = attachmentItem.id;
+                // this.model.fileViewer.data.fileName = attachmentItem.fileName;
+                // this.model.fileViewer.data.isFileVersion = false;
+                // this.model.fileViewer.show = true;
+                this.fileViewerModel = {
+                    data: {
+                        fileId: attachmentItem.id,
+                        fileName: attachmentItem.fileName,
+                        isFileVersion: false,
+                    },
+                    showEditForm: true,
+                };
+            }
+            else {
+                top.location.href = yield this.getDownloadLink(attachmentItem);
+            }
+        });
+    }
+    getDownloadLink(file) {
+        return new Promise((resolve, reject) => {
+            const model = new GenerateLinkDownloadDTO();
+            model.fileId = file.id;
+            model.isFileVersion = false;
+            this._fileService.generateLinkDownload(model)
+                .then(response => {
+                const downloadUrl = this._fileService.getAnonymousDownloadUrl(response.data);
+                resolve(downloadUrl);
+            }, error => {
+                throw new Error('Cannot get download link');
+            });
+        });
+    }
+    browseFileFromPersonal() {
+    }
+    browseFileFromComputer() {
+        this.fileElement.advancedFileInput.nativeElement.click();
+    }
+    onSelectFileFromComputer(evt) {
+        try {
+            if (evt.files && evt.files.length > 0) {
+                for (let index = 0; index < evt.files.length; index++) {
+                    const fileName = evt.files[index].name;
+                    const type = this._commonService.isImage(fileName) ? 'image' : 'file';
+                    const attachmentItem = {
+                        type: type,
+                        data: evt.files[index], fileName: fileName
+                    };
+                    if (attachmentItem.type == 'image') {
+                        attachmentItem.url = evt.files[index].objectURL.changingThisBreaksApplicationSecurity;
+                    }
+                    this.model.attachments.push(attachmentItem);
+                }
+            }
+        }
+        catch (e) {
+            console.error('error on process select file computer', e);
+        }
+        // this.fileElement.clear();
+    }
+    removeAttachment(item) {
+        const ind = this.model.attachments.findIndex(x => x.url === item.url);
+        this.model.attachments.splice(ind, 1);
+    }
+    hasAttachment(item) {
+        return item.attachments && item.attachments.length > 0;
+    }
+    loadImg(evt, parentIndex, index) {
+        this.model.img[`${parentIndex}${index}`] = true;
+        this.model.img[`${parentIndex}width${index}`] = (evt.target.width + 32) + 'px';
+    }
+    inTheSameTime(i, item, dataSource) {
+        if (i < dataSource.length - 1) {
+            const d1 = new Date(dataSource[i + 1].created);
+            const d2 = new Date(item.created);
+            const ms = d1.getTime() - d2.getTime();
+            return ms < 30000;
+        }
+        return false;
+    }
+    pinMessage(item) {
+        if (this.model.pinnedMessage) {
+            if (this.model.pinnedMessage.id != item.id) {
+                this._notifierService.showConfirm('Bạn có chắc chắn muốn ghim tin nhắn này? Tin nhắn đã ghim trước đó sẽ được bỏ ghim.').then(rs => {
+                    if (!rs)
+                        return;
+                    this.doPin(item, item.id, true);
+                });
+            }
+            else {
+                this.doPin(item, item.id, false);
+            }
+        }
+        else {
+            this.doPin(item, item.id, true);
+        }
+    }
+    doPin(item, id, pinned) {
+        const correlationId = this._commonService.guid();
+        this.model.correlationIds.push(correlationId);
+        this._messageBoardService.pinMessage(id, pinned, correlationId).then(rs => {
+            if (pinned) {
+                this.model.pinnedMessage = item;
+            }
+            else {
+                this.model.pinnedMessage = null;
+            }
+        });
+    }
+    getCurrentUserAvatar(avatar) {
+        if (avatar != null) {
+            return `${this.fileApi}/file/public/${avatar}/Download`;
+        }
+        else {
+            return this.defaultAvatar;
+        }
+    }
+    addPeople() {
+        this.userPickerForm.selectedValue = this.peopleRelatedUsers;
+        this.userPickerForm.multiple = this.multiple;
+        this.userPickerForm.show = true;
+    }
+    quickNote(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const userResult = yield this._userService.getBasicUserInfo(item.createdBy);
+            this.context.data.noteDataModel = {
+                editFormModel: {
+                    showEditForm: true,
+                    showQuickNoteForm: true,
+                    popupSize: {},
+                    data: {
+                        name: item.content1,
+                        content: '<b>' + userResult.fullName + '</b>' + ' đã chat tại công việc '
+                            + '<b>' + this.model.taskName + '</b>' + ' với nội dung '
+                            + '<b>' + item.content1 + '</b>' + ' vào lúc ' + moment$1(new Date(item.created)).format('YYYY-MM-DD hh:mm:ss A')
+                    }
+                }
+            };
+            this.model.editFormModel.showQuickNoteForm = true;
+            this.showAddNoteForm = true;
+        });
+    }
+    onMouseUp(event) {
+        event.cancelBubble = true;
+        event.stopPropagation();
+    }
+    addClassToMessage(item, isPinnedMessage) {
+        let styleClass = '';
+        if (!isPinnedMessage) {
+            if (item.isFirstMessageFlow) {
+                styleClass = 'first';
+            }
+            else if (item.isLastMessageFlow) {
+                styleClass = 'last';
+            }
+            else {
+                styleClass = 'middle';
+            }
+        }
+        if (item.sent == false) {
+            styleClass = 'sending';
+        }
+        return styleClass;
+    }
+}
+ChatBoxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'chat-box',
+                template: "<div class=\"dashboard\">\r\n    <div class=\"chat\">\r\n        <div class=\"group-info\">\r\n            <a href=\"javascript:\">C\u00F3 {{peopleAll.length}} ng\u01B0\u1EDDi trong nh\u00F3m n\u00E0y</a>\r\n            <div class=\"circleButton\" pTooltip=\"Xem to\u00E0n b\u1ED9 \u0111\u00EDnh k\u00E8m\" tooltipPosition=\"top\">\r\n                <a href=\"javascript:\"><i class=\"far fa-images\"></i></a>\r\n            </div>\r\n            <div (click)=\"addPeople()\" class=\"circleButton\" pTooltip=\"Th\u00EAm m\u1EDBi ng\u01B0\u1EDDi v\u00E0o nh\u00F3m\" tooltipPosition=\"top\"\r\n                disabled=\"true\">\r\n                <a href=\"javascript:\"><i class=\"fas fa-user-plus\"></i></a>\r\n            </div>\r\n        </div>\r\n        <ul #scrollMe [ngClass]=\"{'hasPin': model.pinnedMessage != null}\">\r\n            <li *ngIf=\"model.pinnedMessage\" class=\"clearfix pin\" [ngClass]=\"{'message-from': true}\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"messageItem; context: { i : -1, item: model.pinnedMessage, isPinnedMessage: true}\">\r\n                </ng-container>\r\n            </li>\r\n            <li *ngFor=\"let item of model.dataSource; let i = index; trackBy: trackByFunc\" class=\"clearfix\"\r\n                [ngClass]=\"{ 'message-own': item.type == 'own'}\">\r\n                <ng-container *ngTemplateOutlet=\"messageItem; context: { i : i, item: item}\">\r\n                </ng-container>\r\n            </li>\r\n        </ul>\r\n        <!--        <chat-send-message-box *ngIf=\"showSendMessageBox\"></chat-send-message-box>-->\r\n        <div [ngClass]=\"{'visible2': model.scrolling, 'hidden2': !model.scrolling}\" class=\"scroll-to-bottom\">\r\n            <span *ngIf=\"model.newMessageNotUpdatedCount > 0\" (click)=\"scrollToBottom(350, true, null)\">\r\n                {{model.newMessageNotUpdatedCount <= 5 ? model.newMessageNotUpdatedCount : '5+' }} </span>\r\n                    <span (click)=\"scrollToBottom(350, true, null)\" *ngIf=\"model.newMessageNotUpdatedCount == 0\">\r\n                        <i class=\"fas fa-chevron-down\"></i>\r\n                    </span>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<file-viewer *ngIf=\"fileViewerModel.showEditForm\" [parentContext]=\"context\" [parentModel]=\"model\"\r\n    [model]=\"fileViewerModel\">\r\n</file-viewer>\r\n\r\n<ng-template #messageItem let-i=\"i\" let-isPinnedMessage=\"isPinnedMessage\" let-item=\"item\">\r\n    <img *ngIf=\"item.isFirstMessageFlow && item.type != 'own' && !isPinnedMessage && item.avatar != null\" alt=\"\"\r\n        class=\"chat-avatar\" src=\"{{getCurrentUserAvatar(item.avatar)}}\">\r\n    <p *ngIf=\"(item.isFirstMessageFlow && item.type != 'own') && !isPinnedMessage\" class=\"message-created-by\">\r\n        {{item.fullName}}\r\n    </p>\r\n    <span *ngIf=\"!hasAttachment(item)\">\r\n        <!--          [class]=\"addClassToMessage(item, isPinnedMessage)\">-->\r\n        <p *ngIf=\"!hasAttachment(item)\" class=\"message-content\">\r\n            <i (click)=\"pinMessage(item)\" class=\"fas fa-thumbtack\" style=\"right: 0;\"></i>\r\n            <i (click)=\"quickNote(item)\" class=\"fas fa-sticky-note\"></i>\r\n            {{item.content}}\r\n        </p>\r\n        <p *ngIf=\"!isPinnedMessage && (item.isLastMessageFlow || !inTheSameTime(i, item, model.dataSource))\"\r\n            class=\"message-created\" pTooltip=\"{{item.created | date:'dd/MM/yyyy HH:mm'}}\"\r\n            tooltipPosition=\"{{item.type != 'own'?'right':'left'}}\">\r\n            {{_crudService.renderDateTime(item.created)}}\r\n        </p>\r\n        <p *ngIf=\"isPinnedMessage\" class=\"message-created\">\r\n            {{item.createdBy}} \u0111\u00E3 g\u1EEDi l\u00FAc {{item.created | date:'dd/MM/yyyy HH:mm'}}\r\n        </p>\r\n    </span>\r\n    <ng-container *ngIf=\"hasAttachment(item)\">\r\n        <ng-container *ngFor=\"let attachmentItem of item.attachments;let index=index\">\r\n            <div class=\"file\"\r\n                [ngClass]=\"{'first':item.isFirstMessageFlow && index == 0, 'middle':index > 0 || !item.isFirstMessageFlow, 'image' : attachmentItem.type == 'image'}\"\r\n                [ngStyle]=\"{'width': model.img[i + 'width' + index]}\">\r\n                <p class=\"attachment\">\r\n                    <span (mouseup)=\"onMouseUp($event)\" class=\"attachment-item\">\r\n                        <a *ngIf=\"attachmentItem.type != 'image'\" (click)=\"viewOrDownloadFile($event, attachmentItem)\">\r\n                            <i class=\"fas fa-paperclip\"></i>{{attachmentItem.fileName}}\r\n                        </a>\r\n                        <a *ngIf=\"attachmentItem.type == 'image'\" #aElement\r\n                            [ngClass]=\"{'hidden': !model.img[i + '' + index], 'visible':model.img[i + '' + index]}\"\r\n                            (click)=\"viewOrDownloadFile($event, attachmentItem)\">\r\n                            <img class=\"message-img\" (load)=\"loadImg($event, i, index)\"\r\n                                [src]=\"attachmentItem.url | secure | async\" />\r\n                        </a>\r\n                    </span>\r\n                </p>\r\n                <div style=\"clear: both\"></div>\r\n                <p class=\"message-created\" pTooltip=\"{{item.created | date:'dd/MM/yyyy HH:mm'}}\"\r\n                    tooltipPosition=\"{{item.type != 'own'?'right':'left'}}\">\r\n                    {{_crudService.renderDateTime(item.created)}}\r\n                </p>\r\n            </div>\r\n            <div style=\"clear: both\"></div>\r\n        </ng-container>\r\n    </ng-container>\r\n    <after-view-checked *ngIf=\"model.dataSource.length == i + 1\" (loading)=\"scrollToBottom(0, false, item.sent)\">\r\n    </after-view-checked>\r\n</ng-template>\r\n\r\n<!--<tn-dialog *ngIf=\"userPickerForm.show\" #dialog [styleClass]=\"'tn-form-dialog'\"-->\r\n<!--           [header]=\"'Th\u00EAm m\u1EDBi ng\u01B0\u1EDDi d\u00F9ng' | translate\" [popupSize]=\"userPickerForm.popupSize\"-->\r\n<!--           (onCancel)=\"userPickerForm.show = false\"-->\r\n<!--           (onHide)=\"userPickerForm.show = false\">-->\r\n<!--    &lt;!&ndash;    <congviec-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\"&ndash;&gt;-->\r\n<!--    &lt;!&ndash;                   (onSaved)=\"showDetailForm = false;crudList.reload()\" (onCancel)=\"_handleCancel($event)\"&ndash;&gt;-->\r\n<!--    &lt;!&ndash;                   (onAfterSaved)=\"onAfterSaved($event)\"></congviec-form>&ndash;&gt;-->\r\n<!--    <user-picker-box #formBase [control]=\"userPickerControl\"-->\r\n<!--                     [(ngModel)]=\"this.peopleAll\" [multiple]=\"userPickerControl.multiple\">-->\r\n<!--    </user-picker-box>-->\r\n<!--</tn-dialog>-->\r\n\r\n\r\n<!--<tn-dialog *ngIf=\"userPickerForm.show\" #dialog [styleClass]=\"'tn-form-dialog'\"-->\r\n<!--           [header]=\"'Th\u00EAm m\u1EDBi ng\u01B0\u1EDDi d\u00F9ng' | translate\" [popupSize]=\"userPickerForm.popupSize\" (onHide)=\"userPickerForm.show == false\">-->\r\n<!--    &lt;!&ndash;    <congviec-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"formModel\"&ndash;&gt;-->\r\n<!--    &lt;!&ndash;                   (onSaved)=\"showDetailForm = false;crudList.reload()\" (onCancel)=\"_handleCancel($event)\"&ndash;&gt;-->\r\n<!--    &lt;!&ndash;                   (onAfterSaved)=\"onAfterSaved($event)\"></congviec-form>&ndash;&gt;-->\r\n\r\n<!--    &lt;!&ndash;<quick-add-form *ngIf=\"model.editFormModel.showQuickNoteForm\" [parentContext]=\"context\"&ndash;&gt;-->\r\n<!--    &lt;!&ndash;                [parentModel]=\"context.data.noteDataModel\"></quick-add-form>&ndash;&gt;-->\r\n<!--</tn-dialog>-->",
+                providers: [ComponentContextService, CheckControlVisibleService],
+                styles: [".paging-advance{list-style:none;margin:3px 0;padding-left:0}.paging-advance li{line-height:30;padding-left:15px;width:150px}.paging-advance li.disabled{color:#bdbdbd;outline:none}.paging-advance li.disabled:hover{background:none;cursor:default}.paging-advance li:hover{background:red;cursor:pointer}.paging-advance-overlay .ui-overlaypanel-content{padding:0}.paging-advance-overlay.ui-overlaypanel-shifted:before{left:1.25em;margin-left:-10;right:auto}.paging-advance-overlay.ui-overlaypanel-shifted:after{left:1.25em;margin-left:-8px;right:auto}.chat-avatar{border:2px solid #eee;height:36px}", "@charset \"UTF-8\";@import url(C:\\Users\\vietp\\source\\repos\\5.1\\shared\\AppSharedV5\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Users\\vietp\\source\\repos\\5.1\\shared\\AppSharedV5\\node_modules\\jsoneditor\\dist\\jsoneditor.min.css);.flex{display:flex}.flex .fit{flex:1 1}.flex.flex-column{flex-direction:column}.flex.flex-wrap{flex-wrap:wrap}.flex.center-v{align-items:center}.flex.center-all,.flex.center-h{justify-content:center}.flex.center-all{align-items:center}.validate-item{color:#e00000;display:inline-block;font-size:.9em;white-space:nowrap}.tn-scroll-bar.bgWhite>div,.validate-item{background-color:#fff}.label-primary{background-color:#1ab394;padding:2px}.label-danger,.label-primary{border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px}.label-danger{background-color:#ed5565;padding:2px 5px}.label-warning{background-color:#b8860b}.label-secondary,.label-warning{border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px;padding:2px}.label-secondary{background-color:#a9a9a9}.label-done{background-color:#3b1ef7;border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px;padding:2px}.text-navy{color:#1ab394!important}.text-danger{color:red!important}.fa-user-edit{font-size:14px}.flexcolumn{border:1px solid #eee;border-radius:5px;min-height:80px;overflow-x:hidden;overflow-y:hidden}.flexcolumn,.has2ScrollZone2 .flexcolumn{max-height:calc(100vh - 180px)}.headerNoBorder>th{border:none!important;border-bottom:1px solid #eee!important}.cellNoBorder table tr td{border:0!important}.layout-wrapper .layout-main{overflow:hidden;padding:60px 0 0}div.circleButton{border-radius:50%;display:inline-block;height:32px;line-height:32px;margin-bottom:4px;margin-top:4px;overflow:hidden;position:relative;text-align:center;transform:perspective(1px);width:32px}div.circleButton>a{line-height:32px;padding:0!important}div.circleButton>a>i{width:24px!important}div.circleButton:before{background:#e6e6e6;border-radius:50%;bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;transform:scale(0);transition:all .3s cubic-bezier(.4,.34,.01,.97);z-index:-1}div.circleButton:hover:before{transform:scale(1)}.message-notice{background:#e0e0e0;text-align:center}.message-created-by{color:#888;font-size:.82em;font-weight:400;margin-bottom:3px;margin-left:45px;margin-top:5px}.message-created{color:#495057;display:inline-block;font-size:.82em;margin-bottom:0;margin-top:0}.message-own .message-created{padding-left:10px;padding-right:6px}.message-from .message-created{padding-left:6px;padding-right:10px}.message-content{color:#000;line-height:20px;margin-bottom:6px;margin-top:3px;position:relative}.message-content i{display:none}.message-content:hover i{display:block}.message-content:hover{padding-right:20px!important}.chat-box-content{max-height:500px}.attachment-list .attachment-item{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:#f1f1f1;border:1px solid #ccc;border-radius:8px;box-shadow:1px 2px 3px rgba(0,0,0,.06);float:left;height:84px;margin:8px;overflow:hidden;position:relative;text-align:center;user-select:none;width:84px}.attachment-list .attachment-item img{height:100%;width:100%}.attachment-list .attachment-item span{left:0;padding:5px;position:absolute;top:25px;width:100%;word-break:break-all}.clearfix{clear:both}.dashboard .chat ul li img.message-img{float:none;height:120px;margin-left:0;width:auto}.message-attachment{cursor:pointer;font-size:1.5em;margin:0 5px 0 0;position:relative}.hidden{display:none}.message-input{width:100%}.message-input label{font-size:1.2rem}.remove-file-attachment{background:#495057;border-radius:50%;color:#fff;cursor:pointer;font-size:20px;position:absolute;right:5px;top:5px}.attachment-list{background:#fff;bottom:51px;box-shadow:0 -2px 3px -3px rgba(0,0,0,.21176470588235294);display:none;height:100px;left:-15px;position:absolute;width:calc(100% + 30px)}.attachment-list.attached-file{display:block}.dashboard{margin-bottom:-15px;margin-top:-5px}.dashboard .timeline>.ui-g .ui-g-9 .event-text{color:#555;white-space:nowrap}.dashboard .timeline>.ui-g .ui-g-9 .event-text.event-text2{line-height:18px;padding-left:30px;text-align:justify;white-space:pre-wrap}.dashboard .timeline>.ui-g .ui-g-9 .event-text.event-text2 i{left:20px;margin-top:3px;position:absolute}.new-message{align-items:center;justify-content:center}.dashboard .chat .new-message{border:0;display:flex;margin:0;padding:0;text-align:left}.dashboard .chat .new-message i{color:#495057}.dashboard .chat .new-message .message-attachment{border:0}.dashboard .chat .new-message .button-send{display:inline-block;line-height:40px;position:relative}.dashboard .chat .new-message .button-send .p-button-label{text-align:center}.dashboard .chat .new-message .message-emotion{display:inline-block;height:100%;line-height:40px;text-align:center;width:40px}.dashboard .chat .new-message .message-emotion i{font-size:24px;line-height:inherit}.dashboard .chat .new-message .message-input{width:calc(100% - 155px)}.dashboard .chat ul li.message-from,.dashboard .chat ul li.message-own{padding:0}.dashboard .chat ul li.message-from>span{background-color:#f0e3fd;border:0;border-radius:2px 20px 20px 2px}.dashboard .chat ul li.message-from>.first,.dashboard .chat ul li.message-from>.middle{margin-left:45px!important}.dashboard .chat ul li.message-from>.last{border-radius:2px 20px 20px 20px;margin-left:45px!important}.dashboard .chat ul li.message-from>img{border-radius:50%;margin-top:5px;position:absolute;width:36px}.dashboard .chat ul li.message-own>span{background-color:#def6f8;border:0;border-radius:20px 2px 2px 20px;text-align:right}.dashboard .chat ul li.message-own>span.sending{background-color:#eee}.dashboard .chat ul li.message-own>span.last{border-radius:20px 2px 20px 20px}.dashboard .chat ul li.message-own .attachment span.attachment-item{background-color:#f1f1f1!important;border:0!important;padding-left:0;padding-right:0}.dashboard .chat ul li.message-own .attachment span.attachment-item a{color:#555;cursor:pointer;display:inline-block;font-weight:700}.dashboard .chat ul li.message-own>div.file{background:#f1f1f1;border:1px solid #e4e4e4;border-radius:6px;display:inline-block;margin:1px;overflow:hidden;text-align:right}.dashboard .chat ul li.message-from .attachment span.attachment-item{background-color:#f1f1f1!important;border:0!important;padding-left:0;padding-right:0}.dashboard .chat ul li.message-from .attachment span.attachment-item a{color:#555;cursor:pointer;display:inline-block;font-weight:700}.dashboard .chat ul li.message-from .attachment span.attachment-item a img{margin-right:0}.dashboard .chat ul li.message-from>div.file{background:#f1f1f1;border:1px solid #e4e4e4;border-radius:6px;display:inline-block;margin:1px;overflow:hidden;text-align:left}.dashboard .chat ul li .attachment span.attachment-item a>i{padding-right:8px}.dashboard .chat ul li div.file p.attachment{display:inline-block;margin-bottom:5px}.dashboard .chat ul li.message-from{text-align:left}.dashboard .chat ul li.message-own{text-align:right}.dashboard .chat ul li>div.file.image{height:170px;max-width:100%;padding:15px;transition:width .15s linear;width:220px}.dashboard .chat ul li>div.file.image p.attachment{height:120px}.dashboard .chat ul li>div.file{padding:15px}.dashboard .chat ul li>div.file p,.dashboard .chat ul li>div.file span{display:inline-block;margin:0;padding:0}.visible{opacity:1;transition:opacity .15s linear;visibility:visible}.hidden{opacity:0;transition:visibility 0s .1s,opacity .1s linear;visibility:hidden}.visible2{opacity:1;transition:opacity .35s linear;visibility:visible}.hidden2{opacity:0;transition:visibility 0s .3s,opacity .3s linear;visibility:hidden}.dashboard .chat{position:relative}.dashboard .chat .scroll-to-bottom{bottom:6px;min-height:40px;padding-right:12px;position:sticky;text-align:right}.dashboard .chat .scroll-to-bottom span{background:#495057;border:2px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.34901960784313724);color:#fff;cursor:pointer;display:inline-block;font-size:20px;height:35px;line-height:35px;overflow:hidden;text-align:center;width:35px}.dashboard .chat .group-info{line-height:30px;margin:-10px;padding:5px 10px;top:0;z-index:99}.dashboard .chat .group-info,.dashboard .chat .pin{background:#fff;box-shadow:0 0 3px -1px rgba(0,0,0,.21176470588235294);position:sticky}.dashboard .chat .pin{margin-bottom:10px;margin-left:-10px;top:40px;width:calc(100% + 20px);z-index:98}.dashboard .chat ul li.message-from.pin>span,.dashboard .chat ul li.message-own.pin>span{background-color:transparent}.dashboard .chat ul li.message-from.pin>span{margin-left:0}.dashboard .chat .message-content i{color:#495057;cursor:pointer;font-size:11px}.dashboard .chat .pin .message-content i{display:block}.dashboard .chat li.message-from .message-content{padding-left:6px}.dashboard .chat li.message-from .message-content i{padding:5px}.dashboard .chat li.message-own .message-content i{padding:5px;position:absolute;right:-15px}.dashboard .chat .group-info .circleButton{float:right;margin-bottom:0;margin-top:0}.dashboard .chat ul{margin-top:20px;padding:0}.dashboard .chat .new-message .message-input input.ui-inputtext:focus{box-shadow:none;outline:none}.dashboard .chat ul.hasPin{margin-top:10px}.dashboard .chat .group-info a{color:#495057}.normalHtml,.normalHtml b,.normalHtml strong{font-weight:400}.normalHtml{display:inline-block}.avatar-viewer .profile-image{border:1px solid #fff;border-radius:50%;height:40px;margin-top:-6px;width:40px}a.button>i{margin-right:5px}.dashboard .timeline{padding-top:20px}.ui-inputgroup .ui-inputtext{padding-right:0}.new-message .ui-inputtext{width:100%}.full-screen,.full-screen>.p-dialog{height:100%!important;left:0!important;max-height:100%;min-height:unset!important;min-width:100%!important;top:0!important;width:100%!important}#image-view-list.image-gallery-2{background-color:rgba(0,0,0,.4);height:calc(100vh - 41px);margin:-14px auto 0;touch-action:none;width:100%}#image-view-list.image-gallery-2 .image-container{background-color:transparent;border:0;bottom:0;height:85%;margin:auto}#image-view-list.image-gallery-2 .image-container .iv-snap-view{bottom:20px;left:calc(50% - 75px);top:auto}#image-view-list.image-gallery-2 .image-container .iv-image-view img{touch-action:auto}#image-view-list .inline-icon{margin-top:-41px}#image-view-list .footer-info,#image-view-list .material-icons.next,#image-view-list .material-icons.prev{display:none}#image-view-list .options-image-viewer{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;margin-right:37px;user-select:none}.mobile-image-viewer-close{color:#fff;cursor:pointer;font-size:x-large;height:42px;line-height:42px;padding-right:7px;padding-top:2px;position:absolute;right:0;text-align:center;top:0;vertical-align:middle;width:37px}.mobile-image-viewer-close:hover{color:#feca37!important}.hide-holder{padding:0}.file-ex-name{word-break:break-all}.box-function{background:#fff;border-radius:0 0 5px 5px;border-top:1px solid #e8e8e8;bottom:0;left:0;padding:8px 30px;position:absolute;text-align:right;width:100%}.box-function button{margin-left:5px}.quick-note-button-holder{bottom:40px;display:none;height:50px;position:absolute;right:50px;width:50px;z-index:99}.quick-note-button{background:#ffc107;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:2em;height:50px;line-height:50px;outline:none;text-align:center;width:50px}.quick-note-button:hover{color:#fff}.all-note-button{background:#ffd24b;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:1.5em;height:40px;line-height:40px;outline:none;position:absolute;right:5px;text-align:center;top:5px;transition:right;transition-duration:.16s;transition-timing-function:ease-in;width:40px;z-index:-1}.all-note-button:hover{color:#fff}.setting-note-button{background:#ffd24b;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:1.5em;height:40px;line-height:40px;outline:none;position:absolute;right:5px;text-align:center;top:5px;transition:right;transition-duration:.16s;transition-timing-function:ease-in;width:40px;z-index:-1}.setting-note-button:hover{color:#fff}.pinned-notes-holder{bottom:20px;display:none;left:20px;position:absolute;width:250px;z-index:98}.pinned-notes{background:transparent;display:block;outline:none;padding:0}.pinned-notes-header{font-size:1rem;font-weight:700}.pinned-notes-setting{position:absolute;right:.5rem}.pinned-note{background-color:#fff1ac;box-shadow:1px 2px 3px rgba(185,139,6,.6313725490196078);font-size:.8rem;margin-bottom:10px;padding:0;position:relative}.pinned-note:last-child{margin-bottom:0}.pinned-notes-minimize-button{background:#ffc003;border:1px solid #fff;border-radius:50%;box-shadow:1px 2px 3px rgba(185,139,6,.6313725490196078);color:#fff;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:-15px;text-align:center;top:-15px;width:25px;z-index:1}.pinned-note-header-line{border:1px solid #fff;box-shadow:1px 1px 2px rgba(0,0,0,.4);height:calc(100% - 1rem);left:3px;margin-bottom:.5rem;margin-top:.5rem;max-height:20px;position:absolute;width:13px}.pinned-note-header-right{cursor:pointer;float:right;margin-left:3px;width:32px}.pinned-note-header-time{font-size:.6rem}.pinned-note-header-button-unpin{display:none;float:left;height:14px;margin-right:2px;opacity:.8;width:14px}.pinned-note-header-button-complete{display:none;padding-top:2px}.pinned-note-body{float:right;padding:.5rem .5rem .5rem 25px;width:100%}.pinned-note-body:hover{background-color:#feeb82}.pinned-note-body:hover .pinned-note-header-time{display:none}.pinned-note-body:hover .pinned-note-header-button-complete,.pinned-note-body:hover .pinned-note-header-button-unpin{display:block}.pinned-note-line-title{color:#333;display:block;font-weight:700;padding-bottom:6px}.pinned-note-line{display:block}.view-port{border-radius:5px;box-shadow:0 0 0 9999px rgba(0,0,0,.5882352941176471);display:none;height:0;width:0;z-index:999}.view-port,.view-port-mask{background:transparent;position:absolute}.view-port-mask{display:block;height:100%;left:0;top:0;width:100%;z-index:9998}.tinymce-control{border:1px solid #ccc;display:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;width:100%}.input-tab-trap{filter:alpha(opacity=0)!important;opacity:0!important;overflow:hidden!important;width:0!important}.color-value input{font-size:.8em;line-height:16px}.dialog-material.mobile{width:100%!important}audio,audio:focus,video,video:focus{outline:none}.iv-image-view img.iv-image{-webkit-animation:fadein .5s;animation:fadein .5s;visibility:hidden!important}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}.iv-image-view img.iv-image.show{visibility:visible!important}.row-line{padding-bottom:0;padding-top:0}.fc-ltr{padding-bottom:7px}.padding-bottom-5px{padding-bottom:5px}.no-margin{margin:0!important}.no-padding{padding:0}.no-padding-left{padding-left:0}.float-left{float:left}body .fc .fc-toolbar .fc-button{background-color:#007ad9;border:1px solid #007ad9;border-radius:3px;color:#fff;font-size:14px;transition:background-color .2s,box-shadow .2s}body .fc .fc-toolbar .fc-button:enabled:hover{background-color:#116fbf;border-color:#116fbf;color:#fff}body .fc .fc-toolbar .fc-button:focus{box-shadow:0 0 0 .2em #8dcdff;outline:0 none;outline-offset:0}body .fc .fc-toolbar .fc-button-group .fc-button{border-radius:0}body .fc .fc-toolbar .fc-button-group .fc-button:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}body .fc .fc-toolbar .fc-button-group .fc-button:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}body .fc .fc-toolbar .fc-right .fc-button{border-radius:0}body .fc .fc-toolbar .fc-right .fc-button:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}body .fc .fc-toolbar .fc-right .fc-button:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}.fc-toolbar>*>:not(:first-child){margin-left:0}.fc-axis,.fc-dayGridMonth-button,.fc-timeGridDay-button,.fc-timeGridWeek-button,.old-content{line-height:0;text-indent:-9999px}.fc-axis:after,.fc-dayGridMonth-button:after,.fc-timeGridDay-button:after,.fc-timeGridWeek-button:after,.new-content{display:block;line-height:normal;text-indent:0}.fc-dayGridMonth-button:after{content:\"Th\u00E1ng\";padding:.2em}.fc-timeGridWeek-button:after{content:\"Tu\u1EA7n\";padding:.2em}.fc-timeGridDay-button:after{content:\"Ng\u00E0y\";padding:.2em}body .fc th{background-color:#f4f4f4;border:1px solid #c8c8c8;color:#333;padding:.571em 1em}.ui-fluid .button-group button,.ui-fluid .button-group p-button{margin-right:.5em!important;text-align:left;width:auto}.layout-wrapper .layout-menu-container{z-index:97}.base-status,.base-status-aborted,.base-status-approved,.base-status-completed,.base-status-create-new,.base-status-ended,.base-status-high,.base-status-immediately,.base-status-low,.base-status-medium,.base-status-on-conducting,.base-status-on-going,.base-status-pending,.base-status-rejected,.base-status-returned,.base-status-urgent{border-radius:.25em;color:#fff;font-size:.8em;padding:3px;text-align:center}.base-status-create-new{background-color:#f2f2f2;color:#666}.base-status-on-conducting,.base-status-on-going{background-color:#337ab7}.base-status-pending{background-color:#ffba01}.base-status-approved{background-color:#34a835}.base-status-returned{background-color:#ffba01}.base-status-rejected{background-color:#d9534f}.base-status-completed{background-color:#34a835}.base-status-aborted{background-color:#ffba01}.base-status-ended{background-color:#34a835}.base-status-low,.base-status-medium{background-color:#f2f2f2;color:#666}.base-status-high{background-color:#ffba01}.base-status-immediately,.base-status-urgent{background-color:#d9534f}.text-align-center{text-align:center}.font-weight-bold{font-weight:700}.landing-body .landing-menu li a:hover{border-bottom:none}.landing-body .landing-menu li:first-child{margin-left:8px}.crud-form .label-control p{margin:0;padding:0}.crud-form .tn-check-box-list .p-row{display:block;padding:.5em;width:100%}.crud-form dropdown,.crud-form tn-mask{width:100%}.crud-form .tn-dropdown{min-height:32px}.crud-form .tn-dropdown.free-text.horizontal{display:flex}.crud-form .tn-dropdown.free-text.horizontal>div{flex-grow:1;padding-left:.5em;padding-right:.5em}.crud-form .tn-dropdown.free-text.horizontal>div:first-child{padding-left:0}.crud-form .tn-dropdown.free-text.horizontal>div:last-child{padding-right:0}.crud-form .tn-dropdown.free-text.vertical input.ui-inputtext.input-free-text{margin-top:.5em}.crud-form.assessment .label-control{font-weight:700}.crud-form.assessment .label-control.haveIndex{display:block;margin-bottom:5px;padding-left:20px;position:relative}.crud-form.assessment .label-control.haveIndex:before{content:\" \" attr(label-index) \".\";left:0;position:absolute;top:0}.crud-form.assessment .ViewMode{border-bottom:none}.crud-form.assessment .ViewMode .label-control{margin-bottom:0}body .ui-inputtext.min-width{padding:6px}.ps__rail-x,.ps__rail-y{z-index:2}.zIndex5 .ps__rail-x,.zIndex5 .ps__rail-y{z-index:5}.table-sticky table{border-collapse:separate;border-spacing:0}.table-sticky tr td,.table-sticky tr th{border:1px solid #eee!important;border-left:none!important;border-top:none!important}.table-sticky tr td:first-child,.table-sticky tr th:first-child{border-left:1px solid #eee!important}.table-sticky tr td:last-child,.table-sticky tr th:last-child{border-right:none!important}.table-sticky tr:first-child th{border-top:1px solid #eee!important}.table-sticky th{background:#eee}.table-sticky tbody td.disabled{background:#eee!important}.table-sticky tbody td.disabled:not(:last-child){border-right:1px solid #fff!important}.table-sticky.fix-height tr:first-child th{position:sticky;top:0;z-index:2}.container-flex{align-items:center;display:flex}.container-flex>div:first-child{flex:0 0 auto;margin-right:.5em}.container-flex>div:last-child{flex-grow:1}.container-control{display:flex}.container-control>span.label{flex:0 0 auto;padding-right:.5em;padding-top:.5em}.container-control>span.label+*{flex-grow:1;flex-shrink:1;position:relative}.container-control>span.label+* .tn-dropdown,.container-control>span.label+* .ui-autocomplete-multiple,.container-control>span.label+* .ui-inputgroup .ui-inputtext{width:100%}.container-control>span.label+* .validation-container{margin-top:3px}.container-control>span.label+* .validation-container .validate-item{white-space:unset}.container-control>span.label+*>div{left:0;position:absolute;top:0;width:100%}.container-control.no-label>span.label{display:none}.container-control.inline{display:inline-flex}.align-flex-center{align-items:center;display:flex;justify-content:center}@media print{.isPrinting>*{display:none}.isPrinting app-print-layout{display:block}}.layout-wrapper .topbar .topbar-left,.layout-wrapper .topbar .topbar-right{background:#397ac3}#searchResultPanel-holder{padding:0 .5em}.cus-dropdown{line-height:normal;margin-right:1em}.tn-thumbnail{padding:.5rem}.tn-thumbnail.tn-thumbnail.tn-thumbnail{box-sizing:border-box}.fa-10:before{content:\"A+\";font-family:cursive;font-weight:700}.layout-wrapper .topbar .topbar-right #menu-button i{font-size:20px;margin-top:4px}.layout-wrapper .layout-menu li a i.menuitem-toggle-icon{font-size:15px;margin-left:auto}.flex-container-main-content{display:flex;flex-direction:column}.flex-container-main-content>div:last-child{background-color:#f4f4f4;display:flex;flex:1 1;overflow:hidden;position:relative}.flex-container-main-content>div:last-child>div{height:100%;left:0;overflow:hidden;padding-top:.5em;position:absolute;top:0;width:100%}.flex-container-main-content .block-with-button-search{display:flex;justify-content:flex-end}.flex-container-main-content .block-with-button-search>*{margin-left:.5em}.flex-container-main-content .block-with-button-search>input{height:26px;margin-left:0;max-width:200px;width:100%}.flex-container-main-content .block-with-button-search>dropdown{max-width:140px;width:100%}.flex-container-main-content .title-main-component{border-bottom:2px solid #1ca7ff}.clickable-table.clickable-table{cursor:pointer}.main-crud-container{height:calc(100vh - 76px)}.flex-container-fit-child{display:flex;flex-direction:column;height:100%;overflow:hidden}.flex-container-fit-child>div.fit-content{flex:1 1;position:relative}.flex-container-fit-child>div.fit-content>div{height:100%;overflow:auto;position:absolute;width:100%}.waiting-box{display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.waiting-box .overlay{background-color:red;background-color:hsla(0,0%,42.7%,.5019607843137255);height:100%;width:100%}.waiting-box .content-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.waiting-box.show{display:block}.function-topbar>*{vertical-align:top}.function-topbar button{width:auto}.function-topbar p-fileUpload{margin-right:1em}.function-topbar .container-control{display:inline-flex;line-height:normal}.function-topbar .container-control dropdown{width:100%}:focus{outline-color:#a6d5fa!important}address{font-style:normal}body .p-toast .p-toast-message{border-radius:0;border-width:0 0 0 4px!important}.__status span,.status span{font-size:.8rem}p-table.single-check .p-datatable .p-datatable-tbody>tr{cursor:pointer}p-table.single-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight{background:#e3f2fd!important;outline:2px solid #a6d5fa}p-table.single-check .p-datatable .p-datatable-tbody>tr td.sticky .fix-sticky.top{display:none}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight{background:#e3f2fd!important}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight td{border-color:#fff}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight td .fix-sticky{background-color:#fff}.tn-animated-left-arrow-icon,.tn-animated-right-arrow-icon{height:32px;position:relative;width:14px;z-index:10}.tn-animated-right-arrow-icon{-webkit-animation:arrowBounceToRight .8s ease-in-out infinite alternate;animation:arrowBounceToRight .8s ease-in-out infinite alternate}.tn-animated-left-arrow-icon{-webkit-animation:arrowBounceToLeft .8s ease-in-out infinite alternate;animation:arrowBounceToLeft .8s ease-in-out infinite alternate}.tn-animated-left-arrow-icon:after,.tn-animated-left-arrow-icon:before,.tn-animated-right-arrow-icon:after,.tn-animated-right-arrow-icon:before{background-color:#88b0dd;content:\"\";display:block;height:20px;position:absolute;width:5px}.tn-animated-right-arrow-icon:before{left:4px;top:0;transform:rotate(-35deg)}.tn-animated-right-arrow-icon:after{left:4px;top:14px;transform:rotate(35deg)}.tn-animated-left-arrow-icon:before{right:4px;top:0;transform:rotate(35deg)}.tn-animated-left-arrow-icon:after{right:4px;top:14px;transform:rotate(-35deg)}@-webkit-keyframes arrowBounceToLeft{0%{transform:translateX(-3px)}to{transform:translateX(3px)}}@keyframes arrowBounceToLeft{0%{transform:translateX(-3px)}to{transform:translateX(3px)}}@-webkit-keyframes arrowBounceToRight{0%{transform:translateX(3px)}to{transform:translateX(-3px)}}@keyframes arrowBounceToRight{0%{transform:translateX(3px)}to{transform:translateX(-3px)}}.pass{color:#49c949}.not-pass,.pass{margin:5px;text-align:center}.not-pass{color:red}"]
+            },] }
+];
+ChatBoxComponent.ctorParameters = () => [
+    { type: Injector },
+    { type: ChatService },
+    { type: MessageBoardService },
+    { type: UserService },
+    { type: CheckControlVisibleService },
+    { type: SignalRService },
+    { type: FileExplorerService },
+    { type: CrudService },
+    { type: NotifierService },
+    { type: ModuleConfigService }
+];
+ChatBoxComponent.propDecorators = {
+    taskId: [{ type: Input }],
+    serviceCode: [{ type: Input }],
+    entity: [{ type: Input }],
+    users: [{ type: Input }],
+    showSendMessageBox: [{ type: Input }],
+    input: [{ type: ViewChild, args: ['input',] }],
+    fileElement: [{ type: ViewChild, args: ['fileElement',] }]
+};
+
+// fix for prod build
+// const objectToFormData = objectToFormData_;
+class ChatSendMessageBoxComponent extends ComponentBase {
+    constructor(injector, _chatService, _checkControlVisible, _fileExplorerNewService, _notifierService) {
+        super(injector);
+        this._chatService = _chatService;
+        this._checkControlVisible = _checkControlVisible;
+        this._fileExplorerNewService = _fileExplorerNewService;
+        this._notifierService = _notifierService;
+        this.model.driveFileDialog = { popupSize: {} };
+    }
+    ngOnInit() {
+        console.log('inside ChatSendMessageBoxComponent');
+        this.model.dataSource = [];
+        this.model.correlationIds = [];
+        this.model.attachments = [];
+        this.model.maxFileSize = 3000000;
+        this.model.fileViewer = {};
+        this._checkControlVisible.checkDisplayStatus(this.input.nativeElement).then(rs => {
+            this.input.nativeElement.focus();
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_INSTANCE_ID_LOADED, data => {
+            if (data) {
+                this.model.id = data;
+                this.chatInstanceId = data;
+                this.notifiUserOnline(this.model.id);
+            }
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.CHAT_MOUSE_UP, data => {
+            if (data) {
+                this.onMouseUp(null);
+            }
+        });
+        this.rootContext.subscribe('DRIVE_FILE_DIALOG.CLOSE_POPUP', response => {
+            if (response != null) {
+                const type = this._commonService.isImage(response.name) ? 'image' : 'file';
+                const attachmentItem = {
+                    type: type,
+                    fileId: response.id,
+                    fileName: response.name
+                };
+                if (attachmentItem.type == 'image') {
+                    // Get preview url
+                    this._fileExplorerNewService.getImageFileBase64(response.id).then(result => {
+                        attachmentItem.url = result;
+                    });
+                }
+                this.model.attachments.push(attachmentItem);
+                this.input.nativeElement.focus();
+                this.model.classHasAttachment = 'attached-file';
+                this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_ATTACH_FILE, true);
+            }
+            this.model.driveFileDialog.show = false;
+        });
+        this.rootContext.subscribe(ComCtxConstants.ROOT.DESTROY_TASK_DETAIL_COMPONENT, data => {
+            if (this.model.userOnlineId) {
+                this.removeUserOnline(this.model.userOnlineId);
+            }
+        });
+    }
+    browseFileFromPersonal() {
+        this.model.driveFileDialog = {
+            show: true
+        };
+    }
+    onSendMessage(message) {
+        if ((!message || message.trim() == '') && this.model.attachments.length === 0) {
+            return;
+        }
+        if (!message) {
+            message = '';
+        }
+        message = message.trim();
+        const objToSend = {
+            chatId: this.model.id,
+            messageContent: message,
+            correlationId: this._commonService.guid()
+        };
+        const formData = new FormData();
+        for (const key in objToSend) {
+            formData.append(key, objToSend[key]);
+        }
+        for (const item of this.model.attachments) {
+            // const item = this.model.attachments[itejm];
+            if (item.fileId != null) {
+                formData.append('fileId', item.fileId);
+            }
+            else {
+                if (item.type == 'image') {
+                    formData.append('files', item.data, item.fileName);
+                }
+                else {
+                    formData.append('files', item.data);
+                }
+            }
+        }
+        this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_SENDING, {
+            message: objToSend,
+            attachments: this.model.attachments
+        });
+        // reset attachment list
+        this.model.attachments.length = 0;
+        this.model.content = '';
+        this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_ATTACH_FILE, false);
+        this.model.classHasAttachment = '';
+        this._chatService.sendMessage(formData).then(rs => {
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_SENT, { message: objToSend, status: true });
+        }).catch((err) => {
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_SENT, {
+                message: objToSend,
+                status: false,
+                error: err.error
+            });
+            this._notifierService.showWarningByResponse(err);
+        });
+    }
+    handlePaste(event) {
+        // console.log(event.clipboardData);
+        const objectData = this.getImageClipboardData(event);
+        if (objectData) {
+            this.model.attachments.push({
+                type: 'image',
+                url: objectData.url,
+                data: objectData.blob, fileName: this._commonService.guid() + '.png'
+            });
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_ATTACH_FILE, true);
+            this.model.classHasAttachment = 'attached-file';
+        }
+    }
+    getImageClipboardData(e) {
+        for (let i = 0; i < e.clipboardData.items.length; i++) {
+            const item = e.clipboardData.items[i];
+            if (item.type.indexOf('image') != -1) {
+                const imageObj = item.getAsFile();
+                if (imageObj.size < this.model.maxFileSize) {
+                    return { url: URL.createObjectURL(imageObj), blob: imageObj };
+                }
+                else {
+                    return null;
+                }
+            }
+        }
+        return null;
+    }
+    browseFileFromComputer() {
+        this.fileElement.advancedFileInput.nativeElement.click();
+    }
+    onSelectFileFromComputer(evt) {
+        try {
+            if (evt.files && evt.files.length > 0) {
+                for (let index = 0; index < evt.files.length; index++) {
+                    const fileName = evt.files[index].name;
+                    const type = this._commonService.isImage(fileName) ? 'image' : 'file';
+                    const attachmentItem = {
+                        type: type,
+                        data: evt.files[index], fileName: fileName
+                    };
+                    if (attachmentItem.type == 'image') {
+                        attachmentItem.url = evt.files[index].objectURL.changingThisBreaksApplicationSecurity;
+                    }
+                    this.model.attachments.push(attachmentItem);
+                }
+                this.input.nativeElement.focus();
+                this.model.classHasAttachment = 'attached-file';
+                this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_ATTACH_FILE, true);
+            }
+        }
+        catch (e) {
+            console.error('error on process select file computer', e);
+        }
+        this.fileElement.clear();
+    }
+    removeAttachment(item) {
+        const attachments = this.model.attachments;
+        const index = attachments.findIndex(x => x.url == item.url);
+        this.model.attachments.splice(index, 1);
+        if (this.model.attachments.length === 0) {
+            this.model.classHasAttachment = '';
+            this.rootContext.fireEvent(ComCtxConstants.ROOT.CHAT_MESSAGE_ATTACH_FILE, false);
+        }
+    }
+    onMouseUp($event) {
+        this.input.nativeElement.focus();
+    }
+    cancelBlur(event) {
+        event.preventDefault();
+    }
+    ngOnDestroy() {
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_INSTANCE_ID_LOADED);
+        this.rootContext.unSubscribe(ComCtxConstants.ROOT.CHAT_MOUSE_UP);
+    }
+    notifiUserOnline(chatId) {
+        this._chatService.insertUserOnline(chatId).then(rs => {
+            if (rs.success) {
+                this.model.userOnlineId = rs.data;
+            }
+        });
+    }
+    removeUserOnline(userOnlineId) {
+        this.chatInstanceId = '';
+        this._chatService.removeUserOnline(userOnlineId).then(rs => {
+            if (rs.success) {
+                this._notifierService.showWarning('Đã bỏ người dùng thành công');
+            }
+        });
+    }
+    clickInputText() {
+        if (this.model.instanceId) {
+            this._chatService.markAsReadAllContents(this.model.id).then(rs => {
+                console.log('markAsReadAllContents');
+            });
+        }
+    }
+}
+ChatSendMessageBoxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'chat-send-message-box',
+                template: "<div class=\"dashboard\" (mouseup)=\"onMouseUp($event)\">\r\n    <div class=\"chat\">\r\n        <div class=\"new-message\">\r\n            <div class=\"message-emotion\">\r\n                <i class=\"far fa-smile\" style=\"color: gray;\" disabled=\"true\"></i>\r\n            </div>\r\n            <div class=\"message-attachment\" pTooltip=\"\u0110\u00EDnh k\u00E8m file\" tooltipPosition=\"top\" (click)=\"op.toggle($event)\">\r\n                <i class=\"fas fa-paperclip\"></i>\r\n            </div>\r\n            <p-overlayPanel #op [dismissable]=\"true\" [appendTo]=\"'body'\" [styleClass]=\"'paging-advance-overlay'\"\r\n                            (mouseup)=\"onMouseUp($event)\">\r\n                <ul class=\"paging-advance\">\r\n                    <li (click)=\"browseFileFromPersonal()\">T\u1EEB file c\u00E1 nh\u00E2n</li>\r\n                    <li (click)=\"browseFileFromComputer()\">T\u1EA3i l\u00EAn t\u1EEB m\u00E1y t\u00EDnh</li>\r\n                </ul>\r\n            </p-overlayPanel>\r\n            <div class=\"message-input p-float-label\">\r\n                <input #input pInputText\r\n                       id=\"message\"\r\n                       autocomplete=\"off\" autocorrect=\"off\"\r\n                       spellcheck=\"false\" class=\"ui-inputtext\"\r\n                       type=\"text\" placeholder=\"N\u1ED9i dung tin nh\u1EAFn\"\r\n                       [(ngModel)]=\"model.content\"\r\n                       (keyup.enter)=\"onSendMessage($event.target.value)\" (keydown.shift.tab)=\"cancelBlur($event)\"\r\n                       (keydown.tab)=\"cancelBlur($event)\" (paste)=\"handlePaste($event)\" (click)=\"clickInputText()\"/>\r\n            </div>\r\n            <div>\r\n                <button pButton class=\"p-button-danger\" icon=\"fas fa-send\" type=\"button\" label=\"G\u1EEDi\"\r\n                        (click)=\"onSendMessage(model.content)\">\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"attachment-list\" [ngClass]=\"model.classHasAttachment\">\r\n            <tn-custom-scrollbar #scrollbar [style]=\"{'height': '100px'}\">\r\n                <div *ngFor=\"let item of model.attachments\" class=\"attachment-item\">\r\n                    <img *ngIf=\"item.type == 'image'\" [src]=\"item.url | safeUrl\"/>\r\n                    <span *ngIf=\"item.type == 'file'\">{{item.fileName}}</span>\r\n                    <i class=\"far fa-times-circle label-danger remove-file-attachment\"\r\n                       (click)=\"removeAttachment(item)\"></i>\r\n                </div>\r\n            </tn-custom-scrollbar>\r\n            <!--            <div class=\"clearfix\"></div>-->\r\n        </div>\r\n    </div>\r\n</div>\r\n<p-fileUpload [ngStyle]=\"{'display': 'none'}\" #fileElement (onSelect)=\"onSelectFileFromComputer($event)\"\r\n              multiple=\"multiple\" name=\"fileUpload\" [maxFileSize]=\"model.maxFileSize\" auto=\"false\">\r\n</p-fileUpload>\r\n\r\n<!-- <app-drive-file-dialog *ngIf=\"model.driveFileDialog.show\" [parentDataContext]=\"dataContext\"\r\n    []=\"model.driveFileDialog\" #driveFileDialog>\r\n</app-drive-file-dialog> -->\r\n",
+                providers: [ComponentContextService],
+                styles: ["", "@charset \"UTF-8\";@import url(C:\\Users\\vietp\\source\\repos\\5.1\\shared\\AppSharedV5\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Users\\vietp\\source\\repos\\5.1\\shared\\AppSharedV5\\node_modules\\jsoneditor\\dist\\jsoneditor.min.css);.flex{display:flex}.flex .fit{flex:1 1}.flex.flex-column{flex-direction:column}.flex.flex-wrap{flex-wrap:wrap}.flex.center-v{align-items:center}.flex.center-all,.flex.center-h{justify-content:center}.flex.center-all{align-items:center}.validate-item{color:#e00000;display:inline-block;font-size:.9em;white-space:nowrap}.tn-scroll-bar.bgWhite>div,.validate-item{background-color:#fff}.label-primary{background-color:#1ab394;padding:2px}.label-danger,.label-primary{border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px}.label-danger{background-color:#ed5565;padding:2px 5px}.label-warning{background-color:#b8860b}.label-secondary,.label-warning{border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px;padding:2px}.label-secondary{background-color:#a9a9a9}.label-done{background-color:#3b1ef7;border-radius:.25em;color:#fff;display:inline-block;font-size:12px;margin-left:3px;margin-right:3px;min-width:60px;padding:2px}.text-navy{color:#1ab394!important}.text-danger{color:red!important}.fa-user-edit{font-size:14px}.flexcolumn{border:1px solid #eee;border-radius:5px;min-height:80px;overflow-x:hidden;overflow-y:hidden}.flexcolumn,.has2ScrollZone2 .flexcolumn{max-height:calc(100vh - 180px)}.headerNoBorder>th{border:none!important;border-bottom:1px solid #eee!important}.cellNoBorder table tr td{border:0!important}.layout-wrapper .layout-main{overflow:hidden;padding:60px 0 0}div.circleButton{border-radius:50%;display:inline-block;height:32px;line-height:32px;margin-bottom:4px;margin-top:4px;overflow:hidden;position:relative;text-align:center;transform:perspective(1px);width:32px}div.circleButton>a{line-height:32px;padding:0!important}div.circleButton>a>i{width:24px!important}div.circleButton:before{background:#e6e6e6;border-radius:50%;bottom:0;content:\"\";left:0;position:absolute;right:0;top:0;transform:scale(0);transition:all .3s cubic-bezier(.4,.34,.01,.97);z-index:-1}div.circleButton:hover:before{transform:scale(1)}.message-notice{background:#e0e0e0;text-align:center}.message-created-by{color:#888;font-size:.82em;font-weight:400;margin-bottom:3px;margin-left:45px;margin-top:5px}.message-created{color:#495057;display:inline-block;font-size:.82em;margin-bottom:0;margin-top:0}.message-own .message-created{padding-left:10px;padding-right:6px}.message-from .message-created{padding-left:6px;padding-right:10px}.message-content{color:#000;line-height:20px;margin-bottom:6px;margin-top:3px;position:relative}.message-content i{display:none}.message-content:hover i{display:block}.message-content:hover{padding-right:20px!important}.chat-box-content{max-height:500px}.attachment-list .attachment-item{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background:#f1f1f1;border:1px solid #ccc;border-radius:8px;box-shadow:1px 2px 3px rgba(0,0,0,.06);float:left;height:84px;margin:8px;overflow:hidden;position:relative;text-align:center;user-select:none;width:84px}.attachment-list .attachment-item img{height:100%;width:100%}.attachment-list .attachment-item span{left:0;padding:5px;position:absolute;top:25px;width:100%;word-break:break-all}.clearfix{clear:both}.dashboard .chat ul li img.message-img{float:none;height:120px;margin-left:0;width:auto}.message-attachment{cursor:pointer;font-size:1.5em;margin:0 5px 0 0;position:relative}.hidden{display:none}.message-input{width:100%}.message-input label{font-size:1.2rem}.remove-file-attachment{background:#495057;border-radius:50%;color:#fff;cursor:pointer;font-size:20px;position:absolute;right:5px;top:5px}.attachment-list{background:#fff;bottom:51px;box-shadow:0 -2px 3px -3px rgba(0,0,0,.21176470588235294);display:none;height:100px;left:-15px;position:absolute;width:calc(100% + 30px)}.attachment-list.attached-file{display:block}.dashboard{margin-bottom:-15px;margin-top:-5px}.dashboard .timeline>.ui-g .ui-g-9 .event-text{color:#555;white-space:nowrap}.dashboard .timeline>.ui-g .ui-g-9 .event-text.event-text2{line-height:18px;padding-left:30px;text-align:justify;white-space:pre-wrap}.dashboard .timeline>.ui-g .ui-g-9 .event-text.event-text2 i{left:20px;margin-top:3px;position:absolute}.new-message{align-items:center;justify-content:center}.dashboard .chat .new-message{border:0;display:flex;margin:0;padding:0;text-align:left}.dashboard .chat .new-message i{color:#495057}.dashboard .chat .new-message .message-attachment{border:0}.dashboard .chat .new-message .button-send{display:inline-block;line-height:40px;position:relative}.dashboard .chat .new-message .button-send .p-button-label{text-align:center}.dashboard .chat .new-message .message-emotion{display:inline-block;height:100%;line-height:40px;text-align:center;width:40px}.dashboard .chat .new-message .message-emotion i{font-size:24px;line-height:inherit}.dashboard .chat .new-message .message-input{width:calc(100% - 155px)}.dashboard .chat ul li.message-from,.dashboard .chat ul li.message-own{padding:0}.dashboard .chat ul li.message-from>span{background-color:#f0e3fd;border:0;border-radius:2px 20px 20px 2px}.dashboard .chat ul li.message-from>.first,.dashboard .chat ul li.message-from>.middle{margin-left:45px!important}.dashboard .chat ul li.message-from>.last{border-radius:2px 20px 20px 20px;margin-left:45px!important}.dashboard .chat ul li.message-from>img{border-radius:50%;margin-top:5px;position:absolute;width:36px}.dashboard .chat ul li.message-own>span{background-color:#def6f8;border:0;border-radius:20px 2px 2px 20px;text-align:right}.dashboard .chat ul li.message-own>span.sending{background-color:#eee}.dashboard .chat ul li.message-own>span.last{border-radius:20px 2px 20px 20px}.dashboard .chat ul li.message-own .attachment span.attachment-item{background-color:#f1f1f1!important;border:0!important;padding-left:0;padding-right:0}.dashboard .chat ul li.message-own .attachment span.attachment-item a{color:#555;cursor:pointer;display:inline-block;font-weight:700}.dashboard .chat ul li.message-own>div.file{background:#f1f1f1;border:1px solid #e4e4e4;border-radius:6px;display:inline-block;margin:1px;overflow:hidden;text-align:right}.dashboard .chat ul li.message-from .attachment span.attachment-item{background-color:#f1f1f1!important;border:0!important;padding-left:0;padding-right:0}.dashboard .chat ul li.message-from .attachment span.attachment-item a{color:#555;cursor:pointer;display:inline-block;font-weight:700}.dashboard .chat ul li.message-from .attachment span.attachment-item a img{margin-right:0}.dashboard .chat ul li.message-from>div.file{background:#f1f1f1;border:1px solid #e4e4e4;border-radius:6px;display:inline-block;margin:1px;overflow:hidden;text-align:left}.dashboard .chat ul li .attachment span.attachment-item a>i{padding-right:8px}.dashboard .chat ul li div.file p.attachment{display:inline-block;margin-bottom:5px}.dashboard .chat ul li.message-from{text-align:left}.dashboard .chat ul li.message-own{text-align:right}.dashboard .chat ul li>div.file.image{height:170px;max-width:100%;padding:15px;transition:width .15s linear;width:220px}.dashboard .chat ul li>div.file.image p.attachment{height:120px}.dashboard .chat ul li>div.file{padding:15px}.dashboard .chat ul li>div.file p,.dashboard .chat ul li>div.file span{display:inline-block;margin:0;padding:0}.visible{opacity:1;transition:opacity .15s linear;visibility:visible}.hidden{opacity:0;transition:visibility 0s .1s,opacity .1s linear;visibility:hidden}.visible2{opacity:1;transition:opacity .35s linear;visibility:visible}.hidden2{opacity:0;transition:visibility 0s .3s,opacity .3s linear;visibility:hidden}.dashboard .chat{position:relative}.dashboard .chat .scroll-to-bottom{bottom:6px;min-height:40px;padding-right:12px;position:sticky;text-align:right}.dashboard .chat .scroll-to-bottom span{background:#495057;border:2px solid #fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.34901960784313724);color:#fff;cursor:pointer;display:inline-block;font-size:20px;height:35px;line-height:35px;overflow:hidden;text-align:center;width:35px}.dashboard .chat .group-info{line-height:30px;margin:-10px;padding:5px 10px;top:0;z-index:99}.dashboard .chat .group-info,.dashboard .chat .pin{background:#fff;box-shadow:0 0 3px -1px rgba(0,0,0,.21176470588235294);position:sticky}.dashboard .chat .pin{margin-bottom:10px;margin-left:-10px;top:40px;width:calc(100% + 20px);z-index:98}.dashboard .chat ul li.message-from.pin>span,.dashboard .chat ul li.message-own.pin>span{background-color:transparent}.dashboard .chat ul li.message-from.pin>span{margin-left:0}.dashboard .chat .message-content i{color:#495057;cursor:pointer;font-size:11px}.dashboard .chat .pin .message-content i{display:block}.dashboard .chat li.message-from .message-content{padding-left:6px}.dashboard .chat li.message-from .message-content i{padding:5px}.dashboard .chat li.message-own .message-content i{padding:5px;position:absolute;right:-15px}.dashboard .chat .group-info .circleButton{float:right;margin-bottom:0;margin-top:0}.dashboard .chat ul{margin-top:20px;padding:0}.dashboard .chat .new-message .message-input input.ui-inputtext:focus{box-shadow:none;outline:none}.dashboard .chat ul.hasPin{margin-top:10px}.dashboard .chat .group-info a{color:#495057}.normalHtml,.normalHtml b,.normalHtml strong{font-weight:400}.normalHtml{display:inline-block}.avatar-viewer .profile-image{border:1px solid #fff;border-radius:50%;height:40px;margin-top:-6px;width:40px}a.button>i{margin-right:5px}.dashboard .timeline{padding-top:20px}.ui-inputgroup .ui-inputtext{padding-right:0}.new-message .ui-inputtext{width:100%}.full-screen,.full-screen>.p-dialog{height:100%!important;left:0!important;max-height:100%;min-height:unset!important;min-width:100%!important;top:0!important;width:100%!important}#image-view-list.image-gallery-2{background-color:rgba(0,0,0,.4);height:calc(100vh - 41px);margin:-14px auto 0;touch-action:none;width:100%}#image-view-list.image-gallery-2 .image-container{background-color:transparent;border:0;bottom:0;height:85%;margin:auto}#image-view-list.image-gallery-2 .image-container .iv-snap-view{bottom:20px;left:calc(50% - 75px);top:auto}#image-view-list.image-gallery-2 .image-container .iv-image-view img{touch-action:auto}#image-view-list .inline-icon{margin-top:-41px}#image-view-list .footer-info,#image-view-list .material-icons.next,#image-view-list .material-icons.prev{display:none}#image-view-list .options-image-viewer{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;margin-right:37px;user-select:none}.mobile-image-viewer-close{color:#fff;cursor:pointer;font-size:x-large;height:42px;line-height:42px;padding-right:7px;padding-top:2px;position:absolute;right:0;text-align:center;top:0;vertical-align:middle;width:37px}.mobile-image-viewer-close:hover{color:#feca37!important}.hide-holder{padding:0}.file-ex-name{word-break:break-all}.box-function{background:#fff;border-radius:0 0 5px 5px;border-top:1px solid #e8e8e8;bottom:0;left:0;padding:8px 30px;position:absolute;text-align:right;width:100%}.box-function button{margin-left:5px}.quick-note-button-holder{bottom:40px;display:none;height:50px;position:absolute;right:50px;width:50px;z-index:99}.quick-note-button{background:#ffc107;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:2em;height:50px;line-height:50px;outline:none;text-align:center;width:50px}.quick-note-button:hover{color:#fff}.all-note-button{background:#ffd24b;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:1.5em;height:40px;line-height:40px;outline:none;position:absolute;right:5px;text-align:center;top:5px;transition:right;transition-duration:.16s;transition-timing-function:ease-in;width:40px;z-index:-1}.all-note-button:hover{color:#fff}.setting-note-button{background:#ffd24b;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px 0 #b9b9b9;color:#fff;display:block;font-size:1.5em;height:40px;line-height:40px;outline:none;position:absolute;right:5px;text-align:center;top:5px;transition:right;transition-duration:.16s;transition-timing-function:ease-in;width:40px;z-index:-1}.setting-note-button:hover{color:#fff}.pinned-notes-holder{bottom:20px;display:none;left:20px;position:absolute;width:250px;z-index:98}.pinned-notes{background:transparent;display:block;outline:none;padding:0}.pinned-notes-header{font-size:1rem;font-weight:700}.pinned-notes-setting{position:absolute;right:.5rem}.pinned-note{background-color:#fff1ac;box-shadow:1px 2px 3px rgba(185,139,6,.6313725490196078);font-size:.8rem;margin-bottom:10px;padding:0;position:relative}.pinned-note:last-child{margin-bottom:0}.pinned-notes-minimize-button{background:#ffc003;border:1px solid #fff;border-radius:50%;box-shadow:1px 2px 3px rgba(185,139,6,.6313725490196078);color:#fff;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:-15px;text-align:center;top:-15px;width:25px;z-index:1}.pinned-note-header-line{border:1px solid #fff;box-shadow:1px 1px 2px rgba(0,0,0,.4);height:calc(100% - 1rem);left:3px;margin-bottom:.5rem;margin-top:.5rem;max-height:20px;position:absolute;width:13px}.pinned-note-header-right{cursor:pointer;float:right;margin-left:3px;width:32px}.pinned-note-header-time{font-size:.6rem}.pinned-note-header-button-unpin{display:none;float:left;height:14px;margin-right:2px;opacity:.8;width:14px}.pinned-note-header-button-complete{display:none;padding-top:2px}.pinned-note-body{float:right;padding:.5rem .5rem .5rem 25px;width:100%}.pinned-note-body:hover{background-color:#feeb82}.pinned-note-body:hover .pinned-note-header-time{display:none}.pinned-note-body:hover .pinned-note-header-button-complete,.pinned-note-body:hover .pinned-note-header-button-unpin{display:block}.pinned-note-line-title{color:#333;display:block;font-weight:700;padding-bottom:6px}.pinned-note-line{display:block}.view-port{border-radius:5px;box-shadow:0 0 0 9999px rgba(0,0,0,.5882352941176471);display:none;height:0;width:0;z-index:999}.view-port,.view-port-mask{background:transparent;position:absolute}.view-port-mask{display:block;height:100%;left:0;top:0;width:100%;z-index:9998}.tinymce-control{border:1px solid #ccc;display:none;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;width:100%}.input-tab-trap{filter:alpha(opacity=0)!important;opacity:0!important;overflow:hidden!important;width:0!important}.color-value input{font-size:.8em;line-height:16px}.dialog-material.mobile{width:100%!important}audio,audio:focus,video,video:focus{outline:none}.iv-image-view img.iv-image{-webkit-animation:fadein .5s;animation:fadein .5s;visibility:hidden!important}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}.iv-image-view img.iv-image.show{visibility:visible!important}.row-line{padding-bottom:0;padding-top:0}.fc-ltr{padding-bottom:7px}.padding-bottom-5px{padding-bottom:5px}.no-margin{margin:0!important}.no-padding{padding:0}.no-padding-left{padding-left:0}.float-left{float:left}body .fc .fc-toolbar .fc-button{background-color:#007ad9;border:1px solid #007ad9;border-radius:3px;color:#fff;font-size:14px;transition:background-color .2s,box-shadow .2s}body .fc .fc-toolbar .fc-button:enabled:hover{background-color:#116fbf;border-color:#116fbf;color:#fff}body .fc .fc-toolbar .fc-button:focus{box-shadow:0 0 0 .2em #8dcdff;outline:0 none;outline-offset:0}body .fc .fc-toolbar .fc-button-group .fc-button{border-radius:0}body .fc .fc-toolbar .fc-button-group .fc-button:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}body .fc .fc-toolbar .fc-button-group .fc-button:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}body .fc .fc-toolbar .fc-right .fc-button{border-radius:0}body .fc .fc-toolbar .fc-right .fc-button:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}body .fc .fc-toolbar .fc-right .fc-button:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}.fc-toolbar>*>:not(:first-child){margin-left:0}.fc-axis,.fc-dayGridMonth-button,.fc-timeGridDay-button,.fc-timeGridWeek-button,.old-content{line-height:0;text-indent:-9999px}.fc-axis:after,.fc-dayGridMonth-button:after,.fc-timeGridDay-button:after,.fc-timeGridWeek-button:after,.new-content{display:block;line-height:normal;text-indent:0}.fc-dayGridMonth-button:after{content:\"Th\u00E1ng\";padding:.2em}.fc-timeGridWeek-button:after{content:\"Tu\u1EA7n\";padding:.2em}.fc-timeGridDay-button:after{content:\"Ng\u00E0y\";padding:.2em}body .fc th{background-color:#f4f4f4;border:1px solid #c8c8c8;color:#333;padding:.571em 1em}.ui-fluid .button-group button,.ui-fluid .button-group p-button{margin-right:.5em!important;text-align:left;width:auto}.layout-wrapper .layout-menu-container{z-index:97}.base-status,.base-status-aborted,.base-status-approved,.base-status-completed,.base-status-create-new,.base-status-ended,.base-status-high,.base-status-immediately,.base-status-low,.base-status-medium,.base-status-on-conducting,.base-status-on-going,.base-status-pending,.base-status-rejected,.base-status-returned,.base-status-urgent{border-radius:.25em;color:#fff;font-size:.8em;padding:3px;text-align:center}.base-status-create-new{background-color:#f2f2f2;color:#666}.base-status-on-conducting,.base-status-on-going{background-color:#337ab7}.base-status-pending{background-color:#ffba01}.base-status-approved{background-color:#34a835}.base-status-returned{background-color:#ffba01}.base-status-rejected{background-color:#d9534f}.base-status-completed{background-color:#34a835}.base-status-aborted{background-color:#ffba01}.base-status-ended{background-color:#34a835}.base-status-low,.base-status-medium{background-color:#f2f2f2;color:#666}.base-status-high{background-color:#ffba01}.base-status-immediately,.base-status-urgent{background-color:#d9534f}.text-align-center{text-align:center}.font-weight-bold{font-weight:700}.landing-body .landing-menu li a:hover{border-bottom:none}.landing-body .landing-menu li:first-child{margin-left:8px}.crud-form .label-control p{margin:0;padding:0}.crud-form .tn-check-box-list .p-row{display:block;padding:.5em;width:100%}.crud-form dropdown,.crud-form tn-mask{width:100%}.crud-form .tn-dropdown{min-height:32px}.crud-form .tn-dropdown.free-text.horizontal{display:flex}.crud-form .tn-dropdown.free-text.horizontal>div{flex-grow:1;padding-left:.5em;padding-right:.5em}.crud-form .tn-dropdown.free-text.horizontal>div:first-child{padding-left:0}.crud-form .tn-dropdown.free-text.horizontal>div:last-child{padding-right:0}.crud-form .tn-dropdown.free-text.vertical input.ui-inputtext.input-free-text{margin-top:.5em}.crud-form.assessment .label-control{font-weight:700}.crud-form.assessment .label-control.haveIndex{display:block;margin-bottom:5px;padding-left:20px;position:relative}.crud-form.assessment .label-control.haveIndex:before{content:\" \" attr(label-index) \".\";left:0;position:absolute;top:0}.crud-form.assessment .ViewMode{border-bottom:none}.crud-form.assessment .ViewMode .label-control{margin-bottom:0}body .ui-inputtext.min-width{padding:6px}.ps__rail-x,.ps__rail-y{z-index:2}.zIndex5 .ps__rail-x,.zIndex5 .ps__rail-y{z-index:5}.table-sticky table{border-collapse:separate;border-spacing:0}.table-sticky tr td,.table-sticky tr th{border:1px solid #eee!important;border-left:none!important;border-top:none!important}.table-sticky tr td:first-child,.table-sticky tr th:first-child{border-left:1px solid #eee!important}.table-sticky tr td:last-child,.table-sticky tr th:last-child{border-right:none!important}.table-sticky tr:first-child th{border-top:1px solid #eee!important}.table-sticky th{background:#eee}.table-sticky tbody td.disabled{background:#eee!important}.table-sticky tbody td.disabled:not(:last-child){border-right:1px solid #fff!important}.table-sticky.fix-height tr:first-child th{position:sticky;top:0;z-index:2}.container-flex{align-items:center;display:flex}.container-flex>div:first-child{flex:0 0 auto;margin-right:.5em}.container-flex>div:last-child{flex-grow:1}.container-control{display:flex}.container-control>span.label{flex:0 0 auto;padding-right:.5em;padding-top:.5em}.container-control>span.label+*{flex-grow:1;flex-shrink:1;position:relative}.container-control>span.label+* .tn-dropdown,.container-control>span.label+* .ui-autocomplete-multiple,.container-control>span.label+* .ui-inputgroup .ui-inputtext{width:100%}.container-control>span.label+* .validation-container{margin-top:3px}.container-control>span.label+* .validation-container .validate-item{white-space:unset}.container-control>span.label+*>div{left:0;position:absolute;top:0;width:100%}.container-control.no-label>span.label{display:none}.container-control.inline{display:inline-flex}.align-flex-center{align-items:center;display:flex;justify-content:center}@media print{.isPrinting>*{display:none}.isPrinting app-print-layout{display:block}}.layout-wrapper .topbar .topbar-left,.layout-wrapper .topbar .topbar-right{background:#397ac3}#searchResultPanel-holder{padding:0 .5em}.cus-dropdown{line-height:normal;margin-right:1em}.tn-thumbnail{padding:.5rem}.tn-thumbnail.tn-thumbnail.tn-thumbnail{box-sizing:border-box}.fa-10:before{content:\"A+\";font-family:cursive;font-weight:700}.layout-wrapper .topbar .topbar-right #menu-button i{font-size:20px;margin-top:4px}.layout-wrapper .layout-menu li a i.menuitem-toggle-icon{font-size:15px;margin-left:auto}.flex-container-main-content{display:flex;flex-direction:column}.flex-container-main-content>div:last-child{background-color:#f4f4f4;display:flex;flex:1 1;overflow:hidden;position:relative}.flex-container-main-content>div:last-child>div{height:100%;left:0;overflow:hidden;padding-top:.5em;position:absolute;top:0;width:100%}.flex-container-main-content .block-with-button-search{display:flex;justify-content:flex-end}.flex-container-main-content .block-with-button-search>*{margin-left:.5em}.flex-container-main-content .block-with-button-search>input{height:26px;margin-left:0;max-width:200px;width:100%}.flex-container-main-content .block-with-button-search>dropdown{max-width:140px;width:100%}.flex-container-main-content .title-main-component{border-bottom:2px solid #1ca7ff}.clickable-table.clickable-table{cursor:pointer}.main-crud-container{height:calc(100vh - 76px)}.flex-container-fit-child{display:flex;flex-direction:column;height:100%;overflow:hidden}.flex-container-fit-child>div.fit-content{flex:1 1;position:relative}.flex-container-fit-child>div.fit-content>div{height:100%;overflow:auto;position:absolute;width:100%}.waiting-box{display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.waiting-box .overlay{background-color:red;background-color:hsla(0,0%,42.7%,.5019607843137255);height:100%;width:100%}.waiting-box .content-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.waiting-box.show{display:block}.function-topbar>*{vertical-align:top}.function-topbar button{width:auto}.function-topbar p-fileUpload{margin-right:1em}.function-topbar .container-control{display:inline-flex;line-height:normal}.function-topbar .container-control dropdown{width:100%}:focus{outline-color:#a6d5fa!important}address{font-style:normal}body .p-toast .p-toast-message{border-radius:0;border-width:0 0 0 4px!important}.__status span,.status span{font-size:.8rem}p-table.single-check .p-datatable .p-datatable-tbody>tr{cursor:pointer}p-table.single-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight{background:#e3f2fd!important;outline:2px solid #a6d5fa}p-table.single-check .p-datatable .p-datatable-tbody>tr td.sticky .fix-sticky.top{display:none}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight{background:#e3f2fd!important}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight td{border-color:#fff}p-table.multi-check .p-datatable .p-datatable-tbody>tr.ui-state-highlight td .fix-sticky{background-color:#fff}.tn-animated-left-arrow-icon,.tn-animated-right-arrow-icon{height:32px;position:relative;width:14px;z-index:10}.tn-animated-right-arrow-icon{-webkit-animation:arrowBounceToRight .8s ease-in-out infinite alternate;animation:arrowBounceToRight .8s ease-in-out infinite alternate}.tn-animated-left-arrow-icon{-webkit-animation:arrowBounceToLeft .8s ease-in-out infinite alternate;animation:arrowBounceToLeft .8s ease-in-out infinite alternate}.tn-animated-left-arrow-icon:after,.tn-animated-left-arrow-icon:before,.tn-animated-right-arrow-icon:after,.tn-animated-right-arrow-icon:before{background-color:#88b0dd;content:\"\";display:block;height:20px;position:absolute;width:5px}.tn-animated-right-arrow-icon:before{left:4px;top:0;transform:rotate(-35deg)}.tn-animated-right-arrow-icon:after{left:4px;top:14px;transform:rotate(35deg)}.tn-animated-left-arrow-icon:before{right:4px;top:0;transform:rotate(35deg)}.tn-animated-left-arrow-icon:after{right:4px;top:14px;transform:rotate(-35deg)}@-webkit-keyframes arrowBounceToLeft{0%{transform:translateX(-3px)}to{transform:translateX(3px)}}@keyframes arrowBounceToLeft{0%{transform:translateX(-3px)}to{transform:translateX(3px)}}@-webkit-keyframes arrowBounceToRight{0%{transform:translateX(3px)}to{transform:translateX(-3px)}}@keyframes arrowBounceToRight{0%{transform:translateX(3px)}to{transform:translateX(-3px)}}.pass{color:#49c949}.not-pass,.pass{margin:5px;text-align:center}.not-pass{color:red}"]
+            },] }
+];
+ChatSendMessageBoxComponent.ctorParameters = () => [
+    { type: Injector },
+    { type: ChatService },
+    { type: CheckControlVisibleService },
+    { type: FileExplorerNewService },
+    { type: NotifierService }
+];
+ChatSendMessageBoxComponent.propDecorators = {
+    fileElement: [{ type: ViewChild, args: ['fileElement', { static: false },] }],
+    input: [{ type: ViewChild, args: ['input', { static: true },] }],
+    driveFileDialog: [{ type: ViewChild, args: ['driveFileDialog', { static: false },] }]
+};
+
+class UserPickerDialogComponent extends DataListBase {
+    constructor(_userService, _injector) {
+        super(_injector);
+        this._userService = _userService;
+        this.STORAGE_KEY_USER_PICKER_NAME = 'user_picker_storage_name';
+        this.STORAGE_KEY_USER_PICKER_ID_USER = 'user_picker_storage_id_user';
+        this.STORAGE_KEY_USER_PICKER_SEARCH_KEY = 'user_picker_storage_search_key';
+        this.STORAGE_KEY_USER_PICKER_NODE_SELECTED = 'user_picker_storage_node';
+        this.rootTreeNode = [
+            {
+                label: '',
+                data: '-1',
+                expandedIcon: 'pi pi-folder-open',
+                collapsedIcon: 'pi pi-folder',
+                children: []
+            }
+        ];
+        this.multiple = false;
+        this.enableCaching = true;
+        this.isFirstLoad = true;
+        this.rootFilter = {};
+    }
+    ngOnInit() {
+        this.setting.baseService = this._userService;
+        super.ngOnInit();
+    }
+}
+UserPickerDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-user-picker-dialog',
+                template: "<p>\r\n  user-picker-dialog works!\r\n</p>\r\n",
+                providers: [ComponentContextService],
+                styles: [""]
+            },] }
+];
+UserPickerDialogComponent.ctorParameters = () => [
+    { type: UserService },
+    { type: Injector }
+];
+UserPickerDialogComponent.propDecorators = {
+    dialog: [{ type: ViewChild, args: ['dialog',] }],
+    multiple: [{ type: Input }],
+    enableCaching: [{ type: Input }],
+    control: [{ type: Input }]
+};
+
 function coreDeclaration() {
     return [
         AddressComponent,
@@ -41890,6 +43444,7 @@ function coreDeclaration() {
         StartWorkflowComponent,
         WorkflowPickerComponent,
         WorkflowSettingNewComponent,
+        PermissionSharingComponent,
         TnDialogComponent,
         TnColorPickerComponent,
         TnCustomScrollbarComponent,
@@ -41956,7 +43511,10 @@ function coreDeclaration() {
         AddNewsComponent,
         CommonDashboardComponent,
         NotFoundComponent,
-        UniversalLinkProcessorComponent
+        UniversalLinkProcessorComponent,
+        ChatBoxComponent,
+        ChatSendMessageBoxComponent,
+        UserPickerDialogComponent
     ];
 }
 function coreModuleImport() {
@@ -43122,61 +44680,6 @@ EformService.ctorParameters = () => [
     { type: ModuleConfigService }
 ];
 
-class CheckControlVisibleService {
-    constructor() { }
-    checkDisplayStatus(elem) {
-        return new Promise((resolve, reject) => {
-            this.doCheck(resolve, elem);
-        });
-    }
-    doCheck(resolve, elem) {
-        let timeoutCheckDisplayStatus;
-        timeoutCheckDisplayStatus = setTimeout(() => {
-            this.doCheck(resolve, elem);
-        }, 100);
-        var newStatus = this.isVisible(elem);
-        if (newStatus) {
-            setTimeout(() => {
-                // show control
-                resolve(true);
-            });
-            clearTimeout(timeoutCheckDisplayStatus);
-        }
-    }
-    isVisible(elem) {
-        const style = getComputedStyle(elem);
-        if (style.display === 'none')
-            return false;
-        if (style.visibility !== 'visible')
-            return false;
-        if (+style.opacity < 0.1)
-            return false;
-        if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
-            elem.getBoundingClientRect().width === 0) {
-            return false;
-        }
-        const elemCenter = {
-            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
-            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
-        };
-        let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
-        if (pointContainer) {
-            do {
-                if (pointContainer === elem)
-                    return true;
-            } while (pointContainer = pointContainer.parentNode);
-        }
-        return false;
-    }
-}
-CheckControlVisibleService.ɵprov = ɵɵdefineInjectable({ factory: function CheckControlVisibleService_Factory() { return new CheckControlVisibleService(); }, token: CheckControlVisibleService, providedIn: "root" });
-CheckControlVisibleService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-CheckControlVisibleService.ctorParameters = () => [];
-
 class ImageService {
     constructor(_moduleConfigService) {
         this._moduleConfigService = _moduleConfigService;
@@ -43738,5 +45241,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, BaseCauHinhWorkflowComponent, BaseCongViecComponent, BaseCongViecFormComponent, BaseDmLoaiCongViecComponent, BaseDmPriorityComponent, BaseMenuService, BaseModule, BaseService, BooleanFormatPipe, ButtonControlSchema, CONFIG_CALENDAR_VIETNAMESE, CalculationEngineService, CanBoHoSoService, CauHinhWorkflowService, CellExcel, CheckBoxListControlSchema, CheckControlVisibleService, CheckDuplicateFieldsValidator, CheckDuplicateValidator, CheckboxControlSchema, ClientV5Service, CoCauToChucControlSchema, CoCauToChucPickerComponent, CoCauToChucPickerControlSchema, CoCauToChucService, ColorBlack, ColorControlSchema, ColorPickerControlSchema, ColorWhite, Column, ColumnSchemaBase, ColumnSetting, ColumnSettingDetail, ComCtxConstants, CommandType, CommonAppComponentComponent, CommonDashboardComponent, CommonErrorCode, CommonService, CompareValidator, ComponentBase, ComponentConstants, ComponentContextService, ConditionalBuilderService, CongViecLienQuanService, CongViecPickerControlSchema, CongViecService$1 as CongViecService, 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, DmLoaiCongViecService, DmPriorityService, 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, EnumLoaiDanhSachCongViec, EnumStateByMenuCongViec, EnumStateType, EnumTargetType, EnumTypeSplash, EnumUserRule, EnumWFNhomTrangThai, EnumWorkflowCoreCodeSettingKey, EnumWorkflowHistoryStatus, ErrorType, EventData, ExactOneValueInTableValidator, ExportAllMode, ExportItem, ExportItemType, ExportItemsMode, ExportManyModel, ExportManyResultModel, ExportModel, ExportService, ExportWithoutTemplateModel, Extension, FILE_TYPES, FieldDefineIsTaskFormControl, FieldDefineIsWorkflowControl, FileDataService, FileExplorerService, FileManagerComponent, FileManagerControlSchema, FileManagerMode, FileObjectService, FilePickerDialogComponent, FileUploadComponent, FileUploadControlSchema, FileUploadMode, FileV4Service, Filter, FolderService, FormControlBase, FormControlBaseWithService, FormSchemaBase, FormSchemaBaseWithService, FormState, Gender, GenerateLinkDownloadDTO, GenericGuardService, GetRefDataSchema, GlobalService, GmailCorrector, GridInfo, GuardService, GuardSvService, HeightType, HighPerformanceService, HighlightPipe, HtmlFormatPipe, ImageService, KeyFieldGetRefType, KeyFilterStateByMenuCongViec, 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, NotificationObjectType, NotificationService, NotifierService, NumberCompareValidator, NumberOnlyValidator, NumberRangeControlSchema, Operator, OrganizationFormatPipe, OrganizationNameFormatPipe, OrganizationPickerControlSchema, OrganizationService, OrganizationsFormatPipe, PageInfo, PageSetting, Pair, Pattern, PercentControlSchema, PermissionBase, PermissionConstant, PermissionService, PermissionStorage, PermissionTypes, PermissionUtilsComponent, PersonalSetting, PhoneNumberValidator, PhoneValidator, PopupSize, PositionService, PrintService, PublicFunction, QueryBuilderComponent, QueryBuilderGroupComponent, QueryBuilderRuleComponent, QueryGroup, QueryRule, RadioButtonListControlSchema, RandomDataService, RefField, ReferenceDataFormatPipe, RegexSplitFieldByItem, 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, TagSeparator, 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, TopicReloadCongViecV5, 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, DynamicNodeComponent as ɵba, EntityPickerBoxComponent as ɵbb, EntityPickerDataComponent as ɵbc, EntityPickerSelectedComponent as ɵbd, EntityPickerComponent as ɵbe, EntityPickerDialogComponent as ɵbf, EntityPermissionComponent as ɵbg, DM_ChucVuService as ɵbh, RoleService as ɵbi, EntityPermissionService as ɵbj, EquationEditorComponent as ɵbk, MaskComponent as ɵbl, NumberPickerRangeComponent as ɵbm, PagingNextBackOnlyComponent as ɵbn, RadioButtonListComponent as ɵbo, VanBanPickerComponent as ɵbp, VanBanDenService as ɵbq, VanBanDiService as ɵbr, VanBanPickerDialogComponent as ɵbs, VanbanDiPickerComponent as ɵbt, VanbanDenPickerComponent as ɵbu, CongViecPickerComponent as ɵbv, CongViecService as ɵbw, TaskWorkflowHistoriesService as ɵbx, SettingsComponent as ɵby, SettingsRowComponent as ɵbz, EntityPickerService as ɵc, SettingsWorkflowComponent as ɵca, SettingsWorkflowNo1Component as ɵcb, SimpleWorkflowFormComponent as ɵcc, ProcessWorkflowFormComponent as ɵcd, WorkflowHistoryService as ɵce, ProcessWorkflowTargetComponent as ɵcf, ChoYKienFormComponent as ɵcg, SplashComponentV1Component as ɵch, StateMachinesConnectionReceiverComponent as ɵci, StateMachinesConnectionReceiverUserComponent as ɵcj, StateMachinesConnectionReceiverDepartmentComponent as ɵck, StateMachinesConnectionReceiverGroupComponent as ɵcl, StateMachinesConnectionReceiverRoleComponent as ɵcm, StateMachinesConnectionSenderComponent as ɵcn, StartWorkflowComponent as ɵco, WorkflowSettingsService as ɵcp, WorkflowSettingNewComponent as ɵcq, TnDialogComponent as ɵcr, TnColorPickerComponent as ɵcs, TnTinymceComponent as ɵct, TnTabViewComponent as ɵcu, TableDetailFormComponent as ɵcv, FileIconPipe as ɵcw, FileSizePipe as ɵcx, QuickAddFormComponent as ɵcy, PreventShiftTabDirective as ɵcz, ExceptionHandlerService as ɵd, TnTemplateDirective as ɵda, UserPickerComponent as ɵdb, UserPickerBoxComponent as ɵdc, TnAppHelpComponent as ɵdd, PathNameService as ɵde, HelperCurrentPageComponent as ɵdf, TnAppNotificationListComponent as ɵdg, TnAppNotificationComponent as ɵdh, MyDriveService as ɵdi, FileVersionService as ɵdj, FileExplorerNewService as ɵdk, FolderFormComponent as ɵdl, FileFormComponent as ɵdm, FileViewerComponent as ɵdn, FileVersionListComponent as ɵdo, WorkflowHistoryComponent as ɵdp, EntityWorkflowHistoryService as ɵdq, WorkflowHistoryDialogComponent as ɵdr, WorkflowHistoryNewComponent as ɵds, WorkflowSettingComponent as ɵdt, EntityWorkflowSettingService as ɵdu, WorkflowSettingDialogComponent as ɵdv, QrCodeGeneratorComponent as ɵdw, AccessDeniedV1Component as ɵdx, AddNewsComponent as ɵdy, ArticleService as ɵdz, CanBo_HoSoService as ɵe, NewsCategoryService as ɵea, NotFoundComponent as ɵeb, UniversalLinkProcessorComponent as ɵec, CheckReadyComponent as ɵed, SendAccessTokenInterceptor as ɵee, LogInterceptor as ɵef, PermissionUtilsInterceptor as ɵeg, AfterViewCheckedComponent as ɵf, AdvanceSearchComponent as ɵg, AppRootMenuComponent as ɵh, AppTopBarComponent as ɵi, AppTopBarV1Component as ɵj, AppProfileComponent as ɵk, AppSubMenuComponent as ɵl, AppMenuComponent as ɵm, AutoCompletePickerComponent as ɵn, CheckBoxListComponent as ɵo, ReportQueueComponent as ɵp, CoCauToChucPickerListComponent as ɵq, BaseCongViecTestComponent as ɵr, BaseCauHinhWorkflowDetailComponent as ɵs, BaseDmLoaiCongViecFormComponent as ɵt, BaseDmPriorityFormComponent as ɵu, BaseCongviecDinhkemComponent as ɵv, CongviecDinhkemService as ɵw, BaseCongviecDinhkemFormComponent as ɵx, DatetimePickerComponent as ɵy, DatetimePickerRangeComponent as ɵz };
+export { AccessDeniedComponent, Action, AddressControlSchema, AddressService, AdvanceSearchData, AdvanceSearchSetting, AppComponentBase, AppListService, ApplicationContextService, ApprovalPipe, ArrayPair, AtLeastOneRowTableValidator, AuthenService, AuthorizeDirective, AutoCompleteControlSchema, AutoCompletePickerControlSchema, AutocompleteDatasourceComponent, AvatarUploaderComponent, BaseCauHinhWorkflowComponent, BaseCongViecComponent, BaseCongViecFormComponent, BaseDmLoaiCongViecComponent, BaseDmPriorityComponent, BaseMenuService, BaseModule, BaseService, BooleanFormatPipe, ButtonControlSchema, CONFIG_CALENDAR_VIETNAMESE, CalculationEngineService, CanBoHoSoService, CauHinhWorkflowService, CellExcel, ChatBoxComponent, ChatSendMessageBoxComponent, CheckBoxListControlSchema, CheckControlVisibleService, CheckDuplicateFieldsValidator, CheckDuplicateValidator, CheckboxControlSchema, ClientV5Service, CoCauToChucControlSchema, CoCauToChucPickerComponent, CoCauToChucPickerControlSchema, CoCauToChucService, ColorBlack, ColorControlSchema, ColorPickerControlSchema, ColorWhite, Column, ColumnSchemaBase, ColumnSetting, ColumnSettingDetail, ComCtxConstants, CommandType, CommonAppComponentComponent, CommonDashboardComponent, CommonErrorCode, CommonService, CompareValidator, ComponentBase, ComponentConstants, ComponentContextService, ConditionalBuilderService, CongViecLienQuanService, CongViecPickerControlSchema, CongViecService$1 as CongViecService, 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, DmLoaiCongViecService, DmPriorityService, 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, EnumLoaiDanhSachCongViec, EnumPermissionType, EnumStateByMenuCongViec, EnumStateType, EnumTargetType, EnumTypeSplash, EnumUserRule, EnumWFNhomTrangThai, EnumWorkflowCoreCodeSettingKey, EnumWorkflowHistoryStatus, ErrorType, EventData, ExactOneValueInTableValidator, ExportAllMode, ExportItem, ExportItemType, ExportItemsMode, ExportManyModel, ExportManyResultModel, ExportModel, ExportService, ExportWithoutTemplateModel, Extension, FILE_TYPES, FieldDefineIsTaskFormControl, FieldDefineIsWorkflowControl, FileDataService, FileExplorerService, FileManagerComponent, FileManagerControlSchema, FileManagerMode, FileObjectService, FilePickerDialogComponent, FileUploadComponent, FileUploadControlSchema, FileUploadMode, FileV4Service, Filter, FolderService, FormControlBase, FormControlBaseWithService, FormSchemaBase, FormSchemaBaseWithService, FormState, Gender, GenerateLinkDownloadDTO, GenericGuardService, GetRefDataSchema, GlobalService, GmailCorrector, GridInfo, GuardService, GuardSvService, HeightType, HighPerformanceService, HighlightPipe, HtmlFormatPipe, ImageService, KeyFieldGetRefType, KeyFilterStateByMenuCongViec, 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, NotificationObjectType, NotificationService, NotifierService, NumberCompareValidator, NumberOnlyValidator, NumberRangeControlSchema, Operator, OrganizationFormatPipe, OrganizationNameFormatPipe, OrganizationPickerControlSchema, OrganizationService, OrganizationsFormatPipe, PageInfo, PageSetting, Pair, Pattern, PercentControlSchema, PermissionBase, PermissionConstant, PermissionService, PermissionStorage, PermissionTypes, PermissionUtilsComponent, PersonalSetting, PhoneNumberValidator, PhoneValidator, PopupSize, PositionService, PrintService, PublicFunction, QueryBuilderComponent, QueryBuilderGroupComponent, QueryBuilderRuleComponent, QueryGroup, QueryRule, RadioButtonListControlSchema, RandomDataService, RefField, ReferenceDataFormatPipe, RegexSplitFieldByItem, 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, TagSeparator, 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, TopicReloadCongViecV5, TopicReloadNotification, TrangThaiMasterData, TrangThais, TreeDataOption, TrimCorrector, TrimEndCorrector, TrimStartCorrector, TypeDanhMucAPI, UniqueFieldInTableValidator, UniqueNumberService, UpperCorrector, UserFormatPipe, UserGroupService, UserPickerControlSchema, UserPickerDialogComponent, 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, DynamicNodeComponent as ɵba, EntityPickerBoxComponent as ɵbb, EntityPickerDataComponent as ɵbc, EntityPickerSelectedComponent as ɵbd, EntityPickerComponent as ɵbe, EntityPickerDialogComponent as ɵbf, EntityPermissionComponent as ɵbg, DM_ChucVuService as ɵbh, RoleService as ɵbi, EntityPermissionService as ɵbj, EquationEditorComponent as ɵbk, MaskComponent as ɵbl, NumberPickerRangeComponent as ɵbm, PagingNextBackOnlyComponent as ɵbn, RadioButtonListComponent as ɵbo, VanBanPickerComponent as ɵbp, VanBanDenService as ɵbq, VanBanDiService as ɵbr, VanBanPickerDialogComponent as ɵbs, VanbanDiPickerComponent as ɵbt, VanbanDenPickerComponent as ɵbu, CongViecPickerComponent as ɵbv, CongViecService as ɵbw, TaskWorkflowHistoriesService as ɵbx, SettingsComponent as ɵby, SettingsRowComponent as ɵbz, EntityPickerService as ɵc, SettingsWorkflowComponent as ɵca, SettingsWorkflowNo1Component as ɵcb, SimpleWorkflowFormComponent as ɵcc, ProcessWorkflowFormComponent as ɵcd, WorkflowHistoryService as ɵce, ProcessWorkflowTargetComponent as ɵcf, ChoYKienFormComponent as ɵcg, SplashComponentV1Component as ɵch, StateMachinesConnectionReceiverComponent as ɵci, StateMachinesConnectionReceiverUserComponent as ɵcj, StateMachinesConnectionReceiverDepartmentComponent as ɵck, StateMachinesConnectionReceiverGroupComponent as ɵcl, StateMachinesConnectionReceiverRoleComponent as ɵcm, StateMachinesConnectionSenderComponent as ɵcn, StartWorkflowComponent as ɵco, WorkflowSettingsService as ɵcp, WorkflowSettingNewComponent as ɵcq, PermissionSharingComponent as ɵcr, WorkflowPermissionService as ɵcs, TnDialogComponent as ɵct, TnColorPickerComponent as ɵcu, TnTinymceComponent as ɵcv, TnTabViewComponent as ɵcw, TableDetailFormComponent as ɵcx, FileIconPipe as ɵcy, FileSizePipe as ɵcz, ExceptionHandlerService as ɵd, QuickAddFormComponent as ɵda, PreventShiftTabDirective as ɵdb, TnTemplateDirective as ɵdc, UserPickerComponent as ɵdd, UserPickerBoxComponent as ɵde, TnAppHelpComponent as ɵdf, PathNameService as ɵdg, HelperCurrentPageComponent as ɵdh, TnAppNotificationListComponent as ɵdi, TnAppNotificationComponent as ɵdj, MyDriveService as ɵdk, FileVersionService as ɵdl, FileExplorerNewService as ɵdm, FolderFormComponent as ɵdn, FileFormComponent as ɵdo, FileViewerComponent as ɵdp, FileVersionListComponent as ɵdq, WorkflowHistoryComponent as ɵdr, EntityWorkflowHistoryService as ɵds, WorkflowHistoryDialogComponent as ɵdt, WorkflowHistoryNewComponent as ɵdu, WorkflowSettingComponent as ɵdv, EntityWorkflowSettingService as ɵdw, WorkflowSettingDialogComponent as ɵdx, QrCodeGeneratorComponent as ɵdy, AccessDeniedV1Component as ɵdz, CanBo_HoSoService as ɵe, AddNewsComponent as ɵea, ArticleService as ɵeb, NewsCategoryService as ɵec, NotFoundComponent as ɵed, UniversalLinkProcessorComponent as ɵee, ChatService as ɵef, ContentsService as ɵeg, StatusExtendsService as ɵeh, MessageBoardService as ɵei, CheckReadyComponent as ɵej, SendAccessTokenInterceptor as ɵek, LogInterceptor as ɵel, PermissionUtilsInterceptor as ɵem, AfterViewCheckedComponent as ɵf, AdvanceSearchComponent as ɵg, AppRootMenuComponent as ɵh, AppTopBarComponent as ɵi, AppTopBarV1Component as ɵj, AppProfileComponent as ɵk, AppSubMenuComponent as ɵl, AppMenuComponent as ɵm, AutoCompletePickerComponent as ɵn, CheckBoxListComponent as ɵo, ReportQueueComponent as ɵp, CoCauToChucPickerListComponent as ɵq, BaseCongViecTestComponent as ɵr, BaseCauHinhWorkflowDetailComponent as ɵs, BaseDmLoaiCongViecFormComponent as ɵt, BaseDmPriorityFormComponent as ɵu, BaseCongviecDinhkemComponent as ɵv, CongviecDinhkemService as ɵw, BaseCongviecDinhkemFormComponent as ɵx, DatetimePickerComponent as ɵy, DatetimePickerRangeComponent as ɵz };
 //# sourceMappingURL=tnx-shared.js.map