tnx-shared 5.2.20 → 5.2.21

package/fesm2020/tnx-shared.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, Optional, Inject, Directive, Input, ChangeDetectorRef, ViewChild, EventEmitter, Component, Output, forwardRef, TemplateRef, ContentChild, ContentChildren, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Pipe, LOCALE_ID, QueryList, isDevMode, NgModuleFactory, Compiler, NgModule } from '@angular/core';
-import { Subject, ReplaySubject, forkJoin, from, combineLatest } from 'rxjs';
+import { Subject, ReplaySubject, firstValueFrom, forkJoin, from, combineLatest } from 'rxjs';
 import { takeUntil, catchError, shareReplay, retry, map, debounceTime, distinctUntilChanged, mergeMap, distinct, filter } from 'rxjs/operators';
 import * as i5 from '@angular/common';
 import { DatePipe, DecimalPipe, registerLocaleData, CommonModule } from '@angular/common';
@@ -2401,12 +2401,12 @@ class ComponentContextService {
     }
     completeEvent(name) {
         const subject = this.addSubject(name);
-        subject.next();
+        subject.next(1);
         subject.complete();
     }
     completeReplayEvent(name) {
         const subject = this.addReplaySubject(name);
-        subject.next();
+        subject.next(1);
         subject.complete();
     }
     completeSubject(name) {
@@ -2539,7 +2539,6 @@ class ComponentContextService {
         return this.setDataInternal(this.data, keyPath, value);
     }
     setDataInternal(obj, keyPath, data) {
-        const root = this.root || this;
         this._commonService.setValueByPath(obj, keyPath, data);
     }
     destroyContext() {
@@ -2549,7 +2548,7 @@ class ComponentContextService {
         for (const key in this.replaySubjects) {
             this.completeReplaySubject(key);
         }
-        this._unSubscribeAll.next();
+        this._unSubscribeAll.next(1);
         this._unSubscribeAll.complete();
         this.data = {};
         this.root.fireEvent(ComCtxConstants.ROOT.DESTROY_COMPONENT, this);
@@ -4789,9 +4788,8 @@ class MasterDataService {
         });
     }
     getDMChungDropdown(code) {
-        return this._httpClient.get(`${this.singleCategoryEndpoint}/GetByFilterCodeAndNameByGroupCode/${code}`)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(`${this.singleCategoryEndpoint}/GetByFilterCodeAndNameByGroupCode/${code}`)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getItems(groupCode) {
         return new Promise(async (resolve, reject) => {
@@ -4839,18 +4837,16 @@ class MasterDataService {
     }
     dogetAddress(id, level = 1) {
         const serviceUri = `${this.apiEndpoint}/CityCategory/GetByParentId/${id}?level=${level}`;
-        return this._httpClient.get(serviceUri)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(serviceUri)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getItemDetailUnit(id) {
         return new Promise(async (resolve, reject) => {
             let itemData = new MasterDataItem();
             if (!this.storage.getItem(`${this.administrativeUnitItem}${id}`)) {
                 const serviceUri = `${this.apiEndpoint}/CityCategory/GetByCode/${id}`;
-                const result = await this._httpClient.get(serviceUri)
-                    .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-                    .toPromise();
+                const result = await firstValueFrom(this._httpClient.get(serviceUri)
+                    .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
                 this.storage.setItem(`${this.administrativeUnitItem}${id}`, JSON.stringify(result.data));
                 itemData = result.data;
             }
@@ -4866,9 +4862,9 @@ class MasterDataService {
             resolve({ data: {}, success: true });
         });
         // const serviceUri = `${this.apiEndpoint}/ConfigurationService/GetValueByCode?code=${code}`;
-        // return this._httpClient.get<ResponseResult>(serviceUri)
+        // return firstValueFrom(this._httpClient.get<ResponseResult>(serviceUri)
         //     .pipe(catchError((err: HttpErrorResponse) => this._commonService.handleError(err, this._injector)))
-        //     .toPromise();
+        //     );
     }
     async doGetAll(groupCode) {
         const group = await this.getGroupByCode(groupCode);
@@ -4889,23 +4885,21 @@ class MasterDataService {
         return this.getData(`${this.singleCategoryEndpoint}/getData`, gridInfo);
     }
     getData(uri, gridInfo) {
-        return this._httpClient.post(uri, gridInfo).toPromise();
+        return firstValueFrom(this._httpClient.post(uri, gridInfo));
     }
     async getGroupByCode(groupCode) {
         const uri = `${this.groupCategoryEndpoint}/getByCode/${groupCode}`;
-        return this._httpClient.get(uri).toPromise();
+        return firstValueFrom(this._httpClient.get(uri));
     }
     addWorkDays(date, days, isDay = 1) {
         const serviceUri = `${this.apiEndpoint}/HolidayCategory/GetDate?date=${date}&days=${days}&isDay=${isDay}`;
-        return this._httpClient.get(serviceUri)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(serviceUri)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getDateByDuration(date, type, duration) {
         const serviceUri = `${this.apiEndpoint}/HolidayCategory/getDateByDuration?date=${date}&type=${type}&duration=${duration}`;
-        return this._httpClient.get(serviceUri)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(serviceUri)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getItemByCode(dataSource, code) {
         return dataSource.find(x => x.code === code);
@@ -4971,21 +4965,18 @@ class MasterDataService {
     }
     getValueByCode(code) {
         const url = `${this.singleCategoryEndpoint}/getValueByCode?code=${code}`;
-        return this._httpClient.get(url)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(url)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getGroupItemByCode(code) {
         const url = `${this.apiEndpoint}/GroupCategory/${code}`;
-        return this._httpClient.get(url).pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(url).pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     parseMathExpression(expression, decimalPlaces, forVietnamese = true) {
         expression = encodeURIComponent(expression);
         const url = `${this.apiEndpoint}/MathExpression/ParseMath?expression=${expression}&decimalPlaces=${decimalPlaces}&forVietnamese=${forVietnamese}`;
-        return this._httpClient.get(url)
-            .pipe(catchError((err) => this._commonService.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._httpClient.get(url)
+            .pipe(catchError((err) => this._commonService.handleError(err, this._injector))));
     }
     getByGridRequest(groupCode, gridInfo, plusUrl = '') {
         return new Promise(async (resolve, reject) => {
@@ -4996,9 +4987,9 @@ class MasterDataService {
                 if (plusUrl != null && plusUrl != '') {
                     apiUrl += '/' + plusUrl;
                 }
-                data = await this._httpClient
+                data = await firstValueFrom(this._httpClient
                     .post(apiUrl, gridInfo)
-                    .pipe(catchError(err => this.handleError(err, this._injector))).toPromise();
+                    .pipe(catchError(err => this.handleError(err, this._injector))));
                 this.storage.setItem(`${this.categoryPrefix}${groupCode}`, JSON.stringify(data.data));
             }
             else {
@@ -6031,8 +6022,8 @@ class BaseService {
                 apiUrl += `&`;
             }
             apiUrl += `_keySignalr=${topic}`;
-            this._http.get(apiUrl)
-                .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise()
+            firstValueFrom(this._http.get(apiUrl)
+                .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))))
                 .then(res => {
             })
                 .catch(err => {
@@ -6062,8 +6053,8 @@ class BaseService {
                 apiUrl += `&`;
             }
             apiUrl += `_keySignalr=${topic}`;
-            this._http.post(apiUrl, data)
-                .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise()
+            firstValueFrom(this._http.post(apiUrl, data)
+                .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))))
                 .then(res => {
             })
                 .catch(err => {
@@ -6438,94 +6429,88 @@ class BaseService {
     }
     post(item, plusUrl = '') {
         const uri = plusUrl ? `${this.serviceUri}/${plusUrl}` : this.serviceUri;
-        return this._http
+        return firstValueFrom(this._http
             .post(uri, item)
-            .pipe(catchError(err => this.handleError(err, this._injector))).toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     put(id, item, plusUrl = '') {
         const url = plusUrl ? `${this.serviceUri}/${plusUrl}/${id}` : `${this.serviceUri}/${id}`;
-        return this._http.put(url, item).toPromise();
+        return firstValueFrom(this._http.put(url, item));
     }
     delete(id) {
         const url = `${this.serviceUri}/${id}`;
-        return this._http.delete(url).toPromise();
+        return firstValueFrom(this._http.delete(url));
     }
     deleteById(id) {
         const url = `${this.serviceUri}/${id}`;
-        return this._http.delete(url).pipe(catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.delete(url).pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     deleteMany(lstId) {
         const url = `${this.serviceUri}/DeleteManyAsync/${lstId}`;
-        return this._http.delete(url).toPromise();
+        return firstValueFrom(this._http.delete(url));
     }
     defaultGet(apiUrl, options) {
-        return this._http.get(apiUrl, options)
-            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl, options)
+            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     getIgnoreClientCache(apiUrl) {
         const options = {
             headers: new HttpHeaders({ 'Cache-Control': 'no-cache' }),
         };
-        return this._http.get(apiUrl, options)
-            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl, options)
+            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     defaultPost(apiUrl, data, options) {
-        return this._http.post(apiUrl, data, options)
-            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.post(apiUrl, data, options)
+            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     defaultPut(apiUrl, data) {
-        return this._http.put(apiUrl, data)
-            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.put(apiUrl, data)
+            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     defaultDelete(apiUrl) {
-        return this._http.delete(apiUrl)
-            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.delete(apiUrl)
+            .pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     getEntityMetadata() {
         const apiUrl = `${this.serviceUri}/GetEntityMetadata`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     saveEntityMetadata(data) {
         const apiUrl = `${this.serviceUri}/SaveEntityMetadata`;
-        return this._http.post(apiUrl, data)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.post(apiUrl, data)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     changeMetadataStatus(id, metadataType) {
         const apiUrl = `${this.serviceUri}/changeMetadataStatus?id=${id}&metadataStatusType=${metadataType}`;
-        return this._http.post(apiUrl, {}).pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.post(apiUrl, {}).pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     saveAndChangeMetadataStatus(id, metadataType, data) {
         const apiUrl = `${this.serviceUri}/saveAndChangeMetadataStatus?id=${id}&metadataStatusType=${metadataType}`;
-        return this._http.post(apiUrl, data).pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.post(apiUrl, data).pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getEntityPermission() {
         const apiUrl = `${this.serviceUri}/GetEntityPermission`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     saveEntityPermission(data) {
         const apiUrl = `${this.serviceUri}/SaveEntityPermission`;
-        return this._http.post(apiUrl, data)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.post(apiUrl, data)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     updateEntityPermission(id, item) {
         const url = `${this.serviceUri}/UpdatEntityPermission/${id}`;
-        return this._http.put(url, item).toPromise();
+        return firstValueFrom(this._http.put(url, item));
     }
     deleteEntityPermission(id) {
         const url = `${this.serviceUri}/DeleteEntityPermission/${id}`;
-        return this._http.delete(url).toPromise();
+        return firstValueFrom(this._http.delete(url));
     }
     getWfHistoryByEntityItem(id) {
         const url = `${this.serviceUri}/GetWfHistoryByEntityItem/${id}`;
-        return this._http.get(url).toPromise();
+        return firstValueFrom(this._http.get(url));
     }
     getDicStatusNhomTrangThai(statuses) {
         const url = `${this.serviceUri}/GetDicStatusNhomTrangThai`;
@@ -6554,7 +6539,7 @@ class BaseService {
     }
     putWithPlusUrl(id, item, plusUrl) {
         const url = `${this.serviceUri}/${id}/${plusUrl}`;
-        return this._http.put(url, item).toPromise();
+        return firstValueFrom(this._http.put(url, item));
     }
     async getByField(field, arrValue, getFields = '', sortField = null, sortDir = null) {
         arrValue = (arrValue || []).filter((val, ind, arr) => (val === 0 || val) && arr.indexOf(val) === ind);
@@ -6861,88 +6846,85 @@ class FileExplorerService {
     }
     getMyFiles() {
         const svUrl = `${this._serviceUri}/FileObject/GetMyFiles`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getServiceFolderId(model) {
         const svUrl = `${this._serviceUri}/Folder/GetServiceFolder?service=${model.service}&entity=${model.entity}&entityInstanceId=${model.entityInstanceId}`;
-        return this._http.get(svUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.get(svUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
     deleteServiceFolder(model) {
         const svUrl = `${this._serviceUri}/Folder/DeleteServiceFolder?service=${model.service}&entity=${model.entity}&entityInstanceId=${model.entityInstanceId}`;
-        return this._http.delete(svUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.delete(svUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
     getByFolderId(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File?folderId=${folderId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyDrive(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/FileObject/GetMyDrive?folderId=${folderId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShare(userId) {
         if (userId < 0) {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/Folder/GetMyShare?userId=${userId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShareToOther(ownerId) {
         if (ownerId < 0) {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/Folder/GetMyShareToOther?ownerId=${ownerId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderTree(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const apiUrl = `${this._serviceUri}/FileObject/GetTree?folderId=${folderId}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
     copyFile(copyFileDto) {
         const svUrl = `${this._serviceUri}/FileObject/CopyFile`;
-        return this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))));
     }
     convertDocumentToPdfAndSave(copyFileDto) {
         const svUrl = `${this._serviceUri}/FileObject/ConvertDocumentToPdfAndSave`;
-        return this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))));
     }
     createNewFolder(folder) {
         const svUrl = `${this._serviceUri}/Folder`;
-        return this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFolder(folderId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFolder(folderIds) {
         const svUrl = `${this._serviceUri}/Folder/deleteMultipleFolder`;
-        return this._http.post(svUrl, folderIds).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, folderIds).pipe(catchError((err) => this.handleError(err))));
     }
     renameFolder(folderId, newFolderName) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/RenameFolder/${newFolderName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFolder(shareFolder) {
         const svUrl = `${this._serviceUri}/Folder/ShareFolder`;
-        return this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFolder(folderId, objectId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/DeleteShareFolder/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getUploadUrl() {
         return `${this._serviceUri}/FileObject`;
@@ -6955,7 +6937,7 @@ class FileExplorerService {
     }
     getBinaryFileByFileId(fileId) {
         return new Promise((resolve, reject) => {
-            this._http.get(this.getFileDownloadUrl(fileId)).toPromise().then(rs => {
+            firstValueFrom(this._http.get(this.getFileDownloadUrl(fileId))).then(rs => {
                 console.log(rs);
                 resolve(null);
             }).catch(err => reject(err));
@@ -6966,7 +6948,7 @@ class FileExplorerService {
     }
     getFile(fileId) {
         const svUrl = `${this._serviceUri}/FileObject/${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     async getBase64FromFileId(fileId, isFileVersion = false) {
         const link = await this.generateLinkDownload({
@@ -7008,7 +6990,7 @@ class FileExplorerService {
         if (model.isFileVersion && !model.fileVersionId) {
             model.fileVersionId = model.fileId;
         }
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     downloadFile(fileId, isFileVersion = false, fileName) {
         const model = new GenerateLinkDownloadDTO();
@@ -7028,8 +7010,7 @@ class FileExplorerService {
      * Save file tải từ server với tên được truyền vào, cho phép lưu cả audio, video.
      */
     saveWithFileName(url, fileName) {
-        this._http.get(url, { responseType: 'blob' })
-            .toPromise()
+        firstValueFrom(this._http.get(url, { responseType: 'blob' }))
             .then(rs => {
             FileSaver.saveAs(rs, fileName);
         })
@@ -7039,7 +7020,7 @@ class FileExplorerService {
     }
     generateLinkDownloadMultiple(model) {
         const svUrl = `${this._serviceUri}/DownloadLink/GenerateDownloadMultipleLink`;
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     downloadFolder(folderId) {
         const model = new GenerateLinkDownloadDTO();
@@ -7050,52 +7031,52 @@ class FileExplorerService {
         });
     }
     getBinaryFile(linkDownload) {
-        return this._http.get(linkDownload).toPromise();
+        return firstValueFrom(this._http.get(linkDownload));
     }
     setMoveFileItem(moveFile) {
         const svUrl = `${this._serviceUri}/FileObject/MoveFile`;
-        return this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFile(fileId) {
         const svUrl = `${this._serviceUri}/FileObject/File/${fileId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFile(fileIds) {
         const svUrl = `${this._serviceUri}/FileObject/deleteMultipleFile`;
-        return this._http.post(svUrl, fileIds).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, fileIds).pipe(catchError((err) => this.handleError(err))));
     }
     renameFile(fileId, newFileName) {
         const svUrl = `${this._serviceUri}/FileObject/${fileId}/RenameFile/${newFileName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFile(shareFile) {
         const svUrl = `${this._serviceUri}/FileObject/ShareFile`;
-        return this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFile(fileId, objectId) {
         const svUrl = `${this._serviceUri}/FileObject/${fileId}/DeleteShareFile/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getSharedFiles(folderId) {
         let svUrl = `${this._serviceUri}/FileObject/GetMySharedFiles`;
         if (folderId) {
             svUrl = `${svUrl}?folderId=${folderId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getUserSharingByFile(fileId) {
         let svUrl = `${this._serviceUri}/FileObject/GetUserSharingByFile`;
         if (fileId) {
             svUrl = `${svUrl}?fileId=${fileId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderId(userId) {
         let svUrl = `${this._serviceUri}/Folder/GetFolderId`;
         if (userId) {
             svUrl = `${svUrl}?userId=${userId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     needConvertBeforeSign(fileName) {
         if (fileName.lastIndexOf('.') === -1) {
@@ -7147,12 +7128,12 @@ class FileExplorerService {
     convertToPdf(fileName, fileId, isFileVersion) {
         return new Promise((resolve, reject) => {
             const convertService = `${this._serviceUri}/Convert/ConvertDocumentToPdf`;
-            this._http.post(convertService, {
+            firstValueFrom(this._http.post(convertService, {
                 fileName,
                 fileId,
                 isFileVersion,
                 outputType: 0
-            }, { responseType: 'blob' }).toPromise().then((rs) => {
+            }, { responseType: 'blob' })).then((rs) => {
                 const reader = new FileReader();
                 reader.addEventListener('load', () => {
                     resolve(reader.result);
@@ -7194,16 +7175,16 @@ class FileExplorerService {
         return regex.test(ext);
     }
     saveSignedFile(data) {
-        return this._http.post(`${this._serviceUri}/KySoFile/SaveSignedFile`, data).toPromise();
+        return firstValueFrom(this._http.post(`${this._serviceUri}/KySoFile/SaveSignedFile`, data));
     }
     kySimSaveSignedFile(data) {
-        return this._http.post(`${this._serviceUri}/KySoFile/KySimSaveSignedFile`, data).toPromise();
+        return firstValueFrom(this._http.post(`${this._serviceUri}/KySoFile/KySimSaveSignedFile`, data));
     }
     getSignatureInfoByFileId(fileId) {
-        return this._http.get(`${this._serviceUri}/KySoFile/GetListSignatureByFileId?fileId=${fileId}`).toPromise();
+        return firstValueFrom(this._http.get(`${this._serviceUri}/KySoFile/GetListSignatureByFileId?fileId=${fileId}`));
     }
     getSignatureInfoByFileVersionId(fileVersionId) {
-        return this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`).toPromise();
+        return firstValueFrom(this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`));
     }
     getUploadFileVersionApiUrl() {
         return `${this._serviceUri}/FileVersion/SaveVersionOnEdit`;
@@ -7217,8 +7198,8 @@ class FileExplorerService {
     getImageFileBase64(fileId, extension = 'jpg', width = 0, height = 0) {
         return new Promise((resolve, reject) => {
             const url = `${this._serviceUri}/FileObject/getImageFileBase64?fileId=${fileId}&extension=${extension}&width=${width}&height=${height}`;
-            this._http.get(url, { responseType: 'blob' })
-                .toPromise().then(rs => {
+            firstValueFrom(this._http.get(url, { responseType: 'blob' }))
+                .then(rs => {
                 const reader = new FileReader();
                 reader.addEventListener('load', () => {
                     resolve(reader.result);
@@ -7239,19 +7220,19 @@ class FileExplorerService {
      */
     getSingleServiceFile(serviceRequestModel) {
         const svUrl = `${this._serviceUri}/FileObject/GetSingleServiceFile`;
-        return this._http.post(svUrl, serviceRequestModel).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, serviceRequestModel).pipe(catchError((err) => this.handleError(err))));
     }
     getServiceFileExplorer(serviceCode, entity, entityKey) {
         const svUrl = `${this._serviceUri}/FileObject/GetServiceFileExplorer?serviceCode=${serviceCode}&entity=${entity}&entityKey=${entityKey}`;
-        return this._http.get(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     createServiceFile(serviceFileObjectDTO) {
         const svUrl = `${this._serviceUri}/FileObject/CreateServiceFile`;
-        return this._http.post(svUrl, serviceFileObjectDTO).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, serviceFileObjectDTO).pipe(catchError((err) => this.handleError(err))));
     }
     createServiceFileAnonymous(serviceFileObjectDTO) {
         const svUrl = `${this._serviceUri}/FileObject/CreateServiceFileAnonymous`;
-        return this._http.post(svUrl, serviceFileObjectDTO).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, serviceFileObjectDTO).pipe(catchError((err) => this.handleError(err))));
     }
 }
 FileExplorerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileExplorerService, deps: [{ token: i1$1.HttpClient }, { token: AuthenService }, { token: CommonService }, { token: EnvironmentService }, { token: NotifierService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -7283,8 +7264,7 @@ class FileV4Service {
     }
     generateLinkDownloadMultiple(model) {
         const svUrl = `${this._serviceUri}/Download/GenerateDownloadMultipleLink`;
-        return this._http.post(svUrl, model)
-            .toPromise();
+        return firstValueFrom(this._http.post(svUrl, model));
     }
     getAnonymousDownloadUrl(hash) {
         return `${this._serviceUri}/Download/${hash}`;
@@ -7308,12 +7288,10 @@ class FileV4Service {
         if (model.isFileVersion && !model.fileVersionId) {
             model.fileVersionId = model.fileId;
         }
-        return this._http.post(svUrl, model)
-            .toPromise();
+        return firstValueFrom(this._http.post(svUrl, model));
     }
     saveWithFileName(url, fileName) {
-        this._http.get(url, { responseType: 'blob' })
-            .toPromise()
+        firstValueFrom(this._http.get(url, { responseType: 'blob' }))
             .then(rs => {
             FileSaver.saveAs(rs, fileName);
         })
@@ -7351,7 +7329,7 @@ class TemplateV4Service extends BaseService {
     }
     fillWordByTemplateCode(templateCode, data, fileName = 'TemplateWord.docx') {
         const url = `${this.serviceUri}/fillWordByTemplateCodeMultiData/${templateCode}`;
-        return this._http.post(url, data, { responseType: 'blob' }).toPromise();
+        return firstValueFrom(this._http.post(url, data, { responseType: 'blob' }));
     }
     fillTemplateByCodeAndGetPdf(templateCode, data, onLoadingDataPdf = null, onEndLoadingDataPdf = null) {
         const url = `${this.serviceUri}/fillWordByTemplateCode/${templateCode}?isPrint=true`;
@@ -7594,9 +7572,8 @@ class TemplateInstanceService {
     exportCxExcelByCode(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCode`;
         this.setFileInfo(model);
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }))
             .then(res => {
             FileSaver.saveAs(res, this.getFullFileName(model.fileName || model.code));
         }).catch(async (err) => {
@@ -7615,9 +7592,8 @@ class TemplateInstanceService {
     exportManyCxExcelByCode(model) {
         const url = `${this.serviceUri}/ExportManyCxExcelByCode`;
         this.setManyFileInfo(model);
-        return this._httpClient
-            .post(url, model)
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model))
             .then(res => {
             if (res.success) {
                 this._fileService.downloadFolder(res.data.folderId);
@@ -7649,9 +7625,8 @@ class TemplateInstanceService {
      */
     exportCxExcel(model) {
         const url = `${this.serviceUri}/ExportCxExcel`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }))
             .then(res => {
             FileSaver.saveAs(res, this.getFullFileName(model.fileName || 'Export'));
         }).catch(async (err) => {
@@ -7673,8 +7648,7 @@ class TemplateInstanceService {
      */
     async ExportCxExcelByCodeWithSignalR(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCodeWithSignalR`;
-        return this._httpClient.post(url, model)
-            .toPromise();
+        return firstValueFrom(this._httpClient.post(url, model));
     }
     /**
      * Promise xuất file excel không dùng signalR.
@@ -7682,9 +7656,8 @@ class TemplateInstanceService {
      */
     async exportCxExcelByCodePromise(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCode`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }));
     }
     /**
      * Promise xuất file excel không dùng signalR và không dùng template.
@@ -7692,9 +7665,8 @@ class TemplateInstanceService {
      */
     async exportCxExcelPromise(model) {
         const url = `${this.serviceUri}/ExportCxExcel`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }));
     }
     /**
      * Word
@@ -7703,9 +7675,8 @@ class TemplateInstanceService {
      */
     fillTemplateByCodeAndGetPdf(templateCode, data) {
         const url = `${this.serviceUri}/fillWordByTemplateCode/${templateCode}?isPrint=true`;
-        return this._httpClient
-            .post(url, data)
-            .toPromise().then(res => {
+        return firstValueFrom(this._httpClient
+            .post(url, data)).then(res => {
             if (res.data) {
                 this._printService.printBase64Pdf(res.data);
             }
@@ -7718,9 +7689,8 @@ class TemplateInstanceService {
      */
     fillTemplateByCode(templateCode, data, name = 'Export') {
         const url = `${this.serviceUri}/fillWordByTemplateCode/${templateCode}?isPrint=false`;
-        return this._httpClient
-            .post(url, data, { responseType: 'blob' })
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, data, { responseType: 'blob' }))
             .then(res => {
             FileSaver.saveAs(res, this.getFullFileName(name || 'Export', TemplateConstant.WORD_EXTENSION));
         }).catch(async (err) => {
@@ -7730,13 +7700,12 @@ class TemplateInstanceService {
     }
     laTexToBase64Image(laTex, font = 54) {
         const api = `${this.serviceUri}/LatexToBase64`;
-        return this._httpClient.post(api, { laTex, font }).toPromise();
+        return firstValueFrom(this._httpClient.post(api, { laTex, font }));
     }
     async _export(model) {
         const url = `${this.serviceUri}/export`;
-        return this._httpClient
-            .post(url, model)
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model));
     }
     /**
      * Export a tree of folders, files using background job.
@@ -7759,9 +7728,8 @@ class TemplateInstanceService {
     }
     async _exportNormal(model) {
         const url = `${this.serviceUri}/exportNormal`;
-        return this._httpClient
-            .post(url, model)
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model));
     }
     /**
      * Export a tree of folders, files directly.
@@ -7846,7 +7814,7 @@ class ComponentBase {
     */
     ngOnDestroy() {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(1);
         this._unsubscribeAll.complete();
         if (this.model.componentSubs) {
             for (const sub of this.model.componentSubs) {
@@ -9284,8 +9252,8 @@ class UserService extends BaseService {
     }
     getForAutoComplete(key) {
         const apiUrl = `${this.serviceUri}/GetForAutoComplete?key=${key}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))));
     }
     populateCurrentUser() {
         const storageItem = localStorage.getItem(this.CURRENT_USER_KEY);
@@ -9393,7 +9361,7 @@ class UserService extends BaseService {
     }
     getStaffInfo(userId) {
         const url = `${this.serviceUri}/${userId}`;
-        return this._http.get(url)
+        return firstValueFrom(this._http.get(url)
             .pipe(catchError((err) => this.handleError(err, this._injector)), map(rs => {
             const op = {
                 fullName: rs.data ? rs.data.fullName : '',
@@ -9412,8 +9380,7 @@ class UserService extends BaseService {
                 }
             }
             return op;
-        }))
-            .toPromise();
+        })));
     }
     getId() {
         const storageItem = localStorage.getItem(this.CURRENT_USER_KEY);
@@ -9437,10 +9404,9 @@ class UserService extends BaseService {
     }
     registerOnline(formData) {
         const apiUrl = `${this.serviceUri}/registerOnline`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, formData)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     getBasicUserInfo(userId) {
         const storageItem = localStorage.getItem(this.USER_INFO_KEY + '_' + userId);
@@ -9459,11 +9425,11 @@ class UserService extends BaseService {
                     if (userId > 0) {
                         const svUrl = `${this.serviceUri}/GetBasicUserInfo?id=${userId}`;
                         try {
-                            const result = await this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                            const result = await firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
                                 // save response to local storage here
                                 localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.id, JSON.stringify(repsonse.data));
                                 return repsonse.data;
-                            }, catchError((err) => this.handleError(err, this._injector)))).toPromise();
+                            }, catchError((err) => this.handleError(err, this._injector)))));
                             resolve(result);
                         }
                         catch {
@@ -9490,7 +9456,7 @@ class UserService extends BaseService {
         else {
             return new Promise((resolve, reject) => {
                 const svUrl = `${this.serviceUri}/GetBasicUsersInfo?userIds=${userIds}`;
-                this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
+                firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data))).then(success => {
                     resolve(success);
                 }).catch(err => {
                     resolve([]);
@@ -9518,11 +9484,11 @@ class UserService extends BaseService {
                 else {
                     if (userName != '') {
                         const svUrl = `${this.serviceUri}/GetBasicUserInfoByUserName?userName=${userName}`;
-                        this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                        firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
                             // save response to local storage here
                             localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.userName, JSON.stringify(repsonse.data));
                             return repsonse.data;
-                        }, catchError((err) => this.handleError(err, this._injector)))).toPromise().then(rss => {
+                        }, catchError((err) => this.handleError(err, this._injector))))).then(rss => {
                             resolve(rss);
                         }).catch(errr => {
                             resolve({});
@@ -9547,13 +9513,13 @@ class UserService extends BaseService {
         }
         else {
             const svUrl = `${this.serviceUri}/GetBasicUsersInfoByUserNames?userNames=${userNames}`;
-            return await this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => {
+            return await firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => {
                 localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.map(x => {
                     if (x.userName)
                         return x.userName;
                 }), JSON.stringify(repsonse.data));
                 return repsonse.data;
-            })).toPromise().catch(err => []);
+            }))).catch(err => []);
         }
     }
     convertListUserIdToString(userIds) {
@@ -9574,23 +9540,20 @@ class UserService extends BaseService {
         return dataSource;
     }
     restorePassword(item) {
-        return this._http.put(`${this.serviceUri}/restorePassword`, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.put(`${this.serviceUri}/restorePassword`, item)
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     changePassword(userId, item) {
         const apiUrl = `${this.serviceUri}/ChangePassword`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     resetPassword(item) {
         const apiUrl = `${this.serviceUri}/resetPassword`;
-        return this._http
+        return firstValueFrom(this._http
             .put(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     GetsByManagerIdArrayId(id) {
         const apiUrl = `${this.serviceUri}/GetLowerStaffsByUserId?userId=${id}`;
@@ -9598,17 +9561,15 @@ class UserService extends BaseService {
     }
     markAsAdmin(userId, isAdmin) {
         const url = `${this.serviceUri}/markAsAdmin/${userId}/${isAdmin}`;
-        return this._http
+        return firstValueFrom(this._http
             .put(url, isAdmin)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     markAsRepresent(userId, isRepresent) {
         const url = `${this.serviceUri}/markAsRepresent/${userId}/${isRepresent}`;
-        return this._http
+        return firstValueFrom(this._http
             .put(url, isRepresent)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     getsByOrganizationListId(pageOption, funGetName = '', optionParameter = '', defaultParameter = '') {
         let queryString = `?key=${pageOption.query}`;
@@ -9664,17 +9625,15 @@ class UserService extends BaseService {
     }
     lockUser(item) {
         const apiUrl = `${this.serviceUri}/lockUserAccount`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     unlockUser(item) {
         const apiUrl = `${this.serviceUri}/unlockUserAccount`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     isSuperUser() {
         return this._applicationContext.getRootContext().data.currentUser
@@ -9689,8 +9648,8 @@ class UserService extends BaseService {
     }
     getUsersByGroupCode(groupCode) {
         const apiUrl = `${this.serviceUri}/GetUsersByGroupCode?groupCode=${groupCode}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))));
     }
     getServiceEndpoint() {
         return `${this.serviceUri}`;
@@ -9736,7 +9695,7 @@ class UserService extends BaseService {
                     sorts: [],
                     filters: filters
                 });
-                this._http.post(svUrl, gridInfo).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
+                firstValueFrom(this._http.post(svUrl, gridInfo).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data))).then(success => {
                     resolve(success);
                 }).catch(err => {
                     resolve([]);
@@ -9802,11 +9761,11 @@ class OrganizationService extends BaseService {
                 else {
                     if (organizationId > 0) {
                         const svUrl = `${this.serviceUri}/GetOrganizationInfo?id=${organizationId}`;
-                        const result = await this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                        const result = await firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
                             // save response to local storage here
                             localStorage.setItem(this.ORGANIZATION_INFO_KEY + '_' + repsonse.data.id, JSON.stringify(repsonse.data));
                             return repsonse.data;
-                        }, catchError((err) => this.handleError(err, this._injector)))).toPromise();
+                        }, catchError((err) => this.handleError(err, this._injector)))));
                         resolve(result);
                     }
                 }
@@ -9826,29 +9785,27 @@ class OrganizationService extends BaseService {
         if (parentId) {
             svUrl += `&parentId=${parentId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     getById(id) {
         const svUrl = `${this.serviceUri}/${id}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector))));
     }
     getOrganizationTree(organizationCode) {
         let apiUrl = `${this.serviceUri}/GetTree`;
         if (organizationCode) {
             apiUrl = `${apiUrl}?organizationCode=${organizationCode}`;
         }
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getMyTree(organizationCode) {
         let apiUrl = `${this.serviceUri}/GetMyTree`;
         if (organizationCode) {
             apiUrl = `${apiUrl}?organizationCode=${organizationCode}`;
         }
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getOrganizationTreeTable(isIgnoreClientCache = false) {
         const apiUrl = `${this.serviceUri}/GetTreeTable`;
@@ -9862,27 +9819,23 @@ class OrganizationService extends BaseService {
         if (organizationCode) {
             apiUrl = `${apiUrl}?parentCode=${organizationCode}`;
         }
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getManagerByOrgCode(organizationCode) {
         const apiUrl = `${this.serviceUri}/GetManagerByOrgCode/${organizationCode}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getManagerByOrgId(organizationId) {
         const apiUrl = `${this.serviceUri}/GetManagerByOrgId/${organizationId}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
     getOrganizationByParentId(parentId) {
         const apiUrl = `${this.serviceUri}/GetByParentId?parentId=${parentId}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err, this._injector))));
     }
 }
 OrganizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: OrganizationService, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -11052,8 +11005,8 @@ class EntityPickerService extends BaseService {
         return this.defaultGet(apiUrl);
     }
     getPaged(gridInfo, endpoint) {
-        return this._http.post(endpoint, gridInfo)
-            .pipe(catchError(err => this.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.post(endpoint, gridInfo)
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     getTeacherFullPickerTemplate(control) {
         // TODO: Upgrade later
@@ -11994,7 +11947,7 @@ class CustomRouterService {
     getLatestFragment() {
         return new Promise((resolve) => {
             if (this._unsubscribeAll) {
-                this._unsubscribeAll.next();
+                this._unsubscribeAll.next(1);
                 this._unsubscribeAll.complete();
             }
             this._activatedRoute.fragment
@@ -12007,7 +11960,7 @@ class CustomRouterService {
         });
     }
     destroy() {
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(1);
         this._unsubscribeAll.complete();
     }
     getFragmentObject() {
@@ -12172,9 +12125,8 @@ class CustomRouterService {
     }
     tryParse(v) {
         let n = null;
-        if (v === null || v === undefined) {
+        if (v === null || v === undefined)
             return null;
-        }
         if (v.indexOf('-') > 0) {
             if (v.indexOf('T') > 0) {
                 n = new Date(v);
@@ -15313,7 +15265,7 @@ NumberPickerRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             useExisting: forwardRef(() => NumberPickerRangeComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"tn-number-picker-range\">\r\n    <input type=\"text\" [placeholder]=\"'T\u1EEB'\" [attr.disabled]=\"disabled ? true : null\" [mask]=\"getMaskByType(maskType)\"\r\n        [thousandSeparator]=\"getThousandSeperator()\" pInputText [(ngModel)]=\"model[0]\" (change)=\"onChanged($event)\"\r\n        (focus)=\"onFocus($event, 0)\" />\r\n    <span>-</span>\r\n    <input type=\"text\" [placeholder]=\"'\u0110\u1EBFn'\" [attr.disabled]=\"disabled ? true : null\" [mask]=\"getMaskByType(maskType)\"\r\n        [thousandSeparator]=\"getThousandSeperator()\" pInputText [(ngModel)]=\"model[1]\" (change)=\"onChanged($event)\"\r\n        (focus)=\"onFocus($event, 1)\" />\r\n</div>", styles: [".tn-number-picker-range{display:flex}.tn-number-picker-range>span{flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}::ng-deep .tn-number-picker-range .p-inputtext{flex:0 0 calc(50% - 8px);width:calc(50% - 8px)}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i4$5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }] });
+    ], ngImport: i0, template: "<div class=\"tn-number-picker-range\">\r\n    <input type=\"text\" [placeholder]=\"'T\u1EEB'\" [attr.disabled]=\"disabled ? true : null\" [mask]=\"getMaskByType(maskType)\"\r\n        [thousandSeparator]=\"getThousandSeperator()\" pInputText [(ngModel)]=\"model[0]\" (change)=\"onChanged($event)\"\r\n        (focus)=\"onFocus($event, 0)\" />\r\n    <span>-</span>\r\n    <input type=\"text\" [placeholder]=\"'\u0110\u1EBFn'\" [attr.disabled]=\"disabled ? true : null\" [mask]=\"getMaskByType(maskType)\"\r\n        [thousandSeparator]=\"getThousandSeperator()\" pInputText [(ngModel)]=\"model[1]\" (change)=\"onChanged($event)\"\r\n        (focus)=\"onFocus($event, 1)\" />\r\n</div>", styles: [".tn-number-picker-range{display:flex}.tn-number-picker-range>span{flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}::ng-deep .tn-number-picker-range .p-inputtext{flex:0 0 calc(50% - 8px);width:calc(50% - 8px)}\n"], dependencies: [{ kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i4$5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: NumberPickerRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-number-picker-range', providers: [
@@ -15453,7 +15405,7 @@ MaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             multi: true
         },
         DecimalPipe
-    ], ngImport: i0, template: "<ng-container *ngIf=\"viewMode\">\r\n    <div class=\"tn-mask-viewMode\">\r\n        <span *ngIf=\"prefix\">{{prefix}}</span>\r\n        <span>{{model}}</span> \r\n        <span *ngIf=\"suffix\">({{suffix}})</span>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!viewMode\">\r\n    <div class=\"p-inputgroup\">\r\n        <span *ngIf=\"prefix\" class=\"p-inputgroup-addon\">{{prefix}}</span>\r\n        <input type=\"text\" pInputText [placeholder]=\"_placeholder\" [attr.disabled]=\"disabled ? true : null\"\r\n            [mask]=\"getMaskByType(maskType)\" [thousandSeparator]=\"getThousandSeperator()\" [class]=\"inputStyleClass\"\r\n            [(ngModel)]=\"model\" (focus)=\"handleFocus()\" (blur)=\"handleBlur()\" (change)=\"handleChangedValue()\" />\r\n        <span *ngIf=\"suffix\" class=\"p-inputgroup-addon\">({{suffix}})</span>\r\n    </div>\r\n</ng-container>", styles: [".tn-mask-viewMode>span{margin-right:3px}.tn-mask-viewMode>span:last-child{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i4$5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime"] }] });
+    ], ngImport: i0, template: "<ng-container *ngIf=\"viewMode\">\r\n    <div class=\"tn-mask-viewMode\">\r\n        <span *ngIf=\"prefix\">{{prefix}}</span>\r\n        <span>{{model}}</span> \r\n        <span *ngIf=\"suffix\">({{suffix}})</span>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!viewMode\">\r\n    <div class=\"p-inputgroup\">\r\n        <span *ngIf=\"prefix\" class=\"p-inputgroup-addon\">{{prefix}}</span>\r\n        <input type=\"text\" pInputText [placeholder]=\"_placeholder\" [attr.disabled]=\"disabled ? true : null\"\r\n            [mask]=\"getMaskByType(maskType)\" [thousandSeparator]=\"getThousandSeperator()\" [class]=\"inputStyleClass\"\r\n            [(ngModel)]=\"model\" (focus)=\"handleFocus()\" (blur)=\"handleBlur()\" (change)=\"handleChangedValue()\" />\r\n        <span *ngIf=\"suffix\" class=\"p-inputgroup-addon\">({{suffix}})</span>\r\n    </div>\r\n</ng-container>", styles: [".tn-mask-viewMode>span{margin-right:3px}.tn-mask-viewMode>span:last-child{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i4$5.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: MaskComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-mask', providers: [
@@ -19388,7 +19340,7 @@ class DropdownService {
         this._httpClient = _httpClient;
     }
     getDataSource(serviceUri) {
-        return this._httpClient.get(serviceUri).toPromise();
+        return firstValueFrom(this._httpClient.get(serviceUri));
     }
     getPostDataSource(serviceUri, filters, options) {
         return this.getDataDropdownByFilter(serviceUri, filters, options);
@@ -19397,9 +19349,8 @@ class DropdownService {
         let apiUrl = serviceUri;
         if (plusUrl != null && plusUrl != '')
             apiUrl += "/" + plusUrl;
-        return this._httpClient
-            .post(apiUrl, gridInfo)
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(apiUrl, gridInfo));
     }
     setDefaultValue(options) {
         if (options.fieldPlus.length > 0 && !options.fieldPlus.startsWith(','))
@@ -20891,7 +20842,7 @@ class TemplateService {
     }
     laTexToBase64Image(laTex, font = 54) {
         const api = `${this.serviceUri}/LatexToBase64`;
-        return this._httpClient.post(api, { laTex, font }).toPromise();
+        return firstValueFrom(this._httpClient.post(api, { laTex, font }));
     }
     /**
      * Description: Xuất file sử dụng thư viện CX, xuất xong tự động mở popup để lưu file.
@@ -20899,9 +20850,8 @@ class TemplateService {
     exportCxExcelByCode(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCode`;
         this.setFileInfo(model);
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }))
             .then(res => {
             FileSaver.saveAs(res, this.getFullFileName(model.fileName || model.code));
         }).catch(async (err) => {
@@ -20912,9 +20862,8 @@ class TemplateService {
     exportManyCxExcelByCode(model) {
         const url = `${this.serviceUri}/ExportManyCxExcelByCode`;
         this.setManyFileInfo(model);
-        return this._httpClient
-            .post(url, model)
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model))
             .then(res => {
             if (res.success) {
                 this._fileService.downloadFolder(res.data.folderId);
@@ -20940,8 +20889,7 @@ class TemplateService {
      */
     async ExportCxExcelByCodeWithSignalR(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCodeWithSignalR`;
-        return this._httpClient.post(url, model)
-            .toPromise();
+        return firstValueFrom(this._httpClient.post(url, model));
     }
     /**
      * Description: Export sử dung ClosedXml.Report (Cx) với HighPerformanceService, sử dụng cho file dữ liệu lớn.
@@ -20954,20 +20902,17 @@ class TemplateService {
      */
     async ExportCxExcelByCodeWithHPS(model) {
         const url = `${this.serviceUri}/ExportWithHighPerformanceService`;
-        return this._httpClient.post(url, model)
-            .toPromise();
+        return firstValueFrom(this._httpClient.post(url, model));
     }
     async exportCxExcelByCodePromise(model) {
         const url = `${this.serviceUri}/ExportCxExcelByCode`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }));
     }
     fillTemplateByCodeAndGetPdf(templateCode, data, onLoadingDataPdf = null, onEndLoadingDataPdf = null) {
         const url = `${this.serviceUri}/fillWordByTemplateCode/${templateCode}?isPrint=true`;
-        return this._httpClient
-            .post(url, data)
-            .toPromise().then(res => {
+        return firstValueFrom(this._httpClient
+            .post(url, data)).then(res => {
             if (res.data) {
                 this._printService.printBase64Pdf(res.data, onLoadingDataPdf, onEndLoadingDataPdf);
             }
@@ -20975,9 +20920,8 @@ class TemplateService {
     }
     fillWordByTemplateCodeMultiData(templateCode, data, onLoadingDataPdf = null, onEndLoadingDataPdf = null) {
         const url = `${this.serviceUri}/fillWordByTemplateCodeMultiData/${templateCode}?isPrint=true`;
-        return this._httpClient
-            .post(url, data)
-            .toPromise().then(res => {
+        return firstValueFrom(this._httpClient
+            .post(url, data)).then(res => {
             if (res.data) {
                 this._printService.printBase64Pdf(res.data, onLoadingDataPdf, onEndLoadingDataPdf);
             }
@@ -21002,9 +20946,8 @@ class TemplateService {
      */
     exportCxExcel(model) {
         const url = `${this.serviceUri}/ExportCxExcel`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise()
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }))
             .then(res => {
             FileSaver.saveAs(res, this.getFullFileName(model.fileName || 'Export'));
         }).catch(async (err) => {
@@ -21014,9 +20957,8 @@ class TemplateService {
     }
     async exportCxExcelPromise(model) {
         const url = `${this.serviceUri}/ExportCxExcel`;
-        return this._httpClient
-            .post(url, model, { responseType: 'blob' })
-            .toPromise();
+        return firstValueFrom(this._httpClient
+            .post(url, model, { responseType: 'blob' }));
     }
 }
 TemplateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TemplateService, deps: [{ token: EnvironmentService }, { token: i1$1.HttpClient }, { token: PrintService }, { token: FileExplorerService }, { token: NotifierService }, { token: CrudService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -21435,7 +21377,7 @@ class TnTinymceComponent extends ComponentBase {
         return content;
     }
     handleBlur() {
-        this.onBlur.next();
+        this.onBlur.next(1);
     }
     onKeyDown(e, topic) {
         this.keydown.next({ event: e, topic });
@@ -21875,8 +21817,8 @@ class UserV5Service extends BaseService {
     }
     getForAutoComplete(key) {
         const apiUrl = `${this.serviceUri}/GetForAutoComplete?key=${key}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))));
     }
     populateCurrentUser() {
         const storageItem = localStorage.getItem(this.CURRENT_USER_KEY);
@@ -21954,7 +21896,7 @@ class UserV5Service extends BaseService {
     }
     getStaffInfo(userId) {
         const url = `${this.serviceUri}/${userId}`;
-        return this._http.get(url)
+        return firstValueFrom(this._http.get(url)
             .pipe(catchError((err) => this.handleError(err, this._injector)), map(rs => {
             const op = {
                 fullName: rs.data ? rs.data.fullName : '',
@@ -21973,8 +21915,7 @@ class UserV5Service extends BaseService {
                 }
             }
             return op;
-        }))
-            .toPromise();
+        })));
     }
     getId() {
         const storageItem = localStorage.getItem(this.CURRENT_USER_KEY);
@@ -22001,10 +21942,9 @@ class UserV5Service extends BaseService {
     }
     registerOnline(formData) {
         const apiUrl = `${this.serviceUri}/registerOnline`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, formData)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     getBasicUserInfo(userId) {
         const storageItem = localStorage.getItem(this.USER_INFO_KEY + '_' + userId);
@@ -22023,11 +21963,11 @@ class UserV5Service extends BaseService {
                     if (userId > 0) {
                         const svUrl = `${this.serviceUri}/GetBasicUserInfo?id=${userId}`;
                         try {
-                            const result = await this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                            const result = await firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
                                 // save response to local storage here
                                 localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.id, JSON.stringify(repsonse.data));
                                 return repsonse.data;
-                            }, catchError((err) => this.handleError(err, this._injector)))).toPromise();
+                            }, catchError((err) => this.handleError(err, this._injector)))));
                             resolve(result);
                         }
                         catch {
@@ -22054,7 +21994,7 @@ class UserV5Service extends BaseService {
         else {
             return new Promise((resolve, reject) => {
                 const svUrl = `${this.serviceUri}/GetBasicUsersInfo?userIds=${userIds}`;
-                this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
+                firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data))).then(success => {
                     resolve(success);
                 }).catch(err => {
                     resolve([]);
@@ -22076,11 +22016,11 @@ class UserV5Service extends BaseService {
                 else {
                     if (userName != '') {
                         const svUrl = `${this.serviceUri}/GetBasicUserInfoByUserName?userName=${userName}`;
-                        this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
+                        firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), map(repsonse => {
                             // save response to local storage here
                             localStorage.setItem(this.USER_INFO_KEY + '_' + repsonse.data.userName, JSON.stringify(repsonse.data));
                             return repsonse.data;
-                        }, catchError((err) => this.handleError(err, this._injector)))).toPromise().then(rss => {
+                        }, catchError((err) => this.handleError(err, this._injector))))).then(rss => {
                             resolve(rss);
                         }).catch(errr => {
                             resolve({});
@@ -22100,7 +22040,7 @@ class UserV5Service extends BaseService {
         else {
             return new Promise((resolve, reject) => {
                 const svUrl = `${this.serviceUri}/GetBasicUsersInfoByUserName?userNames=${userNames}`;
-                this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
+                firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data))).then(success => {
                     resolve(success);
                 }).catch(err => {
                     resolve([]);
@@ -22126,23 +22066,20 @@ class UserV5Service extends BaseService {
         return dataSource;
     }
     restorePassword(item) {
-        return this._http.put(`${this.serviceUri}/restorePassword`, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+        return firstValueFrom(this._http.put(`${this.serviceUri}/restorePassword`, item)
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     changePassword(userId, item) {
         const apiUrl = `${this.serviceUri}/ChangePassword`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     resetPassword(item) {
         const apiUrl = `${this.serviceUri}/resetPassword`;
-        return this._http
+        return firstValueFrom(this._http
             .put(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     resetPasswordAll() {
         return this.defaultPost(`${this.serviceUri}/ResetPasswordAll`, {});
@@ -22158,17 +22095,15 @@ class UserV5Service extends BaseService {
     }
     markAsAdmin(userId, isAdmin) {
         const url = `${this.serviceUri}/markAsAdmin/${userId}/${isAdmin}`;
-        return this._http
+        return firstValueFrom(this._http
             .put(url, isAdmin)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     markAsRepresent(userId, isRepresent) {
         const url = `${this.serviceUri}/markAsRepresent/${userId}/${isRepresent}`;
-        return this._http
+        return firstValueFrom(this._http
             .put(url, isRepresent)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     getsByOrganizationListId(pageOption, funGetName = '', optionParameter = '', defaultParameter = '') {
         let queryString = `?key=${pageOption.query}`;
@@ -22224,17 +22159,15 @@ class UserV5Service extends BaseService {
     }
     lockUser(item) {
         const apiUrl = `${this.serviceUri}/lockUserAccount`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     unlockUser(item) {
         const apiUrl = `${this.serviceUri}/unlockUserAccount`;
-        return this._http
+        return firstValueFrom(this._http
             .post(apiUrl, item)
-            .pipe(catchError(err => this.handleError(err, this._injector)))
-            .toPromise();
+            .pipe(catchError(err => this.handleError(err, this._injector))));
     }
     isSuperUser() {
         return this._applicationContext.getRootContext().data.currentUser
@@ -22249,8 +22182,8 @@ class UserV5Service extends BaseService {
     }
     getUsersByGroupCode(groupCode) {
         const apiUrl = `${this.serviceUri}/GetUsersByGroupCode?groupCode=${groupCode}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))).toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this._exceptionHandlerService.handleError(err, this._injector))));
     }
     getServiceEndpoint() {
         return `${this.serviceUri}`;
@@ -22296,7 +22229,7 @@ class UserV5Service extends BaseService {
                     sorts: [],
                     filters: filters
                 });
-                this._http.post(svUrl, gridInfo).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data)).toPromise().then(success => {
+                firstValueFrom(this._http.post(svUrl, gridInfo).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err, this._injector)), map(repsonse => repsonse.data))).then(success => {
                     resolve(success);
                 }).catch(err => {
                     resolve([]);
@@ -22477,7 +22410,7 @@ class UserPickerBoxComponent extends ComponentBase {
     }
 }
 UserPickerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UserPickerBoxComponent, deps: [{ token: UserV5Service }, { token: i0.Injector }, { token: OrganizationService }], target: i0.ɵɵFactoryTarget.Component });
-UserPickerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UserPickerBoxComponent, selector: "user-picker-box", inputs: { multiple: "multiple", disabled: "disabled", enableCaching: "enableCaching", controlSetting: "controlSetting", parentSetting: "parentSetting", advanceData: "advanceData", control: "control", width: "width", height: "height", selectedValue: "selectedValue", readOnlyValues: "readOnlyValues" }, outputs: { onRowSelect: "onRowSelect", onChanged: "onChanged", onSelect: "onSelect", onUnSelect: "onUnSelect", onDone: "onDone" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "entityPickerBox", first: true, predicate: ["entityPickerBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid p-m-0 tn-l-user-picker-box\">\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]=\"0\">\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</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>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::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}}\n"], dependencies: [{ kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration"], outputs: ["dragStart", "dragEnd", "gutterClick", "gutterDblClick", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i6$1.Tree, selector: "p-tree", inputs: ["layout", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loadingIcon", "emptyMessage", "filterBy", "filterMode", "indentation", "trackBy", "selection", "value", "selectionMode", "style", "styleClass", "contextMenu", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "loading", "ariaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterPlaceholder", "filterLocale", "scrollHeight", "virtualScroll", "virtualNodeHeight", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onFilter"] }, { kind: "component", type: EntityPickerBoxComponent, selector: "entity-picker-box", inputs: ["parentSetting", "advanceData", "control", "width", "height", "readOnlyValues", "selectedValue"], outputs: ["onContentLeftInit", "onContentRightInit", "onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "component", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+UserPickerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: UserPickerBoxComponent, selector: "user-picker-box", inputs: { multiple: "multiple", disabled: "disabled", enableCaching: "enableCaching", controlSetting: "controlSetting", parentSetting: "parentSetting", advanceData: "advanceData", control: "control", width: "width", height: "height", selectedValue: "selectedValue", readOnlyValues: "readOnlyValues" }, outputs: { onRowSelect: "onRowSelect", onChanged: "onChanged", onSelect: "onSelect", onUnSelect: "onUnSelect", onDone: "onDone" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "entityPickerBox", first: true, predicate: ["entityPickerBox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid p-m-0 tn-l-user-picker-box\">\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]=\"0\">\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</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>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::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}}\n"], dependencies: [{ kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "component", type: i6$1.Tree, selector: "p-tree", inputs: ["layout", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loadingIcon", "emptyMessage", "filterBy", "filterMode", "indentation", "trackBy", "selection", "value", "selectionMode", "style", "styleClass", "contextMenu", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "loading", "ariaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterPlaceholder", "filterLocale", "scrollHeight", "virtualScroll", "virtualNodeHeight", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onFilter"] }, { kind: "component", type: EntityPickerBoxComponent, selector: "entity-picker-box", inputs: ["parentSetting", "advanceData", "control", "width", "height", "readOnlyValues", "selectedValue"], outputs: ["onContentLeftInit", "onContentRightInit", "onRowSelect", "onChanged", "onSelect", "onUnSelect", "onDone"] }, { kind: "component", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UserPickerBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'user-picker-box', providers: [ComponentContextService], template: "<div class=\"p-grid p-m-0 tn-l-user-picker-box\">\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]=\"0\">\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</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>", styles: [".action-btn{border:1px solid #0a89bf;color:#0a89bf;background-color:#fff;font-size:16px;width:40px;cursor:pointer;text-align:center;margin:4px 2px}.content-all{display:flex;flex-direction:column}.content-top{padding:5px 0;overflow:hidden;flex-grow:1}.content-bottom{border-top:1px solid #ddd;padding:5px 0;overflow:hidden;flex:0 0 50%}.tn-l-button-group{padding-bottom:1em}.tn-l-button-group-picker{text-align:center;position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.tn-l-user-picker-box{height:100%}.tn-l-left-sidebar-wrapper{height:100%;border-right:1px solid #aaa}.tn-l-left-sidebar-area{height:100%}.tn-l-right-content-wrapper{padding-bottom:0;padding-top:0;height:100%}@media (max-width: 640px){.entityPicker{height:auto}.tn-l-search-button-group{padding-bottom:1em}.tn-l-button-group-picker{position:static;top:auto;left:auto;transform:none;padding-bottom:5px}.tn-l-left-sidebar-wrapper{height:calc(100vh - 300px);border-right:unset;border-bottom:1px solid #aaa}}::ng-deep .user-picker-box-dialog .p-dialog-content{overflow:hidden;padding:0}::ng-deep .user-picker-box-dialog .p-tree{padding:0;border:none}::ng-deep .user-picker-box-dialog .p-tree-wrapper{padding:.5rem}::ng-deep .user-picker-box-dialog .p-tree .p-tree-filter-container{position:sticky;top:0;z-index:4;padding:.5em;margin-bottom:0;background-color:#fff}::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}}\n"] }]
@@ -25169,7 +25102,7 @@ class CrudFormComponent extends ComponentBase {
     }
 }
 CrudFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudFormComponent, deps: [{ token: i0.Injector }, { token: CommonService }, { token: CrudService }, { token: i1.TranslateService }, { token: i1$3.DeviceDetectorService }, { token: EnvironmentService }, { token: ComponentService }, { token: i2$2.DomSanitizer }, { token: EntityPickerService }], target: i0.ɵɵFactoryTarget.Component });
-CrudFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CrudFormComponent, selector: "crud-form", inputs: { setting: "setting", context: "context", filesUploaded: "filesUploaded", isViewMode: "isViewMode", disableKeypressControl: "disableKeypressControl", disableCaching: "disableCaching", styleClass: "styleClass", formId: "formId", formClass: "formClass", autoFocus: "autoFocus", trapFocus: "trapFocus", data: "data", formState: "formState" }, outputs: { onFormReady: "onFormReady", onControlReady: "onControlReady", onAllControlReady: "onAllControlReady", onModelChanged: "onModelChanged", dataChange: "dataChange", onChange: "onChange", onAfterTrinhKy: "onAfterTrinhKy" }, providers: [ComponentContextService], queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "formElement", first: true, predicate: ["formElement"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, 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\" let-groupKey=\"groupKey\">\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                        [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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\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=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\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;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        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 class=\"stt\" 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<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\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    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.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-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.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{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;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 select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::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{box-shadow:0 0 0 .2rem #ffc4b3}::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,::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) .p-inputtext,::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-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::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,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width: 40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::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 #00000013}: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 #00000013,0 0 3px #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i13.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i13.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i13.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$2.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5$4.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: i19.InputSwitch, selector: "p-inputSwitch", inputs: ["disabled", "style", "styleClass", "tabindex", "inputId", "name", "readonly", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i20.Slider, selector: "p-slider", inputs: ["min", "max", "orientation", "tabindex", "disabled", "animate", "step", "range", "style", "styleClass", "ariaLabelledBy"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: i21.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["options", "max", "min"] }, { kind: "component", type: AutoCompletePickerComponent, selector: "autocomplete-picker", inputs: ["control", "groupKey", "valueInGroup", "disabled", "popupSize", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: CheckBoxListComponent, selector: "check-box-list", inputs: ["styleClass", "control", "dataSource", "disabled"], outputs: ["onSelect", "onReady"] }, { kind: "component", type: CommonPickerComponent, selector: "common-picker", inputs: ["control", "extraData", "disabled", "groupKey", "valueInGroup"], outputs: ["onSelect", "onUnSelect", "onChanged", "onBlur"] }, { kind: "component", type: CoCauToChucPickerListComponent, selector: "cocautochuc-picker-list", inputs: ["control", "disabled", "readOnlyValues"], outputs: ["onChanged", "onSelect", "onUnSelect", "onClear", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: EntityPickerComponent, selector: "entity-picker", inputs: ["control", "disabled", "readOnly", "children"], outputs: ["onSelect", "onUnSelect", "onChanged"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["chooseLabel", "readonly", "accept", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "sharedFolderType"], outputs: ["onSelect", "onRemove", "onChanged"] }, { kind: "component", type: MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass"], outputs: ["onFocus", "onBlur", "onChanged"] }, { kind: "component", type: NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: RadioButtonListComponent, selector: "radio-button-list", inputs: ["control", "dataSource", "value", "disabled"], outputs: ["valueChange", "onChanged", "onDataSourceLoaded", "adjustValue", "onReady"] }, { kind: "component", type: ReferenceTextBoxComponent, selector: "reference-textbox", inputs: ["control", "value"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: TnColorPickerComponent, selector: "tn-color-picker", inputs: ["disabled", "appendTo"], outputs: ["change"] }, { kind: "component", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: TnTinymceComponent, selector: "tn-tinymce", inputs: ["mode", "disabled", "required", "height", "field", "languageCode"], outputs: ["keydown", "onBlur", "onChanged"] }, { kind: "component", type: CoCauToChucPickerComponent, selector: "cocautochuc-picker", inputs: ["control", "autoDisplayFirst", "multiple", "required", "readonly", "limit", "filter", "isUsingId", "parentOrgId", "parentOrgCode", "showClear", "disabledParentItem", "rootParentId"], outputs: ["onChanged"] }, { kind: "component", type: UserPickerComponent, selector: "user-picker", inputs: ["control", "popupSize", "multiple", "disabled", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onValueChanged"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+CrudFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CrudFormComponent, selector: "crud-form", inputs: { setting: "setting", context: "context", filesUploaded: "filesUploaded", isViewMode: "isViewMode", disableKeypressControl: "disableKeypressControl", disableCaching: "disableCaching", styleClass: "styleClass", formId: "formId", formClass: "formClass", autoFocus: "autoFocus", trapFocus: "trapFocus", data: "data", formState: "formState" }, outputs: { onFormReady: "onFormReady", onControlReady: "onControlReady", onAllControlReady: "onAllControlReady", onModelChanged: "onModelChanged", dataChange: "dataChange", onChange: "onChange", onAfterTrinhKy: "onAfterTrinhKy" }, providers: [ComponentContextService], queries: [{ propertyName: "children", predicate: TemplateRef }], viewQueries: [{ propertyName: "formElement", first: true, predicate: ["formElement"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, 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\" let-groupKey=\"groupKey\">\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                        [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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\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=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\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;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        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 class=\"stt\" 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<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\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    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.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-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.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{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;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 select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::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{box-shadow:0 0 0 .2rem #ffc4b3}::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,::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) .p-inputtext,::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-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::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,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width: 40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::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 #00000013}: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 #00000013,0 0 3px #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu", inputs: ["autoZIndex", "baseZIndex", "triggerEvent", "model", "global", "target", "style", "styleClass", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i13.Table, selector: "p-table", inputs: ["pageLinks", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "contextMenuSelectionMode", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "filterDelay", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "virtualScrollDelay", "virtualRowHeight", "columnResizeMode", "loadingIcon", "showLoader", "stateStorage", "editMode", "totalRecords", "value", "columns", "first", "rows", "sortField", "sortOrder", "multiSortMeta", "selection", "contextMenuSelection", "frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "rowsPerPageOptions", "paginatorDropdownAppendTo", "showCurrentPageReport", "showJumpToPageDropdown", "selectionMode", "dataKey", "metaKeySelection", "globalFilterFields", "filterLocale", "scrollable", "scrollHeight", "virtualScroll", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "reorderableColumns", "loading", "rowHover", "customSort", "autoLayout", "exportFunction", "stateKey", "minBufferPx", "maxBufferPx"], outputs: ["selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i13.ReorderableRowHandle, selector: "[pReorderableRowHandle]", inputs: ["pReorderableRowHandle"] }, { kind: "directive", type: i13.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$2.Checkbox, selector: "p-checkbox", inputs: ["checkboxIcon", "disabled", "value", "name", "binary", "label", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "readonly", "required"], outputs: ["onChange"] }, { kind: "directive", type: i3$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i5$4.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: i19.InputSwitch, selector: "p-inputSwitch", inputs: ["disabled", "style", "styleClass", "tabindex", "inputId", "name", "readonly", "ariaLabelledBy"], outputs: ["onChange"] }, { kind: "component", type: i20.Slider, selector: "p-slider", inputs: ["min", "max", "orientation", "tabindex", "disabled", "animate", "step", "range", "style", "styleClass", "ariaLabelledBy"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: i21.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { kind: "component", type: AutoCompletePickerComponent, selector: "autocomplete-picker", inputs: ["control", "groupKey", "valueInGroup", "disabled", "popupSize", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: CheckBoxListComponent, selector: "check-box-list", inputs: ["styleClass", "control", "dataSource", "disabled"], outputs: ["onSelect", "onReady"] }, { kind: "component", type: CommonPickerComponent, selector: "common-picker", inputs: ["control", "extraData", "disabled", "groupKey", "valueInGroup"], outputs: ["onSelect", "onUnSelect", "onChanged", "onBlur"] }, { kind: "component", type: CoCauToChucPickerListComponent, selector: "cocautochuc-picker-list", inputs: ["control", "disabled", "readOnlyValues"], outputs: ["onChanged", "onSelect", "onUnSelect", "onClear", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: DatetimePickerComponent, selector: "datetime-picker", inputs: ["control", "disabled"], outputs: ["onSelect", "onChanged", "onFocus", "onBlur", "onClose"] }, { kind: "component", type: DatetimePickerRangeComponent, selector: "tn-datetime-picker-range", inputs: ["control", "disabled"], outputs: ["onClose", "onChanged"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["showClear", "disableDisplayFieldServerSearch", "filter", "control", "defaultLabel", "appendTo", "dataSource", "value", "itemSelectedStyleClass"], outputs: ["onChanged", "onCollapse", "onExpand", "onDropdownClick", "onShow", "onShowSmartEvent", "onHide", "onHideSmartEvent", "onFocus", "onBlur", "onReady", "onDataSourceLoaded", "valueChange", "adjustValue"] }, { kind: "component", type: EntityPickerComponent, selector: "entity-picker", inputs: ["control", "disabled", "readOnly", "children"], outputs: ["onSelect", "onUnSelect", "onChanged"] }, { kind: "component", type: FileUploadComponent, selector: "file-upload", inputs: ["chooseLabel", "readonly", "accept", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "sharedFolderType"], outputs: ["onSelect", "onRemove", "onChanged"] }, { kind: "component", type: MaskComponent, selector: "tn-mask", inputs: ["maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces", "viewMode", "inputStyleClass"], outputs: ["onFocus", "onBlur", "onChanged"] }, { kind: "component", type: NumberPickerRangeComponent, selector: "tn-number-picker-range", inputs: ["readonly", "maskType", "placeholder", "disabled", "suffix", "prefix", "min", "max", "decimalPlaces"], outputs: ["focus", "enterSmart", "enter", "blur", "change"] }, { kind: "component", type: RadioButtonListComponent, selector: "radio-button-list", inputs: ["control", "dataSource", "value", "disabled"], outputs: ["valueChange", "onChanged", "onDataSourceLoaded", "adjustValue", "onReady"] }, { kind: "component", type: ReferenceTextBoxComponent, selector: "reference-textbox", inputs: ["control", "value"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: TnColorPickerComponent, selector: "tn-color-picker", inputs: ["disabled", "appendTo"], outputs: ["change"] }, { kind: "component", type: TnCustomScrollbarComponent, selector: "tn-custom-scrollbar", inputs: ["style", "useDefaultScrollBar", "autoMode", "class", "config", "whiteBackGround", "showScrollHorizontal"], outputs: ["scrollY", "scrollUp", "scrollDown", "scrollLeft", "scrollRight", "scrollYReachEnd", "scrollYReachStart", "scrollXReachEnd", "scrollXReachStart"] }, { kind: "component", type: TnTinymceComponent, selector: "tn-tinymce", inputs: ["mode", "disabled", "required", "height", "field", "languageCode"], outputs: ["keydown", "onBlur", "onChanged"] }, { kind: "component", type: CoCauToChucPickerComponent, selector: "cocautochuc-picker", inputs: ["control", "autoDisplayFirst", "multiple", "required", "readonly", "limit", "filter", "isUsingId", "parentOrgId", "parentOrgCode", "showClear", "disabledParentItem", "rootParentId"], outputs: ["onChanged"] }, { kind: "component", type: UserPickerComponent, selector: "user-picker", inputs: ["control", "popupSize", "multiple", "disabled", "readOnlyValues"], outputs: ["onSelect", "onUnSelect", "onChanged", "onFocus", "onBlur", "onReady"] }, { kind: "component", type: AutocompleteDatasourceComponent, selector: "app-autocomplete-datasource", inputs: ["suggestions", "control"], outputs: ["onValueChanged"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'crud-form', providers: [ComponentContextService], 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\" let-groupKey=\"groupKey\">\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                        [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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormFileManagerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormServiceFileUploadComponent']; context: {\r\n                    $implicit: data, control: control, parentContext: context, parentPath: parentPath, \r\n                    checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormAddressComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                <ng-container *ngTemplateOutlet=\"customTemplate['crudFormVanBanPickerComponent']; context: {\r\n                    $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                    handleControlReadyEvent: handleControlReadyEvent\r\n                }\"></ng-container>\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                    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormCongViecPickerComponent']; context: {\r\n                        $implicit: data, control: control, parentPath: parentPath, checkDisabled: checkDisabled, handleFieldValueChange: handleFieldValueChange,\r\n                        handleControlReadyEvent: handleControlReadyEvent\r\n                    }\"></ng-container>\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=\"'common-picker'\">\r\n                <common-picker [control]=\"control\"\r\n                    [disabled]=\"control.disabled || (control.disableCheck && control.disableCheck(model))\"\r\n                    [groupKey]=\"groupKey\" [valueInGroup]=\"model[control.field]\" [(ngModel)]=\"data[control.field]\"\r\n                    (onChanged)=\"handleFieldValueChange(control, $event,'change', data, parentPath);\">\r\n                </common-picker>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'table'\">\r\n                <div [class]=\"control.class\">\r\n                    <tn-custom-scrollbar class=\"--has-border\" [showScrollHorizontal]=\"true\">\r\n                        <p-table class=\"new-table scr-table table-control\" [value]=\"data[control.field]\"\r\n                            [columns]=\"control.headerTemplate\" [responsive]=\"true\" [scrollable]=\"false\"\r\n                            [rowTrackBy]=\"trackByFuncId\"\r\n                            (onRowReorder)=\"handleRowOrdered(control, $event, 'rowReorder', data, parentPath)\">\r\n                            <ng-template *ngIf=\"getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-columns>\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"getComponentByType(_prefixCustomHeader + control.field), context: {$implicit: control.headerTemplate, crudForm: this, containerSticky: containerSticky}\">\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <ng-template *ngIf=\"!getComponentByType(_prefixCustomHeader + control.field)\"\r\n                                pTemplate=\"header\" let-rowData let-columns>\r\n                                <tr>\r\n                                    <th *ngIf=\"control.showNumber\" style=\"text-align: center; width: 5%\">\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;\" [style.width]=\"subControl.width\">\r\n                                            {{subControl.label}}\r\n                                            <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                        </th>\r\n                                    </ng-container>\r\n                                    <th *ngIf=\"control.enableReorderRow\" style=\"width: 30px\">\r\n                                        <ng-container *ngTemplateOutlet=\"containerSticky\"></ng-container>\r\n                                    </th>\r\n                                    <th *ngIf=\"control.showFunction\" [style.width]=\"control.widthFunctionColumn\"\r\n                                        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 class=\"stt\" 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<tn-dialog *ngIf=\"tableFormShow\" #dialog [styleClass]=\"'address-form'\" [header]=\"tableFormTitle | translate\"\r\n    [popupSize]=\"tableFormPopupSize\" (onHide)=\"tableFormShow = false\">\r\n    <ng-container *ngTemplateOutlet=\"customTemplate['crudFormTableDetailForm']; context: {\r\n        $implicit: tableFormSchema, parentSetting: setting, data: tableFormData, onSaved: handleSavedTableRow, onCancel: handleCancelEditTableRow,\r\n        onInit: handleInitTableDetailForm\r\n    }\"></ng-container>\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    <ng-template #footer>\r\n        <ng-container *ngTemplateOutlet=\"tableFormFooterTemplate\"></ng-container>\r\n    </ng-template>\r\n</tn-dialog>", styles: [".label-only{font-weight:700;margin-bottom:1em}div.label{position:relative}div.label .star-required{color:red;position:absolute;padding-left:.2em;padding-top:.3em}div.type-container.not-show-in-box-holder{padding:0}.--table-schema-footer{display:flex;align-items:center;font-weight:600;padding:.5em;border-width:0 1px 1px;background:#f8f9fa;color:#495057;border:1px solid #e9ecef}.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-weight:700;font-size:.85em}.view-mode>span:not(:empty){display:inline-block;width:100%;padding:5px 0}.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{font-size:1.2rem;font-weight:700;color:#025ba7;border-bottom:1px solid #cfcfcf;text-transform:uppercase;padding:5px;margin-bottom:5px}.crud-form-control.type-title>.label{margin-bottom:0}.control-description{font-size:.8rem;color:#6c757d;margin-bottom:5px;margin-left:10px}.cell-header-function{display:flex;align-items:center}.cell-header-function>span{text-align:center;flex:1 1}.cell-header-function button{width:24px;height:24px;padding:0;margin:0}::ng-deep .crud-form-control .tn-check-box-list{margin-top:5px}::ng-deep .crud-form-control>div.label{margin-bottom:5px;font-size:.9em;height:1.15em}::ng-deep .crud-form-control>div.label+*{width:100%}::ng-deep .crud-form-control>.error-container .error-item{overflow:visible;animation:shrink .1s;min-height:20px;padding-top:5px}::ng-deep .crud-form-control>.error-container .error-item .error-content{display:flex;position:relative;color:red;font-size:.9em;animation:fadeIn .1s}::ng-deep .crud-form-control>.error-container .error-item .error-content i{font-size:.9em;display:flex;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 select,::ng-deep .crud-form-control.error textarea,::ng-deep .crud-form-control.error input,::ng-deep .crud-form-control.error .p-inputtext,::ng-deep .crud-form-control.error .p-dropdown,::ng-deep .crud-form-control.error .p-multiselect,::ng-deep .crud-form-control.error .tn-dropdown{border-color:#ff5722!important}::ng-deep .crud-form-control.error .tn-dropdown:not(.p-disabled).p-focus,::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{box-shadow:0 0 0 .2rem #ffc4b3}::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,::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) .p-inputtext,::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-multiselect,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .tn-dropdown{border-color:#ced4da!important}::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,::ng-deep .crud-form-control.error div.crud-form-control:not(.error) .p-autocomplete-multiple-container:not(.p-disabled).p-focus{box-shadow:0 0 0 .2rem #a6d5fa}@keyframes fadeIn{0%{opacity:0;top:-25px}to{opacity:1;top:0}}@keyframes shrink{0%{height:0}to{height:20px}}@media screen and (min-width: 40.063em){.label-right{padding-left:2em}}::ng-deep crud-form .crud-form-container{padding:.5rem .5rem 0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside{padding:0}::ng-deep crud-form .p-datatable .p-datatable-tbody tr td.control-inside .show-in-box:not(.crud-form-control){padding:0}::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 #00000013}: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 #00000013,0 0 3px #66afe9;transition:box-shadow .3s,border-color .3s;transition-property:box-shadow,border-color;transition-duration:.3s,.3s;transition-timing-function:ease,ease;transition-delay:0s,0s}:host ::ng-deep .rq .tox .tox-edit-area{border-left-color:#ff4c46}.no-value{font-size:.8em}:host ::ng-deep .table-schema-paging{margin-bottom:40px;display:block}\n"] }]
@@ -27734,24 +27667,20 @@ class ArticleService extends BaseService {
         return this.defaultGet(apiUrl);
     }
     createWithFormData(formData) {
-        return this._http
-            .post(`${this.serviceUri}/CreateWithFormData`, formData)
-            .toPromise();
+        return firstValueFrom(this._http
+            .post(`${this.serviceUri}/CreateWithFormData`, formData));
     }
     updateWithFormData(id, formData) {
-        return this._http
-            .post(`${this.serviceUri}/UpdateWithFormData/${id}`, formData)
-            .toPromise();
+        return firstValueFrom(this._http
+            .post(`${this.serviceUri}/UpdateWithFormData/${id}`, formData));
     }
     updateStatusItem(formData) {
-        return this._http
-            .post(`${this.serviceUri}/UpdateStatusItem`, formData)
-            .toPromise();
+        return firstValueFrom(this._http
+            .post(`${this.serviceUri}/UpdateStatusItem`, formData));
     }
     updateStatusItemMultiple(formData) {
-        return this._http
-            .post(`${this.serviceUri}/UpdateStatusItemMultiple`, formData)
-            .toPromise();
+        return firstValueFrom(this._http
+            .post(`${this.serviceUri}/UpdateStatusItemMultiple`, formData));
     }
     getArtileByStatus(statusView, key, offset, limit, sortField, isAsc = null, isIgnoreCache = false) {
         let queryString = `/GetByFilterLanguage?statusView=${statusView}`;
@@ -28913,7 +28842,7 @@ class CongviecDinhkemService extends BaseService {
     }
     themDinhKemNghiepVu(taskId, data) {
         const url = `${this.serviceUri}/ThemDinhKem/${taskId}`;
-        return this._http.post(url, data).toPromise();
+        return firstValueFrom(this._http.post(url, data));
     }
     getDetailItem(serviceCode, entity, entityKey, fieldDisplay) {
         const serviceCodeEndpoint = this._environmentService.getHttpServiceEndpointWithVersion(serviceCode);
@@ -28929,7 +28858,7 @@ class CongviecDinhkemService extends BaseService {
             filters: [this.newFilter('id', Operator.equal, entityKey)],
             sorts: []
         });
-        return this._http.post(uri, gridInfo).toPromise();
+        return firstValueFrom(this._http.post(uri, gridInfo));
     }
     async getDetailItems(dicGrouped) {
         const result = {};
@@ -28964,7 +28893,7 @@ class CongviecDinhkemService extends BaseService {
                     sorts: []
                 });
                 try {
-                    const data = await (this._http.post(uri, gridInfo).toPromise());
+                    const data = await (firstValueFrom(this._http.post(uri, gridInfo)));
                     if (data.success && data.data && data.data.length) {
                         data.data.forEach(itemDetail => {
                             result[serviceCode][entity][itemDetail.id] = itemDetail[dataByEntity.fieldHienThi];
@@ -29006,8 +28935,7 @@ class FolderService extends BaseService {
         this.serviceUri = `${this.endPoint}/Folder`;
     }
     testGrpcTrace() {
-        return this._http.get(`${this.endPoint}/TraceTest/TestGrpcTrace`)
-            .toPromise();
+        return firstValueFrom(this._http.get(`${this.endPoint}/TraceTest/TestGrpcTrace`));
     }
     copyMultipleFolder(idsFolder, targetFolderId) {
         const url = `${this.serviceUri}/CopyMultipleFolder`;
@@ -29193,18 +29121,18 @@ class MyDriveService extends BaseService {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File/GetFileExplorerById?fileId=${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyFiles() {
         const svUrl = `${this._serviceUri}/File/GetMyFiles`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getByFolderId(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File?folderId=${folderId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShare(userId) {
         if (userId < 0) {
@@ -29212,7 +29140,7 @@ class MyDriveService extends BaseService {
         }
         // const svUrl = `${this._serviceUri}/Folder/GetMyShare?userId=${userId}`;
         const svUrl = `${this._serviceUri}/File/GetMyShare?userId=${userId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShareToOther(ownerId) {
         if (ownerId < 0) {
@@ -29220,51 +29148,50 @@ class MyDriveService extends BaseService {
         }
         // const svUrl = `${this._serviceUri}/Folder/GetMyShareToOther?ownerId=${ownerId}`;
         const svUrl = `${this._serviceUri}/File/GetMyShareToOther?ownerId=${ownerId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderTree(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const apiUrl = `${this._serviceUri}/File/GetTree?folderId=${folderId}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
     getShareToOtherByFolderId(folderId, objectId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File/GetFileExplorerShareToOther?folderId=${folderId}&objectId=${objectId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     createNewFolder(folder) {
         const svUrl = `${this._serviceUri}/Folder`;
-        return this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFolder(folderId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFolder(folderIds) {
         const svUrl = `${this._serviceUri}/Folder/deleteMultipleFolder`;
-        return this._http.post(svUrl, folderIds).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, folderIds).pipe(catchError((err) => this.handleError(err))));
     }
     renameFolder(folderId, newFolderName) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/RenameFolder/${newFolderName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFolder(shareFolder) {
         const svUrl = `${this._serviceUri}/Folder/ShareFolder`;
-        return this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFolder(folderId, objectId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/DeleteUserShareFolder/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFolderToOther(folderId, ownerId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/DeleteShareFolder/${ownerId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getUploadUrl() {
         return `${this._serviceUri}/File`;
@@ -29274,7 +29201,7 @@ class MyDriveService extends BaseService {
     }
     getFile(fileId) {
         const svUrl = `${this._serviceUri}/File/${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFileVersionDownloadUrl(fileVersionId) {
         return `${this._serviceUri}/FileVersion/${fileVersionId}/download`;
@@ -29287,7 +29214,7 @@ class MyDriveService extends BaseService {
         if (model.isFileVersion && !model.fileVersionId) {
             model.fileVersionId = model.fileId;
         }
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     downloadFile(fileId, isFileVersion = false) {
         const model = new GenerateLinkDownloadDTO();
@@ -29300,63 +29227,63 @@ class MyDriveService extends BaseService {
     }
     generateLinkDownloadMultiple(model) {
         const svUrl = `${this._serviceUri}/Download/GenerateDownloadMultipleLink`;
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     getBinaryFile(linkDownload) {
-        return this._http.get(linkDownload).toPromise();
+        return firstValueFrom(this._http.get(linkDownload));
     }
     setMoveFileItem(moveFile) {
         const svUrl = `${this._serviceUri}/File/MoveFile`;
-        return this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFile(fileId) {
         const svUrl = `${this._serviceUri}/File/${fileId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFile(fileIds) {
         const svUrl = `${this._serviceUri}/File/deleteMultipleFile`;
-        return this._http.post(svUrl, fileIds).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, fileIds).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFileVersion(fileVersionId) {
         const svUrl = `${this._serviceUri}/FileVersion/${fileVersionId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     renameFile(fileId, newFileName) {
         const svUrl = `${this._serviceUri}/File/${fileId}/RenameFile/${newFileName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFile(shareFile) {
         const svUrl = `${this._serviceUri}/File/ShareFile`;
-        return this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFile(fileId, objectId) {
         const svUrl = `${this._serviceUri}/File/${fileId}/DeleteUserShareFile/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFileToOther(fileId, ownerId) {
         const svUrl = `${this._serviceUri}/File/${fileId}/DeleteShareFile/${ownerId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getSharedFiles(folderId) {
         let svUrl = `${this._serviceUri}/File/GetMySharedFiles`;
         if (folderId) {
             svUrl = `${svUrl}?folderId=${folderId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getUserSharingByFile(fileId) {
         let svUrl = `${this._serviceUri}/File/GetUserSharingByFile`;
         if (fileId) {
             svUrl = `${svUrl}?fileId=${fileId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderId(userId) {
         let svUrl = `${this._serviceUri}/Folder/GetFolderId`;
         if (userId) {
             svUrl = `${svUrl}?userId=${userId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     isSupportedViewOnline(fileName) {
         // file không có đuổi -> loại
@@ -29407,7 +29334,7 @@ class MyDriveService extends BaseService {
                     'title': fileName,
                     'url': downloadUrl
                 };
-                this._http.post(service, input).toPromise().then((rsConvert) => {
+                firstValueFrom(this._http.post(service, input)).then((rsConvert) => {
                     resolve(rsConvert.fileUrl);
                 }, err => {
                     reject(null);
@@ -29418,7 +29345,7 @@ class MyDriveService extends BaseService {
         });
     }
     print(fileUrl) {
-        // this._http.get(fileUrl).toPromise().then((rs: any) => {
+        // firstValueFrom(this._http.get(fileUrl)).then((rs: any) => {
         //     const pdfBlob = new Blob([rs], { type: "application/pdf" });
         //     const url     = URL.createObjectURL(pdfBlob);
         //     printJS(url);
@@ -29515,7 +29442,7 @@ class TnClientService {
                     if (connetionState) {
                         // send command
                         command.sourceConnectionId = this._connection.id;
-                        const status = await this._connection.status.toPromise();
+                        const status = await firstValueFrom(this._connection.status);
                         console.log('status connection signalr', status);
                         this._connection.invoke('SendCommand', command);
                         resolve();
@@ -29560,7 +29487,7 @@ class FileVersionService extends BaseService {
     }
     getListFileVersions(fileId) {
         const svUrl = `${this.serviceUri}/GetFileVersionsByFileId/${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     createNewMinorVersion(fileInstanceId, fileVersionInstanceId, isFileVersion) {
         const svUrl = `${this.serviceUri}/CreateNewMinorVersion`;
@@ -29587,7 +29514,7 @@ class FileVersionService extends BaseService {
     }
     getNextMajorVersion(fileId) {
         const svUrl = `${this.serviceUri}/GetNextMajorVersion/${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     setVersionToMajor(fileVersionInstanceId) {
         const svUrl = `${this.serviceUri}/SetVersionToMajor`;
@@ -29596,7 +29523,7 @@ class FileVersionService extends BaseService {
     }
     deleteFileVersion(fileVersionId) {
         const svUrl = `${this.serviceUri}/Delete/${fileVersionId}`;
-        return this._http.delete(svUrl).toPromise();
+        return firstValueFrom(this._http.delete(svUrl));
     }
     handleError(error) {
         if (error.status === 401) {
@@ -29627,72 +29554,71 @@ class FileExplorerNewService extends BaseService {
     }
     getMyFiles() {
         const svUrl = `${this._serviceUri}/File/GetMyFiles`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getByFolderId(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File?folderId=${folderId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyDrive(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/File/GetMyDrive?folderId=${folderId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShare(userId) {
         if (userId < 0) {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/Folder/GetMyShare?userId=${userId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getMyShareToOther(ownerId) {
         if (ownerId < 0) {
             return Promise.reject({ status: 400 });
         }
         const svUrl = `${this._serviceUri}/Folder/GetMyShareToOther?ownerId=${ownerId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderTree(folderId) {
         if (folderId == '00000000-0000-0000-0000-000000000000') {
             return Promise.reject({ status: 400 });
         }
         const apiUrl = `${this._serviceUri}/File/GetTree?folderId=${folderId}`;
-        return this._http.get(apiUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.get(apiUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
     copyFile(copyFileDto) {
         const svUrl = `${this._serviceUri}/File/CopyFile`;
-        return this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, copyFileDto).pipe(catchError((err) => this.handleError(err))));
     }
     createNewFolder(folder) {
         const svUrl = `${this._serviceUri}/Folder`;
-        return this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, folder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFolder(folderId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFolder(folderIds) {
         const svUrl = `${this._serviceUri}/Folder/deleteMultipleFolder/${folderIds}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     renameFolder(folderId, newFolderName) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/RenameFolder/${newFolderName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFolder(shareFolder) {
         const svUrl = `${this._serviceUri}/Folder/ShareFolder`;
-        return this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFolder).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFolder(folderId, objectId) {
         const svUrl = `${this._serviceUri}/Folder/${folderId}/DeleteShareFolder/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getUploadUrl() {
         return `${this._serviceUri}/File`;
@@ -29702,7 +29628,7 @@ class FileExplorerNewService extends BaseService {
     }
     getBinaryFileByFileId(fileId) {
         return new Promise((resolve, reject) => {
-            this._http.get(this.getFileDownloadUrl(fileId)).toPromise().then(rs => {
+            firstValueFrom(this._http.get(this.getFileDownloadUrl(fileId))).then(rs => {
                 console.log(rs);
                 resolve(null);
             }).catch(err => reject(err));
@@ -29713,7 +29639,7 @@ class FileExplorerNewService extends BaseService {
     }
     getFile(fileId) {
         const svUrl = `${this._serviceUri}/File/${fileId}`;
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFileVersionDownloadUrl(fileVersionId) {
         return `${this._serviceUri}/FileVersion/${fileVersionId}/download`;
@@ -29726,7 +29652,7 @@ class FileExplorerNewService extends BaseService {
         if (model.isFileVersion && !model.fileVersionId) {
             model.fileVersionId = model.fileId;
         }
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     downloadFile(fileId, isFileVersion = false) {
         const model = new GenerateLinkDownloadDTO();
@@ -29739,59 +29665,59 @@ class FileExplorerNewService extends BaseService {
     }
     generateLinkDownloadMultiple(model) {
         const svUrl = `${this._serviceUri}/Download/GenerateDownloadMultipleLink`;
-        return this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, model).pipe(catchError((err) => this.handleError(err))));
     }
     getBinaryFile(linkDownload) {
-        return this._http.get(linkDownload).toPromise();
+        return firstValueFrom(this._http.get(linkDownload));
     }
     setMoveFileItem(moveFile) {
         const svUrl = `${this._serviceUri}/File/MoveFile`;
-        return this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, moveFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFile(fileId) {
         const svUrl = `${this._serviceUri}/File/${fileId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteMultipleFile(fileIds) {
         const svUrl = `${this._serviceUri}/File/deleteMultipleFile/${fileIds}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     deleteFileVersion(fileVersionId) {
         const svUrl = `${this._serviceUri}/FileVersion/${fileVersionId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     renameFile(fileId, newFileName) {
         const svUrl = `${this._serviceUri}/File/${fileId}/RenameFile/${newFileName}`;
-        return this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.patch(svUrl, {}).pipe(catchError((err) => this.handleError(err))));
     }
     shareFile(shareFile) {
         const svUrl = `${this._serviceUri}/File/ShareFile`;
-        return this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.post(svUrl, shareFile).pipe(catchError((err) => this.handleError(err))));
     }
     deleteShareFile(fileId, objectId) {
         const svUrl = `${this._serviceUri}/File/${fileId}/DeleteShareFile/${objectId}`;
-        return this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.delete(svUrl).pipe(catchError((err) => this.handleError(err))));
     }
     getSharedFiles(folderId) {
         let svUrl = `${this._serviceUri}/File/GetMySharedFiles`;
         if (folderId) {
             svUrl = `${svUrl}?folderId=${folderId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getUserSharingByFile(fileId) {
         let svUrl = `${this._serviceUri}/File/GetUserSharingByFile`;
         if (fileId) {
             svUrl = `${svUrl}?fileId=${fileId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     getFolderId(userId) {
         let svUrl = `${this._serviceUri}/Folder/GetFolderId`;
         if (userId) {
             svUrl = `${svUrl}?userId=${userId}`;
         }
-        return this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))).toPromise();
+        return firstValueFrom(this._http.get(svUrl).pipe(shareReplay(this.REPLAY_COUNT), retry(this.RETRY_COUNT), catchError((err) => this.handleError(err))));
     }
     isSupportedViewOnline(fileName) {
         // file không có đuổi -> loại
@@ -29842,7 +29768,7 @@ class FileExplorerNewService extends BaseService {
                     'title': fileName,
                     'url': downloadUrl
                 };
-                this._http.post(service, input).toPromise().then((rsConvert) => {
+                firstValueFrom(this._http.post(service, input)).then((rsConvert) => {
                     resolve(rsConvert.fileUrl);
                 }, err => {
                     reject(null);
@@ -29873,19 +29799,19 @@ class FileExplorerNewService extends BaseService {
         return fileExtArr[fileExtArr.length - 1].toLowerCase() === 'pdf';
     }
     saveSignedFile(data) {
-        return this._http.post(`${this._serviceUri}/Signature/SaveSignedFile`, data).toPromise();
+        return firstValueFrom(this._http.post(`${this._serviceUri}/Signature/SaveSignedFile`, data));
     }
     getSignatureInfoByFileId(fileId) {
-        return this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileId?fileId=${fileId}`).toPromise();
+        return firstValueFrom(this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileId?fileId=${fileId}`));
     }
     getSignatureInfoByFileVersionId(fileVersionId) {
-        return this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`).toPromise();
+        return firstValueFrom(this._http.get(`${this._serviceUri}/Signature/GetListSignatureByFileVersionId?fileVersionId=${fileVersionId}`));
     }
     getImageFileBase64(fileId, extension = 'jpg', width = 0, height = 0) {
         return new Promise((resolve, reject) => {
             const url = `${this._serviceUri}/File/getImageFileBase64?fileId=${fileId}&extension=${extension}&width=${width}&height=${height}`;
-            this._http.get(url, { responseType: 'blob' })
-                .toPromise().then(rs => {
+            firstValueFrom(this._http.get(url, { responseType: 'blob' }))
+                .then(rs => {
                 const reader = new FileReader();
                 reader.addEventListener('load', () => {
                     resolve(reader.result);
@@ -29903,9 +29829,8 @@ class FileExplorerNewService extends BaseService {
     }
     getServiceFileExplorer(model) {
         const svUrl = `${this._serviceUri}/File/GetServiceFileExplorer?service=${model.service}&entity=${model.entity}&entityInstanceId=${model.entityInstanceId}`;
-        return this._http.get(svUrl)
-            .pipe(catchError((err) => this.handleError(err)))
-            .toPromise();
+        return firstValueFrom(this._http.get(svUrl)
+            .pipe(catchError((err) => this.handleError(err))));
     }
 }
 FileExplorerNewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileExplorerNewService, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -30263,7 +30188,7 @@ class FileViewerComponent extends ComponentBase {
             || event.target.classList.contains('iv-image-view')) {
             this.model.activeTopbarItem = false;
             this.show = false;
-            this.onClose.next();
+            this.onClose.next(1);
         }
     }
     print() {
@@ -30367,7 +30292,7 @@ class FileViewerComponent extends ComponentBase {
     }
 }
 FileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileViewerComponent, deps: [{ token: EnvironmentService }, { token: i0.ElementRef }, { token: AuthenService }, { token: FileExplorerService }, { token: i2.MessageService }, { token: i1.TranslateService }, { token: NotifierService }, { token: i2.ConfirmationService }, { token: TnClientService }, { token: FileVersionService }, { token: CustomRouterService }, { token: i1$3.DeviceDetectorService }, { token: FileObjectService }, { token: DownloadLinkService }, { token: FolderService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileViewerComponent, selector: "file-viewer", inputs: { model: "model", readonly: "readonly", showPrint: "showPrint", showDownload: "showDownload", showDelete: "showDelete" }, outputs: { onClose: "onClose", onRename: "onRename", onDelete: "onDelete" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: ["sidebar"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-sidebar #sidebar [showCloseIcon]=\"false\" [fullScreen]=\"true\" [appendTo]=\"'body'\"\r\n    [styleClass]=\"getStyleClassByDocumentType(data.fileType)\" [(visible)]=\"show\">\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\" style=\"margin: 0px auto;\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <!-- UD-2450 - TuDN -->\r\n                    <!-- <a *ngIf=\"_deviceDetectorService.isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\"\r\n                        tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a> -->\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <!-- End UD-2450 - TuDN -->\r\n                    <a *ngIf=\"!_deviceDetectorService.isDesktop() && !readonly\" pTooltip=\"\u0110\u1ED5i t\u00EAn\"\r\n                        tooltipPosition=\"bottom\" (click)=\"renameFile()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\"><i\r\n                            class=\"fas fa-eraser\"></i></a>\r\n                    <a *ngIf=\"showDelete && !readonly\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"far fa-trash-alt\"></i></a>\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\"\r\n                        *ngIf=\"!readonly && _deviceDetectorService.isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\"> <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"_deviceDetectorService.isDesktop()\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\"><i class=\"fas fa-pen-square\"></i>S\u1EEDa\r\n                                    file\r\n                                    tr\u1EF1c\r\n                                    tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"far fa-trash-alt\"></i>X\u00F3a\r\n                                    t\u1EC7p\r\n                                    tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ngx-extended-pdf-viewer [src]=\"model.fileUrl\" useBrowserLocale=\"true\" height=\"calc(100vh - 50px)\"\r\n            [enablePinchOnMobile]=\"true\" [filenameForDownload]=\"data.fileName\" [language]=\"'vi-VN'\"\r\n            [showBookmarkButton]=\"false\" [showHandToolButton]=\"false\" [showOpenFileButton]=\"false\"\r\n            [showUnverifiedSignatures]=\"true\">\r\n        </ngx-extended-pdf-viewer>\r\n    </ng-container>\r\n\r\n    <ng-container\r\n        *ngIf=\"data.fileType != fileTypes.IMAGE && data.fileType != fileTypes.VIDEO && data.fileType != fileTypes.AUDIO && data.fileType != fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\" tooltipPosition=\"bottom\"\r\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a>\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!readonly && showDelete && isDesktop()\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a *ngIf=\"!readonly && isDesktop()\" pTooltip=\"S\u1EEDa file tr\u1EF1c tuy\u1EBFn\" (click)=\"editFile()\"\r\n                        placeholder=\"Bottom\" class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\">\r\n                        <i class=\"fas fa-pen-square\"></i></a>\r\n\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\" *ngIf=\"!isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\">\r\n                        <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\">\r\n                                    <i class=\"fas fa-pen-square\"></i>S\u1EEDa file tr\u1EF1c tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly && showDelete\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"pi pi-trash\"></i>X\u00F3a\r\n                                    t\u1EC7p tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                [class.view-file-text]=\"isFileType(fileTypes.TEXT)\"\r\n                [class.view-file-spreadsheet]=\"isFileType(fileTypes.SPREADSHEET)\"\r\n                [class.view-file-presentation]=\"isFileType(fileTypes.PRESENTATION)\">\r\n                <div id=\"file-viewer\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.IMAGE && model.images.length > 0\">\r\n        <div class=\"image-container\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <img *ngIf=\"model.images && model.images.length\" src=\"{{model.images[0]}}\" alt=\"Ch\u01B0a c\u00F3 \u1EA3nh\">\r\n        </div>\r\n        <!-- <app-image-viewer [showPDFOnlyLabel]=\"false\" [showPDFOnlyOption]=\"false\" [fullscreen]=\"false\"\r\n            [images]=\"model.images\" [primaryColor]=\"'#3192e1'\" [idContainer]=\"'image-view-list'\"\r\n            (mousedown)=\"closeSidebar($event)\" id=\"fileViewerHolder\" [loadOnInit]=\"true\">\r\n        </app-image-viewer>\r\n        <a style=\"color: white;\" (click)=\"closeSidebar(null)\" class=\"mobile-image-viewer-close\">\r\n            <i class=\"far fa-times-circle\"></i></a> -->\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.VIDEO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i>\r\n                    </a>\r\n                    <a *ngIf=\"!isReadonly && !isDesktop()\" (click)=\"renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                    <a *ngIf=\"!readonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                style=\"width: 80%; margin: auto; height: 100%; border-radius: 0px;\">\r\n                <video width=\"100%\" height=\"100%\" style=\"margin-top: 50px;\" autoplay controls src=\"{{model.fileUrl}}\">\r\n                    Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 m\u1EDF video.\r\n                </video>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.AUDIO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" (mousedown)=\"closeSidebar($event)\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!isReadonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n            <audio controls autoplay src=\"{{model.fileUrl}}\"\r\n                style=\"margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);\">\r\n                Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 ph\u00E1t audio. </audio>\r\n        </div>\r\n    </ng-container>\r\n\r\n</p-sidebar>\r\n\r\n<tn-dialog *ngIf=\"renameFileForm.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"renameFileForm.header | translate\" [popupSize]=\"renameFileForm.popupSize\" (onHide)=\"onCancelRenameFile()\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"renameFileForm.formData\"\r\n        (onSaved)=\"onSavedRenameFile()\" (onCancel)=\"onCancelRenameFile()\">\r\n    </file-form>\r\n</tn-dialog>", styles: ["::ng-deep .pdf-container ngx-extended-pdf-viewer #outerContainer{top:51px}.view-file{height:92vh}.dialog-material{display:block;border-radius:4px;box-sizing:border-box;overflow:hidden;outline:0;min-height:inherit;max-height:inherit;width:50vw}.dialog-material{width:100%}.dialog-material.view-file-text{width:85%;margin:0 auto}.dialog-material.view-file-text.mobile{width:100%;margin:0 auto}.header-dialog-material{display:flex;flex-direction:row;justify-content:space-between;padding:5px 15px;box-sizing:border-box;outline:0;height:50px;line-height:50px;background:#3192e1;position:absolute;pointer-events:auto;left:0;right:0;top:0;width:auto}.header-dialog-material .flex-item{line-height:40px}.header-dialog-material .flex-item .cursor-pointer{cursor:pointer;display:inline-block;padding:0 15px}.header-dialog-material .flex-item .cursor-pointer.submenu{position:relative}.header-dialog-material .flex-item .cursor-pointer.submenu ul{display:flex;position:absolute;top:25px;right:0px;align-content:flex-end;flex-direction:column;width:230px;border-radius:2px;padding:5px 0;background:#fff;box-shadow:0 6px 12px #0000002d;z-index:1}.header-dialog-material .flex-item .cursor-pointer.submenu ul li{padding:0}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a{padding:0 0 0 5px;line-height:40px}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a:hover{background:#f5f5f5}.header-dialog-material ul:before{top:-8px;right:8px;left:auto;width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #ffffff;content:\" \";position:absolute}.mat-dialog-content{display:block;margin:0;padding:0;max-height:100vh;max-width:50vw;overflow:auto;-webkit-overflow-scrolling:touch}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;background:rgba(0,0,0,.7)!important}::ng-deep .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .mat-dialog-container{display:block;padding:0!important}::ng-deep .cdk-overlay-pane{max-height:100%}.button-link:hover{transition:background-color .1s,opacity .1s;background-image:none;background-color:#ffffff40}.file-row-action i{margin-right:5px;width:40px;text-align:center}.file-row-action{line-height:34px;width:100%;display:block;color:#212529}.layout-menu li a{border:none;text-align:left}.layout-menu li a i:first-child{color:#666;font-size:1em}.footer-page{position:absolute;left:50%;margin-right:-50%;transform:translate(-50%);border-radius:3px;bottom:12px;z-index:3;overflow:hidden}.footer-page-label{border-right:1px solid rgba(255,255,255,.2);display:inline-block;font-size:13px;line-height:44px;height:44px;vertical-align:middle;background:#000000}.footer-page-label-page{display:inline-block;margin-left:12px;vertical-align:middle;background:rgba(0,0,0,.75);color:#fff}.footer-page-label-numberpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}.footer-page-label-space{display:inline-block;margin-left:12px;vertical-align:middle;color:#fff}.footer-page-label-totalpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}::ng-deep p-table .ui-table-tbody>tr>td{overflow:unset}::ng-deep .ui-sidebar-left.ui-sidebar-active{padding-top:55px;background:rgba(0,0,0,.4);border:0}::ng-deep .layout-wrapper .layout-menu-container{border-radius:unset}::ng-deep .p-sidebar{padding:0!important;background-color:#000}::ng-deep .image-container{display:flex;justify-content:center;background-color:#000}::ng-deep .image-container .image-container-toolbar{display:flex;justify-content:flex-end}::ng-deep .image-container>img{height:calc(100ch - 50px)!important;max-height:100%!important;margin-top:50px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i16$1.Sidebar, selector: "p-sidebar", inputs: ["position", "blockScroll", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "visible", "fullScreen", "appendTo", "style", "styleClass", "ariaCloseLabel"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i17.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "useBrowserLocale", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "sidebarVisible", "showFindButton", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "src", "base64Src", "height", "showSidebarButton", "page", "mobileFriendlyZoom", "customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "rotation", "startTabindex", "spread"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: FileFormComponent, selector: "file-form" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileViewerComponent, selector: "file-viewer", inputs: { model: "model", readonly: "readonly", showPrint: "showPrint", showDownload: "showDownload", showDelete: "showDelete" }, outputs: { onClose: "onClose", onRename: "onRename", onDelete: "onDelete" }, providers: [ComponentContextService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: ["sidebar"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-sidebar #sidebar [showCloseIcon]=\"false\" [fullScreen]=\"true\" [appendTo]=\"'body'\"\r\n    [styleClass]=\"getStyleClassByDocumentType(data.fileType)\" [(visible)]=\"show\">\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\" style=\"margin: 0px auto;\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <!-- UD-2450 - TuDN -->\r\n                    <!-- <a *ngIf=\"_deviceDetectorService.isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\"\r\n                        tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a> -->\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <!-- End UD-2450 - TuDN -->\r\n                    <a *ngIf=\"!_deviceDetectorService.isDesktop() && !readonly\" pTooltip=\"\u0110\u1ED5i t\u00EAn\"\r\n                        tooltipPosition=\"bottom\" (click)=\"renameFile()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\"><i\r\n                            class=\"fas fa-eraser\"></i></a>\r\n                    <a *ngIf=\"showDelete && !readonly\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"far fa-trash-alt\"></i></a>\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\"\r\n                        *ngIf=\"!readonly && _deviceDetectorService.isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\"> <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"_deviceDetectorService.isDesktop()\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\"><i class=\"fas fa-pen-square\"></i>S\u1EEDa\r\n                                    file\r\n                                    tr\u1EF1c\r\n                                    tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"far fa-trash-alt\"></i>X\u00F3a\r\n                                    t\u1EC7p\r\n                                    tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ngx-extended-pdf-viewer [src]=\"model.fileUrl\" useBrowserLocale=\"true\" height=\"calc(100vh - 50px)\"\r\n            [enablePinchOnMobile]=\"true\" [filenameForDownload]=\"data.fileName\" [language]=\"'vi-VN'\"\r\n            [showBookmarkButton]=\"false\" [showHandToolButton]=\"false\" [showOpenFileButton]=\"false\"\r\n            [showUnverifiedSignatures]=\"true\">\r\n        </ngx-extended-pdf-viewer>\r\n    </ng-container>\r\n\r\n    <ng-container\r\n        *ngIf=\"data.fileType != fileTypes.IMAGE && data.fileType != fileTypes.VIDEO && data.fileType != fileTypes.AUDIO && data.fileType != fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\" tooltipPosition=\"bottom\"\r\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a>\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!readonly && showDelete && isDesktop()\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a *ngIf=\"!readonly && isDesktop()\" pTooltip=\"S\u1EEDa file tr\u1EF1c tuy\u1EBFn\" (click)=\"editFile()\"\r\n                        placeholder=\"Bottom\" class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\">\r\n                        <i class=\"fas fa-pen-square\"></i></a>\r\n\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\" *ngIf=\"!isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\">\r\n                        <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\">\r\n                                    <i class=\"fas fa-pen-square\"></i>S\u1EEDa file tr\u1EF1c tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly && showDelete\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"pi pi-trash\"></i>X\u00F3a\r\n                                    t\u1EC7p tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                [class.view-file-text]=\"isFileType(fileTypes.TEXT)\"\r\n                [class.view-file-spreadsheet]=\"isFileType(fileTypes.SPREADSHEET)\"\r\n                [class.view-file-presentation]=\"isFileType(fileTypes.PRESENTATION)\">\r\n                <div id=\"file-viewer\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.IMAGE && model.images.length > 0\">\r\n        <div class=\"image-container\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <img *ngIf=\"model.images && model.images.length\" src=\"{{model.images[0]}}\" alt=\"Ch\u01B0a c\u00F3 \u1EA3nh\">\r\n        </div>\r\n        <!-- <app-image-viewer [showPDFOnlyLabel]=\"false\" [showPDFOnlyOption]=\"false\" [fullscreen]=\"false\"\r\n            [images]=\"model.images\" [primaryColor]=\"'#3192e1'\" [idContainer]=\"'image-view-list'\"\r\n            (mousedown)=\"closeSidebar($event)\" id=\"fileViewerHolder\" [loadOnInit]=\"true\">\r\n        </app-image-viewer>\r\n        <a style=\"color: white;\" (click)=\"closeSidebar(null)\" class=\"mobile-image-viewer-close\">\r\n            <i class=\"far fa-times-circle\"></i></a> -->\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.VIDEO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i>\r\n                    </a>\r\n                    <a *ngIf=\"!isReadonly && !isDesktop()\" (click)=\"renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                    <a *ngIf=\"!readonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                style=\"width: 80%; margin: auto; height: 100%; border-radius: 0px;\">\r\n                <video width=\"100%\" height=\"100%\" style=\"margin-top: 50px;\" autoplay controls src=\"{{model.fileUrl}}\">\r\n                    Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 m\u1EDF video.\r\n                </video>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.AUDIO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" (mousedown)=\"closeSidebar($event)\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!isReadonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n            <audio controls autoplay src=\"{{model.fileUrl}}\"\r\n                style=\"margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);\">\r\n                Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 ph\u00E1t audio. </audio>\r\n        </div>\r\n    </ng-container>\r\n\r\n</p-sidebar>\r\n\r\n<tn-dialog *ngIf=\"renameFileForm.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"renameFileForm.header | translate\" [popupSize]=\"renameFileForm.popupSize\" (onHide)=\"onCancelRenameFile()\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"renameFileForm.formData\"\r\n        (onSaved)=\"onSavedRenameFile()\" (onCancel)=\"onCancelRenameFile()\">\r\n    </file-form>\r\n</tn-dialog>", styles: ["::ng-deep .pdf-container ngx-extended-pdf-viewer #outerContainer{top:51px}.view-file{height:92vh}.dialog-material{display:block;border-radius:4px;box-sizing:border-box;overflow:hidden;outline:0;min-height:inherit;max-height:inherit;width:50vw}.dialog-material{width:100%}.dialog-material.view-file-text{width:85%;margin:0 auto}.dialog-material.view-file-text.mobile{width:100%;margin:0 auto}.header-dialog-material{display:flex;flex-direction:row;justify-content:space-between;padding:5px 15px;box-sizing:border-box;outline:0;height:50px;line-height:50px;background:#3192e1;position:absolute;pointer-events:auto;left:0;right:0;top:0;width:auto}.header-dialog-material .flex-item{line-height:40px}.header-dialog-material .flex-item .cursor-pointer{cursor:pointer;display:inline-block;padding:0 15px}.header-dialog-material .flex-item .cursor-pointer.submenu{position:relative}.header-dialog-material .flex-item .cursor-pointer.submenu ul{display:flex;position:absolute;top:25px;right:0px;align-content:flex-end;flex-direction:column;width:230px;border-radius:2px;padding:5px 0;background:#fff;box-shadow:0 6px 12px #0000002d;z-index:1}.header-dialog-material .flex-item .cursor-pointer.submenu ul li{padding:0}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a{padding:0 0 0 5px;line-height:40px}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a:hover{background:#f5f5f5}.header-dialog-material ul:before{top:-8px;right:8px;left:auto;width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #ffffff;content:\" \";position:absolute}.mat-dialog-content{display:block;margin:0;padding:0;max-height:100vh;max-width:50vw;overflow:auto;-webkit-overflow-scrolling:touch}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;background:rgba(0,0,0,.7)!important}::ng-deep .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .mat-dialog-container{display:block;padding:0!important}::ng-deep .cdk-overlay-pane{max-height:100%}.button-link:hover{transition:background-color .1s,opacity .1s;background-image:none;background-color:#ffffff40}.file-row-action i{margin-right:5px;width:40px;text-align:center}.file-row-action{line-height:34px;width:100%;display:block;color:#212529}.layout-menu li a{border:none;text-align:left}.layout-menu li a i:first-child{color:#666;font-size:1em}.footer-page{position:absolute;left:50%;margin-right:-50%;transform:translate(-50%);border-radius:3px;bottom:12px;z-index:3;overflow:hidden}.footer-page-label{border-right:1px solid rgba(255,255,255,.2);display:inline-block;font-size:13px;line-height:44px;height:44px;vertical-align:middle;background:#000000}.footer-page-label-page{display:inline-block;margin-left:12px;vertical-align:middle;background:rgba(0,0,0,.75);color:#fff}.footer-page-label-numberpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}.footer-page-label-space{display:inline-block;margin-left:12px;vertical-align:middle;color:#fff}.footer-page-label-totalpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}::ng-deep p-table .ui-table-tbody>tr>td{overflow:unset}::ng-deep .ui-sidebar-left.ui-sidebar-active{padding-top:55px;background:rgba(0,0,0,.4);border:0}::ng-deep .layout-wrapper .layout-menu-container{border-radius:unset}::ng-deep .p-sidebar{padding:0!important;background-color:#000}::ng-deep .image-container{display:flex;justify-content:center;background-color:#000}::ng-deep .image-container .image-container-toolbar{display:flex;justify-content:flex-end}::ng-deep .image-container>img{height:calc(100ch - 50px)!important;max-height:100%!important;margin-top:50px}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: i16$1.Sidebar, selector: "p-sidebar", inputs: ["position", "blockScroll", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "visible", "fullScreen", "appendTo", "style", "styleClass", "ariaCloseLabel"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i17.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "useBrowserLocale", "forceUsingLegacyES5", "backgroundColor", "pdfBackground", "pdfBackgroundColorToReplace", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindCurrentPageOnly", "showFindPageRange", "showFindEntireWord", "showFindEntirePhrase", "showFindIgnoreAccents", "showFindFuzzySearch", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "formTheme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "wheelAction", "mobileFriendlyZoom"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: FileFormComponent, selector: "file-form" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-viewer', providers: [ComponentContextService], template: "<p-sidebar #sidebar [showCloseIcon]=\"false\" [fullScreen]=\"true\" [appendTo]=\"'body'\"\r\n    [styleClass]=\"getStyleClassByDocumentType(data.fileType)\" [(visible)]=\"show\">\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\" style=\"margin: 0px auto;\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <!-- UD-2450 - TuDN -->\r\n                    <!-- <a *ngIf=\"_deviceDetectorService.isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\"\r\n                        tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a> -->\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <!-- End UD-2450 - TuDN -->\r\n                    <a *ngIf=\"!_deviceDetectorService.isDesktop() && !readonly\" pTooltip=\"\u0110\u1ED5i t\u00EAn\"\r\n                        tooltipPosition=\"bottom\" (click)=\"renameFile()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\"><i\r\n                            class=\"fas fa-eraser\"></i></a>\r\n                    <a *ngIf=\"showDelete && !readonly\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"far fa-trash-alt\"></i></a>\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\"\r\n                        *ngIf=\"!readonly && _deviceDetectorService.isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\"> <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"_deviceDetectorService.isDesktop()\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\"><i class=\"fas fa-pen-square\"></i>S\u1EEDa\r\n                                    file\r\n                                    tr\u1EF1c\r\n                                    tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"far fa-trash-alt\"></i>X\u00F3a\r\n                                    t\u1EC7p\r\n                                    tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ngx-extended-pdf-viewer [src]=\"model.fileUrl\" useBrowserLocale=\"true\" height=\"calc(100vh - 50px)\"\r\n            [enablePinchOnMobile]=\"true\" [filenameForDownload]=\"data.fileName\" [language]=\"'vi-VN'\"\r\n            [showBookmarkButton]=\"false\" [showHandToolButton]=\"false\" [showOpenFileButton]=\"false\"\r\n            [showUnverifiedSignatures]=\"true\">\r\n        </ngx-extended-pdf-viewer>\r\n    </ng-container>\r\n\r\n    <ng-container\r\n        *ngIf=\"data.fileType != fileTypes.IMAGE && data.fileType != fileTypes.VIDEO && data.fileType != fileTypes.AUDIO && data.fileType != fileTypes.PDF\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\" tooltipPosition=\"bottom\"\r\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-print\"></i></a>\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!readonly && showDelete && isDesktop()\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a *ngIf=\"!readonly && isDesktop()\" pTooltip=\"S\u1EEDa file tr\u1EF1c tuy\u1EBFn\" (click)=\"editFile()\"\r\n                        placeholder=\"Bottom\" class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\">\r\n                        <i class=\"fas fa-pen-square\"></i></a>\r\n\r\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\" *ngIf=\"!isDesktop()\"\r\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\">\r\n                        <i class=\"fas fa-ellipsis-v\"></i>\r\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"editFile()\" class=\"file-row-action\">\r\n                                    <i class=\"fas fa-pen-square\"></i>S\u1EEDa file tr\u1EF1c tuy\u1EBFn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\r\n                                    t\u00EAn</a>\r\n                            </li>\r\n                            <li *ngIf=\"!isReadonly && showDelete\" role=\"menuitem\" class=\"cursor-pointer\">\r\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"pi pi-trash\"></i>X\u00F3a\r\n                                    t\u1EC7p tin</a>\r\n                            </li>\r\n                        </ul>\r\n                    </a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                [class.view-file-text]=\"isFileType(fileTypes.TEXT)\"\r\n                [class.view-file-spreadsheet]=\"isFileType(fileTypes.SPREADSHEET)\"\r\n                [class.view-file-presentation]=\"isFileType(fileTypes.PRESENTATION)\">\r\n                <div id=\"file-viewer\"></div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.IMAGE && model.images.length > 0\">\r\n        <div class=\"image-container\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <img *ngIf=\"model.images && model.images.length\" src=\"{{model.images[0]}}\" alt=\"Ch\u01B0a c\u00F3 \u1EA3nh\">\r\n        </div>\r\n        <!-- <app-image-viewer [showPDFOnlyLabel]=\"false\" [showPDFOnlyOption]=\"false\" [fullscreen]=\"false\"\r\n            [images]=\"model.images\" [primaryColor]=\"'#3192e1'\" [idContainer]=\"'image-view-list'\"\r\n            (mousedown)=\"closeSidebar($event)\" id=\"fileViewerHolder\" [loadOnInit]=\"true\">\r\n        </app-image-viewer>\r\n        <a style=\"color: white;\" (click)=\"closeSidebar(null)\" class=\"mobile-image-viewer-close\">\r\n            <i class=\"far fa-times-circle\"></i></a> -->\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.VIDEO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i>\r\n                    </a>\r\n                    <a *ngIf=\"!isReadonly && !isDesktop()\" (click)=\"renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                    <a *ngIf=\"!readonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\r\n                style=\"width: 80%; margin: auto; height: 100%; border-radius: 0px;\">\r\n                <video width=\"100%\" height=\"100%\" style=\"margin-top: 50px;\" autoplay controls src=\"{{model.fileUrl}}\">\r\n                    Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 m\u1EDF video.\r\n                </video>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data.fileType == fileTypes.AUDIO\">\r\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" (mousedown)=\"closeSidebar($event)\" style=\"height: 100%;\">\r\n            <div #headerdialogmaterial class=\"header-dialog-material\">\r\n                <div class=\"flex-item\">\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\r\n                        class=\"btn btn-secondary\">\r\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\r\n                            {{ data.name }}\r\n                        </span>\r\n                    </a>\r\n                </div>\r\n                <div class=\"flex-item\">\r\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\r\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-download\"></i></a>\r\n                    <a *ngIf=\"!isReadonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\r\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\r\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\r\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\r\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\r\n                        <i class=\"fas fa-times\"></i></a>\r\n                </div>\r\n            </div>\r\n            <audio controls autoplay src=\"{{model.fileUrl}}\"\r\n                style=\"margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);\">\r\n                Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 ph\u00E1t audio. </audio>\r\n        </div>\r\n    </ng-container>\r\n\r\n</p-sidebar>\r\n\r\n<tn-dialog *ngIf=\"renameFileForm.show\" #dialog [styleClass]=\"'address-form'\"\r\n    [header]=\"renameFileForm.header | translate\" [popupSize]=\"renameFileForm.popupSize\" (onHide)=\"onCancelRenameFile()\">\r\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"renameFileForm.formData\"\r\n        (onSaved)=\"onSavedRenameFile()\" (onCancel)=\"onCancelRenameFile()\">\r\n    </file-form>\r\n</tn-dialog>", styles: ["::ng-deep .pdf-container ngx-extended-pdf-viewer #outerContainer{top:51px}.view-file{height:92vh}.dialog-material{display:block;border-radius:4px;box-sizing:border-box;overflow:hidden;outline:0;min-height:inherit;max-height:inherit;width:50vw}.dialog-material{width:100%}.dialog-material.view-file-text{width:85%;margin:0 auto}.dialog-material.view-file-text.mobile{width:100%;margin:0 auto}.header-dialog-material{display:flex;flex-direction:row;justify-content:space-between;padding:5px 15px;box-sizing:border-box;outline:0;height:50px;line-height:50px;background:#3192e1;position:absolute;pointer-events:auto;left:0;right:0;top:0;width:auto}.header-dialog-material .flex-item{line-height:40px}.header-dialog-material .flex-item .cursor-pointer{cursor:pointer;display:inline-block;padding:0 15px}.header-dialog-material .flex-item .cursor-pointer.submenu{position:relative}.header-dialog-material .flex-item .cursor-pointer.submenu ul{display:flex;position:absolute;top:25px;right:0px;align-content:flex-end;flex-direction:column;width:230px;border-radius:2px;padding:5px 0;background:#fff;box-shadow:0 6px 12px #0000002d;z-index:1}.header-dialog-material .flex-item .cursor-pointer.submenu ul li{padding:0}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a{padding:0 0 0 5px;line-height:40px}.header-dialog-material .flex-item .cursor-pointer.submenu ul li a:hover{background:#f5f5f5}.header-dialog-material ul:before{top:-8px;right:8px;left:auto;width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #ffffff;content:\" \";position:absolute}.mat-dialog-content{display:block;margin:0;padding:0;max-height:100vh;max-width:50vw;overflow:auto;-webkit-overflow-scrolling:touch}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000;background:rgba(0,0,0,.7)!important}::ng-deep .cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .mat-dialog-container{display:block;padding:0!important}::ng-deep .cdk-overlay-pane{max-height:100%}.button-link:hover{transition:background-color .1s,opacity .1s;background-image:none;background-color:#ffffff40}.file-row-action i{margin-right:5px;width:40px;text-align:center}.file-row-action{line-height:34px;width:100%;display:block;color:#212529}.layout-menu li a{border:none;text-align:left}.layout-menu li a i:first-child{color:#666;font-size:1em}.footer-page{position:absolute;left:50%;margin-right:-50%;transform:translate(-50%);border-radius:3px;bottom:12px;z-index:3;overflow:hidden}.footer-page-label{border-right:1px solid rgba(255,255,255,.2);display:inline-block;font-size:13px;line-height:44px;height:44px;vertical-align:middle;background:#000000}.footer-page-label-page{display:inline-block;margin-left:12px;vertical-align:middle;background:rgba(0,0,0,.75);color:#fff}.footer-page-label-numberpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}.footer-page-label-space{display:inline-block;margin-left:12px;vertical-align:middle;color:#fff}.footer-page-label-totalpage{display:inline-block;text-align:center;vertical-align:middle;width:48px;color:#fff}::ng-deep p-table .ui-table-tbody>tr>td{overflow:unset}::ng-deep .ui-sidebar-left.ui-sidebar-active{padding-top:55px;background:rgba(0,0,0,.4);border:0}::ng-deep .layout-wrapper .layout-menu-container{border-radius:unset}::ng-deep .p-sidebar{padding:0!important;background-color:#000}::ng-deep .image-container{display:flex;justify-content:center;background-color:#000}::ng-deep .image-container .image-container-toolbar{display:flex;justify-content:flex-end}::ng-deep .image-container>img{height:calc(100ch - 50px)!important;max-height:100%!important;margin-top:50px}\n"] }]
@@ -30779,7 +30704,7 @@ class KySoSimSignPDFService extends BaseService {
     // Ký số có chọn vị trí ký bằng sim
     signLoc(data) {
         const apiUrl = `${this.serviceUri}/SignLoc`;
-        return this._http.post(apiUrl, data).toPromise();
+        return firstValueFrom(this._http.post(apiUrl, data));
     }
 }
 KySoSimSignPDFService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: KySoSimSignPDFService, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -31149,7 +31074,7 @@ class FileKySoSimComponent extends ComponentBase {
     }
 }
 FileKySoSimComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileKySoSimComponent, deps: [{ token: i0.Injector }, { token: DomService }, { token: FileExplorerService }, { token: UserService }, { token: NotifierService }, { token: KySoSimSignPDFService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-FileKySoSimComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileKySoSimComponent, selector: "app-file-ky-so-sim", providers: [ComponentContextService], viewQueries: [{ propertyName: "signContainer", first: true, predicate: ["signContainer"], descendants: true }, { propertyName: "extendedPdfViewer", first: true, predicate: ["extendedPdfViewer"], descendants: true }, { propertyName: "imgSignImage", first: true, predicate: ["signImage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i17.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "useBrowserLocale", "backgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "sidebarVisible", "showFindButton", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "src", "base64Src", "height", "showSidebarButton", "page", "mobileFriendlyZoom", "customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "rotation", "startTabindex", "spread"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["strokeWidth", "fill", "animationDuration", "style", "styleClass"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: KySoSimDanhSachChuKyComponent, selector: "app-ky-so-sim-danh-sach-chu-ky", inputs: ["formData"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+FileKySoSimComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: FileKySoSimComponent, selector: "app-file-ky-so-sim", providers: [ComponentContextService], viewQueries: [{ propertyName: "signContainer", first: true, predicate: ["signContainer"], descendants: true }, { propertyName: "extendedPdfViewer", first: true, predicate: ["extendedPdfViewer"], descendants: true }, { propertyName: "imgSignImage", first: true, predicate: ["signImage"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i17.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "formData", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "delayFirstView", "logLevel", "enablePinchOnMobile", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "useBrowserLocale", "forceUsingLegacyES5", "backgroundColor", "pdfBackground", "pdfBackgroundColorToReplace", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindCurrentPageOnly", "showFindPageRange", "showFindEntireWord", "showFindEntirePhrase", "showFindIgnoreAccents", "showFindFuzzySearch", "showFindResultsCount", "showFindMessages", "showPagingButtons", "showZoomButtons", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "showBookmarkButton", "theme", "formTheme", "showToolbar", "showSecondaryToolbarButton", "showRotateButton", "handTool", "showHandToolButton", "showScrollingButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "_mobileFriendlyZoom", "wheelAction", "mobileFriendlyZoom"], outputs: ["formDataChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "sidebarVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["strokeWidth", "fill", "animationDuration", "style", "styleClass"] }, { kind: "component", type: TnDialogComponent, selector: "tn-dialog", inputs: ["maskClass", "styleClass", "scrollBarStyleClass", "useDefaultScrollBar", "visible", "disabledButton", "modal", "header", "popupSize", "closeOnEscape", "showFooter", "positionTop", "minY", "hiddenSave", "maximizable"], outputs: ["onSave", "onCancel", "onShow", "onHide"] }, { kind: "component", type: KySoSimDanhSachChuKyComponent, selector: "app-ky-so-sim-danh-sach-chu-ky", inputs: ["formData"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: FileKySoSimComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-ky-so-sim', providers: [ComponentContextService], template: "<div *ngIf=\"isLoading\" class=\"div-loading\">\r\n    <div class=\"div-loading-image\">\r\n        <p-progressSpinner [style]=\"{width: '50px', height: '50px'}\" styleClass=\"custom-spinner\" strokeWidth=\"8\"\r\n            fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\r\n    </div>\r\n</div>\r\n<div style=\"text-align: center;\">\r\n    <!--  -->\r\n    <ngx-extended-pdf-viewer #extendedPdfViewer pageViewMode=\"single\" useBrowserLocale=\"true\"\r\n        height=\"calc(100vh - 100px)\" [src]=\"model.pdfAsDataUri\" [showToolbar]=\"true\" [showSidebarButton]=\"false\"\r\n        [showFindButton]=\"false\" [showPagingButtons]=\"true\" [showZoomButtons]=\"false\"\r\n        [showPresentationModeButton]=\"false\" [showOpenFileButton]=\"false\" [showPrintButton]=\"false\"\r\n        [showDownloadButton]=\"false\" [showBookmarkButton]=\"false\" [showSecondaryToolbarButton]=\"false\"\r\n        [showRotateButton]=\"false\" [showHandToolButton]=\"false\" [showScrollingButton]=\"false\" [showSpreadButton]=\"false\"\r\n        [showPropertiesButton]=\"false\" [enablePinchOnMobile]=\"true\" [showUnverifiedSignatures]=\"true\"\r\n        [filenameForDownload]=\"'file1.pdf'\" [zoom]=\"100\" [language]=\"'vi-VN'\" [handTool]=\"false\"\r\n        [(page)]=\"myState.currentPage\" (currentZoomFactor)=\"onPDFZoom($event)\" (pagesLoaded)=\"pagesLoaded($event)\">\r\n    </ngx-extended-pdf-viewer>\r\n    <div #signContainer id=\"signContainer\" class=\"sign-container\" (window:resize)=\"onResize($event)\">\r\n        <img #signImage *ngIf=\"model.kySimDataChuKy.signImageAsDataUri != null\" id=\"signImage\"\r\n            [src]=\"model.kySimDataChuKy.signImageAsDataUri\" />\r\n        <span *ngIf=\"model.kySimDataChuKy.signImageAsDataUri == null\">\r\n            <i class=\"fas fa-signature\"></i> Ch\u1ECDn v\u1ECB tr\u00ED k\u00FD\r\n        </span>\r\n        <div class=\"resize top-left\"></div>\r\n        <div class=\"resize bottom-right\"></div>\r\n    </div>\r\n</div>\r\n<tn-dialog *ngIf=\"forms.danhSachChuKy.show\" #dialog [styleClass]=\"'address-form'\" [useDefaultScrollBar]=\"true\"\r\n    [header]=\"forms.danhSachChuKy.header | translate\" [popupSize]=\"forms.danhSachChuKy.popupSize\" [showFooter]=\"true\"\r\n    (onHide)=\"forms.danhSachChuKy.show=false\">\r\n    <app-ky-so-sim-danh-sach-chu-ky [formData]=\"forms.danhSachChuKy\" [parentModel]=\"model\" [parentContext]=\"context\">\r\n    </app-ky-so-sim-danh-sach-chu-ky>\r\n</tn-dialog>", styles: [".sign-container{display:none;position:absolute;z-index:1;top:10px;left:0;touch-action:none;-webkit-user-select:none;user-select:none;background:rgba(33,150,243,.1490196078);border:2px dashed #2196f3}.sign-container span{font-size:20px;color:#555;padding:10px 20px 10px 10px;display:block;font-style:italic;font-weight:700}.sign-container img{width:100%;height:100%}.resize{display:inline-block;position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid #ffffff;background:#2196f3;box-shadow:1px 1px 3px 1px #00000040}.top-left{top:-8px;left:-8px}.bottom-right{bottom:-8px;right:-8px}.div-loading{width:100%;height:100%;top:0px;left:0px;position:fixed;display:block;z-index:99;background:rgba(0,0,0,.4509803922)}.div-loading-image{position:absolute;top:50%;left:50%;z-index:100}\n"] }]
@@ -31928,7 +31853,7 @@ class FileManagerComponent extends DataListBase {
         this.setDatasource(this.model.dataSource);
     }
     ngOnDestroy() {
-        this._unsubcribleAll.next();
+        this._unsubcribleAll.next(1);
         this._unsubcribleAll.complete();
         if (this.fileDataService) {
             this.fileDataService.unregister(this);
@@ -36391,7 +36316,7 @@ class WorkflowHistoryNewComponent extends DataListBase {
     }
 }
 WorkflowHistoryNewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: WorkflowHistoryNewComponent, deps: [{ token: i0.Injector }, { token: WorkflowHistoryService }, { token: CoCauToChucOldService }, { token: UserGroupRealService }, { token: DmChucVuService }, { token: FileDataService }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowHistoryNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: WorkflowHistoryNewComponent, selector: "workflow-history-new", inputs: { businessSetting: "businessSetting", isRelativeForm: "isRelativeForm", tableName: "tableName", item: "item", workflowSetting: "workflowSetting" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div style=\"height: 100%\">\r\n    <as-split direction=\"vertical\">\r\n        <as-split-area [size]=\"40\">\r\n            <div class=\"state-designer-container\">\r\n                <div>\r\n                    S\u01A1 \u0111\u1ED3 quy tr\u00ECnh {{workflowTitle}}\r\n                </div>\r\n                <div>\r\n                    <statemachines-designer *ngIf=\"!waitToDetach && readyToRaw\" [data]=\"machinesData\"\r\n                        [currentConnection]=\"currentConnection\" [jsPlumbOption]=\"jsPlumbOption\" [viewOnly]=\"true\">\r\n                    </statemachines-designer>\r\n                    <after-view-checked *ngIf=\"waitToDetach\" (loaded)=\"waitToDetach = false\"></after-view-checked>\r\n                </div>\r\n            </div>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <crud-list-simple *ngIf=\"model.ready\" #crudList [model]=\"model\" [setting]=\"setting\"\r\n                    [dataSource]=\"model.dataSource\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\r\n                    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\r\n                    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\">\r\n                    <ng-template #note let-rowData=\"rowData\">\r\n                        <div *ngIf=\"rowData.note==null?'':rowData.note\" [innerHTML]=\"rowData.note | safeHtml\"></div>\r\n                    </ng-template>\r\n                    <ng-template #receiver let-rowData=\"rowData\">\r\n                        <div *ngIf=\"!rowData.notInMainThread\" class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleIds}}</div>\r\n                        </div>\r\n                        <div *ngIf=\"rowData.notInMainThread\">\r\n                            <div *ngFor=\"let changedField of rowData.jsonModelChange\">\r\n                                {{changedField.field}},\r\n                                {{changedField.valueOld}} => {{changedField.valueNew}}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #receiverView let-rowData=\"rowData\">\r\n                        <div class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserViewIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViViewIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupViewIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleViewIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleViewIds}}</div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #fileDinhKem let-rowData=\"rowData\">\r\n                        <file-manager [fileDataService]=\"fileDataService\"\r\n                            [serviceCode]=\"_workflowHistoryService.serviceCode\"\r\n                            [entity]=\"_workflowHistoryService.entityName\" [entityKey]=\"rowData.id\"\r\n                            [layout]=\"layoutFile.SIMPLE\" [readonly]=\"true\">\r\n                        </file-manager>\r\n                    </ng-template>\r\n                    <ng-template #function let-rowData=\"rowData\">\r\n                        <button *ngIf=\"rowData.status == enumWorkflowHistoryStatus.IN_MAIN_THREAD\" pButton\r\n                            icon=\"pi pi-replay\" class=\"p-button-text p-button-rounded link-or-action\"\r\n                            pTooltip=\"Thu h\u1ED3i v\u1EC1 b\u01B0\u1EDBc n\u00E0y\" tooltipPosition=\"top\"\r\n                            (click)=\"rollbackByHistory(rowData)\"></button>\r\n                    </ng-template>\r\n                </crud-list-simple>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".state-designer-container{height:100%;display:flex;flex-direction:column}.state-designer-container>div:first-child{position:absolute;left:.5em;top:.5em;font-weight:700;font-size:.9em;padding:.5em 0}.state-designer-container>div:last-child{flex:1 1;overflow:auto}.container-receiver div{margin-bottom:10px}.container-receiver div:last-child{margin-bottom:0}::ng-deep workflow-history-new tr.recalled{opacity:.5}\n"], dependencies: [{ kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration"], outputs: ["dragStart", "dragEnd", "gutterClick", "gutterDblClick", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: CrudListSimpleComponent, selector: "crud-list-simple", inputs: ["model", "setting", "fileName", "lazy", "widthCheckbox", "widthOrderColumn", "widthFunctionColumn", "classRowGroup", "showScrollBar", "pTableScrollable", "pTableScrollHeight", "responsive", "showScrollHorizontal", "showRadio", "hiddenAdd", "hiddenDelete", "hiddenDeleteMultiple", "hiddenEdit", "hiddenView", "escape", "enableReorderRow", "templates", "menuButtons", "showMenuButtons", "fieldOrder", "style", "tableClass", "dataSource", "filter_default", "expandedSearch"], outputs: ["onRowSelect", "onReordered", "onCheckAll", "onReload", "onReloaded", "onReady", "onContentInit", "onAdd", "onEdit", "onView", "onDelete", "onDeleteMultiple", "onInvalidWorkflow", "onAfterTrinhKy", "onStartedWorkflow", "onProcessedWorkflow", "onRollbackedWorkflow", "onChangedStatusWorkflow", "onViewWorkflow", "onPermissionShare", "onPermission", "onCreatedSearchInfo"] }, { kind: "component", type: StateMachinesDesignerComponent, selector: "statemachines-designer", inputs: ["useScrollBar", "viewOnly", "data", "currentConnection", "containerId", "jsPlumbOption"] }, { kind: "component", type: FileManagerComponent, selector: "file-manager", inputs: ["control", "fileDataService", "layout", "hiddenCreateFolder", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "dataType", "rootFolderName", "serviceCode", "entity", "entityKey", "readonly", "inTaiLieu", "inTaiLieuChung", "copyToFolderId", "value", "multipleCheckWhenClickRow"], outputs: ["onReady", "entityKeyChange", "closePopup", "valueChange", "onChanged", "onSelected"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
+WorkflowHistoryNewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: WorkflowHistoryNewComponent, selector: "workflow-history-new", inputs: { businessSetting: "businessSetting", isRelativeForm: "isRelativeForm", tableName: "tableName", item: "item", workflowSetting: "workflowSetting" }, providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div style=\"height: 100%\">\r\n    <as-split direction=\"vertical\">\r\n        <as-split-area [size]=\"40\">\r\n            <div class=\"state-designer-container\">\r\n                <div>\r\n                    S\u01A1 \u0111\u1ED3 quy tr\u00ECnh {{workflowTitle}}\r\n                </div>\r\n                <div>\r\n                    <statemachines-designer *ngIf=\"!waitToDetach && readyToRaw\" [data]=\"machinesData\"\r\n                        [currentConnection]=\"currentConnection\" [jsPlumbOption]=\"jsPlumbOption\" [viewOnly]=\"true\">\r\n                    </statemachines-designer>\r\n                    <after-view-checked *ngIf=\"waitToDetach\" (loaded)=\"waitToDetach = false\"></after-view-checked>\r\n                </div>\r\n            </div>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <crud-list-simple *ngIf=\"model.ready\" #crudList [model]=\"model\" [setting]=\"setting\"\r\n                    [dataSource]=\"model.dataSource\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\r\n                    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\r\n                    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\">\r\n                    <ng-template #note let-rowData=\"rowData\">\r\n                        <div *ngIf=\"rowData.note==null?'':rowData.note\" [innerHTML]=\"rowData.note | safeHtml\"></div>\r\n                    </ng-template>\r\n                    <ng-template #receiver let-rowData=\"rowData\">\r\n                        <div *ngIf=\"!rowData.notInMainThread\" class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleIds}}</div>\r\n                        </div>\r\n                        <div *ngIf=\"rowData.notInMainThread\">\r\n                            <div *ngFor=\"let changedField of rowData.jsonModelChange\">\r\n                                {{changedField.field}},\r\n                                {{changedField.valueOld}} => {{changedField.valueNew}}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #receiverView let-rowData=\"rowData\">\r\n                        <div class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserViewIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViViewIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupViewIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleViewIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleViewIds}}</div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #fileDinhKem let-rowData=\"rowData\">\r\n                        <file-manager [fileDataService]=\"fileDataService\"\r\n                            [serviceCode]=\"_workflowHistoryService.serviceCode\"\r\n                            [entity]=\"_workflowHistoryService.entityName\" [entityKey]=\"rowData.id\"\r\n                            [layout]=\"layoutFile.SIMPLE\" [readonly]=\"true\">\r\n                        </file-manager>\r\n                    </ng-template>\r\n                    <ng-template #function let-rowData=\"rowData\">\r\n                        <button *ngIf=\"rowData.status == enumWorkflowHistoryStatus.IN_MAIN_THREAD\" pButton\r\n                            icon=\"pi pi-replay\" class=\"p-button-text p-button-rounded link-or-action\"\r\n                            pTooltip=\"Thu h\u1ED3i v\u1EC1 b\u01B0\u1EDBc n\u00E0y\" tooltipPosition=\"top\"\r\n                            (click)=\"rollbackByHistory(rowData)\"></button>\r\n                    </ng-template>\r\n                </crud-list-simple>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".state-designer-container{height:100%;display:flex;flex-direction:column}.state-designer-container>div:first-child{position:absolute;left:.5em;top:.5em;font-weight:700;font-size:.9em;padding:.5em 0}.state-designer-container>div:last-child{flex:1 1;overflow:auto}.container-receiver div{margin-bottom:10px}.container-receiver div:last-child{margin-bottom:0}::ng-deep workflow-history-new tr.recalled{opacity:.5}\n"], dependencies: [{ kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "label", "icon"] }, { kind: "directive", type: i5$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "tooltipZIndex", "escape", "tooltipDisabled", "pTooltip", "positionStyle", "tooltipStyleClass", "showDelay", "hideDelay", "life"] }, { kind: "component", type: AfterViewCheckedComponent, selector: "after-view-checked", inputs: ["renderKey"], outputs: ["loaded", "loading", "unloading", "reRender"] }, { kind: "component", type: CrudListSimpleComponent, selector: "crud-list-simple", inputs: ["model", "setting", "fileName", "lazy", "widthCheckbox", "widthOrderColumn", "widthFunctionColumn", "classRowGroup", "showScrollBar", "pTableScrollable", "pTableScrollHeight", "responsive", "showScrollHorizontal", "showRadio", "hiddenAdd", "hiddenDelete", "hiddenDeleteMultiple", "hiddenEdit", "hiddenView", "escape", "enableReorderRow", "templates", "menuButtons", "showMenuButtons", "fieldOrder", "style", "tableClass", "dataSource", "filter_default", "expandedSearch"], outputs: ["onRowSelect", "onReordered", "onCheckAll", "onReload", "onReloaded", "onReady", "onContentInit", "onAdd", "onEdit", "onView", "onDelete", "onDeleteMultiple", "onInvalidWorkflow", "onAfterTrinhKy", "onStartedWorkflow", "onProcessedWorkflow", "onRollbackedWorkflow", "onChangedStatusWorkflow", "onViewWorkflow", "onPermissionShare", "onPermission", "onCreatedSearchInfo"] }, { kind: "component", type: StateMachinesDesignerComponent, selector: "statemachines-designer", inputs: ["useScrollBar", "viewOnly", "data", "currentConnection", "containerId", "jsPlumbOption"] }, { kind: "component", type: FileManagerComponent, selector: "file-manager", inputs: ["control", "fileDataService", "layout", "hiddenCreateFolder", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageSummary", "invalidFileLimitMessageDetail", "dataType", "rootFolderName", "serviceCode", "entity", "entityKey", "readonly", "inTaiLieu", "inTaiLieuChung", "copyToFolderId", "value", "multipleCheckWhenClickRow"], outputs: ["onReady", "entityKeyChange", "closePopup", "valueChange", "onChanged", "onSelected"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: WorkflowHistoryNewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'workflow-history-new', providers: [ComponentContextService], template: "<div style=\"height: 100%\">\r\n    <as-split direction=\"vertical\">\r\n        <as-split-area [size]=\"40\">\r\n            <div class=\"state-designer-container\">\r\n                <div>\r\n                    S\u01A1 \u0111\u1ED3 quy tr\u00ECnh {{workflowTitle}}\r\n                </div>\r\n                <div>\r\n                    <statemachines-designer *ngIf=\"!waitToDetach && readyToRaw\" [data]=\"machinesData\"\r\n                        [currentConnection]=\"currentConnection\" [jsPlumbOption]=\"jsPlumbOption\" [viewOnly]=\"true\">\r\n                    </statemachines-designer>\r\n                    <after-view-checked *ngIf=\"waitToDetach\" (loaded)=\"waitToDetach = false\"></after-view-checked>\r\n                </div>\r\n            </div>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <crud-list-simple *ngIf=\"model.ready\" #crudList [model]=\"model\" [setting]=\"setting\"\r\n                    [dataSource]=\"model.dataSource\" (onReload)=\"_triggerProcessData($event)\" (onAdd)=\"_add($event)\"\r\n                    (onEdit)=\"_edit($event)\" (onView)=\"_view($event)\" (onDelete)=\"_delete($event)\"\r\n                    (onDeleteMultiple)=\"_deleteMultiple($event)\" (onReloaded)=\"_handleReloaded($event)\">\r\n                    <ng-template #note let-rowData=\"rowData\">\r\n                        <div *ngIf=\"rowData.note==null?'':rowData.note\" [innerHTML]=\"rowData.note | safeHtml\"></div>\r\n                    </ng-template>\r\n                    <ng-template #receiver let-rowData=\"rowData\">\r\n                        <div *ngIf=\"!rowData.notInMainThread\" class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleIds}}</div>\r\n                        </div>\r\n                        <div *ngIf=\"rowData.notInMainThread\">\r\n                            <div *ngFor=\"let changedField of rowData.jsonModelChange\">\r\n                                {{changedField.field}},\r\n                                {{changedField.valueOld}} => {{changedField.valueNew}}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #receiverView let-rowData=\"rowData\">\r\n                        <div class=\"container-receiver\">\r\n                            <div *ngIf=\"rowData.struserViewIds\"><b>C\u00E1n b\u1ED9: </b>{{rowData.struserViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strdonViViewIds\"><b>\u0110\u01A1n v\u1ECB: </b>{{rowData.strdonViViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strgroupViewIds\"><b>Nh\u00F3m: </b>{{rowData.strgroupViewIds}}</div>\r\n                            <div *ngIf=\"rowData.strroleViewIds\"><b>Ch\u1EE9c v\u1EE5: </b>{{rowData.strroleViewIds}}</div>\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #fileDinhKem let-rowData=\"rowData\">\r\n                        <file-manager [fileDataService]=\"fileDataService\"\r\n                            [serviceCode]=\"_workflowHistoryService.serviceCode\"\r\n                            [entity]=\"_workflowHistoryService.entityName\" [entityKey]=\"rowData.id\"\r\n                            [layout]=\"layoutFile.SIMPLE\" [readonly]=\"true\">\r\n                        </file-manager>\r\n                    </ng-template>\r\n                    <ng-template #function let-rowData=\"rowData\">\r\n                        <button *ngIf=\"rowData.status == enumWorkflowHistoryStatus.IN_MAIN_THREAD\" pButton\r\n                            icon=\"pi pi-replay\" class=\"p-button-text p-button-rounded link-or-action\"\r\n                            pTooltip=\"Thu h\u1ED3i v\u1EC1 b\u01B0\u1EDBc n\u00E0y\" tooltipPosition=\"top\"\r\n                            (click)=\"rollbackByHistory(rowData)\"></button>\r\n                    </ng-template>\r\n                </crud-list-simple>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".state-designer-container{height:100%;display:flex;flex-direction:column}.state-designer-container>div:first-child{position:absolute;left:.5em;top:.5em;font-weight:700;font-size:.9em;padding:.5em 0}.state-designer-container>div:last-child{flex:1 1;overflow:auto}.container-receiver div{margin-bottom:10px}.container-receiver div:last-child{margin-bottom:0}::ng-deep workflow-history-new tr.recalled{opacity:.5}\n"] }]
@@ -39996,11 +39921,11 @@ class PathNameService extends BaseService {
     }
     getByPathName(pathName) {
         const uri = `${this.serviceUri}/GetSimplePathNamesByUrl?url=${pathName}`;
-        return this._httpClient.get(uri).toPromise();
+        return firstValueFrom(this._httpClient.get(uri));
     }
     checkPathNameHasGuide(pathName) {
         const uri = `${this.serviceUri}/CheckPathNameHasGuide?pathName=${pathName}`;
-        return this._httpClient.get(uri).toPromise();
+        return firstValueFrom(this._httpClient.get(uri));
     }
 }
 PathNameService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: PathNameService, deps: [{ token: i1$1.HttpClient }, { token: i0.Injector }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -42087,7 +42012,7 @@ class HighPerformanceService {
         return new Promise(async (resolve) => {
             const highPerformanceEndpoint = `${this.serviceUri}/HighPerformance/DoWork?returnSequenceNumber=${returnSequenceNumber}`;
             try {
-                const rs = await this._httpClient.post(highPerformanceEndpoint, model).toPromise();
+                const rs = await firstValueFrom(this._httpClient.post(highPerformanceEndpoint, model));
                 if (rs.success) {
                     resolve(rs.data);
                 }
@@ -42100,7 +42025,7 @@ class HighPerformanceService {
     async cancelProcess(queueName, uniqueKey) {
         try {
             const highPerformanceEndpoint = `${this.serviceUri}/HighPerformance/CancelWork?queueName=${queueName}&uniqueKey=${uniqueKey}`;
-            const rs = await this._httpClient.post(highPerformanceEndpoint, {}).toPromise();
+            const rs = await firstValueFrom(this._httpClient.post(highPerformanceEndpoint, {}));
             if (rs.success) {
                 return rs.data;
             }
@@ -45946,7 +45871,7 @@ class CommonAppComponentComponent {
     // tslint:disable-next-line: use-life-cycle-interface
     ngOnDestroy() {
         // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
+        this._unsubscribeAll.next(1);
         this._unsubscribeAll.complete();
         this._componentContextService.fireEvent(ComCtxConstants.ROOT.DESTROY_TASK_DETAIL_COMPONENT);
     }
@@ -48568,7 +48493,7 @@ class BaseCauHinhWorkflowComponent extends DataListBase {
     }
 }
 BaseCauHinhWorkflowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BaseCauHinhWorkflowComponent, deps: [{ token: i0.Injector }, { token: DmLoaiCongViecService }, { token: CauHinhWorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-BaseCauHinhWorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: BaseCauHinhWorkflowComponent, selector: "base-cauhinh-workflow", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-main-content\">\r\n    <as-split>\r\n        <as-split-area [size]=\"40\">\r\n            <base-dm-loai-congviec [inCauHinhWorkflow]=\"true\" (onRowSelect)=\"handleSelectLoaiCongViec($event)\">\r\n            </base-dm-loai-congviec>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <base-cauhinh-workflow-detail [isDetail]=\"true\" [itemLoaiCongViec]=\"itemLoaiCongViec\">\r\n                </base-cauhinh-workflow-detail>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".container-task-info .percent-done{position:relative;border-radius:2px;background-color:#f0f0f0;height:5px;margin-top:5px;overflow:hidden}.container-task-info .percent-done .detail{position:absolute;left:0;top:0;height:5px;border-radius:2px;font-size:13px;text-align:center;color:#fff}\n"], dependencies: [{ kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration"], outputs: ["dragStart", "dragEnd", "gutterClick", "gutterDblClick", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: BaseCauHinhWorkflowDetailComponent, selector: "base-cauhinh-workflow-detail", inputs: ["isDetail", "itemLoaiCongViec"] }, { kind: "component", type: BaseDmLoaiCongViecComponent, selector: "base-dm-loai-congviec", inputs: ["inCauHinhWorkflow"], outputs: ["onRowSelect"] }] });
+BaseCauHinhWorkflowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: BaseCauHinhWorkflowComponent, selector: "base-cauhinh-workflow", providers: [ComponentContextService], usesInheritance: true, ngImport: i0, template: "<div class=\"tn-main-content\">\r\n    <as-split>\r\n        <as-split-area [size]=\"40\">\r\n            <base-dm-loai-congviec [inCauHinhWorkflow]=\"true\" (onRowSelect)=\"handleSelectLoaiCongViec($event)\">\r\n            </base-dm-loai-congviec>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <base-cauhinh-workflow-detail [isDetail]=\"true\" [itemLoaiCongViec]=\"itemLoaiCongViec\">\r\n                </base-cauhinh-workflow-detail>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".container-task-info .percent-done{position:relative;border-radius:2px;background-color:#f0f0f0;height:5px;margin-top:5px;overflow:hidden}.container-task-info .percent-done .detail{position:absolute;left:0;top:0;height:5px;border-radius:2px;font-size:13px;text-align:center;color:#fff}\n"], dependencies: [{ kind: "component", type: i4$8.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i4$8.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: BaseCauHinhWorkflowDetailComponent, selector: "base-cauhinh-workflow-detail", inputs: ["isDetail", "itemLoaiCongViec"] }, { kind: "component", type: BaseDmLoaiCongViecComponent, selector: "base-dm-loai-congviec", inputs: ["inCauHinhWorkflow"], outputs: ["onRowSelect"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: BaseCauHinhWorkflowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'base-cauhinh-workflow', providers: [ComponentContextService], template: "<div class=\"tn-main-content\">\r\n    <as-split>\r\n        <as-split-area [size]=\"40\">\r\n            <base-dm-loai-congviec [inCauHinhWorkflow]=\"true\" (onRowSelect)=\"handleSelectLoaiCongViec($event)\">\r\n            </base-dm-loai-congviec>\r\n        </as-split-area>\r\n        <as-split-area [size]=\"60\">\r\n            <div style=\"height: 100%\">\r\n                <base-cauhinh-workflow-detail [isDetail]=\"true\" [itemLoaiCongViec]=\"itemLoaiCongViec\">\r\n                </base-cauhinh-workflow-detail>\r\n            </div>\r\n        </as-split-area>\r\n    </as-split>\r\n</div>", styles: [".container-task-info .percent-done{position:relative;border-radius:2px;background-color:#f0f0f0;height:5px;margin-top:5px;overflow:hidden}.container-task-info .percent-done .detail{position:absolute;left:0;top:0;height:5px;border-radius:2px;font-size:13px;text-align:center;color:#fff}\n"] }]
@@ -50551,10 +50476,10 @@ class UniqueNumberService {
         this.serviceUri = this.endPoint;
     }
     getUniqueNumber(code) {
-        return this._http.get(`${this.serviceUri}/Main/GetUniqueNumber/${code}`).toPromise();
+        return firstValueFrom(this._http.get(`${this.serviceUri}/Main/GetUniqueNumber/${code}`));
     }
     confirmUniqueNumber(code, number) {
-        return this._http.get(`${this.serviceUri}/Main/ConfirmUniqueNumber/${code}/${number}`).toPromise();
+        return firstValueFrom(this._http.get(`${this.serviceUri}/Main/ConfirmUniqueNumber/${code}/${number}`));
     }
 }
 UniqueNumberService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: UniqueNumberService, deps: [{ token: i1$1.HttpClient }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });