tnx-shared 5.1.337 → 5.1.338

package/bundles/tnx-shared.umd.js

@@ -11151,45 +11151,78 @@
             return this.defaultGet(url);
         };
         PermissionService.prototype.getAllBasePermission = function (userId) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             return __awaiter(this, void 0, void 0, function () {
-                var url, user, res, lstAppCodes, promiseArr, code, service, permissions, key, storageItem;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var url, user, res, lstAppCodes, promiseArr, lstAppCodes_1, lstAppCodes_1_1, code, lstAppCodes_2, lstAppCodes_2_1, service, permissions, key_1, key, storageItem;
+                var e_1, _d, e_2, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             url = this.serviceUri + "/GetAllBasePermission";
+                            // return sớm vì đây là trường hợp lấy permission theo Id của User
+                            // ko set local storage vì sẽ làm hỏng quyền của người dùng hiện tại
+                            if (userId && userId != '' && userId != this._commonService.guidEmpty()) {
+                                return [2 /*return*/, this.defaultGet(url + ("?userId=" + userId))];
+                            }
+                            if (i0.isDevMode()) {
+                                return [2 /*return*/];
+                            }
                             user = this._userService.getCurrentUser();
                             if (user
                                 && (user.issuperuser && user.issuperuser.toLowerCase() == 'true')
                                 || (user.isadmin && user.isadmin.toLowerCase() == 'true' && !this.ignoreAdmin)) {
                                 return [2 /*return*/];
                             }
-                            if (userId && userId != '' && userId != this._commonService.guidEmpty()) {
-                                url += "?userId=" + userId;
-                                return [2 /*return*/, this.defaultGet(url)];
-                            }
                             return [4 /*yield*/, this.defaultGet(url)];
                         case 1:
-                            res = _e.sent();
+                            res = _f.sent();
                             lstAppCodes = (_c = (_b = (_a = this._config.environment.appMetadata) === null || _a === void 0 ? void 0 : _a.appSwitcher) === null || _b === void 0 ? void 0 : _b.map(function (app) { return app.code; })) !== null && _c !== void 0 ? _c : [];
                             if (!(!res.success || res.data == null)) return [3 /*break*/, 3];
                             promiseArr = [];
-                            for (code in lstAppCodes) {
-                                promiseArr.push(this.getPermissions(code));
+                            try {
+                                for (lstAppCodes_1 = __values(lstAppCodes), lstAppCodes_1_1 = lstAppCodes_1.next(); !lstAppCodes_1_1.done; lstAppCodes_1_1 = lstAppCodes_1.next()) {
+                                    code = lstAppCodes_1_1.value;
+                                    promiseArr.push(this.getServicePermission(code));
+                                }
+                            }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                            finally {
+                                try {
+                                    if (lstAppCodes_1_1 && !lstAppCodes_1_1.done && (_d = lstAppCodes_1.return)) _d.call(lstAppCodes_1);
+                                }
+                                finally { if (e_1) throw e_1.error; }
                             }
                             return [4 /*yield*/, Promise.all(promiseArr)];
                         case 2:
-                            _e.sent();
+                            _f.sent();
                             return [2 /*return*/];
                         case 3:
-                            for (service in lstAppCodes) {
-                                permissions = (_d = res.data[service]) !== null && _d !== void 0 ? _d : [];
-                                key = "AUTHORIZATION." + service.toUpperCase();
-                                storageItem = this.storage.getItem(key);
-                                if (storageItem != null) {
-                                    this.storage.removeItem(key);
+                            try {
+                                // Set local storage cho permission của người dùng
+                                for (lstAppCodes_2 = __values(lstAppCodes), lstAppCodes_2_1 = lstAppCodes_2.next(); !lstAppCodes_2_1.done; lstAppCodes_2_1 = lstAppCodes_2.next()) {
+                                    service = lstAppCodes_2_1.value;
+                                    permissions = [];
+                                    for (key_1 in res.data) {
+                                        if (key_1.toUpperCase() != service.toUpperCase()) {
+                                            continue;
+                                        }
+                                        permissions = res.data[key_1];
+                                        break;
+                                    }
+                                    key = "AUTHORIZATION." + service.toUpperCase();
+                                    storageItem = this.storage.getItem(key);
+                                    if (storageItem != null) {
+                                        this.storage.removeItem(key);
+                                    }
+                                    this.storage.setItem(key, JSON.stringify(permissions));
                                 }
-                                this.storage.setItem(key, JSON.stringify(permissions));
+                            }
+                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            finally {
+                                try {
+                                    if (lstAppCodes_2_1 && !lstAppCodes_2_1.done && (_e = lstAppCodes_2.return)) _e.call(lstAppCodes_2);
+                                }
+                                finally { if (e_2) throw e_2.error; }
                             }
                             return [2 /*return*/];
                     }
@@ -11204,13 +11237,13 @@
         PermissionService.prototype.getPermissionAuthorized = function (lstPermissionCode) {
             var _this = this;
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var user, result, lstPermissionCode_1, lstPermissionCode_1_1, item, e_1_1;
-                var e_1, _e;
-                return __generator(this, function (_f) {
-                    switch (_f.label) {
+                var user, result, lstPermissionCode_1, lstPermissionCode_1_1, item, e_3_1;
+                var e_3, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0: return [4 /*yield*/, this._userService.getCurrentUser()];
                         case 1:
-                            user = (_f.sent());
+                            user = (_e.sent());
                             if (user && user.issuperuser.toLowerCase() == 'true') {
                                 resolve(lstPermissionCode);
                                 return [2 /*return*/];
@@ -11220,33 +11253,33 @@
                                 return [2 /*return*/];
                             }
                             result = [];
-                            _f.label = 2;
+                            _e.label = 2;
                         case 2:
-                            _f.trys.push([2, 7, 8, 9]);
+                            _e.trys.push([2, 7, 8, 9]);
                             lstPermissionCode_1 = __values(lstPermissionCode), lstPermissionCode_1_1 = lstPermissionCode_1.next();
-                            _f.label = 3;
+                            _e.label = 3;
                         case 3:
                             if (!!lstPermissionCode_1_1.done) return [3 /*break*/, 6];
                             item = lstPermissionCode_1_1.value;
                             return [4 /*yield*/, this.isAuthorizedPermission(item)];
                         case 4:
-                            if (_f.sent()) {
+                            if (_e.sent()) {
                                 result.push(item);
                             }
-                            _f.label = 5;
+                            _e.label = 5;
                         case 5:
                             lstPermissionCode_1_1 = lstPermissionCode_1.next();
                             return [3 /*break*/, 3];
                         case 6: return [3 /*break*/, 9];
                         case 7:
-                            e_1_1 = _f.sent();
-                            e_1 = { error: e_1_1 };
+                            e_3_1 = _e.sent();
+                            e_3 = { error: e_3_1 };
                             return [3 /*break*/, 9];
                         case 8:
                             try {
-                                if (lstPermissionCode_1_1 && !lstPermissionCode_1_1.done && (_e = lstPermissionCode_1.return)) _e.call(lstPermissionCode_1);
+                                if (lstPermissionCode_1_1 && !lstPermissionCode_1_1.done && (_d = lstPermissionCode_1.return)) _d.call(lstPermissionCode_1);
                             }
-                            finally { if (e_1) throw e_1.error; }
+                            finally { if (e_3) throw e_3.error; }
                             return [7 /*endfinally*/];
                         case 9:
                             resolve(result);
@@ -11256,109 +11289,214 @@
             }); });
         };
         PermissionService.prototype.isAuthorizedPermission = function (permission) {
-            var _this = this;
-            return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+            return __awaiter(this, void 0, void 0, function () {
                 var retryCount;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             retryCount = 0;
-                            _e.label = 1;
+                            _d.label = 1;
                         case 1:
                             if (!!this._oauthService.hasValidAccessToken()) return [3 /*break*/, 3];
                             return [4 /*yield*/, this._commonService.delay(100)];
                         case 2:
-                            _e.sent();
+                            _d.sent();
                             retryCount++;
                             if (retryCount > 50) {
                                 return [3 /*break*/, 3];
                             }
                             return [3 /*break*/, 1];
-                        case 3: return [4 /*yield*/, this.checkPermission(this.appCode, permission, resolve, reject)];
-                        case 4:
-                            _e.sent();
-                            return [2 /*return*/];
+                        case 3: return [4 /*yield*/, this.checkPermission(this.appCode, permission)];
+                        case 4: return [2 /*return*/, _d.sent()];
                     }
                 });
-            }); });
+            });
         };
-        PermissionService.prototype.isAuthorized = function (service, permission, ignoreAdmin) {
-            var _this = this;
-            if (ignoreAdmin === void 0) { ignoreAdmin = false; }
-            this.root = this._appContext.getRootContext();
-            return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+        PermissionService.prototype.isAuthorized = function (service, permission, checForMenu) {
+            if (checForMenu === void 0) { checForMenu = false; }
+            return __awaiter(this, void 0, void 0, function () {
                 var retryCount;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
+                            this.root = this._appContext.getRootContext();
                             retryCount = 0;
-                            _e.label = 1;
+                            _d.label = 1;
                         case 1:
                             if (!!this._oauthService.hasValidAccessToken()) return [3 /*break*/, 3];
                             return [4 /*yield*/, this._commonService.delay(100)];
                         case 2:
-                            _e.sent();
+                            _d.sent();
                             retryCount++;
                             if (retryCount > 50) {
                                 return [3 /*break*/, 3];
                             }
                             return [3 /*break*/, 1];
-                        case 3: return [4 /*yield*/, this.checkPermission(service, permission, resolve, reject)];
-                        case 4:
-                            _e.sent();
-                            return [2 /*return*/];
+                        case 3: return [4 /*yield*/, this.checkPermission(service, permission, checForMenu)];
+                        case 4: return [2 /*return*/, _d.sent()];
                     }
                 });
-            }); });
+            });
         };
-        PermissionService.prototype.checkPermission = function (service, permissionToCheck, resolve, reject) {
+        PermissionService.prototype.checkPermission = function (service, permissionToCheck, checkForMenu) {
+            if (checkForMenu === void 0) { checkForMenu = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var user;
-                var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0: return [4 /*yield*/, this._userService.getCurrentUser()];
-                        case 1:
-                            user = (_e.sent());
+                var user, userPermissions, _a_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 2, , 3]);
+                            user = (this._userService.getCurrentUser());
                             if (i0.isDevMode()) {
-                                resolve(true);
-                                return [2 /*return*/];
+                                return [2 /*return*/, true];
                             }
                             if (user && user.issuperuser && user.issuperuser.toLowerCase() == 'true') {
-                                resolve(true);
-                                return [2 /*return*/];
+                                return [2 /*return*/, true];
                             }
                             if (user && user.isadmin && user.isadmin.toLowerCase() == 'true' && !this.ignoreAdmin) {
-                                resolve(true);
-                                return [2 /*return*/];
+                                return [2 /*return*/, true];
                             }
-                            this.getPermissions(service).then(function (userPermissions) {
-                                if (userPermissions && userPermissions.length) {
-                                    resolve(_this._checkPermission(userPermissions, permissionToCheck));
-                                }
-                                else {
-                                    console.log("Kh\u00F4ng c\u00F3 quy\u1EC1n v\u1EDBi ph\u00E2n h\u1EC7 [" + service + "]");
-                                    resolve(false);
-                                }
-                            }, function (error) {
-                                reject(false);
-                                console.log("L\u1ED7i kh\u00F4ng l\u1EA5y \u0111\u01B0\u1EE3c permission cho module: " + service);
-                            });
-                            return [2 /*return*/];
+                            return [4 /*yield*/, this.getServicePermission(service)];
+                        case 1:
+                            userPermissions = _d.sent();
+                            if (userPermissions && userPermissions.length > 0) {
+                                return [2 /*return*/, checkForMenu
+                                        ? userPermissions.includes(permissionToCheck)
+                                        : this._checkPermission(userPermissions, permissionToCheck)];
+                            }
+                            else {
+                                console.log("Kh\u00F4ng c\u00F3 quy\u1EC1n v\u1EDBi ph\u00E2n h\u1EC7 [" + service + "]");
+                                return [2 /*return*/, (false)];
+                            }
+                            return [3 /*break*/, 3];
+                        case 2:
+                            _a_1 = _d.sent();
+                            return [2 /*return*/, (false)];
+                        case 3: return [2 /*return*/];
                     }
                 });
             });
         };
         PermissionService.prototype._checkPermission = function (userPermissions, permissionToCheck) {
-            var e_2, _e;
+            var e_4, _d;
+            var isAuthorized = false;
+            try {
+                // check permission của người dùng
+                // duyệt qua từng permission của người dùng
+                for (var userPermissions_1 = __values(userPermissions), userPermissions_1_1 = userPermissions_1.next(); !userPermissions_1_1.done; userPermissions_1_1 = userPermissions_1.next()) {
+                    var userPermission = userPermissions_1_1.value;
+                    // biến để break khỏi vòng khi người dùng được authorized
+                    var breakOuterLoop = false;
+                    // pointer permission của người dùng
+                    var userPermissionPointer = 0;
+                    // pointer permission đang check
+                    var permissionToCheckPointer = 0;
+                    // check từng char của 2 mảng
+                    for (; permissionToCheckPointer < permissionToCheck.length;) {
+                        // nếu char là ký tự bắt đầu template => tịnh tiến pointer của 2 mảng
+                        var needRecheck = false;
+                        if (userPermission[userPermissionPointer] == '{') {
+                            // cho đến khi tìm được ký tự '/' tiếp theo thì dừng lại
+                            for (; userPermissionPointer < userPermission.length; userPermissionPointer++) {
+                                if (userPermissionPointer == userPermission.length - 1) {
+                                    break;
+                                }
+                                if (userPermission[userPermissionPointer] != '}') {
+                                    continue;
+                                }
+                                ++userPermissionPointer; // tiến tiến đến ký tự sau kết thúc template
+                                // check trường hợp trường hợp chuỗi template có dạng "{template}acsekjf"
+                                // => cần check các ký tự sau template và trước ký tự '/'
+                                if (userPermission[userPermissionPointer] != '/') {
+                                    needRecheck = true;
+                                    for (; userPermissionPointer < userPermission.length; userPermissionPointer++) {
+                                        if (userPermissionPointer == userPermission.length - 1) {
+                                            break;
+                                        }
+                                        if (userPermission[userPermissionPointer] != '/') {
+                                            continue;
+                                        }
+                                        break;
+                                    }
+                                }
+                                break;
+                            }
+                            for (; permissionToCheckPointer < permissionToCheck.length; permissionToCheckPointer++) {
+                                if (permissionToCheckPointer == permissionToCheck.length - 1) {
+                                    break;
+                                }
+                                if (permissionToCheck[permissionToCheckPointer] == '/') {
+                                    break;
+                                }
+                            }
+                        }
+                        var breakInnerLoop = false;
+                        if (needRecheck) {
+                            // check lại cho trường hợp chuỗi template có dạng "{template}acslekfj"
+                            // duyệt ngược lại cho đến khi gặp ký tự kết thúc template
+                            var tempUserPointer = userPermissionPointer;
+                            var tempToCheckPointer = permissionToCheckPointer;
+                            while (userPermission[tempUserPointer] != '}') {
+                                var userChar_1 = userPermission[tempUserPointer].toLowerCase();
+                                var permissionChar = permissionToCheck[tempToCheckPointer].toLowerCase();
+                                // ký tự khác nhau => break khỏi vòng kiểm tra trong
+                                if (userChar_1 != permissionChar) {
+                                    breakInnerLoop = true;
+                                    break;
+                                }
+                                tempUserPointer--;
+                                tempToCheckPointer--;
+                            }
+                        }
+                        if (breakInnerLoop) {
+                            break;
+                        }
+                        var userChar = userPermission[userPermissionPointer].toLowerCase();
+                        var toCheckChar = permissionToCheck[permissionToCheckPointer].toLowerCase();
+                        // nếu userPermission đang ở index cuối
+                        if (userPermissionPointer == userPermission.length - 1) {
+                            // check char cuối của 2 mảng (trừ khi là ký tự kết thúc template)
+                            // và cũng phải là char cuối của mảng permission cần check
+                            // => người dùng authorized và break khỏi vòng lặp ngoài cùng
+                            if ((userChar == '}' || userChar == toCheckChar)
+                                && permissionToCheckPointer == permissionToCheck.length - 1) {
+                                breakOuterLoop = true;
+                                isAuthorized = true;
+                            }
+                            break;
+                        }
+                        // check char có giống nhau không, không giống thì break khỏi vòng check
+                        if (userChar != toCheckChar) {
+                            break;
+                        }
+                        // nếu char giống nhau thì tiếp tục vòng lăp
+                        permissionToCheckPointer++;
+                        userPermissionPointer++;
+                    }
+                    if (breakOuterLoop) {
+                        break;
+                    }
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (userPermissions_1_1 && !userPermissions_1_1.done && (_d = userPermissions_1.return)) _d.call(userPermissions_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            return isAuthorized;
+        };
+        PermissionService.prototype._checkPermissionOld = function (userPermissions, permissionToCheck) {
+            var e_5, _d;
             var isAuthorized = false;
             // check quyền theo cách cũ nếu trường họp là phân quyền module
             if (permissionToCheck.includes('MODULE')) {
                 return userPermissions.includes(permissionToCheck);
             }
             try {
-                for (var userPermissions_1 = __values(userPermissions), userPermissions_1_1 = userPermissions_1.next(); !userPermissions_1_1.done; userPermissions_1_1 = userPermissions_1.next()) {
-                    var userPermission = userPermissions_1_1.value;
+                for (var userPermissions_2 = __values(userPermissions), userPermissions_2_1 = userPermissions_2.next(); !userPermissions_2_1.done; userPermissions_2_1 = userPermissions_2.next()) {
+                    var userPermission = userPermissions_2_1.value;
                     // Cắt chuỗi permission thành mảng để xem mỗi fragement có khớp nhau không
                     var userPermissionFragments = userPermission.split('/');
                     var permissionFragments = permissionToCheck.split('/');
@@ -11393,12 +11531,12 @@
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (userPermissions_1_1 && !userPermissions_1_1.done && (_e = userPermissions_1.return)) _e.call(userPermissions_1);
+                    if (userPermissions_2_1 && !userPermissions_2_1.done && (_d = userPermissions_2.return)) _d.call(userPermissions_2);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_5) throw e_5.error; }
             }
             return isAuthorized;
         };
@@ -11409,11 +11547,11 @@
             return new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
                 var user, isAuthorized;
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0: return [4 /*yield*/, this._userService.getCurrentUser()];
                         case 1:
-                            user = (_e.sent());
+                            user = (_d.sent());
                             if (user && user.issuperuser.toLowerCase() == 'true') {
                                 resolve(true);
                                 return [2 /*return*/];
@@ -11426,50 +11564,61 @@
                             if (operator.toUpperCase() == 'OR') {
                                 isAuthorized = false;
                             }
-                            return [4 /*yield*/, permissions.forEach(function (item) {
-                                    _this.getPermissions(item.service).then(function (permissionResult) {
-                                        if (operator.toUpperCase() == 'OR') {
-                                            if (permissionResult.includes(item.permission)) {
-                                                isAuthorized = true;
-                                                return;
-                                            }
+                            permissions.forEach(function (item) {
+                                _this.getServicePermission(item.service).then(function (permissionResult) {
+                                    if (operator.toUpperCase() == 'OR') {
+                                        if (permissionResult.includes(item.permission)) {
+                                            isAuthorized = true;
+                                            return;
                                         }
-                                        else {
-                                            if (!permissionResult.includes(item.permission)) {
-                                                isAuthorized = false;
-                                                return;
-                                            }
+                                    }
+                                    else {
+                                        if (!permissionResult.includes(item.permission)) {
+                                            isAuthorized = false;
+                                            return;
                                         }
-                                    }, function (error) {
-                                        reject(false);
-                                    });
-                                })];
-                        case 2:
-                            _e.sent();
+                                    }
+                                }, function (error) {
+                                    reject(false);
+                                });
+                            });
                             resolve(isAuthorized);
                             return [2 /*return*/];
                     }
                 });
             }); });
         };
-        PermissionService.prototype.getPermissions = function (service) {
-            var _this = this;
-            return new Promise(function (resolve, reject) {
-                var url = _this.serviceUri + "/GetPermissionsByService?service=" + service;
-                var key = "AUTHORIZATION." + service.toUpperCase();
-                var storageItem = _this.storage.getItem(key);
-                if (storageItem && storageItem !== 'null' && storageItem !== 'undefined') {
-                    var result = JSON.parse(storageItem);
-                    resolve(result);
-                }
-                else {
-                    _this.defaultGet(url).then(function (response) {
-                        _this.storage.setItem(key, JSON.stringify(response.data));
-                        resolve(response.data);
-                    }, function (error) {
-                        reject();
-                    });
-                }
+        PermissionService.prototype.getServicePermission = function (service, overrideLocalStorage) {
+            if (overrideLocalStorage === void 0) { overrideLocalStorage = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                var key, hasLocalStorage, storageItem, result, url, response;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            key = "AUTHORIZATION." + service.toUpperCase();
+                            hasLocalStorage = false;
+                            if (!overrideLocalStorage) {
+                                storageItem = this.storage.getItem(key);
+                                if (storageItem && storageItem !== 'null') {
+                                    result = JSON.parse(storageItem);
+                                    hasLocalStorage = true;
+                                    return [2 /*return*/, result];
+                                }
+                            }
+                            url = this.serviceUri + "/GetPermissionsByService?service=" + service;
+                            return [4 /*yield*/, this.defaultGet(url)];
+                        case 1:
+                            response = _d.sent();
+                            if (!response || !response.success) {
+                                return [2 /*return*/, []];
+                            }
+                            if (hasLocalStorage) {
+                                this.storage.removeItem(key);
+                            }
+                            this.storage.setItem(key, JSON.stringify(response.data));
+                            return [2 /*return*/, response.data];
+                    }
+                });
             });
         };
         PermissionService.prototype.getPermissionIdsByModule = function (moduleCode, userId) {
@@ -16774,7 +16923,7 @@
     CrudFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'crud-form',
-                    template: "<div [class]=\"_styleClass\">\r\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\r\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\r\n        (keydown.shift.tab)=\"preventBlur($event)\">\r\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\r\n            <ng-container *ngFor=\"let control of setting.schema\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </form>\r\n</div>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\r\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\r\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\r\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\r\n        [class.error]=\"data._errors[control.field].length > 0\"\r\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\r\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\r\n        <div class=\"label\" *ngIf=\"showLabel\">\r\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\r\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\r\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\r\n        </div>\r\n        <ng-container [ngSwitch]=\"control.controlType\">\r\n            <ng-container *ngSwitchCase=\"'label'\">\r\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\r\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'title'\">\r\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\r\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\r\n                    <input [placeholder]=\"control.placeholder\"\r\n                        [required]=\"control.validators && control.validators.required\"\r\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\r\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\r\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\r\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\r\n                </div>\r\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\r\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\r\n                    [maxlength]=\"control.maxLength\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'reference-text'\">\r\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'template'\">\r\n                <ng-container [ngTemplateOutlet]=\"control.template\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'mask'\">\r\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\r\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-mask>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'numberrange'\">\r\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\r\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\r\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\r\n                </tn-number-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'money'\">\r\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\r\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'textarea'\">\r\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\r\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'editor'\">\r\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\r\n                </tn-tinymce>\r\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\r\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </datetime-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\r\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\r\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </app-autocomplete-datasource>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\r\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\r\n                    [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-datetime-picker-range>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\r\n                    [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\r\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\r\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\r\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\r\n                    [copyToFolderId]=\"control.copyToFolderId\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </file-manager>\r\n            </ng-container>\r\n            <span *ngSwitchCase=\"'fileUpload'\">\r\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\r\n                    [maxFileSize]=\"control.maxFileSize\"\r\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\r\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\r\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\r\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\r\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\r\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\r\n                </file-upload>\r\n            </span>\r\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\r\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\r\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\r\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </service-file-upload>\r\n            </span>\r\n            <ng-container *ngSwitchCase=\"'user-picker'\">\r\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\r\n                    [multiple]=\"control.multiple\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </user-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'switch'\">\r\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </p-inputSwitch>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\r\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\r\n                    </p-checkbox>\r\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'button'\">\r\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\r\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\r\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'container'\">\r\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\r\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\r\n                    <ng-container *ngFor=\"let subControl of control.controls\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\r\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </check-box-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\r\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\r\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\r\n                </radio-button-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\r\n                <tn-color-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\r\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </tn-color-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'spanControl'\">\r\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\r\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'colorControl'\">\r\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'address'\">\r\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\r\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\r\n                </address-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\r\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </autocomplete-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\r\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </entity-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\r\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\r\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\r\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\r\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\r\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </cocautochuc-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\r\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\r\n                    [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\r\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\r\n                </cocautochuc-picker-list>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'vanban'\">\r\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\" [readOnly]=\"control.readOnly\"\r\n                    [loaiVanBan]=\"control.loaiVanBan\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                </vanban-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'congviec'\">\r\n                <div>\r\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </congviec-picker>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'percent'\">\r\n                <div>\r\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\" [min]=\"0\" [max]=\"100\"\r\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\r\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </tn-mask>\r\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\r\n                        [(ngModel)]=\"data[control.field]\"\r\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\r\n                    </p-slider>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template pTemplate=\"colgroup\">\r\n                                <colgroup>\r\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 5%\" />\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <col [style.width]=\"subControl.width\" />\r\n                                    </ng-container>\r\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\r\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\r\n                                </colgroup>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\r\n                                        {{ 'TT' |translate}}\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\r\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\r\n                                            style=\"text-align: center;\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\r\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\r\n                                <tr [pReorderableRow]=\"ri\">\r\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\r\n                                        style=\"text-align: center; vertical-align: inherit\">\r\n                                        <span>\r\n                                            {{ri + 1}}\r\n                                        </span>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\r\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\r\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\r\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\r\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\r\n                                                <ng-container\r\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\r\n                                                </ng-container>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\r\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\r\n                                            </ng-template>\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </td>\r\n                                    </ng-container>\r\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\r\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\r\n                                            pReorderableRowHandle></i>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\r\n                                        class=\"column-function text-center\">\r\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"saveRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\r\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\r\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"editRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\r\n                                                type=\"button\" pButton\r\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\r\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\r\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\r\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\r\n                                                icon=\"pi pi-ellipsis-v\"\r\n                                                class=\"link-or-action p-button-text p-button-rounded\"\r\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\r\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\r\n                                        </div>\r\n                                        <div *ngIf=\"control.rowButtonTemplate\"\r\n                                            class=\"p-toolbar-group-center button-group\">\r\n                                            <ng-container\r\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </td>\r\n                                </tr>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\r\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                        </p-table>\r\n                    </tn-custom-scrollbar>\r\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\r\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\r\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\r\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\r\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\r\n                            </p-checkbox>\r\n                        </span>\r\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\r\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\r\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\r\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\r\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\r\n                            (click)=\"messageRow( -1, control, path)\"></button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\r\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\r\n                    }\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #validation let-control=\"control\" let-data=\"data\">\r\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\r\n        <div class=\"error-container\">\r\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\r\n                <div class=\"error-item\" *ngIf=\"error\">\r\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #errorMessage let-content=\"content\">\r\n    <div class=\"error-content\">\r\n        <i class=\"pi pi-ban\"></i>\r\n        <span> {{content}}</span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #labelControl let-control=\"control\">\r\n    <ng-container>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\r\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\r\n            [for]=\"control.for\">{{control.text | translate}}</label>\r\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\r\n            [attr.label-index]=\"control.indexLabel\"></label>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #templateCongViecForm let-control=\"control\">\r\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\r\n    </base-congviec-form>\r\n</ng-template>\r\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\r\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\r\n    </table-detail-form>\r\n</tn-dialog>",
+                    template: "<div [class]=\"_styleClass\">\n    <form #formElement autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\"\n        [class]=\"'p-grid form-group crud-form' + (formClass ? ' ' + formClass : '')\"\n        (keydown.shift.tab)=\"preventBlur($event)\">\n        <div class=\"p-grid p-col-12\" style=\"margin: 0\">\n            <ng-container *ngFor=\"let control of setting.schema\">\n                <ng-container\n                    *ngTemplateOutlet=\"customControl; context: {control: control, data: _modelData, parentPath: '', path: control.field, showLabel: control.showLabel, mdWidth: control.mdWidth}\">\n                </ng-container>\n            </ng-container>\n        </div>\n    </form>\n</div>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<ng-template #customControl let-data=\"data\" let-control=\"control\" let-showLabel=\"showLabel\" let-mdWidth=\"mdWidth\"\n    let-rowIndex=\"index\" let-path=\"path\" let-parentPath=\"parentPath\" let-tablePath=\"tablePath\">\n    <div *ngIf=\"!checkHidden(control, data, path)\" id=\"{{path}}-holder\"\n        class=\"p-col-{{control.gWidth}} p-md-{{mdWidth}} {{control.class}} crud-form-control type-{{control.dataType}}\"\n        [class.error]=\"data._errors[control.field].length > 0\"\n        [class.not-show-in-box-holder]=\"control.showInBox === false\"\n        [class.show-in-box-holder]=\"control.showInBox === true\" [ngStyle]=\"control.style\">\n        <div class=\"label\" *ngIf=\"showLabel\">\n            <label *ngIf=\"control.label\" [pTooltip]=\"control.fullLabel\" tooltipPosition=\"top\">{{control.label}}\n                <span *ngIf=\"control.required\" class=\"star-required\">*</span></label>\n            <span *ngIf=\"control.description\" class=\"control-description\">({{control.description}})</span>\n        </div>\n        <ng-container [ngSwitch]=\"control.controlType\">\n            <ng-container *ngSwitchCase=\"'label'\">\n                <ng-container [ngTemplateOutlet]=\"labelControl\"\n                    [ngTemplateOutletContext]=\"{control: control, data: data}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'title'\">\n                <label *ngIf=\"!control.ishtml\" [for]=\"control.for\">{{control.text | translate}}</label>\n                <label *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | translate\"></label>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'text'\">\n                <div class=\"p-inputgroup\" *ngIf=\"control.suffFix\">\n                    <input [placeholder]=\"control.placeholder\"\n                        [required]=\"control.validators && control.validators.required\"\n                        [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText\n                        [type]=\"control.dataFormat\" [(ngModel)]=\"data[control.field]\" [max]=\"control.max\"\n                        [min]=\"control.min\" [maxlength]=\"control.maxLength\"\n                        (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                        (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\n                    <span class=\"p-inputgroup-addon\">({{control.suffFix}})</span>\n                </div>\n                <input *ngIf=\"!control.suffFix\" [placeholder]=\"control.placeholder\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText [type]=\"control.dataFormat\"\n                    [(ngModel)]=\"data[control.field]\" [max]=\"control.max\" [min]=\"control.min\"\n                    [maxlength]=\"control.maxLength\"\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (key.enter)=\"handleFieldValueChange(control, $event, 'enter', data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'reference-text'\">\n                <reference-textbox [control]=\"control\" [value]=\"data[control.field]\"></reference-textbox>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'template'\">\n                <ng-container [ngTemplateOutlet]=\"control.template\"\n                    [ngTemplateOutletContext]=\"{$implicit: _rootNode, control: control, data: data, tablePath: tablePath, parentPath: parentPath, rowIndex: rowIndex, funcUpdateModel: updateModelFromExternal}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'mask'\">\n                <tn-mask [prefix]=\"control.prefix\" [decimalPlaces]=\"control.decimalPlaces\" [suffix]=\"control.suffix\"\n                    [placeholder]=\"control.placeholder\" [disabled]=\"checkDisabled(data, control)\"\n                    [maskType]=\"control.maskType\" [min]=\"control.min\" [max]=\"control.max\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </tn-mask>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'numberrange'\">\n                <tn-number-picker-range [decimalPlaces]=\"control.decimalPlaces\"\n                    [disabled]=\"checkDisabled(data, control)\" [maskType]=\"control.maskType\"\n                    [(ngModel)]=\"data[control.field]\" [min]=\"control.min\" [max]=\"control.max\"\n                    (search)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (blur)=\"handleFieldValueChange(control, $event, 'blur', data, parentPath)\">\n                </tn-number-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">\n                <input currencyMask [attr.disabled]=\"checkDisabled(data, control) ? true : null\" pInputText type=\"tel\"\n                    [(ngModel)]=\"data[control.field]\"\n                    [options]=\"{prefix: '', thousands: '.', decimal: ',',precision:control.dataFormat === 'money'?0:0 }\"\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'phoneOrfax'\">\n                <input [placeholder]=\"control.dataFormat==='phone'?'(999) 999-9999':'999-999-9999'\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" type=\"tel\" pInputText\n                    [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" />\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'textarea'\">\n                <textarea pInputTextarea [rows]=\"control.rows ? control.rows : 5\"\n                    [attr.disabled]=\"checkDisabled(data, control) ? true : null\" [(ngModel)]=\"data[control.field]\"\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></textarea>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'editor'\">\n                <tn-tinymce *ngIf=\"!checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    [required]=\"control.validators && control.validators.required\" [mode]=\"control.mode\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    [height]=\"control.height ? control.height : 250\" [languageCode]=\"control.languageCode\"\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\">\n                </tn-tinymce>\n                <div *ngIf=\"checkDisabled(data, control)\" class=\"html-box\"\n                    [innerHTML]=\"data[control.field] ? (data[control.field] | safeHtml) : ''\">\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetime'\">\n                <datetime-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\n                    [control]=\"control\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </datetime-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete'\">\n                <app-autocomplete-datasource [control]=\"control\" [(ngModel)]=\"data[control.field]\"\n                    [suggestions]=\"data._source[control.field] || control.dataSource\"\n                    (onValueChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </app-autocomplete-datasource>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'datetimerange'\">\n                <tn-datetime-picker-range [(ngModel)]=\"data[control.field]\" [disabled]=\"control.disabled\"\n                    [control]=\"control\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </tn-datetime-picker-range>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'dropdown'\">\n                <dropdown [control]=\"control\" [dataSource]=\"getControlDataSource(control, data)\"\n                    [(value)]=\"data[control.field]\"\n                    (onChanged)=\"handleChangeDropdown(control, $event, 'change', data, parentPath)\"\n                    (onHideSmartEvent)=\"handleChangeDropdown(control, $event, 'hide', data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </dropdown>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <file-manager [control]=\"control\" [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"control.entityKey ? control.entityKey : data[control.entityKeyField]\"\n                    [readonly]=\"control.disabled\" [layout]=\"control.layout\" [maxFileSize]=\"control.maxFileSize\"\n                    [inTaiLieu]=\"control.inTaiLieu\" [inTaiLieuChung]=\"control.inTaiLieuChung\"\n                    [copyToFolderId]=\"control.copyToFolderId\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\n                    [(value)]=\"data[control.field]\" (onSelected)=\"control.onSelected($event)\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </file-manager>\n            </ng-container>\n            <span *ngSwitchCase=\"'fileUpload'\">\n                <file-upload [(ngModel)]=\"data[control.field]\" [sharedFolderType]=\"control.sharedFolderType\"\n                    [maxFileSize]=\"control.maxFileSize\"\n                    [invalidFileSizeMessageSummary]=\"control.invalidFileSizeMessageSummary\"\n                    [invalidFileSizeMessageDetail]=\"control.invalidFileSizeMessageDetail\"\n                    [invalidFileTypeMessageSummary]=\"control.invalidFileTypeMessageSummary\"\n                    [invalidFileTypeMessageDetail]=\"control.invalidFileTypeMessageDetail\"\n                    [invalidFileLimitMessageSummary]=\"control.invalidFileLimitMessageSummary\"\n                    [invalidFileLimitMessageDetail]=\"control.invalidFileLimitMessageDetail\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    [readonly]=\"control.readonly\" [accept]=\"control.accept\">\n                </file-upload>\n            </span>\n            <span *ngSwitchCase=\"'serviceFileUpload'\">\n                <service-file-upload [(ngModel)]=\"data[control.field]\" [parentContext]=\"context\"\n                    [serviceCode]=\"control.serviceCode\" [entity]=\"control.entity\"\n                    [entityKey]=\"data[control.entityKeyField]\" [control]=\"control\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </service-file-upload>\n            </span>\n            <ng-container *ngSwitchCase=\"'user-picker'\">\n                <user-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [readOnlyValues]=\"data[control.field + '_readOnly']\" [(ngModel)]=\"data[control.field]\"\n                    [multiple]=\"control.multiple\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </user-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'switch'\">\n                <p-inputSwitch [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\n                    (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </p-inputSwitch>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkbox'\">\n                <div [class]=\"control.class\" role=\"checkbox-alone\">\n                    <p-checkbox [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        [label]=\"!control.hiddenLabel ? control.label : null\"\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\" binary=\"true\">\n                    </p-checkbox>\n                    <!-- <tn-checkbox [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onChange)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"></tn-checkbox> -->\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'button'\">\n                <button type=\"button\" pButton [class]=\"control.btClass\" [icon]=\"control.icon\"\n                    [label]=\"control.label | translate\" [ngStyle]=\"control.btStyle\"\n                    (click)=\"handleButtonClick(control, $event, parentPath)\"></button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'container'\">\n                <div class=\"p-grid p-col-12\" style=\"margin: 0\" [class.not-show-in-box]=\"!control.showInBox\"\n                    [class.show-in-box]=\"control.showInBox\" [ngStyle]=\"control.boxStyle\">\n                    <ng-container *ngFor=\"let subControl of control.controls\">\n                        <ng-container\n                            *ngTemplateOutlet=\"customControl; context: {control: subControl, data: data[control.field], parentPath: path, rowIndex: rowIndex, path: path + '.' + subControl.field, showLabel: subControl.showLabel, mdWidth: subControl.mdWidth}\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'checkboxlist'\">\n                <check-box-list [control]=\"control\" [dataSource]=\"data._source[control.field] || control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </check-box-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'radiobuttonlist'\">\n                <radio-button-list [control]=\"control\" [dataSource]=\"control.dataSource\"\n                    [disabled]=\"checkDisabled(data, control)\" [(value)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (adjustValue)=\"handleAdjustValueDropdownEvent(control, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\"\n                    (onDataSourceLoaded)=\"handleDataSourceLoaded(control, parentPath, $event)\">\n                </radio-button-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorPicker'\">\n                <tn-color-picker [(ngModel)]=\"data[control.field]\" [disabled]=\"checkDisabled(data, control)\"\n                    (change)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </tn-color-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'spanControl'\">\n                <span *ngIf=\"!control.ishtml\">{{data[control.field]}}</span>\n                <span *ngIf=\"control.ishtml\" [innerHTML]=\"data[control.field]\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'colorControl'\">\n                <span class=\"show-color-control\" [ngStyle]=\"{ backgroundColor: data[control.sourceField]}\"></span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'address'\">\n                <address-picker [control]=\"control\" [showSubLabel]=\"control.showSubLabel\"\n                    [disabled]=\"checkDisabled(data, control)\" [(data)]=\"data[control.field]\"\n                    (onSelect)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleControlReadyEvent(control, parentPath)\">\n                </address-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'autocomplete-picker'\">\n                <autocomplete-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </autocomplete-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'entity-picker'\">\n                <entity-picker [control]=\"control\" [children]=\"children\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </entity-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc'\">\n                <cocautochuc-picker [control]=\"control\" [parentOrgId]=\"control.parentOrgId\"\n                    [disabled]=\"checkDisabled(data, control)\" [parentOrgCode]=\"control.parentOrgCode\"\n                    [filter]=\"control.filter\" [multiple]=\"control.multiple\" [required]=\"control.required\"\n                    [isUsingId]=\"control.isUsingId\" [disabledParentItem]=\"control.disabledParentItem\"\n                    [rootParentId]=\"control.rootParentId\" [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </cocautochuc-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cocautochuc-picker'\">\n                <cocautochuc-picker-list [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [readOnlyValues]=\"data[control.field + '_readOnly']\"\n                    [(ngModel)]=\"data[control.field]\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\"\n                    (onReady)=\"handleReadyControlPicker(control, parentPath)\">\n                </cocautochuc-picker-list>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'vanban'\">\n                <vanban-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                    [required]=\"control.required\" [(ngModel)]=\"data[control.field]\" [readOnly]=\"control.readOnly\"\n                    [loaiVanBan]=\"control.loaiVanBan\"\n                    (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                </vanban-picker>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'congviec'\">\n                <div>\n                    <congviec-picker [control]=\"control\" [disabled]=\"checkDisabled(data, control)\"\n                        [required]=\"control.required\" [(ngModel)]=\"data[control.field]\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                    </congviec-picker>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'percent'\">\n                <div>\n                    <tn-mask [suffix]=\"'%'\" [placeholder]=\"control.placeholder\" [maskType]=\"'int'\" [min]=\"0\" [max]=\"100\"\n                        [disabled]=\"checkDisabled(data, control)\" [(ngModel)]=\"data[control.field]\"\n                        (onChanged)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                    </tn-mask>\n                    <p-slider [step]=\"1\" [min]=\"0\" [max]=\"100\" [disabled]=\"checkDisabled(data, control)\"\n                        [(ngModel)]=\"data[control.field]\"\n                        (onSlideEnd)=\"handleFieldValueChange(control, $event, 'change', data, parentPath)\">\n                    </p-slider>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'table'\">\n                <div [class]=\"control.class\">\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\n                            [rowTrackBy]=\"trackByFuncId\"\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\n                            <ng-template pTemplate=\"colgroup\">\n                                <colgroup>\n                                    <col *ngIf=\"control.showNumber\" style=\"width: 5%\" />\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <col [style.width]=\"subControl.width\" />\n                                    </ng-container>\n                                    <col *ngIf=\"control.enableReorderRow\" style=\"width: 30px\" />\n                                    <col *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\" />\n                                </colgroup>\n                            </ng-template>\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-columns>\n                                <ng-container\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\n                                </ng-container>\n                            </ng-template>\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\n                                pTemplate=\"header\" let-rowData let-columns>\n                                <tr>\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center\">\n                                        {{ 'TT' |translate}}\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate\">\n                                        <th *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [pTooltip]=\"subControl.fullLabel || subControl.label\" tooltipPosition=\"top\"\n                                            style=\"text-align: center;\">\n                                            {{subControl.label}}\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </th>\n                                    </ng-container>\n                                    <th *ngIf=\"control.enableReorderRow\">\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                    <th *ngIf=\"control.showFunction\" class=\"table-function column-function\">\n                                        <div class=\"cell-header-function\"><span>Ch\u1EE9c n\u0103ng</span></div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </th>\n                                </tr>\n                            </ng-template>\n                            <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\">\n                                <tr [pReorderableRow]=\"ri\">\n                                    <td *ngIf=\"control.showNumber\" class=\"stt\"\n                                        style=\"text-align: center; vertical-align: inherit\">\n                                        <span>\n                                            {{ri + 1}}\n                                        </span>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <ng-container *ngFor=\"let subControl of control.rowTemplate; let i = index\">\n                                        <td *ngIf=\"subControl && !subControl.hidden && subControl.visibleInList\"\n                                            [class.control-inside]=\"true\" [class]=\"subControl.class\"\n                                            [ngStyle]=\"{'text-align': getTextAlign(subControl.textAlign), 'vertical-align': 'inherit'}\">\n                                            <span class=\"p-column-title\">{{subControl.label}}</span>\n                                            <ng-template [ngIf]=\"getControlType(subControl) != 'column'\">\n                                                <ng-container\n                                                    *ngTemplateOutlet=\"customControl; context: getContextTd(subControl, rowData, ri, path)\">\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template [ngIf]=\"getControlType(subControl) == 'column'\">\n                                                <span>{{_modelData[control.field][ri][subControl.field]}}</span>\n                                            </ng-template>\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                        </td>\n                                    </ng-container>\n                                    <td *ngIf=\"control.enableReorderRow\" class=\"no-padding center v-center\">\n                                        <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\"\n                                            pReorderableRowHandle></i>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                    <td *ngIf=\"control.showFunction\" style=\"text-align: center\"\n                                        class=\"column-function text-center\">\n                                        <div *ngIf=\"!control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <button *ngIf=\"control.showSave\" [disabled]=\"rowData._disableSave\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-save\" [pTooltip]=\"'L\u01B0u' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"saveRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showEdit\" [disabled]=\"rowData._disableEdit\"\n                                                type=\"button\" pButton class=\"p-button-text p-button-rounded\"\n                                                icon=\"pi pi-pencil\" [pTooltip]=\"'S\u1EEDa' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"editRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.showDelete\" [disabled]=\"rowData._disableDelete\"\n                                                type=\"button\" pButton\n                                                class=\"p-button-text p-button-danger p-button-rounded\"\n                                                icon=\"pi pi-trash\" [pTooltip]=\"'X\u00F3a' | translate\" tooltipPosition=\"top\"\n                                                (click)=\"deleteRow(ri, control, path)\"></button>\n                                            <button *ngIf=\"control.rowButtons\" type=\"button\" pButton\n                                                icon=\"pi pi-ellipsis-v\"\n                                                class=\"link-or-action p-button-text p-button-rounded\"\n                                                pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\" tooltipPosition=\"top\"\n                                                (click)=\"showContextMenu($event, rowData, control)\"></button>\n                                        </div>\n                                        <div *ngIf=\"control.rowButtonTemplate\"\n                                            class=\"p-toolbar-group-center button-group\">\n                                            <ng-container\n                                                *ngTemplateOutlet=\"control.rowButtonTemplate; context: {rowData: _modelData[control.field][ri], rowIndex: ri, path: path, control: control}\">\n                                            </ng-container>\n                                        </div>\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                                    </td>\n                                </tr>\n                            </ng-template>\n                            <ng-template *ngIf=\"control.summaryTemplate\" pTemplate=\"summary\" let-rowData>\n                                <ng-container *ngTemplateOutlet=\"control.summaryTemplate; context: {rowData: rowData}\">\n                                </ng-container>\n                            </ng-template>\n                        </p-table>\n                    </tn-custom-scrollbar>\n                    <div *ngIf=\"control.showFooter\" class=\"--table-schema-footer\">\n                        <button *ngIf=\"control.showAdd\" type=\"button\" pButton style=\"width:auto\" label=\"Th\u00EAm m\u1EDBi\"\n                            icon=\"pi pi-plus\" class=\"p-button-text\" (click)=\"addNewRow(control, path)\"></button>\n                        <span *ngIf=\"control.showDialog\" style=\"font-weight: normal;\">\n                            <p-checkbox label=\"M\u1EDF dialog\" [binary]=\"true\" [(ngModel)]=\"control.showEdit\">\n                            </p-checkbox>\n                        </span>\n                        <button *ngIf=\"control.enableAddMulti\" type=\"button\" pButton\n                            style=\"width:auto; margin-left:10px;\" label=\"Th\u00EAm nhi\u1EC1u\" icon=\"pi pi-clone\"\n                            class=\"p-button-text\" (click)=\"addMultiRow(control, 5, path)\"></button>\n                        <button *ngFor=\"let bt of control.footerButtons\" type=\"button\" pButton [class]=\"bt.class\"\n                            [icon]=\"bt.icon\" [label]=\"bt.label | translate\" style=\"width:auto; margin-left:10px;\"\n                            (click)=\"messageRow( -1, control, path)\"></button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(control.field)\" [ngTemplateOutletContext]=\"{\n                        crudForm: this, data: data, index: rowIndex, parentPath: parentPath, control: control, changeFunc: handleFieldValueChange\n                    }\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"validation; context: {control: control, data: data}\">\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #validation let-control=\"control\" let-data=\"data\">\n    <ng-container *ngIf=\"data._errors[control.field].length > 0\">\n        <div class=\"error-container\">\n            <ng-container *ngFor=\"let error of data._errors[control.field]\">\n                <div class=\"error-item\" *ngIf=\"error\">\n                    <ng-container [ngTemplateOutlet]=\"errorMessage\" [ngTemplateOutletContext]=\"{content: error}\">\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n<ng-template #errorMessage let-content=\"content\">\n    <div class=\"error-content\">\n        <i class=\"pi pi-ban\"></i>\n        <span> {{content}}</span>\n    </div>\n</ng-template>\n<ng-template #labelControl let-control=\"control\">\n    <ng-container>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"!control.ishtml\" [attr.label-index]=\"control.indexLabel\"\n            [pTooltip]=\"control.title\" tooltipPosition=\"top\" tooltipStyleClass=\"wrap\" [escape]=\"false\"\n            [for]=\"control.for\">{{control.text | translate}}</label>\n        <label [class]=\"getLabelClass(control)\" *ngIf=\"control.ishtml\" [innerHTML]=\"control.text | safeHtml\"\n            [attr.label-index]=\"control.indexLabel\"></label>\n    </ng-container>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #templateCongViecForm let-control=\"control\">\n    <base-congviec-form [control]=\"control\" [parentSetting]=\"congViecSetting\" [tenCongViec]=\"control.data.tenCongViec\">\n    </base-congviec-form>\n</ng-template>\n<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\n    <table-detail-form #formBase [parentSetting]=\"setting\" [schema]=\"tableFormSchema\" [data]=\"tableFormData\"\n        (onSaved)=\"handleSavedTableRow($event)\" (onCancel)=\"tableFormShow = false\">\n    </table-detail-form>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;padding-left:.2em;padding-top:.3em;position:absolute}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;color:#495057;display:flex;font-weight:600;padding:.5em}.show-in-box{border:1px solid #ced4da;border-radius:5px}.not-show-in-box{padding:0}.view-mode div.label{padding-bottom:3px}.view-mode div.label label{font-size:.85em;font-weight:700}.view-mode>span:not(:empty){display:inline-block;padding:5px 0;width:100%}.view-mode.type-table div.label+div{padding:5px 0}td>.view-mode{display:inline-block;padding:.25rem .5rem}td>.view-mode .view-mode{padding:0}.crud-form-control div[role=checkbox-alone]{margin-top:24px}.crud-form-control div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control .label+div[role=checkbox-alone]{margin-top:11px}.crud-form-control.type-table div[role=checkbox-alone]{margin-top:6px;text-align:center}.crud-form-control.type-table div[role=checkbox-alone].mg-top-0{margin-top:0}.crud-form-control.type-table div[role=checkbox-alone].align-left{text-align:left}.crud-form-control.type-title{border-bottom:1px solid #cfcfcf;color:#025ba7;font-size:1.2rem;font-weight:700;margin-bottom:5px;padding:5px;text-transform:uppercase}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{color:#6c757d;font-size:.8rem;margin-bottom:5px;margin-left:10px}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{font-size:.9em;height:1.15em;margin-bottom:5px}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{-webkit-animation:shrink .1s;animation:shrink .1s;min-height:20px;overflow:visible;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{-webkit-animation:fadeIn .1s;animation:fadeIn .1s;color:red;display:flex;font-size:.9em;position:relative}::ng-deep .crud-form-control>.error-container .error-item .error-content i{display:flex;font-size:.9em;padding-top:1px}::ng-deep .crud-form-control>.error-container .error-item .error-content span{display:flex;padding-left:5px}::ng-deep .crud-form-control.no-label>div.label{display:none}::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error select,::ng-deep .crud-form-control.error textarea{border-color:#ff5722!important}::ng-deep .crud-form-control.error .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error .p-inputtext:enabled:focus,::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #ffc4b3}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) input,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) select,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) textarea{border-color:#ced4da!important}::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-dropdown.tn-dropdown.p-focus,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa}@-webkit-keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@-webkit-keyframes shrink{0%{height:0}to{height:20px}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width:40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside,::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control),::ng-deep crud-form base-congviec-form crud-form>.crud-form-container{padding:0}:host ::ng-deep .tox-tinymce{border:none;border-top:1px solid #ccc;overflow:unset}:host ::ng-deep .tox-tinymce .tox-editor-container{overflow:unset}:host ::ng-deep .tox-tinymce .tox-toolbar{border:1px solid #ccc;border-bottom:none}:host ::ng-deep .tox-tinymce .tox-edit-area{border:1px solid #ccc}:host ::ng-deep .tox-tinymce .tox-edit-area iframe{box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}:host ::ng-deep .tox-tinymce .tox-menubar{border:1px solid #ccc}:host ::ng-deep .tox .tox-edit-area.tinymce-focus{border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 3px 0 #66afe9;transition:box-shadow .3s,border-color .3s;transition-delay:0s,0s;transition-duration:.3s,.3s;transition-property:box-shadow,border-color;transition-timing-function:ease,ease}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{display:block;margin-bottom:40px}"]
                 },] }
@@ -19979,7 +20128,9 @@
             this.createSearchSchema();
             if (!this.setting.hiddenTrinhKy || !this.setting.disableShare) {
                 if (!this.menuButtons) {
-                    this.menuButtons = function () { return []; };
+                    this.menuButtons = function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_b) {
+                        return [2 /*return*/, []];
+                    }); }); };
                 }
             }
             // Nếu mà ẩn advancesearch => sẽ không có trigger load data từ advance search => phải tự gọi getData ở OnInit
@@ -19988,17 +20139,12 @@
             }
             var userService = this._injector.get(UserService);
             this.currentUser = userService.getCurrentUser();
-            if (this.currentUser.isadmin.toLowerCase() != 'true' && this.currentUser.issuperuser.toLowerCase() != 'true') {
-                this._permissionService.getCurrentUserPermission().then(function (result) {
+            if ((this.currentUser.isAdmin() && this._moduleConfigService.getConfig().environment.ignoreAdmin === false)
+                || this.currentUser.issuperuser.toLowerCase() != 'true') {
+                this._permissionService.getServicePermission(this.setting.baseService.serviceCode).then(function (result) {
                     var e_1, _b;
                     var _a;
-                    var lstBasePermission = [];
-                    if (!result.success || !result.data) {
-                        console.log({ message: result.message, debugMessage: result.debugMessage });
-                    }
-                    else {
-                        lstBasePermission.push.apply(lstBasePermission, __spread(result.data));
-                    }
+                    var lstBasePermission = result;
                     _this.lstButtonPermission = (_a = _this._moduleConfigService.getConfig().environment.buttonPermissions) !== null && _a !== void 0 ? _a : [];
                     try {
                         for (var _c = __values(_this.lstButtonPermission), _d = _c.next(); !_d.done; _d = _c.next()) {
@@ -21205,17 +21351,23 @@
         };
         CrudListComponent.prototype.showContextMenu = function (evt, rowData) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, showWorkflowAttach;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var _b, _c, shareButtons, showWorkflowAttach;
+                var _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             this.rowDataCurrent = rowData;
                             _b = this;
+                            _c = this.getMenuButtonAuthorized;
                             return [4 /*yield*/, this.menuButtons(rowData)];
                         case 1:
-                            _b.buttonContexts = __spread.apply(void 0, [_c.sent()]);
+                            _b.buttonContexts = _c.apply(this, [_e.sent()]);
                             if (!this.setting.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) });
+                                shareButtons = [
+                                    { 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) },
+                                ];
+                                (_d = this.buttonContexts).push.apply(_d, __spread(shareButtons));
                             }
                             showWorkflowAttach = localStorage.getItem('__showWorkflowAttach');
                             if (showWorkflowAttach == 'true') {
@@ -21232,6 +21384,34 @@
                 });
             });
         };
+        CrudListComponent.prototype.getMenuButtonAuthorized = function (menuButtons) {
+            var e_3, _b;
+            var authorizedButtons = [];
+            var serviceCodeByBase = this.setting.baseService != null ? this.setting.baseService.serviceCode : '';
+            try {
+                for (var menuButtons_1 = __values(menuButtons), menuButtons_1_1 = menuButtons_1.next(); !menuButtons_1_1.done; menuButtons_1_1 = menuButtons_1.next()) {
+                    var item = menuButtons_1_1.value;
+                    if (!item.authorizationPermission) {
+                        authorizedButtons.push(item);
+                        continue;
+                    }
+                    var serviceCode = item.authorizationServiceCode ? item.authorizationServiceCode : serviceCodeByBase;
+                    var authorized = this._permissionService.isAuthorized(serviceCode, item.authorizationPermission, true);
+                    if (!authorized) {
+                        continue;
+                    }
+                    authorizedButtons.push(item);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (menuButtons_1_1 && !menuButtons_1_1.done && (_b = menuButtons_1.return)) _b.call(menuButtons_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            return authorizedButtons;
+        };
         CrudListComponent.prototype.updateCheckedAll = function () {
             if (this.model.selectedItems.length == this.model.dataSource.length && this.model.dataSource.length > 0) {
                 this.checkedAll = true;
@@ -21828,7 +22008,7 @@
                 clearTimeout(this.timeout);
         };
         CrudListComponent.prototype.disableMultipleDelete = function () {
-            var e_3, _b;
+            var e_4, _b;
             try {
                 for (var _c = __values(this.model.selectedItems), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var item = _d.value;
@@ -21837,17 +22017,17 @@
                     }
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_4) throw e_4.error; }
             }
             return false;
         };
         CrudListComponent.prototype.disableMultipleCopyLink = function () {
-            var e_4, _b;
+            var e_5, _b;
             try {
                 for (var _c = __values(this.model.selectedItems), _d = _c.next(); !_d.done; _d = _c.next()) {
                     var item = _d.value;
@@ -21856,12 +22036,12 @@
                     }
                 }
             }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
                     if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
-                finally { if (e_4) throw e_4.error; }
+                finally { if (e_5) throw e_5.error; }
             }
             return false;
         };
@@ -21954,28 +22134,28 @@
         CrudListComponent.prototype.preProcessData = function (dataSource) {
             return __awaiter(this, void 0, void 0, function () {
                 var colHasPipe, _loop_3, this_2, colHasPipe_1, colHasPipe_1_1, col;
-                var e_5, _b;
+                var e_6, _b;
                 return __generator(this, function (_c) {
                     colHasPipe = this.setting.cols.filter(function (x) { return x.pipe; });
                     _loop_3 = function (col) {
-                        var e_6, _b;
+                        var e_7, _b;
                         var _loop_4 = function (item) {
                             this_2.transform(col.pipe, col.asyncPipe, item[col.field]).then(function (rs) {
                                 item["pipe__" + col.field + " "] = rs;
                             });
                         };
                         try {
-                            for (var dataSource_1 = (e_6 = void 0, __values(dataSource)), dataSource_1_1 = dataSource_1.next(); !dataSource_1_1.done; dataSource_1_1 = dataSource_1.next()) {
+                            for (var dataSource_1 = (e_7 = void 0, __values(dataSource)), dataSource_1_1 = dataSource_1.next(); !dataSource_1_1.done; dataSource_1_1 = dataSource_1.next()) {
                                 var item = dataSource_1_1.value;
                                 _loop_4(item);
                             }
                         }
-                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
                         finally {
                             try {
                                 if (dataSource_1_1 && !dataSource_1_1.done && (_b = dataSource_1.return)) _b.call(dataSource_1);
                             }
-                            finally { if (e_6) throw e_6.error; }
+                            finally { if (e_7) throw e_7.error; }
                         }
                     };
                     this_2 = this;
@@ -21985,12 +22165,12 @@
                             _loop_3(col);
                         }
                     }
-                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                    catch (e_6_1) { e_6 = { error: e_6_1 }; }
                     finally {
                         try {
                             if (colHasPipe_1_1 && !colHasPipe_1_1.done && (_b = colHasPipe_1.return)) _b.call(colHasPipe_1);
                         }
-                        finally { if (e_5) throw e_5.error; }
+                        finally { if (e_6) throw e_6.error; }
                     }
                     return [2 /*return*/];
                 });
@@ -22121,7 +22301,7 @@
             }
         };
         CrudListComponent.prototype.getMinimizeData = function (model) {
-            var e_7, _b;
+            var e_8, _b;
             if (isLiteralObject(model)) {
                 if (model._dropdownvalue != null && model._dropdownvalue !== '') {
                     return model[model._dropdownvalue];
@@ -22144,12 +22324,12 @@
                         arr.push(this.getMinimizeData(item));
                     }
                 }
-                catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                catch (e_8_1) { e_8 = { error: e_8_1 }; }
                 finally {
                     try {
                         if (model_1_1 && !model_1_1.done && (_b = model_1.return)) _b.call(model_1);
                     }
-                    finally { if (e_7) throw e_7.error; }
+                    finally { if (e_8) throw e_8.error; }
                 }
                 return arr;
             }
@@ -22326,8 +22506,8 @@
         };
         CrudListComponent.prototype.createSearchSchema = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var searchInfo, _b, _c, col, control, e_8_1, _loop_5, this_3, _d, _e, field;
-                var e_8, _f, _g, e_9, _h;
+                var searchInfo, _b, _c, col, control, e_9_1, _loop_5, this_3, _d, _e, field;
+                var e_9, _f, _g, e_10, _h;
                 return __generator(this, function (_j) {
                     switch (_j.label) {
                         case 0:
@@ -22421,14 +22601,14 @@
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_8_1 = _j.sent();
-                            e_8 = { error: e_8_1 };
+                            e_9_1 = _j.sent();
+                            e_9 = { error: e_9_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
                                 if (_c && !_c.done && (_f = _b.return)) _f.call(_b);
                             }
-                            finally { if (e_8) throw e_8.error; }
+                            finally { if (e_9) throw e_9.error; }
                             return [7 /*endfinally*/];
                         case 8:
                             if (searchInfo.fieldSearchText) {
@@ -22451,12 +22631,12 @@
                                         _loop_5(field);
                                     }
                                 }
-                                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                                catch (e_10_1) { e_10 = { error: e_10_1 }; }
                                 finally {
                                     try {
                                         if (_e && !_e.done && (_h = _d.return)) _h.call(_d);
                                     }
-                                    finally { if (e_9) throw e_9.error; }
+                                    finally { if (e_10) throw e_10.error; }
                                 }
                             }
                             if (searchInfo.tooltipSearchText) {
@@ -22555,7 +22735,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'crud-list',
-                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\r\n    [ngStyle]=\"_style\">\r\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\r\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\r\n            <div class=\"p-col-12 main-container-search\">\r\n                <div class=\"p-grid main-container-search-inner\">\r\n                    <ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\r\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\r\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\r\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\r\n                </h1>\r\n\r\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\r\n                    [ngTemplateOutletContext]=\"{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\" (onChanged)=\"getData()\"\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 ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\r\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\r\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\r\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\r\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\r\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\r\n                                (click)=\"createShareLinkMultiple()\"></button>\r\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\r\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\r\n                        </div>\r\n                    </ng-container>\r\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\r\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\r\n                        <advance-search #advanceSearch [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]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"_groupField\">\r\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\r\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\r\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\r\n                                </ng-container>\r\n                            </tn-custom-scrollbar>\r\n                            <div *ngIf=\"!showScrollBar\">\r\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                        <div class=\"table-border-line --top\"></div>\r\n                        <div class=\"table-border-line --right\"></div>\r\n                        <div class=\"table-border-line --bottom\"></div>\r\n                        <div class=\"table-border-line --left\"></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\r\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\r\n    (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\r\n</settings>\r\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\r\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\r\n    (onCancel)=\"_showSettingsRowColor = false\">\r\n</settings-row>\r\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\r\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\r\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\r\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\r\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\r\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\r\n</tn-dialog>\r\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\r\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\r\n    (onCancel)=\"_showSettingsPermission = false\">\r\n</entity-permission>\r\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\r\n</p-contextMenu>\r\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\r\n    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"processWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%; padding: 1rem\">\r\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\r\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\r\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\r\n        </process-workflow-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\r\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"choYKienModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\r\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\r\n            (onCancel)=\"choYKienModel.showEditForm = false\">\r\n        </cho-y-kien-form>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\r\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\r\n            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\r\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\r\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\r\n        </workflow-history-new>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\r\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"detailTaskModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\r\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n\r\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\r\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\r\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\r\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\r\n    </base-congviec-form>\r\n</tn-dialog> -->\r\n\r\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\r\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\r\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\r\n        </permission-sharing>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\r\n    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"permissionListModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\r\n            (onCancel)=\"permissionListModel.showEditForm = false\">\r\n        </workflow-permission>\r\n    </div>\r\n</tn-dialog>\r\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\r\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\r\n</workflow-history-dialog>\r\n<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\r\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\r\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\r\n    <div style=\"height: 100%\">\r\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\r\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\r\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\r\n        </start-workflow>\r\n    </div>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\r\n    (onHide)=\"congViecModel.showEditForm = false\">\r\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\r\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </base-congviec-form>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\r\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"shareLinkModel.showEditForm = false\">\r\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\r\n        (onCancel)=\"congViecModel.showEditForm = false\">\r\n    </share-link-by-permission>\r\n</tn-dialog>\r\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\r\n    [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\r\n    (onHide)=\"attachedTaskModel.showEditForm = false\">\r\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\r\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\r\n</tn-dialog>\r\n<ng-template #tableGetGroupFieldFalse>\r\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\r\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\r\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\r\n            </ng-container>\r\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\r\n                (loaded)=\"handleTableRendered()\">\r\n            </after-view-checked>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\r\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n    </p-table>\r\n</ng-template>\r\n<ng-template #tableGetGroupFieldTrue>\r\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\r\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\r\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\r\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\r\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\r\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\r\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\r\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\r\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\r\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\r\n                    </p-checkbox>\r\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                </td>\r\n                <ng-container *ngIf=\"!rowGroup\">\r\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\r\n                        <div class=\"container-row-group\">\r\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\r\n                                [class.sticky]=\"setting.stickyColumn\">\r\n                                <i style=\"margin-right:5px\"\r\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n                                <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    </p-table>\r\n    <after-view-checked></after-view-checked>\r\n</ng-template>\r\n<ng-template #baseColgroup let-columns>\r\n    <colgroup>\r\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\r\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\r\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\r\n        </ng-container>\r\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\r\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\r\n    </colgroup>\r\n</ng-template>\r\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"title-row\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\r\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\r\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\r\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\r\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            (dblclick)=\"reload()\">\r\n            {{ 'TT' |translate}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\r\n            [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\r\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\r\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\r\n                [tnSortableColumnDisabled]=\"!col.sort\">\r\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\r\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\r\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\r\n                </ng-container>\r\n            </th>\r\n        </ng-container>\r\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\r\n    </tr>\r\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\r\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\r\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\r\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\r\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\r\n            </p-triStateCheckbox>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\r\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n                <div></div>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n        <ng-container *ngFor=\"let col of columns; let i = index\">\r\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\r\n                <ng-container *ngIf=\"col.allowFilter\">\r\n                    <ng-container *ngIf=\"col.templateFilter\">\r\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\r\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\r\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\r\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchCase=\"'datetime'\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-container *ngSwitchDefault>\r\n                            <ng-container [ngSwitch]=\"col.dataType\">\r\n                                <ng-container *ngSwitchCase=\"'int'\">\r\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\r\n                                        [ngTemplateOutletContext]=\"{col: col}\">\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <ng-container *ngSwitchCase=\"'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                [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\r\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\r\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\r\n                [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\r\n                (click)=\"showSettingsWorkflowNew()\"></button>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #colFunctionHeader>\r\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\r\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\r\n            <div class=\"cell-header-function\">\r\n                <span>{{'GRID.FUNCTION'| translate}}</span>\r\n            </div>\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </th>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTh let-col>\r\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\r\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\r\n        {{col.label}}\r\n    </ng-container>\r\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n</ng-template>\r\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\r\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\r\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\r\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\r\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\r\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\r\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\r\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\r\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\r\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\r\n                        </p-checkbox>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\r\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\r\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\" class=\"stt\"\r\n            style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\r\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\r\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\r\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\r\n            {{rowData[fieldOrder]}}\r\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n        </td>\r\n        <td *ngIf=\"rowExpansion\" 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\" tooltipPosition=\"top\"\r\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\r\n                        (click)=\"delete(rowData)\"></button>\r\n                    <button *ngIf=\"showMenuButtons && this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\r\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\r\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\r\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n            </td>\r\n        </ng-container>\r\n    </tr>\r\n</ng-template>\r\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\r\n    <ng-container *ngFor=\"let col of columns; let i = index\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\r\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\r\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\r\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\r\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\r\n        <span *ngIf=\"col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            {{rowData['pipe__' + col.field]}}\r\n        </span>\r\n        <span *ngIf=\"!col.pipe\">\r\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\r\n                tooltipPosition=\"top\">{{col.label}}</span>\r\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\r\n                class=\"link-or-action\">\r\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\r\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                    </ng-container>\r\n                </a>\r\n            </span>\r\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\r\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\r\n                </ng-container>\r\n            </span>\r\n        </span>\r\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n    </td>\r\n</ng-template>\r\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\r\n    let-expanded=\"expanded\">\r\n    <ng-container *ngIf=\"col.template\">\r\n        <ng-container [ngTemplateOutlet]=\"col.template\"\r\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!col.template\">\r\n        <ng-container [ngSwitch]=\"col.dataType\">\r\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\r\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\r\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\r\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\r\n                    [ngClass]=\"rowData[field]\"></i>\r\n            </span>\r\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\r\n                tooltipPosition=\"top\">\r\n                {{rowData[field] | tnDate:col.dataType:col.format}}\r\n            </span>\r\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\r\n                {{rowData[field] | userFormat | async}}\r\n            </span>\r\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\r\n            </div>\r\n            <span *ngSwitchCase=\"'int'\">\r\n                {{rowData[field]}}\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=\"'fileUpload'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'fileManager'\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'string'\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"null\">\r\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\r\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\r\n                </ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #contentCellString let-rowData let-field=\"field\">\r\n    <span>\r\n        <!-- __sv: Short Value -->\r\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\r\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\r\n                {{rowData[field + '__sv']}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\r\n                    tooltipPosition=\"top\">[...]</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\r\n                {{rowData[field]}}\r\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\r\n            {{rowData[field]}}\r\n        </ng-container>\r\n    </span>\r\n</ng-template>\r\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\r\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\r\n    </a>\r\n</ng-template>\r\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\r\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\r\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\r\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\r\n</ng-template>\r\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\r\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\r\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\r\n    </ng-container>\r\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\r\n</ng-template>\r\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\r\n    <div class=\"container-text-workflow\">\r\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\r\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\r\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\r\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\r\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\r\n        <ng-container *ngIf=\"rowData.__workflowCode\">\r\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\r\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\r\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\r\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #viewHistory let-rowData=\"rowData\">\r\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\r\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\r\n</ng-template>\r\n<ng-template #containerSticky>\r\n    <span class=\"fix-sticky top\"></span>\r\n    <span class=\"fix-sticky right\"></span>\r\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\r\n    <span class=\"fix-sticky left\"></span>\r\n</ng-template>\r\n<ng-template #sortIcon let-field=\"field\">\r\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\r\n        [ngClass]=\"{'pi-sort-amount-up-alt': field == _sortField && _sortDir === 1, 'pi-sort-amount-down': field == _sortField && _sortDir === -1, 'pi-sort-alt': field != _sortField || _sortDir === 0}\"></i>\r\n</ng-template>\r\n<ng-template #filterDropdown let-col=\"col\">\r\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\r\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\r\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\r\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\r\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterText let-col=\"col\">\r\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\r\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\r\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\r\n        </div>\r\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\r\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterNumber let-col=\"col\">\r\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\r\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\r\n            </tn-number-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\r\n            tabindex=\"-1\">\r\n            <i class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterDate let-col=\"col\">\r\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\r\n        <div tabindex=\"-1\">\r\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\r\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\r\n            </tn-datetime-picker-range>\r\n        </div>\r\n        <span\r\n            [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] && ((filterData[col.field][0] != null && filterData[col.field][0] !== '') || (filterData[col.field][1] != null && filterData[col.field][1] !== ''))}\"\r\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\r\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\r\n                class=\"pi pi-filter-slash\"></i></span>\r\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\r\n        </after-view-checked>\r\n    </div>\r\n</ng-template>\r\n<ng-template #filterBoolean let-col=\"col\">\r\n    <div class=\"filter-boolean-box\">\r\n        <p-selectButton *ngIf=\"!col.minimizeFilter\"\r\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\r\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\r\n            <ng-template let-item>\r\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\r\n            </ng-template>\r\n        </p-selectButton>\r\n        <ng-container *ngIf=\"col.minimizeFilter\">\r\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\r\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\r\n                class=\"btn-filter-boolean p-button-primary\"\r\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\r\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\r\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\r\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\r\n    </file-upload>\r\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\r\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\r\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\r\n        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\r\n    </service-file-upload>\r\n</ng-template>\r\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\r\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\r\n        [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\r\n        [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\r\n        [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\r\n        [(value)]=\"rowData[field]\">\r\n    </file-manager>\r\n</ng-template>",
+                    template: "<div #container class=\"custom-card card card-w-title flex-container-fit-child\" [attr.height-type]=\"setting.heightType\"\n    [ngStyle]=\"_style\">\n    <div class=\"ui-helper-clearfix crud-list-header-area\">\n        <div *ngIf=\"searchCustom\" class=\"p-grid ui-fluid custom-p-col custom-search-area\">\n            <div class=\"p-col-12 main-container-search\">\n                <div class=\"p-grid main-container-search-inner\">\n                    <ng-container>\n                        <ng-container *ngTemplateOutlet=\"searchCustom; context: {$implicit: this}\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"!setting.hiddenHeader\" class=\"p-grid ui-fluid custom-p-col page-title-area\">\n            <div *ngIf=\"!setting.hiddenPageTitle\" class=\"main-title\">\n                <h1 *ngIf=\"!hasTemplate('customTitle')\">\n                    {{setting.title != null ? setting.title : 'Danh s\u00E1ch ' + setting.objectName}}\n                </h1>\n\n                <ng-container *ngIf=\"hasTemplate('customTitle')\" [ngTemplateOutlet]=\"getTemplate('customTitle')\"\n                    [ngTemplateOutletContext]=\"{crudList: this}\">\n                </ng-container>\n            </div>\n\n            <div *ngIf=\"!setting.hiddenPageSetting\" class=\"paginator-table\">\n                <paging-next-back-only [model]=\"model\" [setting]=\"setting\" (onChanged)=\"getData()\"\n                    (onChangeLimitPage)=\"savePageSize()\">\n                </paging-next-back-only>\n            </div>\n        </div>\n    </div>\n    <div class=\"fit-content crud-list-body-area\">\n        <div class=\"crud-list-body-area-inner\" style=\"overflow: unset;\">\n            <div class=\"flex-container-fit-child\" style=\"overflow: unset;\">\n                <div *ngIf=\"!setting.hiddenToolbar\" class=\"p-grid crudListToolbar\">\n                    <ng-container>\n                        <div *ngIf=\"!setting.hiddenButtons && hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar custom-toolbar\">\n                            <ng-container\n                                [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n                                [ngTemplateOutlet]=\"getTemplate('toolbar')\"></ng-container>\n                        </div>\n                        <div *ngIf=\"!setting.hiddenButtons && !hasTemplate('toolbar')\"\n                            [ngClass]=\"setting.hiddenAdvanceSearch ? 'p-md-12 p-lg-12' : 'p-md-7 p-lg-8'\"\n                            class=\"p-col-12 button-group function-topbar\">\n                            <button *ngIf=\"!hiddenAdd\" type=\"button\" pButton pRipple label=\"Th\u00EAm m\u1EDBi\" icon=\"pi pi-plus\"\n                                class=\"p-button-text\" [disabled]=\"!model.baseReady\" (click)=\"add()\"></button>\n                            <button *ngIf=\"setting.showExportSelectedItems && model.selectedItems.length > 0\"\n                                type=\"button\" pButton pRipple\n                                label=\"Xu\u1EA5t c\u00E1c m\u1EE5c \u0111\u00E3 ch\u1ECDn ({{model.selectedItems.length}})\" icon=\"fas fa-file-excel\"\n                                class=\"p-button-text p-button-success\" (click)=\"xuatCacMucDaChon()\"></button>\n                            <button *ngIf=\"!hiddenDelete && model.selectedItems.length > 0 && !disableMultipleDelete()\"\n                                type=\"button\" pButton pRipple\n                                [label]=\"'X\u00F3a ' + (model.selectedItems.length) | translate\" icon=\"pi pi-trash\"\n                                class=\"p-button-text p-button-danger\" (click)=\"deleteMutiple()\"></button>\n                            <button *ngIf=\"!setting.disableShare && model.selectedItems.length > 0\"\n                                label=\"Chia s\u1EBB li\u00EAn k\u1EBFt\" type=\"button\" pButton pRipple\n                                [pTooltip]=\"'Chia s\u1EBB li\u00EAn k\u1EBFt' | translate\" tooltipPosition=\"top\"\n                                class=\"p-button-text p-button-info link-or-action\" icon=\"pi pi-link\"\n                                (click)=\"createShareLinkMultiple()\"></button>\n                            <ng-container [ngTemplateOutlet]=\"getTemplate('buttonAfterToolbar')\"\n                                [ngTemplateOutletContext]=\"{crudList: this}\"></ng-container>\n                        </div>\n                    </ng-container>\n                    <div *ngIf=\"!setting.hiddenAdvanceSearch\" class=\"p-col-12 advance-search-container\"\n                        [ngClass]=\"setting.hiddenButtons ? 'p-md-12 p-lg-12' : 'p-md-5 p-lg-4'\">\n                        <advance-search #advanceSearch [parentSetting]=\"setting\" [searchInfo]=\"searchInfo\"\n                            [loading]=\"model.loading\" (onSearch)=\"handleSearchAdvs($event)\"\n                            (onInit)=\"handleInitAdvanceSearch($event)\">\n                        </advance-search>\n                    </div>\n                </div>\n                <div *ngIf=\"hasTemplate('topGrid')\" class=\"extend-content-top-grid\">\n                    <ng-container [ngTemplateOutletContext]=\"{selectedItems: model.selectedItems, crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('topGrid')\"></ng-container>\n                </div>\n                <div class=\"container-table fit-content\" [class.--table-responsive]=\"responsive\">\n                    <div class=\"container-table-inner\">\n                        <ng-container *ngIf=\"!_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldFalse\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"_groupField\">\n                            <tn-custom-scrollbar *ngIf=\"showScrollBar\" #scrollbar [config]=\"configScrollBar\"\n                                [showScrollHorizontal]=\"showScrollHorizontal\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                                <ng-container *ngIf=\"hasTemplate('afterCrudList')\">\n                                    <ng-container [ngTemplateOutlet]=\"getTemplate('afterCrudList')\"></ng-container>\n                                </ng-container>\n                            </tn-custom-scrollbar>\n                            <div *ngIf=\"!showScrollBar\">\n                                <ng-container *ngTemplateOutlet=\"tableGetGroupFieldTrue\">\n                                </ng-container>\n                            </div>\n                        </ng-container>\n\n                        <div class=\"table-border-line --top\"></div>\n                        <div class=\"table-border-line --right\"></div>\n                        <div class=\"table-border-line --bottom\"></div>\n                        <div class=\"table-border-line --left\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<after-view-checked (loaded)=\"handleReady()\"></after-view-checked>\n<settings *ngIf=\"_showSettings && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveSettings($event)\"\n    (onDelete)=\"onDeleteSettings()\" (onCancel)=\"_showSettings = false\">\n</settings>\n<settings-row *ngIf=\"_showSettingsRowColor && !setting.hiddenSetting\" [entityMetadataService]=\"entityMetadataService\"\n    [parentContext]=\"context\" [parentSetting]=\"setting\" [parentModel]=\"model\" (onSave)=\"onSaveColorSettings($event)\"\n    (onCancel)=\"_showSettingsRowColor = false\">\n</settings-row>\n<workflow-setting-dialog *ngIf=\"_showSettingsWorkflow && !setting.hiddenSettingWorkflow\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" (onSaved)=\"onSaveWorkflowSettings($event)\"\n    (onRemoved)=\"onRemoveWorkflowSettings($event)\" (onCancel)=\"_showSettingsWorkflow = false\"></workflow-setting-dialog>\n<tn-dialog *ngIf=\"workflowSettingModel.showEditForm\" [header]=\"'C\u1EA5u h\u00ECnh quy tr\u00ECnh nghi\u1EC7p v\u1EE5' | translate\"\n    [popupSize]=\"workflowSettingModel.popupSize\" (onHide)=\"workflowSettingModel.showEditForm = false\">\n    <workflow-setting-new #formBase [parentSetting]=\"setting\" (onSaved)=\"onSaveWorkflowSettingsNew($event)\"\n        (onCancel)=\"workflowSettingModel.showEditForm = false\"></workflow-setting-new>\n</tn-dialog>\n<entity-permission *ngIf=\"_showSettingsPermission && !setting.hiddenSettingPermission\" [parentSetting]=\"setting\"\n    [parentContext]=\"context\" [parentModel]=\"model\" [searchInfo]=\"searchInfo\"\n    (onCancel)=\"_showSettingsPermission = false\">\n</entity-permission>\n<p-contextMenu #contextMenu [appendTo]=\"'body'\" [styleClass]=\"'allow-selected'\" [model]=\"buttonContexts\">\n</p-contextMenu>\n<tn-dialog *ngIf=\"processWorkflowModel.showEditForm\" #dialog [header]=\"processWorkflowModel.header | translate\"\n    [popupSize]=\"processWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"processWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%; padding: 1rem\">\n        <process-workflow-form #formBase [businessSetting]=\"processWorkflowModel.data.setting\" [item]=\"currentItem\"\n            [workflow]=\"processWorkflowModel.data.workflow\" [action]=\"processWorkflowModel.data.action\"\n            (onSaved)=\"handleProcessedWorkflowBase()\" (onCancel)=\"processWorkflowModel.showEditForm = false\">\n        </process-workflow-form>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"choYKienModel.showEditForm\" #dialog [header]=\"choYKienModel.header | translate\"\n    [popupSize]=\"choYKienModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"choYKienModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <cho-y-kien-form #formBase [bussinessSetting]=\"choYKienModel.data.setting\"\n            [rowItem]=\"choYKienModel.data.rowData\" (onSaved)=\"choYKienModel.showEditForm = false\"\n            (onCancel)=\"choYKienModel.showEditForm = false\">\n        </cho-y-kien-form>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"workflowHistoryModel.showEditForm\" #dialog [header]=\"workflowHistoryModel.header | translate\"\n    [popupSize]=\"workflowHistoryModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"workflowHistoryModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <workflow-history-new #formBase [businessSetting]=\"workflowHistoryModel.data.setting\"\n            [tableName]=\"workflowHistoryModel.data.tableName\" [item]=\"currentItem\"\n            [workflowSetting]=\"workflowHistoryModel.data.workflowSetting\"\n            (onCancel)=\"workflowHistoryModel.showEditForm = false\">\n        </workflow-history-new>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"detailTaskModel.showEditForm\" #dialog [header]=\"detailTaskModel.header | translate\"\n    [popupSize]=\"detailTaskModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"detailTaskModel.showEditForm = false\">\n    <base-congviec-form #formBase [model]=\"detailTaskModel.data.taskFormModel\" [forceOnlyView]=\"true\"\n        (onCancel)=\"detailTaskModel.showEditForm = false\">\n    </base-congviec-form>\n</tn-dialog>\n\n<!-- <tn-dialog *ngIf=\"showDetailForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"setting.popupHeader | translate\" [popupSize]=\"setting.popupSize\" (onHide)=\"showDetailForm = false\">\n    <base-congviec-form #formBase [parentModel]=\"model\" [parentSetting]=\"setting\" [parentContext]=\"context\"\n        [model]=\"formModel\" [crudList]=\"crudList\" (onSaved)=\"showDetailForm = false;crudList.reload()\"\n        (onCancel)=\"_handleCancel($event)\" (onAfterSaved)=\"onAfterSaved($event)\">\n    </base-congviec-form>\n</tn-dialog> -->\n\n<tn-dialog *ngIf=\"permissionSharingModel.showEditForm\" #dialog [header]=\"permissionSharingModel.header | translate\"\n    [popupSize]=\"permissionSharingModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"permissionSharingModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <permission-sharing #formBase [item]=\"rowDataCurrent\" [baseService]=\"setting.baseService\"\n            (onCancel)=\"permissionSharingModel.showEditForm = false\">\n        </permission-sharing>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"permissionListModel.showEditForm\" #dialog [header]=\"permissionListModel.header | translate\"\n    [popupSize]=\"permissionListModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"permissionListModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <workflow-permission #formBase [item]=\"rowDataCurrent\" [businessSetting]=\"setting\"\n            (onCancel)=\"permissionListModel.showEditForm = false\">\n        </workflow-permission>\n    </div>\n</tn-dialog>\n<workflow-history-dialog *ngIf=\"showHistoryWorkflow\" [baseService]=\"setting.baseService\" [item]=\"currentItem\"\n    [workflowSetting]=\"setting.workflowSetting\" (onHide)=\"handleHideHistoryWorkflow()\">\n</workflow-history-dialog>\n<tn-dialog *ngIf=\"startWorkflowModel.showEditForm\" #dialog [header]=\"startWorkflowModel.header | translate\"\n    [popupSize]=\"startWorkflowModel.popupSize\" [scrollBarStyleClass]=\"'fit-content'\"\n    (onHide)=\"startWorkflowModel.showEditForm = false\">\n    <div style=\"height: 100%\">\n        <start-workflow #formBase [workflows]=\"startWorkflowModel.data.workflows\"\n            [defaultWorkflow]=\"startWorkflowModel.data.defaultWorkflow\"\n            (onCancel)=\"startWorkflowModel.showEditForm = false\" (onSaved)=\"handleStartWorkflowFromDialog($event)\">\n        </start-workflow>\n    </div>\n</tn-dialog>\n<tn-dialog *ngIf=\"congViecModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"congViecModel.header | translate\" [popupSize]=\"congViecModel.popupSize\"\n    (onHide)=\"congViecModel.showEditForm = false\">\n    <base-congviec-form #formBase [parentSetting]=\"congViecModel.data.congViecSetting\"\n        [model]=\"congViecModel.data.model\" (onSaved)=\"congViecModel.showEditForm = false;getData()\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </base-congviec-form>\n</tn-dialog>\n<tn-dialog *ngIf=\"shareLinkModel.showEditForm\" #dialog [styleClass]=\"'congviec-form tn-form-dialog'\"\n    [header]=\"shareLinkModel.header | translate\" [popupSize]=\"shareLinkModel.popupSize\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"shareLinkModel.showEditForm = false\">\n    <share-link-by-permission #formBase [setting]=\"setting\" [lstItem]=\"shareLinkModel.data.lstItem\"\n        (onCancel)=\"congViecModel.showEditForm = false\">\n    </share-link-by-permission>\n</tn-dialog>\n<tn-dialog *ngIf=\"attachedTaskModel.showEditForm\" [header]=\"attachedTaskModel.header | translate\"\n    [popupSize]=\"attachedTaskModel.popupSize\" [useDefaultScrollBar]=\"true\"\n    (onHide)=\"attachedTaskModel.showEditForm = false\">\n    <base-congviec [serviceCode]=\"setting.baseService.serviceCode\" [entity]=\"setting.baseService.entityName\"\n        [itemIdAttach]=\"rowDataCurrent.id\"></base-congviec>\n</tn-dialog>\n<ng-template #tableGetGroupFieldFalse>\n    <p-table #table [dataKey]=\"'id'\" [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\"\n        [columns]=\"setting.cols\" [paginator]=\"false\" [value]=\"_dataSource\" (onSort)=\"onSort($event, table)\"\n        [class]=\"_tableClass\" [responsive]=\"responsive\" [lazy]=\"lazy\" [loading]=\"model.loading\"\n        [(selection)]=\"model.selectedItems\" (onRowReorder)=\"handleRowOrdered($event)\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-index=\"rowIndex\" let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: expanded, eventSelectRow: handleSelectRow, eventChecked: handleCheckRowData}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"rowExpansion\" pTemplate=\"rowexpansion\" let-rowData let-expanded=\"expanded\">\n            <ng-container\n                *ngTemplateOutlet=\"rowExpansion; context: {rowData: rowData, expanded: expanded, getColSpanGroup: getColSpanGroup}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n</ng-template>\n<ng-template #tableGetGroupFieldTrue>\n    <p-table #tableGroup [scrollable]=\"pTableScrollable\" [scrollHeight]=\"pTableScrollHeight\" [columns]=\"setting.cols\"\n        [paginator]=\"false\" [value]=\"_dataSource\" [metaKeySelection]=\"false\" (onSort)=\"onSort($event, tableGroup)\"\n        [class]=\"_tableClass\" [customSort]=\"true\" [responsive]=\"responsive\" [lazy]=\"true\" [loading]=\"model.loading\"\n        [(selection)]=\"model.selectedItems\" [expandedRowKeys]=\"model.expandedRowKeys\" [dataKey]=\"_groupField\">\n        <ng-template *ngIf=\"colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"colgroup; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!colgroup\" pTemplate=\"colgroup\" let-columns>\n            <ng-container *ngTemplateOutlet=\"baseColgroup; context: {$implicit: columns}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"header, context: {$implicit: columns, crudList: this, rowHeaderFilter: rowHeaderFilter, contentTh: contentTh, containerSticky: containerSticky, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"!header\" pTemplate=\"header\" let-columns>\n            <ng-container\n                *ngTemplateOutlet=\"trHeader; context: {$implicit: columns, funcCheckAll: handleCheckAll_Group}\">\n            </ng-container>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\" let-expanded=\"expanded\" let-columns=\"columns\">\n            <tr *ngIf=\"rowGroupMetadata[rowData[_groupField]] && rowGroupMetadata[rowData[_groupField]].index == rowIndex\"\n                class=\"p-widget-header group-row\" style=\"border: 0px; border-bottom: 1px solid #eee\">\n                <td *ngIf=\"!setting.hiddenCheckbox\" class=\"center chkbox\" [class.sticky]=\"setting.stickyColumn\">\n                    <p-checkbox [(ngModel)]=\"rowGroupChecked[rowData[_groupField]]\" binary=\"true\"\n                        (onChange)=\"handleCheckRowGroup(rowData)\">\n                    </p-checkbox>\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                </td>\n                <ng-container *ngIf=\"!rowGroup\">\n                    <td [colSpan]=\"getColSpanGroup()\" [class]=\"_classRowGroup\">\n                        <div class=\"container-row-group\">\n                            <a href=\"javascript:;\" [pRowToggler]=\"rowData\" class=\"container-row-group-toggle\"\n                                [class.sticky]=\"setting.stickyColumn\">\n                                <i style=\"margin-right:5px\"\n                                    [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n                                <span class=\"content-row-group\">\n                                    <ng-container *ngIf=\"!contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"_contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"contentRowGroup\">\n                                        <ng-container [ngTemplateOutlet]=\"contentRowGroup\"\n                                            [ngTemplateOutletContext]=\"getContextRowGroup(rowData)\">\n                                        </ng-container>\n                                    </ng-container>\n                                </span>\n                            </a>\n                        </div>\n                    </td>\n                </ng-container>\n                <ng-container *ngIf=\"rowGroup\">\n                    <ng-container [ngTemplateOutlet]=\"rowGroup\"\n                        [ngTemplateOutletContext]=\"getContextRowGroupRoot(rowData, expanded)\">\n                    </ng-container>\n                </ng-container>\n            </tr>\n        </ng-template>\n        <ng-template pTemplate=\"rowexpansion\" let-columns=\"columns\" let-rowData let-index=\"rowIndex\">\n            <ng-container\n                *ngTemplateOutlet=\"trBody; context: {$implicit: rowData, columns: columns, index: index, expanded: false, eventSelectRow: handleSelectRowGroup, eventChecked: handleCheckRowData_Group}\">\n            </ng-container>\n            <after-view-checked *ngIf=\"index == _dataSource.length - 1\" style=\"display: none;\" [renderKey]=\"_dataSource\"\n                (loaded)=\"handleTableRendered()\">\n            </after-view-checked>\n        </ng-template>\n        <ng-template *ngIf=\"summary\" pTemplate=\"summary\">\n            <ng-container *ngTemplateOutlet=\"summary\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"footer\" pTemplate=\"footer\" let-columns>\n            <ng-container *ngTemplateOutlet=\"footer; context: {$implicit: columns}\"></ng-container>\n        </ng-template>\n    </p-table>\n    <after-view-checked></after-view-checked>\n</ng-template>\n<ng-template #baseColgroup let-columns>\n    <colgroup>\n        <col *ngIf=\"!setting.hiddenCheckbox\" [style.width]=\"widthCheckbox\" />\n        <col *ngIf=\"!setting.hiddenOrderColumn\" [style.width]=\"widthOrderColumn\" />\n        <col *ngIf=\"rowExpansion\" style=\"width: 2.5rem\" />\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <col *ngIf=\"col && col.visible && col.field!='function'\" [style.width]=\"col.width\" />\n        </ng-container>\n        <col *ngIf=\"enableReorderRow\" style=\"width: 30px\" />\n        <col *ngIf=\"!setting.hiddenFunctionColumn\" [style.width]=\"widthFunctionColumn || _widthFunctionColumn\" />\n    </colgroup>\n</ng-template>\n<ng-template #trHeader let-columns let-funcCheckAll=\"funcCheckAll\">\n    <tr class=\"title-row\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n            <th class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n                <button *ngIf=\"!hasTemplate('headerCheckbox')\" type=\"button\" pButton pRipple icon=\"pi pi-refresh\"\n                    class=\"p-button-rounded p-button-text btnReload\" pTooltip=\"L\u00E0m m\u1EDBi d\u1EEF li\u1EC7u\" tooltipPosition=\"top\"\n                    [disabled]=\"model.loading\" (click)=\"reload()\"></button>\n                <ng-container *ngIf=\"hasTemplate('headerCheckbox')\">\n                    <ng-container [ngTemplateOutletContext]=\"{crudList: this}\"\n                        [ngTemplateOutlet]=\"getTemplate('headerCheckbox')\"></ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            (dblclick)=\"reload()\">\n            {{ 'TT' |translate}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad row-expansion-toggle center\" style=\"width: 2.5rem\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col && col.visible && col.field!='function'\" [ngStyle]=\"col.extendData.headerStyle\"\n                [pTooltip]=\"col.fullLabel\" tooltipStyleClass=\"unset-width\" [class]=\"col.extendData.headerClass\"\n                [class.first-th]=\"i==0\" [escape]=\"false\" tooltipPosition=\"top\" [tnSortableColumn]=\"col.field\"\n                [tnSortableColumnDisabled]=\"!col.sort\">\n                <ng-container *ngTemplateOutlet=\"contentTh; context: {$implicit: col}\"></ng-container>\n                <ng-container *ngIf=\"col.sort || col.sortClient\">\n                    <ng-container *ngTemplateOutlet=\"sortIcon; context: {field: col.field}\"></ng-container>\n                </ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngTemplateOutlet=\"colFunctionHeader\"></ng-container>\n    </tr>\n    <ng-container *ngTemplateOutlet=\"rowHeaderFilter; context: {columns: columns, funcCheckAll: funcCheckAll}\">\n    </ng-container>\n</ng-template>\n<ng-template #rowHeaderFilter let-columns=\"columns\" let-funcCheckAll=\"funcCheckAll\">\n    <tr class=\"filter-row\" *ngIf=\"!setting.hiddenFilterRow\">\n        <th *ngIf=\"!setting.hiddenCheckbox\" class=\"chkbox nopad center\" [class.sticky]=\"setting.stickyColumn\"\n            [class.tricheckbox-custom-false]=\"checkedAll === false\">\n            <p-triStateCheckbox [(ngModel)]=\"checkedAll\" binary=\"true\" (onChange)=\"funcCheckAll()\">\n            </p-triStateCheckbox>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"!setting.hiddenOrderColumn\" class=\"stt center v-top\" [class.sticky]=\"setting.stickyColumn\">\n            <div *ngIf=\"!setting.hiddenSetting\" class=\"pick-color-row\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB m\u00E0u\"\n                tooltipPosition=\"top\" (click)=\"showSettingRowColor()\">\n                <div></div>\n                <div></div>\n                <div></div>\n                <div></div>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"rowExpansion\" class=\"nopad center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <ng-container *ngFor=\"let col of columns; let i = index\">\n            <th *ngIf=\"col.visible && col.field != 'function'\" class=\"cell-header-filter center\">\n                <ng-container *ngIf=\"col.allowFilter\">\n                    <ng-container *ngIf=\"col.templateFilter\">\n                        <ng-container [ngTemplateOutlet]=\"col.templateFilter\"\n                            [ngTemplateOutletContext]=\"{col: col, filterData: filterData, onSearch: onSearch, onShowFilterDropdownPanel: onShowFilterDropdownPanel, onHideFilterDropdownPanel: onHideFilterDropdownPanel}\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!col.templateFilter\" [ngSwitch]=\"col.controlType\">\n                        <ng-container *ngSwitchCase=\"'dropdown'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDropdown\"\n                                [ngTemplateOutletContext]=\"{col: col.rawColumn}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'number'\">\n                            <ng-container [ngTemplateOutlet]=\"filterNumber\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'date'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchCase=\"'datetime'\">\n                            <ng-container [ngTemplateOutlet]=\"filterDate\" [ngTemplateOutletContext]=\"{col: col}\">\n                            </ng-container>\n                        </ng-container>\n                        <ng-container *ngSwitchDefault>\n                            <ng-container [ngSwitch]=\"col.dataType\">\n                                <ng-container *ngSwitchCase=\"'int'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'decimal'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterNumber\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'date'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterDate\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                    <ng-container [ngTemplateOutlet]=\"filterBoolean\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                                <ng-container *ngSwitchDefault>\n                                    <ng-container [ngTemplateOutlet]=\"filterText\"\n                                        [ngTemplateOutletContext]=\"{col: col}\">\n                                    </ng-container>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </th>\n        </ng-container>\n        <th *ngIf=\"enableReorderRow\" style=\"width: 30px\">\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n        <th *ngIf=\"!setting.hiddenFunctionColumn\" class=\"center setting-cell column-function\"\n            [class.sticky]=\"setting.stickyColumn\">\n            <button *ngIf=\"!setting.hiddenSetting\" type=\"button\" pButton pRipple icon=\"pi pi-cog\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB\" tooltipPosition=\"top\"\n                (click)=\"showSettings()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingPermission\" type=\"button\" pButton pRipple icon=\"pi pi-users\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"Ph\u00E2n quy\u1EC1n d\u1EEF li\u1EC7u\" tooltipPosition=\"left\"\n                [disabled]=\"!checkPermissionToUseButton(BUTTON_PHAN_QUYEN)\" (click)=\"showSettingsPermission()\"></button>\n            <button *ngIf=\"!setting.hiddenSettingWorkflow\" type=\"button\" pButton pRipple icon=\"pi pi-sitemap\"\n                class=\"p-button-rounded p-button-text\" pTooltip=\"C\u1EA5u h\u00ECnh quy tr\u00ECnh\" tooltipPosition=\"left\"\n                [disabled]=\"!checkPermissionToUseButton(BUTTON_CAU_HINH_QUY_TRINH)\"\n                (click)=\"showSettingsWorkflowNew()\"></button>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </tr>\n</ng-template>\n<ng-template #colFunctionHeader>\n    <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n        <th class=\"column-function\" [class.sticky]=\"setting.stickyColumn\">\n            <div class=\"cell-header-function\">\n                <span>{{'GRID.FUNCTION'| translate}}</span>\n            </div>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </th>\n    </ng-container>\n</ng-template>\n<ng-template #contentTh let-col>\n    <ng-container *ngIf=\"templateHeaderContent[col.field]\">\n        <ng-container *ngTemplateOutlet=\"templateHeaderContent[col.field]\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!templateHeaderContent[col.field]\">\n        {{col.label}}\n    </ng-container>\n    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n</ng-template>\n<ng-template #trBody let-rowData let-columns=\"columns\" let-index=\"index\" let-expanded=\"expanded\"\n    let-eventSelectRow=\"eventSelectRow\" let-eventChecked=\"eventChecked\">\n    <tr [tnReorderableRow]=\"index\" [attr.rowIndex]=\"index\" [ngClass]=\"rowData.objStyleClass\"\n        [class.ui-state-highlight]=\"rowData._checked\" [pTooltip]=\"rowData.tooltip\" tooltipPosition=\"top\"\n        [tooltipStyleClass]=\"rowData.tooltipClass\" [escape]=\"escape\" (click)=\"eventSelectRow($event, rowData)\">\n        <ng-container *ngIf=\"!setting.hiddenCheckbox\">\n            <td class=\"chkbox link-or-action cell-checkbox\" [class.sticky]=\"setting.stickyColumn\">\n                <ng-container *ngIf=\"!rowData.hiddenCheckBox\">\n                    <ng-container *ngIf=\"!hasTemplate('checkbox')\">\n                        <p-checkbox [(ngModel)]=\"rowData._checked\" binary=\"true\" (onChange)=\"eventChecked(rowData)\">\n                        </p-checkbox>\n                    </ng-container>\n                    <ng-container *ngIf=\"hasTemplate('checkbox')\">\n                        <ng-container [ngTemplateOutlet]=\"getTemplate('checkbox')\"\n                            [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n        <td *ngIf=\"!setting.hiddenOrderColumn && (!rowData.hidden || !rowData.hidden[fieldOrder])\" class=\"stt\"\n            style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\"\n            [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[fieldOrder]\"\n            [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[fieldOrder]\">\n            <span class=\"row-card\" [ngStyle]=\"rowData.bookmarkStyle\"></span>\n            {{rowData[fieldOrder]}}\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <td *ngIf=\"rowExpansion\" class=\"no-padding center row-expansion-toggle\" [class.sticky]=\"setting.stickyColumn\">\n            <ng-container *ngTemplateOutlet=\"iconToggleRowData; context: {rowData: rowData, expanded: expanded}\">\n            </ng-container>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container\n            *ngTemplateOutlet=\"dynamicColBodys; context: {$implicit: columns, rowData: rowData, index: index, expanded: expanded}\">\n        </ng-container>\n        <td *ngIf=\"enableReorderRow\" class=\"no-padding center\">\n            <i class=\"fas fa-arrows-alt\" style=\"cursor:pointer; padding: 8px; color: #555;\" pReorderableRowHandle></i>\n            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n        </td>\n        <ng-container *ngIf=\"!setting.hiddenFunctionColumn\">\n            <td class=\"text-center column-function\" style=\"text-align: center;\" [class.sticky]=\"setting.stickyColumn\">\n                <div *ngIf=\"hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                    <ng-container [ngTemplateOutlet]=\"getTemplate('function')\"\n                        [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n                </div>\n                <div *ngIf=\"!hasTemplate('function')\" class=\"p-toolbar-group-center button-group\">\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                        [ngTemplateOutlet]=\"getTemplate('buttonBefore')\"></ng-container>\n                    <button *ngIf=\"setting.showVersionButton\" type=\"button\" pButton pRipple icon=\"pi pi-calendar\"\n                        class=\"p-button-rounded p-button-success link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED phi\u00EAn b\u1EA3n\"\n                        tooltipPosition=\"top\" (click)=\"showListVersion(rowData)\"></button>\n                    <button *ngIf=\"!rowData.hiddenEdit\" type=\"button\" pButton pRipple [disabled]=\"disableEdit(rowData)\"\n                        [pTooltip]=\"'FORM.EDIT' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-info link-or-action\" icon=\"pi pi-pencil\"\n                        (click)=\"edit(rowData)\"></button>\n                    <button *ngIf=\"!rowData.hiddenDelete\" type=\"button\" pButton pRipple\n                        [disabled]=\"disableDelete(rowData)\" [pTooltip]=\"'FORM.DELETE' | translate\" tooltipPosition=\"top\"\n                        class=\"p-button-rounded p-button-text p-button-danger link-or-action\" icon=\"pi pi-trash\"\n                        (click)=\"delete(rowData)\"></button>\n                    <button *ngIf=\"showMenuButtons && this.menuButtons\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                        class=\"link-or-action p-button-text p-button-info p-button-rounded\" pTooltip=\"Ch\u1EE9c n\u0103ng kh\u00E1c\"\n                        tooltipPosition=\"top\" (click)=\"showContextMenu($event, rowData)\"></button>\n                    <ng-container [ngTemplateOutletContext]=\"{rowData: rowData, rowIndex: index}\"\n                        [ngTemplateOutlet]=\"getTemplate('buttonAfter')\"></ng-container>\n                </div>\n                <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n            </td>\n        </ng-container>\n    </tr>\n</ng-template>\n<ng-template #dynamicColBodys let-columns let-rowData=\"rowData\" let-index=\"index\" let-expanded=\"expanded\">\n    <ng-container *ngFor=\"let col of columns; let i = index\">\n        <ng-container\n            *ngTemplateOutlet=\"contentTd; context: {$implicit: rowData, col: col, index: index, i: i, expanded: expanded}\">\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentTd let-rowData let-col=\"col\" let-index=\"index\" let-expanded=\"expanded\" let-i=\"i\">\n    <td *ngIf=\"col && col.visible && col.field != 'function' && (!rowData.hidden || !rowData.hidden[col.field])\"\n        [attr.colSpan]=\"rowData.colSpan && rowData.colSpan[col.field]\"\n        [attr.rowSpan]=\"rowData.rowSpan && rowData.rowSpan[col.field]\" [ngStyle]=\"col.extendData.style\"\n        [class]=\"col.cellClass\" [class.first-td]=\"i == 0\">\n        <span *ngIf=\"col.pipe\">\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span>\n            {{rowData['pipe__' + col.field]}}\n        </span>\n        <span *ngIf=\"!col.pipe\">\n            <span class=\"p-column-title\" [pTooltip]=\"col.fullLabel\" [escape]=\"false\"\n                tooltipPosition=\"top\">{{col.label}}</span>\n            <span *ngIf=\"setting.showEditLink && col.showEditLink\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\"\n                class=\"link-or-action\">\n                <a href=\"javascript:;\" (click)=\"view(rowData)\" [pTooltip]=\"config.tooltipView\" tooltipPosition=\"top\">\n                    <ng-container [ngTemplateOutlet]=\"contentCell\"\n                        [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                    </ng-container>\n                </a>\n            </span>\n            <span *ngIf=\"!setting.showEditLink || !col.showEditLink\">\n                <ng-container [ngTemplateOutlet]=\"contentCell\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, index, col, expanded, this)\">\n                </ng-container>\n            </span>\n        </span>\n        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\n    </td>\n</ng-template>\n<ng-template #contentCell let-col=\"col\" let-rowData=\"rowData\" let-rowIndex=\"rowIndex\" let-field=\"field\"\n    let-expanded=\"expanded\">\n    <ng-container *ngIf=\"col.template\">\n        <ng-container [ngTemplateOutlet]=\"col.template\"\n            [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded,this)\">\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!col.template\">\n        <ng-container [ngSwitch]=\"col.dataType\">\n            <span *ngSwitchCase=\"'color'\" style=\"display:block;text-align:center;\">\n                <div [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" [ngStyle]=\"{'background-color':rowData[field]}\"\n                    style=\"width:30px;height:30px;margin:0 auto;\"></div>\n            </span>\n            <span *ngSwitchCase=\"'icon'\" style=\"display:block;text-align:center;\">\n                <i [pTooltip]=\"rowData[field]\" tooltipPosition=\"top\" style=\"text-align: center;\"\n                    [ngClass]=\"rowData[field]\"></i>\n            </span>\n            <span *ngSwitchCase=\"'date'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy'\" tooltipPosition=\"top\">\n                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'datetime'\" [pTooltip]=\"rowData[field] | date:'dd/MM/yyyy HH:mm'\"\n                tooltipPosition=\"top\">\n                {{rowData[field] | tnDate:col.dataType:col.format}}\n            </span>\n            <span *ngSwitchCase=\"'user'\" class=\"user\">\n                {{rowData[field] | userFormat | async}}\n            </span>\n            <div *ngSwitchCase=\"'users'\" [innerHTML]=\"rowData[field] | usersFormat | async\">\n            </div>\n            <span *ngSwitchCase=\"'int'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'decimal'\">\n                {{rowData[field]}}\n            </span>\n            <span *ngSwitchCase=\"'boolean'\">\n                <p-checkbox class=\"boolean-data-type\" [(ngModel)]=\"rowData[field]\" binary=\"true\"\n                    [disabled]=\"col.disableCheckBox\">\n                </p-checkbox>\n            </span>\n            <span *ngSwitchCase=\"'html'\">\n                <div *ngIf=\"rowData[field]==null?'':rowData[field]\" [innerHTML]=\"rowData[field] | safeHtml\"></div>\n            </span>\n            <span *ngSwitchCase=\"'metadataStatus'\">\n                <span *ngIf=\"rowData['rejectReason']\" class=\"label-danger\" [pTooltip]=\"rowData['rejectReason']\"\n                    tooltipStyleClass=\"unset-width\" [escape]=\"false\" tooltipPosition=\"top\">T\u1EEB ch\u1ED1i</span>\n                <span *ngIf=\"rowData[field] == '0' && !rowData['rejectReason']\" class=\"label-secondary\">Ch\u01B0a\n                    duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '1' && !rowData['rejectReason']\" class=\"label-warning\">Ch\u1EDD duy\u1EC7t</span>\n                <span *ngIf=\"rowData[field] == '2'\" class=\"label-primary\">\u0110\u00E3 duy\u1EC7t</span>\n            </span>\n            <ng-container *ngSwitchCase=\"'fileUpload'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileUploadColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'fileManager'\">\n                <ng-container\n                    *ngTemplateOutlet=\"fileManagerColumn; context: {$implicit: rowData, field: col.field, fileSetting: col.fileSetting}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'string'\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"null\">\n                <ng-container *ngTemplateOutlet=\"contentCellString; context: {$implicit: rowData, field: col.field}\">\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <ng-container [ngTemplateOutlet]=\"getComponentByType(col.dataType)\"\n                    [ngTemplateOutletContext]=\"getContextCell(rowData, rowIndex, col, expanded, this)\">\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n<ng-template #contentCellString let-rowData let-field=\"field\">\n    <span>\n        <!-- __sv: Short Value -->\n        <ng-container *ngIf=\"rowData[field + '__sv']\">\n            <ng-container *ngIf=\"!rowData[field + '__showFull']\">\n                {{rowData[field + '__sv']}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\" pTooltip=\"B\u1EA5m \u0111\u1EC3 xem th\u00EAm\"\n                    tooltipPosition=\"top\">[...]</span>\n            </ng-container>\n            <ng-container *ngIf=\"rowData[field + '__showFull']\">\n                {{rowData[field]}}\n                <span class=\"toggle-showfull\" (click)=\"toggleShowFull(rowData, field)\">Thu g\u1ECDn</span>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!rowData[field + '__sv']\">\n            {{rowData[field]}}\n        </ng-container>\n    </span>\n</ng-template>\n<ng-template #iconToggleRowGroup let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <a href=\"javascript:;\" (click)=\"handleToggleRow(rowData, $event)\">\n        <i style=\"margin-right:5px\" [ngClass]=\"expanded ? 'fas fa-fw fa-caret-down' : 'fas fa-fw fa-caret-right'\"></i>\n    </a>\n</ng-template>\n<ng-template #iconToggleRowData let-rowData=\"rowData\" let-expanded=\"expanded\">\n    <button type=\"button\" pButton pRipple class=\"link-or-action p-button-text p-button-rounded p-button-plain\"\n        [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n        (click)=\"handleToggleRow(rowData, $event)\"></button>\n</ng-template>\n<ng-template #_contentRowGroup let-rowData=\"rowData\" let-groupCol=\"groupCol\" let-groupField=\"_groupField\">\n    <ng-container [ngTemplateOutlet]=\"contentCell\"\n        [ngTemplateOutletContext]=\"{rowData: rowData, col: groupCol, field: _groupField}\">\n    </ng-container>\n    <span> ({{rowGroupMetadata[rowData[_groupField]].size}})</span>\n</ng-template>\n<ng-template #trangThaiV5 let-rowData=\"rowData\">\n    <div class=\"container-text-workflow\">\n        <button *ngIf=\"!rowData.__workflowCode && !rowData.hiddenWorkflowAction && !rowData.hiddenStartWorkflow\" pButton\n            class=\"p-button-text link-or-action\" label=\"B\u1EAFt \u0111\u1EA7u\" style=\"border: 1px solid #7ca9cd;\"\n            pTooltip=\"B\u1EAFt \u0111\u1EA7u ch\u1EA1y quy tr\u00ECnh\" tooltipPosition=\"top\"\n            [disabled]=\"rowData.__startingWorkflow && !rowData.__notReadyForStart\"\n            (click)=\"showFormStartWorkflow(rowData)\"></button>\n        <ng-container *ngIf=\"rowData.__workflowCode\">\n            <span class=\"content\">{{rowData.__textTrangThai}}</span>\n            <button *ngIf=\"!rowData.hiddenWorkflowAction\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"H\u00E0nh \u0111\u1ED9ng\" tooltipPosition=\"top\"\n                [disabled]=\"showingActionWorkflow\" (click)=\"showActionWorkflow($event, rowData)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #viewHistory let-rowData=\"rowData\">\n    <button pButton icon=\"pi pi-calendar\" class=\"p-button-text p-button-rounded link-or-action\" pTooltip=\"Xem l\u1ECBch s\u1EED\"\n        tooltipPosition=\"top\" (click)=\"viewHistoryWorkflow(setting, rowData)\"></button>\n</ng-template>\n<ng-template #containerSticky>\n    <span class=\"fix-sticky top\"></span>\n    <span class=\"fix-sticky right\"></span>\n    <!-- <span class=\"fix-sticky bottom\"></span> -->\n    <span class=\"fix-sticky left\"></span>\n</ng-template>\n<ng-template #sortIcon let-field=\"field\">\n    <i class=\"p-sortable-column-icon pi\" style=\"font-size: 0.8em;\"\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>\n</ng-template>\n<ng-template #filterDropdown let-col=\"col\">\n    <div #filterBox style=\"width: 100%; border-radius: 4px;\">\n        <dropdown *ngIf=\"col && filterSchema.dropdown[col.field]\" [control]=\"filterSchema.dropdown[col.field]\"\n            [dataSource]=\"filterSchema.dropdown[col.field].dataSource\" [(value)]=\"filterData[col.field]\"\n            (onHideSmartEvent)=\"onSearch()\" (onShow)=\"onShowFilterDropdownPanel($event)\"\n            (onHide)=\"onHideFilterDropdownPanel($event)\" (mousedown)=\"initFilterBoxFocus(filterBox)\"></dropdown>\n    </div>\n</ng-template>\n<ng-template #filterText let-col=\"col\">\n    <div #filterBox class=\"text-filter filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <input pInputText type=\"text\" class=\"input-search\" [placeholder]=\"col.label\"\n                [(ngModel)]=\"filterData[col.field]\" (change)=\"onSearch()\"\n                (keyup.esc)=\"onClearSearch(filterBox, col.field)\">\n        </div>\n        <span [ngClass]=\"{'action-clear': true, 'dirty': filterData[col.field] != null && filterData[col.field] !== ''}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearSearch(filterBox, col.field)\"\n            tabindex=\"-1\"><i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterNumber let-col=\"col\">\n    <div #filterBox class=\"number-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-number-picker-range #numberRange [maskType]=\"col.dataType\" [(ngModel)]=\"filterData[col.field]\"\n                [min]=\"col.min\" [max]=\"col.max\" (change)=\"onSearch()\">\n            </tn-number-picker-range>\n        </div>\n        <span\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] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\" (mousedown)=\"onClearNumberSearch(filterBox, numberRange)\"\n            tabindex=\"-1\">\n            <i class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterDate let-col=\"col\">\n    <div #filterBox class=\"date-picker-range filter-box\" tabindex=\"-1\" (mousedown)=\"initFilterBoxFocus(filterBox)\">\n        <div tabindex=\"-1\">\n            <tn-datetime-picker-range #dateRange [control]=\"filterSchema.dateRange\"\n                (onChanged)=\"onChangeDateTime($event, col.field)\">\n            </tn-datetime-picker-range>\n        </div>\n        <span\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] !== ''))}\"\n            [pTooltip]=\"'B\u1ECF filter'\" tooltipPosition=\"top\"\n            (mousedown)=\"onClearDateSearch(filterBox, dateRange, col.field)\" tabindex=\"-1\"><i\n                class=\"pi pi-filter-slash\"></i></span>\n        <after-view-checked style=\"display: none;\" (loaded)=\"initFilterBoxFocus(filterBox)\">\n        </after-view-checked>\n    </div>\n</ng-template>\n<ng-template #filterBoolean let-col=\"col\">\n    <div class=\"filter-boolean-box\">\n        <p-selectButton *ngIf=\"!col.minimizeFilter\"\n            [options]=\"[{value: true, label: 'C\u00F3', icon: 'pi pi-check'}, {value: false, label: 'Kh\u00F4ng', icon: 'pi pi-times'}]\"\n            [multiple]=\"true\" [(ngModel)]=\"filterData[col.field]\" (onChange)=\"onChangeBoolean($event, col.field)\">\n            <ng-template let-item>\n                <i style=\"padding: 3px 0;\" [class]=\"item.icon\"></i>\n            </ng-template>\n        </p-selectButton>\n        <ng-container *ngIf=\"col.minimizeFilter\">\n            <button *ngIf=\"!filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter-slash\"\n                class=\"btn-filter-boolean\" (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n            <button *ngIf=\"filterData[col.field]\" type=\"button\" pButton icon=\"pi pi-filter\"\n                class=\"btn-filter-boolean p-button-primary\"\n                (click)=\"showCheckBoxFilterMenu($event, col.field)\"></button>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #fileUploadColumn let-field=\"field\" let-rowData let-fileSetting=\"fileSetting\">\n    <file-upload *ngIf=\"fileSetting.mode == FileUploadMode.usingFileInstanceId\"\n        [sharedFolderType]=\"fileSetting.control.sharedFolderType\" [readonly]=\"fileSetting.control.readonly\"\n        [accept]=\"fileSetting.control.accept\" [(ngModel)]=\"rowData[field]\">\n    </file-upload>\n    <service-file-upload *ngIf=\"fileSetting.control.mode == FileUploadMode.usingServiceFile\"\n        [serviceCode]=\"fileSetting.control.serviceCode\" [parentContext]=\"context\" [entity]=\"fileSetting.control.entity\"\n        [entityKey]=\"rowData[fileSetting.control.entityKeyField]\" [control]=\"fileSetting.control\"\n        [fileDataService]=\"fileSetting.control.fileDataService\" [(ngModel)]=\"rowData.field\">\n    </service-file-upload>\n</ng-template>\n<ng-template #fileManagerColumn let-rowData let-fileSetting=\"fileSetting\" let-field=\"field\">\n    <file-manager [control]=\"fileSetting.control\" [serviceCode]=\"fileSetting.control.serviceCode\"\n        [entity]=\"fileSetting.control.entity\" [entityKey]=\"rowData[fileSetting.control.entityKeyField]\"\n        [readonly]=\"fileSetting.control.readonly\" [layout]=\"fileSetting.control.layout\"\n        [maxFileSize]=\"fileSetting.control.maxFileSize\" [inTaiLieu]=\"fileSetting.control.inTaiLieu\"\n        [(value)]=\"rowData[field]\">\n    </file-manager>\n</ng-template>",
                     providers: [i3.DecimalPipe, i3.DatePipe],
                     styles: [".container-table{display:flex;flex-direction:column;overflow:hidden}.container-table .container-table-inner{display:flex;height:auto;max-height:100%;min-height:60px;position:relative}.container-table-inner>tn-custom-scrollbar{width:100%}.cell-checkbox{text-align:center}.pick-color-row{border:1px solid #d1d1d1;border-radius:2px;bottom:0;cursor:pointer;display:flex;flex-wrap:wrap;height:1.4em;left:0;margin:auto;position:absolute;right:0;top:0;width:1.4em}.pick-color-row>div{background:#84d140;border:1px solid #fff;flex:0 0 50%}.pick-color-row>div:nth-child(2){background:#fc6868}.pick-color-row>div:nth-child(3){background:#fbc02d}.pick-color-row>div:nth-child(4){background:#7dc5ff}.cell-header-function{align-items:center;display:flex}.cell-header-function>span{flex:1 1;text-align:center}.cell-header-function button{height:24px;margin:0;padding:0;width:24px}.group-icon{color:#256aa2;font-weight:400}.group-icon i{font-size:.8em;margin-right:5px}.center{text-align:center!important}.row-card{height:100%;left:0;position:absolute;top:0;width:5px}.column-function{min-width:100px;padding:0}.custom-search-area{background-color:#f2f2f2;margin:-.5em -1em .5em;padding-left:.5em;padding-right:.5em}.main-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}.col-share-permission>div:not(:last-child){margin-bottom:5px}.advance-search-container{display:flex;justify-content:flex-end}.btn-filter-boolean{height:26px;width:26px}.btn-filter-boolean:not(.p-button-primary),.btn-filter-boolean:not(.p-button-primary):hover{background:#f5f6f8;border-color:#ced4da;color:#6c757d}::ng-deep crud-list advance-search{display:block;flex:1;max-width:400px}::ng-deep crud-list .ps__rail-x,::ng-deep crud-list .ps__rail-y{z-index:5}::ng-deep crud-list .main-title>*>h1{font-size:1.2em}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter{z-index:999}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th.cell-fixed-filter .fixed-filter{min-width:200px;position:fixed;z-index:10}::ng-deep crud-list .p-datatable .p-datatable-thead>tr>th .container-icon-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}::ng-deep crud-list .check-all-custom{height:0;position:absolute;width:0}::ng-deep crud-list .cell-header-filter{position:relative}::ng-deep crud-list .cell-header-filter .tn-dropdown{height:32px}::ng-deep crud-list .cell-header-filter tn-mask .p-inputtext{width:100%}::ng-deep crud-list .cell-header-filter .filter-box{background-color:#fff;border-radius:3px;display:flex;min-width:0}::ng-deep crud-list .cell-header-filter .filter-box>div{border:1px solid #ced4da;border-radius:3px 0 0 3px;border-right:none;flex:1;outline:none;overflow:hidden}::ng-deep crud-list .cell-header-filter .filter-box>span{align-items:center;background:#f5f6f8;border:1px solid #ced4da;color:#6c757d;cursor:pointer;display:inline-flex;flex-basis:32px;height:32px;justify-content:center;min-width:unset;outline:none}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear{border-radius:0 3px 3px 0}::ng-deep crud-list .cell-header-filter .filter-box>span.action-clear.dirty{color:#008eff}::ng-deep crud-list .cell-header-filter .filter-box input{border:none;box-shadow:none!important;padding-left:5px;padding-right:5px}::ng-deep crud-list .cell-header-filter .filter-box:not(.no-transition){transition:min-width .1s}::ng-deep crud-list .cell-header-filter .filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter .p-multiselect-label.p-placeholder{padding-left:.5rem;padding-right:.5rem}::ng-deep crud-list .cell-header-filter.focus-within,::ng-deep crud-list .cell-header-filter:focus-within{z-index:10!important}::ng-deep crud-list .cell-header-filter.focus-within .filter-boolean-box .p-button,::ng-deep crud-list .cell-header-filter:focus-within .filter-boolean-box .p-button{z-index:10}::ng-deep crud-list .cell-header-filter.focus-within .filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box{box-shadow:5px 0 15px 1px rgba(0,0,0,.27058823529411763);min-width:250px;position:absolute;top:calc(50% - 16px);z-index:2}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>div{border-color:#2196f3;box-shadow:0 0 0 .2rem #a6d5fa;flex:1;z-index:0}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box>span.action-clear,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box>span.action-clear{display:flex}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter{min-width:140px}::ng-deep crud-list .cell-header-filter.focus-within .short-filter-box.boolean-filter>div,::ng-deep crud-list .cell-header-filter:focus-within .short-filter-box.boolean-filter>div{flex:0 0 109px;width:109px}::ng-deep crud-list .cell-header-filter.focus-within:nth-last-child(2) .short-filter-box,::ng-deep crud-list .cell-header-filter:focus-within:nth-last-child(2) .short-filter-box{left:50%;transform:translateX(-50%)}::ng-deep crud-list .cell-header-filter:last-child .filter-box{right:3px}::ng-deep crud-list .table-border-line{background-color:#eee;position:absolute;z-index:5}::ng-deep crud-list .table-border-line.--left,::ng-deep crud-list .table-border-line.--right{bottom:0;top:0;width:1px}::ng-deep crud-list .table-border-line.--bottom,::ng-deep crud-list .table-border-line.--top{height:1px;left:0;right:0}::ng-deep crud-list .table-border-line.--left{left:0}::ng-deep crud-list .table-border-line.--right{right:0}::ng-deep crud-list .table-border-line.--top{top:0}::ng-deep crud-list .table-border-line.--bottom{bottom:0}::ng-deep crud-list .filter-boolean-box{text-align:center}::ng-deep crud-list .filter-boolean-box .p-selectbutton{white-space:nowrap}::ng-deep crud-list .custom-search-area crud-form{width:100%}::ng-deep crud-list .custom-search-area .main-container-search-inner .container-control{overflow:hidden}::ng-deep crud-list>p-contextmenu{display:none}@media (max-width:640px){::ng-deep crud-list .--table-responsive .p-datatable-wrapper{padding:1px}}"]
                 },] }
@@ -28675,7 +28855,7 @@
                     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:\\Code\\shared\\AppSharedV5\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Code\\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:-webkit-sticky;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:-webkit-sticky;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:-webkit-sticky;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}"]
+                    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\\Hi\\Desktop\\Proj\\shared\\AppSharedV5\\projects\\tnx-shared\\src\\lib\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Users\\Hi\\Desktop\\Proj\\shared\\AppSharedV5\\projects\\tnx-shared\\src\\lib\\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 = function () { return [
@@ -29281,7 +29461,7 @@
                     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:\\Code\\shared\\AppSharedV5\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Code\\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:-webkit-sticky;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:-webkit-sticky;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:-webkit-sticky;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}"]
+                    styles: ["", "@charset \"UTF-8\";@import url(C:\\Users\\Hi\\Desktop\\Proj\\shared\\AppSharedV5\\projects\\tnx-shared\\src\\lib\\node_modules\\@angular\\material\\prebuilt-themes\\indigo-pink.css);@import url(C:\\Users\\Hi\\Desktop\\Proj\\shared\\AppSharedV5\\projects\\tnx-shared\\src\\lib\\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 = function () { return [
@@ -31053,7 +31233,7 @@
                             if (!(root.data.currentUser && root.data.currentUser.userId)) return [3 /*break*/, 6];
                             service = root.data.currentAppMetadata.code;
                             permission = ("" + root.data.currentAppMetadata.code + element.routerLink).toUpperCase();
-                            return [4 /*yield*/, this._permissionService.isAuthorized(service, permission)];
+                            return [4 /*yield*/, this._permissionService.isAuthorized(service, permission, true)];
                         case 5:
                             isAuthorized = _a.sent();
                             element.visible = isAuthorized;
@@ -34450,7 +34630,7 @@
                             ])
                         ])
                     ],
-                    styles: [".advance-search-box{border:1px solid #eee;border-radius:0;overflow:hidden}.advance-filter-close{background:#fff;color:#666;font-size:.9em;position:absolute;right:3px;top:3px;z-index:1}.action-trigger{outline:none;padding:0}.action-trigger>span:first-child{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;bottom:0;padding:10px 1rem 10px 10px;position:-webkit-sticky;position:sticky}.box-advance-search-inline{justify-content:flex-end}.box-advance-search-inline input{padding:5px 12px}.box-advance-search-inline .action{cursor:pointer}.box-advance-search-inline .action.dirty{color:#008eff;pointer-events:unset}.box-advance-search-inline .action.disabled{background:#e9ecef;color:#d6d6d6;cursor:unset;pointer-events:none}.box-advance-search-inline .action:hover{background:#f5f6f8}::ng-deep .advance-search-mask-overlay{background:rgba(0,0,0,.1450980392156863);bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}::ng-deep .advance-search-overlay-panel{-webkit-animation-duration:.5s;animation-duration:.5s;border:0;box-shadow:0 6px 12px 0 rgba(0,0,0,.26);margin-top:0;max-width:calc(100vw - 2rem);padding:0;position:fixed;width:800px;z-index:1000}::ng-deep .advance-search-overlay-panel perfect-scrollbar{display:flex;flex-direction:column}::ng-deep .advance-search-overlay-panel:not(.hide){display:block!important}@media (min-width:768px){.box-advance-search-inline input{max-width:300px}}"]
+                    styles: [".advance-search-box{border:1px solid #eee;border-radius:0;overflow:hidden}.advance-filter-close{background:#fff;color:#666;font-size:.9em;position:absolute;right:3px;top:3px;z-index:1}.action-trigger{outline:none;padding:0}.action-trigger>span:first-child{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;bottom:0;padding:10px 1rem 10px 10px;position:sticky}.box-advance-search-inline{justify-content:flex-end}.box-advance-search-inline input{padding:5px 12px}.box-advance-search-inline .action{cursor:pointer}.box-advance-search-inline .action.dirty{color:#008eff;pointer-events:unset}.box-advance-search-inline .action.disabled{background:#e9ecef;color:#d6d6d6;cursor:unset;pointer-events:none}.box-advance-search-inline .action:hover{background:#f5f6f8}::ng-deep .advance-search-mask-overlay{background:rgba(0,0,0,.1450980392156863);bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}::ng-deep .advance-search-overlay-panel{-webkit-animation-duration:.5s;animation-duration:.5s;border:0;box-shadow:0 6px 12px 0 rgba(0,0,0,.26);margin-top:0;max-width:calc(100vw - 2rem);padding:0;position:fixed;width:800px;z-index:1000}::ng-deep .advance-search-overlay-panel perfect-scrollbar{display:flex;flex-direction:column}::ng-deep .advance-search-overlay-panel:not(.hide){display:block!important}@media (min-width:768px){.box-advance-search-inline input{max-width:300px}}"]
                 },] }
     ];
     AdvanceSearchComponent.ctorParameters = function () { return [
@@ -36436,7 +36616,7 @@
         { type: i0.Component, args: [{
                     selector: 'query-builder',
                     template: "<tn-custom-scrollbar *ngIf=\"useScrollBar\" #scrollbar [style]=\"style\">\r\n    <div [class]=\"styleClass\">\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    </div>\r\n</tn-custom-scrollbar>\r\n<ng-container *ngIf=\"!useScrollBar\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</ng-container>\r\n<ng-template #content>\r\n    <query-builder-group [dataSourceFields]=\"_dataSourceFields\" [query]=\"query\" [isRoot]=\"true\">\r\n    </query-builder-group>\r\n</ng-template>\r\n<div *ngIf=\"!hiddenButtons\" class=\"footer-search\">\r\n    <div class=\"footer-search-buttons-group\">\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text p-button-success\"\r\n                [pTooltip]=\"'L\u01B0u b\u1ED9 l\u1ECDc hi\u1EC7n t\u1EA1i' | translate\" tooltipPosition=\"top\" (click)=\"saveFilter()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-text p-button-danger\"\r\n                [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc \u0111\u00E3 l\u01B0u' | translate\" tooltipPosition=\"top\" (click)=\"deleteSave()\"></button>\r\n        </div>\r\n        <div>\r\n            <button type=\"button\" pButton icon=\"pi pi-search\" class=\"p-button-text p-button-info\"\r\n                [label]=\"'T\u00ECm ki\u1EBFm' | translate\" (click)=\"search()\"></button>\r\n            <button type=\"button\" pButton icon=\"pi pi-undo\" class=\"p-button-text p-button-secondary\"\r\n                [label]=\"'X\u00F3a t\u00ECm ki\u1EBFm' | translate\" (click)=\"clearFilter()\"></button>\r\n        </div>\r\n    </div>\r\n</div>",
-                    styles: [".footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;bottom:0;padding:10px 20px 10px 10px;position:-webkit-sticky;position:sticky}.footer-search-buttons-group{display:flex}.footer-search-buttons-group>div:first-child{flex:1 1;text-align:left}@media (max-width:640px){.footer-search-buttons-group{white-space:nowrap}}"]
+                    styles: [".footer-search{background:#f7f7f7;border-top:1px solid #dee2e6;bottom:0;padding:10px 20px 10px 10px;position:sticky}.footer-search-buttons-group{display:flex}.footer-search-buttons-group>div:first-child{flex:1 1;text-align:left}@media (max-width:640px){.footer-search-buttons-group{white-space:nowrap}}"]
                 },] }
     ];
     QueryBuilderComponent.ctorParameters = function () { return [
@@ -43258,7 +43438,7 @@
     SettingsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'settings',
-                    template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\" [header]=\"popupHeader | translate\"\r\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (visibleChange)=\"visibleChangedDialog($event)\"\r\n    [styleClass]=\"'tn-form-dialog'\">\r\n    <div style=\"height: 100%\">\r\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\r\n        </crud-form>\r\n        <div style=\"padding: 0.5rem;\">\r\n            <div class=\"p-col-12\" *ngIf=\"parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB</label>\r\n            </div>\r\n            <div class=\"p-col-12\" *ngIf=\"!parentSetting.cols\">\r\n                <label for=\"configViewTable\" class=\"config-view-label\">Ch\u01B0a c\u00F3 thi\u1EBFt l\u1EADp c\u1ED9t cho trang\r\n                    n\u00E0y</label>\r\n            </div>\r\n            <div class=\"p-col-12\">\r\n                <p-table [value]=\"model.data.details\" [columns]=\"columnSchemas\" [responsive]=\"true\"\r\n                    [reorderableColumns]=\"true\">\r\n                    <ng-template pTemplate=\"header\" let-columns let-rowData>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of columnSchemas\" [style.width]=\"col.width\" style=\"text-align: center;\">\r\n                                {{col.header}}\r\n                            </th>\r\n                        </tr>\r\n                    </ng-template>\r\n                    <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\"\r\n                        let-columns=\"pageSetting.columnSettings\">\r\n                        <tr [pReorderableRow]=\"ri\">\r\n                            <td class=\"stt\" style=\"text-align:center\">{{ri+1}}</td>\r\n                            <td style=\"text-align:left\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[1].header}}</span>\r\n                                {{rowData.columnName}}\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[2].header}}</span>\r\n                                <p-checkbox [(ngModel)]=\"rowData.visible\" binary=\"true\">\r\n                                </p-checkbox>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[3].header}}</span>\r\n                                <p-dropdown appendTo=\"body\" [styleClass]=\"'full-width'\" [(ngModel)]=\"rowData.textAlign\"\r\n                                    [options]=\"textAlignOptions\">\r\n                                </p-dropdown>\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <span class=\"p-column-title\">{{columnSchemas[4].header}}</span>\r\n                                <input [(ngModel)]=\"rowData.width\" pInputText style=\"width:100%\" autocomplete=\"off\"\r\n                                    autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" />\r\n                            </td>\r\n                            <td style=\"text-align:center\">\r\n                                <i class=\"fas fa-arrows-alt\"\r\n                                    style=\"width:50px; cursor:pointer; padding: 8px; color: #555;\"\r\n                                    pReorderableRowHandle></i>\r\n                            </td>\r\n                        </tr>\r\n                    </ng-template>\r\n                </p-table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #footer>\r\n        <ng-container *ngIf=\"!parentSetting.hiddenSaveSetting\">\r\n            <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\" [label]=\"'L\u01B0u' | translate\"\r\n                (click)=\"saveSetting()\"></button>\r\n            <button type=\"button\" pButton class=\"p-button-text p-button-danger\" icon=\"pi pi-trash\"\r\n                [label]=\"'B\u1ECF c\u1EA5u h\u00ECnh' | translate\" (click)=\"deleteSetting()\"></button>\r\n        </ng-container>\r\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\r\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\r\n    </ng-template>\r\n</tn-dialog>",
+                    template: "<tn-dialog #dialog [disabledButton]=\"model.submitting\" [closeOnEscape]=\"true\" [header]=\"popupHeader | translate\"\n    [popupSize]=\"popupSize\" [visible]=\"true\" (onHide)=\"cancel()\" (visibleChange)=\"visibleChangedDialog($event)\"\n    [styleClass]=\"'tn-form-dialog'\">\n    <div style=\"height: 100%\">\n        <crud-form #crudForm [context]=\"context\" [(data)]=\"model.data\" [setting]=\"setting\" [disableCaching]=\"true\">\n        </crud-form>\n        <div style=\"padding: 0.5rem;\">\n            <div class=\"p-col-12\" *ngIf=\"parentSetting.cols\">\n                <label for=\"configViewTable\" class=\"config-view-label\">C\u1EA5u h\u00ECnh hi\u1EC3n th\u1ECB</label>\n            </div>\n            <div class=\"p-col-12\" *ngIf=\"!parentSetting.cols\">\n                <label for=\"configViewTable\" class=\"config-view-label\">Ch\u01B0a c\u00F3 thi\u1EBFt l\u1EADp c\u1ED9t cho trang\n                    n\u00E0y</label>\n            </div>\n            <div class=\"p-col-12\">\n                <p-table [value]=\"model.data.details\" [columns]=\"columnSchemas\" [responsive]=\"true\"\n                    [reorderableColumns]=\"true\">\n                    <ng-template pTemplate=\"header\" let-columns let-rowData>\n                        <tr>\n                            <th *ngFor=\"let col of columnSchemas\" [style.width]=\"col.width\" style=\"text-align: center;\">\n                                {{col.header}}\n                            </th>\n                        </tr>\n                    </ng-template>\n                    <ng-template pTemplate=\"body\" let-rowData let-ri=\"rowIndex\"\n                        let-columns=\"pageSetting.columnSettings\">\n                        <tr [pReorderableRow]=\"ri\">\n                            <td class=\"stt\" style=\"text-align:center\">{{ri+1}}</td>\n                            <td style=\"text-align:left\">\n                                <span class=\"p-column-title\">{{columnSchemas[1].header}}</span>\n                                {{rowData.columnName}}\n                            </td>\n                            <td style=\"text-align:center\">\n                                <span class=\"p-column-title\">{{columnSchemas[2].header}}</span>\n                                <p-checkbox [(ngModel)]=\"rowData.visible\" binary=\"true\">\n                                </p-checkbox>\n                            </td>\n                            <td style=\"text-align:center\">\n                                <span class=\"p-column-title\">{{columnSchemas[3].header}}</span>\n                                <p-dropdown appendTo=\"body\" [styleClass]=\"'full-width'\" [(ngModel)]=\"rowData.textAlign\"\n                                    [options]=\"textAlignOptions\">\n                                </p-dropdown>\n                            </td>\n                            <td style=\"text-align:center\">\n                                <span class=\"p-column-title\">{{columnSchemas[4].header}}</span>\n                                <input [(ngModel)]=\"rowData.width\" pInputText style=\"width:100%\" autocomplete=\"off\"\n                                    autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" />\n                            </td>\n                            <td style=\"text-align:center\">\n                                <i class=\"fas fa-arrows-alt\"\n                                    style=\"width:50px; cursor:pointer; padding: 8px; color: #555;\"\n                                    pReorderableRowHandle></i>\n                            </td>\n                        </tr>\n                    </ng-template>\n                </p-table>\n            </div>\n        </div>\n    </div>\n    <ng-template #footer>\n        <ng-container *ngIf=\"!parentSetting.hiddenSaveSetting\">\n            <button type=\"button\" pButton class=\"p-button-text\" icon=\"pi pi-save\" [label]=\"'L\u01B0u' | translate\"\n                (click)=\"saveSetting()\"></button>\n            <button type=\"button\" pButton class=\"p-button-text p-button-danger\" icon=\"pi pi-trash\"\n                [label]=\"'B\u1ECF c\u1EA5u h\u00ECnh' | translate\" (click)=\"deleteSetting()\"></button>\n        </ng-container>\n        <button type=\"button\" pButton class=\"p-button-text p-button-secondary\" icon=\"pi pi-replay\"\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"cancel()\"></button>\n    </ng-template>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     changeDetection: i0.ChangeDetectionStrategy.Default,
                     styles: [""]
@@ -43514,7 +43694,7 @@
         SplashComponentV1Component.prototype.loadAppMetadata = function () {
             var _this = this;
             var prmsAppSwicherItem = new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var arr, _a, _b, _i, ind, element, clientId, isAuthorized;
+                var arr, _a, _b, _i, ind, element, isAuthorized;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -43528,7 +43708,6 @@
                             if (!(_i < _a.length)) return [3 /*break*/, 5];
                             ind = _a[_i];
                             element = this.environment.appMetadata.appSwitcher[ind];
-                            clientId = this.environment.authenticationSettings.clientId;
                             if (!(this.rootModel.allowAnonymous && element.allowAnonymous)) return [3 /*break*/, 2];
                             arr.push(element);
                             return [3 /*break*/, 4];
@@ -43537,6 +43716,7 @@
                             return [4 /*yield*/, this._permissionService.isAuthorized(element.code, (element.code + ".MODULE." + element.code).toUpperCase(), true)];
                         case 3:
                             isAuthorized = _c.sent();
+                            // const isAuthorized = await this._permissionService.isAuthorized(element.code, `test/lksjeflksejflseifjseifjslkejfkiki/test/kkjlskejflsekfjseklfj`.toUpperCase());
                             if (isAuthorized) {
                                 arr.push(element);
                             }
@@ -43935,7 +44115,7 @@
         SplashComponentComponent.prototype.loadAppMetadata = function () {
             var _this = this;
             var prmsAppSwicherItem = new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
-                var arr, _a, _b, _i, ind, element, clientId, isAuthorized;
+                var arr, _a, _b, _i, ind, element, isAuthorized;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -43949,7 +44129,6 @@
                             if (!(_i < _a.length)) return [3 /*break*/, 5];
                             ind = _a[_i];
                             element = this.environment.appMetadata.appSwitcher[ind];
-                            clientId = this.environment.authenticationSettings.clientId;
                             if (!(this.rootModel.allowAnonymous && element.allowAnonymous)) return [3 /*break*/, 2];
                             arr.push(element);
                             return [3 /*break*/, 4];
@@ -48126,7 +48305,7 @@
         { type: i0.Component, args: [{
                     selector: 'tn-tabview',
                     template: "<div [style.height]=\"height\">\r\n    <p-tabView #tab orientation=\"top\" [styleClass]=\"styleClass\" [activeIndex]=\"currentTabIndex\"\r\n        (onChange)=\"handleTabChange($event)\">\r\n        <ng-container *ngFor=\"let item of data; let i = index\">\r\n            <p-tabPanel *ngIf=\"!item.hidden\" [leftIcon]=\"item.icon\" [header]=\"item.label\"\r\n                [headerStyleClass]=\"item.headerStyleClass\">\r\n                <ng-container *ngIf=\"allowViewAll || currentTabIndex == i\">\r\n                    <tn-custom-scrollbar *ngIf=\"useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </tn-custom-scrollbar>\r\n                    <ng-container *ngIf=\"!useScrollbar\">\r\n                        <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </p-tabPanel>\r\n        </ng-container>\r\n    </p-tabView>\r\n</div>",
-                    styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.accordion-link ul li{background-color:#a4a5a4;border-radius:4px;color:#fff;display:inline-block;line-height:20px;margin-bottom:.5rem;margin-left:.5rem;padding:6px 12px;transition:all .3s ease-out}.accordion-link ul li:hover{background-color:#3db762;cursor:pointer}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{display:flex;padding:.5rem .5rem 0}.hoso-container{height:auto;max-height:none}.tab-number{align-items:center;background:#a4a5a4;border-radius:2px;color:#fff;display:inline-flex;font-size:.9em;height:20px;justify-content:center;margin-right:.5rem;padding-top:2px;width:20px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:-webkit-sticky;position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{border-radius:4px;display:flex;flex:1;margin-left:.5rem;margin-right:.5rem;overflow:auto}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width:640px){.accordion-link,.toolbar{overflow-x:auto;white-space:nowrap}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}"]
+                    styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.accordion-link ul li{background-color:#a4a5a4;border-radius:4px;color:#fff;display:inline-block;line-height:20px;margin-bottom:.5rem;margin-left:.5rem;padding:6px 12px;transition:all .3s ease-out}.accordion-link ul li:hover{background-color:#3db762;cursor:pointer}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{display:flex;padding:.5rem .5rem 0}.hoso-container{height:auto;max-height:none}.tab-number{align-items:center;background:#a4a5a4;border-radius:2px;color:#fff;display:inline-flex;font-size:.9em;height:20px;justify-content:center;margin-right:.5rem;padding-top:2px;width:20px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{border-radius:4px;display:flex;flex:1;margin-left:.5rem;margin-right:.5rem;overflow:auto}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width:640px){.accordion-link,.toolbar{overflow-x:auto;white-space:nowrap}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}"]
                 },] }
     ];
     TnTabViewComponent.ctorParameters = function () { return [
@@ -48840,7 +49019,7 @@
                     selector: 'user-picker-box',
                     template: "<div [ngClass]=\"{'p-grid p-m-0': controlSetting.userType == userType.CanBo}\" class=\"tn-l-user-picker-box\">\r\n    <ng-template [ngIf]=\"controlSetting.userType == userType.CanBo\">\r\n        <as-split [unit]=\"'pixel'\">\r\n            <as-split-area [size]=\"330\">\r\n                <tn-custom-scrollbar>\r\n                    <p-tree [style]=\"{'width': '100%'}\" styleClass=\"tn-tree-beauty tree-organization-picker\"\r\n                        [value]=\"rootTreeNode\" filterPlaceholder=\"T\u00ECm \u0111\u01A1n v\u1ECB / ph\u00F2ng ban\" selectionMode=\"single\"\r\n                        [filter]=\"true\" [(selection)]=\"selectedTreeNode\" (onNodeExpand)=\"onNodeExpand($event)\"\r\n                        (onNodeSelect)=\"nodeSelect($event)\" [emptyMessage]=\"'Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3'\">\r\n                        <ng-template let-node pTemplate=\"default\">\r\n                            <span id=\"{{node.data}}\" class=\"custom-node\">{{node.label}}</span>\r\n                        </ng-template>\r\n                    </p-tree>\r\n                </tn-custom-scrollbar>\r\n            </as-split-area>\r\n            <as-split-area [size]=\"'*'\">\r\n                <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"parentSetting\"\r\n                    [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\r\n                    (onChanged)=\"handleChangedEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\r\n                    (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleDone($event)\"\r\n                    (onRowSelect)=\"handleRowSelect($event)\">\r\n                </entity-picker-box>\r\n            </as-split-area>\r\n        </as-split>\r\n    </ng-template>\r\n    <ng-template [ngIf]=\"controlSetting.userType == userType.Normal\" style=\"width: 100%\">\r\n        <entity-picker-box #entityPickerBox [control]=\"control\" [parentSetting]=\"parentSetting\"\r\n            [advanceData]=\"advanceData\" [readOnlyValues]=\"readOnlyValues\" [selectedValue]=\"selectedValue\"\r\n            (onChanged)=\"handleChangedEntity($event)\" (onSelect)=\"handleSelectEntity($event)\"\r\n            (onUnSelect)=\"handleUnSelectEntity($event)\" (onDone)=\"handleDone($event)\"\r\n            (onRowSelect)=\"handleRowSelect($event)\">\r\n        </entity-picker-box>\r\n    </ng-template>\r\n</div>\r\n<ng-template #buttonTemplate>\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'Ch\u1ECDn'\"\r\n        (click)=\"handleSelect($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)=\"handleCancelDialog($event)\"></button>\r\n</ng-template>",
                     providers: [ComponentContextService],
-                    styles: [".action-btn{background-color:#fff;border:1px solid #0a89bf;color:#0a89bf;cursor:pointer;font-size:16px;margin:4px 2px;text-align:center;width:40px}.content-all{display:flex;flex-direction:column}.content-top{flex-grow:1}.content-bottom,.content-top{overflow:hidden;padding:5px 0}.content-bottom{border-top:1px solid #ddd;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{background:#fff;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{border-right:1px solid #aaa;height:100%}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{height:100%;padding-bottom:0;padding-top:0}@media (max-width:640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{left:auto;padding-bottom:5px;position:static;top:auto;transform:none}.tn-l-left-sidebar-wrapper{border-bottom:1px solid #aaa;border-right:unset;height:calc(100vh - 300px)}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{border:none;padding:0}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{background-color:#fff;margin-bottom:0;padding:.5em;position:-webkit-sticky;position:sticky;top:0;z-index:4}::ng-deep .user-picker-box-dialog .p-tree-empty-message{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container .p-tree-filter-icon{right:1em}::ng-deep .user-picker-box-dialog .ps__rail-y{z-index:10}@media (max-width:640px){::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .user-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}::ng-deep .user-picker-box-dialog .tn-l-right-content-wrapper{padding:0}}"]
+                    styles: [".action-btn{background-color:#fff;border:1px solid #0a89bf;color:#0a89bf;cursor:pointer;font-size:16px;margin:4px 2px;text-align:center;width:40px}.content-all{display:flex;flex-direction:column}.content-top{flex-grow:1}.content-bottom,.content-top{overflow:hidden;padding:5px 0}.content-bottom{border-top:1px solid #ddd;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{background:#fff;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{border-right:1px solid #aaa;height:100%}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{height:100%;padding-bottom:0;padding-top:0}@media (max-width:640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{left:auto;padding-bottom:5px;position:static;top:auto;transform:none}.tn-l-left-sidebar-wrapper{border-bottom:1px solid #aaa;border-right:unset;height:calc(100vh - 300px)}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{border:none;padding:0}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{background-color:#fff;margin-bottom:0;padding:.5em;position:sticky;top:0;z-index:4}::ng-deep .user-picker-box-dialog .p-tree-empty-message{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container .p-tree-filter-icon{right:1em}::ng-deep .user-picker-box-dialog .ps__rail-y{z-index:10}@media (max-width:640px){::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:auto}::ng-deep .user-picker-box-dialog .tn-dialog-scrollbar>div{min-height:100%!important}::ng-deep .user-picker-box-dialog .tn-l-right-content-wrapper{padding:0}}"]
                 },] }
     ];
     UserPickerBoxComponent.ctorParameters = function () { return [
@@ -52676,7 +52855,7 @@
                     selector: 'workflow-picker',
                     template: "<crud-form *ngIf=\"readyCrudForm\" #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\"\r\n    [styleClass]=\"'workflow-setting'\" [disableCaching]=\"true\" (onFormReady)=\"_handleFormReady($event)\">\r\n    <ng-template #designer>\r\n        <div *ngFor=\"let wfCode of model.data._workflowCodes\">\r\n            <div class=\"title-workflow\">\r\n                Quy tr\u00ECnh {{dicMachinesData[wfCode].ten}} ({{wfCode}})\r\n                <span *ngIf=\"wfCode == model.data.workflowCode\" class=\"pi pi-star\" pTooltip=\"\u0110\u00E2y l\u00E0 quy tr\u00ECnh ch\u00EDnh\"\r\n                    tooltipPosition=\"top\"></span>\r\n            </div>\r\n            <div class=\"state-machines-container\">\r\n                <statemachines-designer #designer [data]=\"dicMachinesData[wfCode]\" [viewOnly]=\"true\">\r\n                </statemachines-designer>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</crud-form>\r\n<div *ngIf=\"showButtonSave\" class=\"container-button-workflow\">\r\n    <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'L\u01B0u c\u1EA5u h\u00ECnh' | translate\"\r\n        (click)=\"_handleSave($event)\"></button>\r\n</div>",
                     providers: [ComponentContextService],
-                    styles: [".title-workflow{font-size:.9em;font-weight:700;padding:1em 0 .5em}.title-workflow .pi-star{color:orange}.state-machines-container{border:1px solid #ced4da;border-radius:3px}.container-button-workflow{background:#fff;border-top:1px solid #ddd;bottom:0;padding:.5em;position:-webkit-sticky;position:sticky;text-align:right;z-index:10}"]
+                    styles: [".title-workflow{font-size:.9em;font-weight:700;padding:1em 0 .5em}.title-workflow .pi-star{color:orange}.state-machines-container{border:1px solid #ced4da;border-radius:3px}.container-button-workflow{background:#fff;border-top:1px solid #ddd;bottom:0;padding:.5em;position:sticky;text-align:right;z-index:10}"]
                 },] }
     ];
     WorkflowPickerComponent.ctorParameters = function () { return [
@@ -52934,7 +53113,7 @@
                     selector: 'workflow-setting-new',
                     template: "<crud-form *ngIf=\"readyCrudForm\" #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\"\r\n    [styleClass]=\"'workflow-setting'\" [disableCaching]=\"true\" (onFormReady)=\"_handleFormReady($event)\">\r\n    <ng-template #workflowPicker>\r\n        <workflow-picker [data]=\"model.data\"></workflow-picker>\r\n    </ng-template>\r\n</crud-form>\r\n<ng-template #buttonTemplate>\r\n    <div class=\"footer-workflow-setting\">\r\n        <button type=\"button\" pButton icon=\"pi pi-save\" class=\"p-button-text\" [label]=\"'FORM.SAVE' | translate\"\r\n            (click)=\"_handleSave($event)\"></button>\r\n        <button *ngIf=\"model.data.id\" type=\"button\" pButton icon=\"pi pi-trash\" class=\"p-button-danger p-button-text\"\r\n            [label]=\"'H\u1EE7y quy tr\u00ECnh' | translate\" (click)=\"handleCancelWorkflow($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    </div>\r\n</ng-template>",
                     providers: [ComponentContextService],
-                    styles: [".title-workflow{font-size:.9em;font-weight:700;padding:1em 0 .5em}.title-workflow .pi-star{color:orange}.container-button-workflow{background:#fff;border-top:1px solid #ddd;bottom:0;padding:.5em;position:-webkit-sticky;position:sticky;text-align:right;z-index:10}::ng-deep workflow-setting-new .crud-form-control div[role=checkbox-alone].taskInsideBusinessForm{margin-top:12px!important}"]
+                    styles: [".title-workflow{font-size:.9em;font-weight:700;padding:1em 0 .5em}.title-workflow .pi-star{color:orange}.container-button-workflow{background:#fff;border-top:1px solid #ddd;bottom:0;padding:.5em;position:sticky;text-align:right;z-index:10}::ng-deep workflow-setting-new .crud-form-control div[role=checkbox-alone].taskInsideBusinessForm{margin-top:12px!important}"]
                 },] }
     ];
     WorkflowSettingNewComponent.ctorParameters = function () { return [
@@ -57768,9 +57947,9 @@
     var PermissionStorage = /** @class */ (function () {
         function PermissionStorage(permissionString) {
             this._bitLength = 1;
-            this._permissions = "";
+            this._permissions = '';
             if (!permissionString)
-                throw "permissionString can not be null or empty!";
+                throw 'permissionString can not be null or empty!';
             this._permissions = permissionString;
             this._bitLength = this.base64ToArrayBuffer(this._permissions)[0];
         }
@@ -57834,6 +58013,12 @@
         return StartupBusinessComponentBase;
     }(ComponentBase));
 
+    var TnMenuItem = /** @class */ (function () {
+        function TnMenuItem() {
+        }
+        return TnMenuItem;
+    }());
+
     var FileUploadSetting = /** @class */ (function () {
         function FileUploadSetting(init) {
             this.entityKeyField = 'id';
@@ -58235,8 +58420,8 @@
                         resolve(true);
                         return [2 /*return*/];
                     }
-                    this._permissionService.getPermissions(service).then(function (permissions) {
-                        console.log("DhvinhGuardService", permission);
+                    this._permissionService.getServicePermission(service).then(function (permissions) {
+                        console.log('DhvinhGuardService', permission);
                         var isAuthorized = permissions.includes(permission);
                         resolve(isAuthorized);
                     }, function (error) {
@@ -59505,6 +59690,7 @@
     exports.TnComponentConfig = TnComponentConfig;
     exports.TnCustomScrollbarComponent = TnCustomScrollbarComponent;
     exports.TnDatePipe = TnDatePipe;
+    exports.TnMenuItem = TnMenuItem;
     exports.TnReorderableColumnDirective = TnReorderableColumnDirective;
     exports.TnReorderableRowDirective = TnReorderableRowDirective;
     exports.TnSortIcon = TnSortIcon;