tnx-shared 5.3.411 → 5.3.412

package/bundles/tnx-shared.umd.js

@@ -35328,6 +35328,14 @@
                 },
                 breadcrumbs: [],
             };
+            _this.signatureFormModel = {
+                formData: new CrudFormData(),
+                show: false,
+                popupSize: new PopupSize({
+                    width: 600,
+                    height: 400
+                })
+            };
             _this.showAttachLinkBox = false;
             _this.typedLink = '';
             _this.showTaiLieuDungChung = false;
@@ -35767,7 +35775,8 @@
                         label: 'Ký số SmartCA',
                         icon: 'fas fa-signature',
                         command: function () {
-                            _this.signFileSmartCA(item);
+                            _this.rowDataCurrent = item;
+                            _this.signatureFormModel.show = true;
                         },
                         visible: (this._fileObjectService.isTypeFileKySo(item.name)
                             && this.layout !== exports.EnumFileLayout.SIMPLE_FOR_LIST && !this.parentSetting.hiddenKySoSmartCA),
@@ -36819,56 +36828,50 @@
             this.forms.kySoSim.show = true;
             this.model.advanceData = file;
         };
-        FileManagerComponent.prototype.signFileSmartCA = function (rowData) {
+        FileManagerComponent.prototype.signFileSmartCA = function (dataKySo) {
             return __awaiter(this, void 0, void 0, function () {
-                var sourceFileId, sourceFile, rsConvert, e_5, dataKySo;
+                var sourceFileId, rsConvert, e_5;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            sourceFileId = rowData.id;
-                            sourceFile = rowData;
-                            if (!this._fileExplorerService.needConvertBeforeSign(rowData.name)) return [3 /*break*/, 4];
+                            this.signatureFormModel.show = false;
+                            sourceFileId = this.rowDataCurrent.id;
+                            if (!this._fileExplorerService.needConvertBeforeSign(this.rowDataCurrent.name)) return [3 /*break*/, 4];
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, this._fileExplorerService.convertDocumentToPdfAndSave({
                                     instanceId: sourceFileId,
-                                    name: this._fileExplorerService.changeFileExtension(rowData.name, 'pdf'),
-                                    folderInstanceId: rowData.parentFolderId,
+                                    name: this._fileExplorerService.changeFileExtension(this.rowDataCurrent.name, 'pdf'),
+                                    folderInstanceId: this.rowDataCurrent.parentFolderId,
                                     ownerType: this._userService.getCurrentUser().userId.toString(),
                                 })];
                         case 2:
                             rsConvert = _b.sent();
                             if (!rsConvert || !rsConvert.success) {
-                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + rowData.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                                this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.rowDataCurrent.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
                                 return [2 /*return*/];
                             }
                             else {
-                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + rowData.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
+                                this._notifierService.showSuccess("Chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.rowDataCurrent.name + " th\u00E0nh pdf th\u00E0nh c\u00F4ng");
                                 sourceFileId = rsConvert.data;
-                                sourceFile = { id: sourceFileId };
                             }
                             return [3 /*break*/, 4];
                         case 3:
                             e_5 = _b.sent();
-                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + rowData.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
+                            this._notifierService.showWarning("C\u00F3 l\u1ED7i x\u1EA3y ra khi chuy\u1EC3n \u0111\u1ED5i t\u00E0i li\u1EC7u " + this.rowDataCurrent.name + " th\u00E0nh pdf \u0111\u1EC3 k\u00FD. Vui l\u00F2ng th\u1EED l\u1EA1i sau");
                             return [2 /*return*/];
-                        case 4: return [4 /*yield*/, this._userChuKySoService.getDetailByFilter([
-                                this.newFilter('provider', exports.Operator.equal, 'SmartCA'),
-                                this.newFilter('userId', exports.Operator.equal, this._userService.getCurrentUser().userId),
-                            ])];
-                        case 5:
-                            dataKySo = (_b.sent()).data;
+                        case 4:
                             if (!dataKySo) {
                                 this._notifierService.showWarning('Người dùng chưa cấu hình thông tin ký số');
                             }
                             this.forms.fileViewer.formData.data = {
                                 fileId: sourceFileId,
                                 isFileVersion: false,
-                                fileName: rowData.name,
-                                service: rowData.serviceCode,
-                                entity: rowData.entity,
-                                entityKey: rowData.entityKey,
+                                fileName: this.rowDataCurrent.name,
+                                service: this.rowDataCurrent.serviceCode,
+                                entity: this.rowDataCurrent.entity,
+                                entityKey: this.rowDataCurrent.entityKey,
                                 fileBase64Content: dataKySo.fileBase64Content,
                                 userChuKySoId: dataKySo.id,
                                 showKySoButton: true,
@@ -37126,7 +37129,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'file-manager',
-                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout p-grid\">\n    <div *ngIf=\"visibleFolder && !control.uploadOnly\" class=\"tree-layout\"\n        [class]=\"visibleFolder ? 'p-col-12 p-lg-2' : '' \">\n        <div class=\"tree-layout-btn\">\n            <button *ngIf=\"!hiddenCreateFolder && !readonly\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\n                tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\n                (click)=\"createFolder()\">\n            </button>\n        </div>\n        <div class=\"tree-layout-wrapper\">\n            <perfect-scrollbar #scrollbar class=\"defaulFlexColumn treeOrg\" [config]=\"{suppressScrollX : true}\">\n                <p-tree class=\"folderTree\" selectionMode=\"single\" [style]=\"{ 'width' : '100%'}\"\n                    [(selection)]=\"selectedTreeNode\" [value]=\"rootTreeNode\" [contextMenu]=\"contextMenu\"\n                    (onNodeSelect)=\"nodeSelect($event)\">\n                    <ng-template let-node pTemplate=\"default\">\n                        <span [id]=\"node.data\" class=\"custom-node\"\n                            (contextmenu)=\"showContextMenu($event, node, true)\">{{node.label}}</span>\n                    </ng-template>\n                </p-tree>\n            </perfect-scrollbar>\n        </div>\n    </div>\n    <div class=\"fm-grid\" [class]=\"visibleFolder ? 'p-col-12 p-lg-10' : 'p-col-12' \">\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\n            [widthFunctionColumn]=\"'8.2rem'\" [showScrollHorizontal]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n            (onRowSelect)=\"onRowSelect($event)\">\n            <ng-template #customTitle>\n                <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n            </ng-template>\n            <ng-template #toolbar>\n                <button *ngIf=\"!control.uploadOnly\" pButton pRipple type=\"button\"\n                    [pTooltip]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" tooltipPosition=\"top\"\n                    [icon]=\"visibleFolder ? 'far fa-eye-slash': 'far fa-eye'\" class=\"p-button-text\"\n                    [label]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" iconPos=\"left\"\n                    (click)=\"changeVisibleFolder()\">\n                </button>\n\n                <button *ngIf=\"!hiddenCreateFolder && !readonly && !visibleFolder && !control.uploadOnly\" pButton\n                    pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\" (click)=\"createFolder()\">\n                </button>\n\n                <button *ngIf=\"!readonly\" pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\n                    (click)=\"selectFile()\"></button>\n\n                <button *ngIf=\"!readonly && !control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n\n                <button *ngIf=\"!inTaiLieu && !inTaiLieuChung && !readonly && !control.uploadOnly && !filePickerSetting\"\n                    pButton icon=\"pi pi-book\" pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\"\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n\n                <button *ngIf=\"filePickerSetting && !filePickerSetting.isHidden\" pButton icon=\"pi pi-book\"\n                    pTooltip=\"{{filePickerSetting.title}}\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n                    label=\"{{filePickerSetting.title}}\" (click)=\"showPickerTaiLieu()\">\n                </button>\n\n                <button *ngIf=\"canSelect() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n                    type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n                    icon=\"fas fa-arrows-alt\" iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\n                </button>\n\n                <button *ngIf=\"canSetMove() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n                    type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\"\n                    icon=\"far fa-hand-paper\" iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\n                </button>\n\n                <button *ngIf=\"canSetMove() && !control.uploadOnly\" icon=\"pi pi-undo\" pButton\n                    class=\"p-button-text p-button-secondary\" type=\"button\"\n                    pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\n                    (click)=\"cancelMove()\">\n                </button>\n\n                <button *ngIf=\"hasSelect() && !readonly\" pButton type=\"button\"\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\n\n                <button *ngIf=\"hasSelect() && !control.uploadOnly\" class=\"p-button-text p-button-secondary\" pButton\n                    type=\"button\" pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\"\n                    iconPos=\"left\" label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\n                </button>\n            </ng-template>\n\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\n                <div style=\"display: flex; align-items: center;\">\n                    <span *ngIf=\"rowData.tailFileUpper != '.JPG'\n                    && rowData.tailFileUpper != '.JPEG' && rowData.tailFileUpper != '.PNG' \"\n                        (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\" style=\"display: flex;\"\n                        [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n\n                    <span *ngIf=\"rowData.isFile && (rowData.tailFileUpper == '.JPG'\n                    || rowData.tailFileUpper == '.JPEG' || rowData.tailFileUpper == '.PNG' )\"\n                        (click)=\"openObject(rowData)\" class=\"file-ex-thumbnail\" style=\"display: flex;\">\n                        <img class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"50px\" [alt]=\"rowData.name\"\n                            style=\"margin-right: 7px;\" />\n                    </span>\n\n                    <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n                        {{rowData.name}}\n                    </span>\n\n                    <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n                        <i class=\"fas fa-signature\"></i>\n                    </span>\n                </div>\n            </ng-template>\n\n            <!-- <ng-template #thumbnail let-rowData=\"rowData\" let-col=\"col\">\n                <div style=\"text-align: center;\">\n                    <img *ngIf=\"rowData.isFile && (rowData.tailFile.toUpperCase() == '.JPG'\n                    || rowData.tailFile.toUpperCase() == '.JPEG' || rowData.tailFile.toUpperCase() == '.PNG' )\"\n                        class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"100px\" [alt]=\"rowData.name\" />\n                </div>\n            </ng-template> -->\n\n            <ng-template #fileSize let-rowData='rowData'>\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\n            </ng-template>\n\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\n                <div class=\"function-list\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\n                            pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n                            (click)=\"deleteFile(rowData)\"></button>\n\n                        <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                            (click)=\"showContextMenu($event, rowData)\"></button>\n                    </ng-container>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\n                        (click)=\"download(rowData)\"></button>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n                        (click)=\"copyDownloadLink(rowData)\"></button>\n                </div>\n            </ng-template>\n        </crud-list>\n    </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n        <div class=\"fm-toolbar-buttons\">\n            <ng-container *ngIf=\"!readonly\">\n                <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n                    type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n                </button>\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n                    [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\" icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\"\n                    [label]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n                <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n                <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n                    [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n            </ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n    </div>\n\n    <div class=\"nfl-grid\">\n        <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n            <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n                <div class=\"nfl-no\">\n                    {{i + 1}}.\n                </div>\n\n                <div class=\"nfl-name\">\n                    <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n                    <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n                </div>\n                <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n                    tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n                    <i class=\"fas fa-signature\"></i>\n                </div>\n                <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\n                    v{{rowData.currentFileVersion}}\n                </div>\n\n                <div class=\"nfl-function\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n                            pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n                            (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n                            icon=\"pi pi-trash\"></button>\n                    </ng-container>\n\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\n                        icon=\"pi pi-cloud-download\"></button>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n                        (click)=\"copyDownloadLink(rowData)\"></button>\n                    <button *ngIf=\"rowData.hasContextMenu\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                        (click)=\"showContextMenu($event, rowData)\"></button>\n                </div>\n            </div>\n        </ng-container>\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n            {{ noFileMessage }}\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n        <div class=\"fm-toolbar-buttons\">\n            <ng-container *ngIf=\"!readonly\">\n                <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n                    type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n                </button>\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" [label]=\"'T\u1EA3i l\u00EAn'| translate\"\n                    [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n                <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n                <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n                    [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n            </ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n    </div>\n\n    <div class=\"nfl-grid\">\n        <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n            <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n                <div class=\"nfl-no\">\n                    {{i + 1}}.\n                </div>\n\n                <div class=\"nfl-name\">\n                    <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n\n                    <a *ngIf=\"!disabled\" class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n\n                    <a *ngIf=\"disabled\" class=\"{{rowData.class}} file-ex-name\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n                </div>\n\n                <div class=\"nfl-function\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n                            pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n                            (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n                            icon=\"pi pi-trash\"></button>\n                    </ng-container>\n                    <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                        [disabled]=\"disabled\" (click)=\"showContextMenu($event, rowData)\"></button>\n                </div>\n            </div>\n        </ng-container>\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n            {{ noFileMessage }}\n        </div>\n    </div>\n</div>\n\n<ng-template #breadCrumb>\n    <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\n    </div>\n</ng-template>\n\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" [name]=\"fileInForm\"\n    [url]=\"apiUploadUrl\" auto=\"true\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" [accept]=\"accept\" [multiple]=\"control.multiple\"\n    (onProgress)=\"onUploadProgress($event)\" (onBeforeUpload)=\"onBeforeUpload($event)\"\n    (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\" (onError)=\"handleError($event)\">\n</p-fileUpload>\n<p-contextMenu *ngIf=\"data.itemsMenuFile && data.itemsMenuFile.length > 0\" #contextMenu [appendTo]=\"'body'\"\n    [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\n    </folder-form>\n</tn-dialog>\n\n<!-- \u0110\u1ED5i t\u00EAn file -->\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\n    </file-form>\n</tn-dialog>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\n    [model]=\"forms.fileViewer.formData\" (onClose)=\"closeFileViewer()\">\n</file-viewer>\n\n<!-- Xem phi\u00EAn b\u1EA3n -->\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\"\n        (onSetMajorVersion)=\"_triggerProcessData()\">\n    </file-version-list>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\n    [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\n    <div class=\"p-col-12\">\n        <div class=\"p-grid\">\n            <div class=\"p-md-10\">\n                <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\n                    (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\n            </div>\n            <div class=\"p-md-2\">\n                <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\n                    class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\n            </div>\n        </div>\n    </div>\n    <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\n</tn-dialog>\n\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\n    [popupSize]=\"{ width:1200, height: 650 }\" (onHide)=\"showTaiLieuDungChung = false\">\n    <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\" [filePickerSetting]=\"filePickerSetting\"\n        (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\n    </file-tai-lieu>\n</tn-dialog>\n\n<!--\n\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n    [model]=\"forms.shareFile.formData\">\n</share-file>\n\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n    [model]=\"forms.shareFolder.formData\">\n</share-folder>\n -->\n\n<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\n    (onHide)=\"onCancelForm(formIds.signatureDetail)\">\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n    </signature-detail>\n</tn-dialog>\n\n<!--K\u00FD s\u1ED1 sim-->\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\n    [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\n    <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\n    </app-file-ky-so-sim>\n    <ng-template #footer>\n        <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\n            [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\n        <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\n            [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\n        <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\n    </ng-template>\n</tn-dialog>\n\n<!-- Xem chi ti\u1EBFt -->\n<tn-dialog *ngIf=\"forms.viewDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.viewDetail.header | translate\" [popupSize]=\"forms[formIds.viewDetail].popupSize\"\n    (onHide)=\"onCancelForm(formIds.viewDetail)\">\n    <view-detail #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms.viewDetail.formData\"\n        (onCancel)=\"onCancelForm(formIds.viewDetail)\">\n    </view-detail>\n</tn-dialog>",
+                    template: "<div *ngIf=\"layout == _layout.LIST\" class=\"full-layout p-grid\">\n    <div *ngIf=\"visibleFolder && !control.uploadOnly\" class=\"tree-layout\"\n        [class]=\"visibleFolder ? 'p-col-12 p-lg-2' : '' \">\n        <div class=\"tree-layout-btn\">\n            <button *ngIf=\"!hiddenCreateFolder && !readonly\" pButton pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\"\n                tooltipPosition=\"top\" icon=\"pi pi-folder\" class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\"\n                (click)=\"createFolder()\">\n            </button>\n        </div>\n        <div class=\"tree-layout-wrapper\">\n            <perfect-scrollbar #scrollbar class=\"defaulFlexColumn treeOrg\" [config]=\"{suppressScrollX : true}\">\n                <p-tree class=\"folderTree\" selectionMode=\"single\" [style]=\"{ 'width' : '100%'}\"\n                    [(selection)]=\"selectedTreeNode\" [value]=\"rootTreeNode\" [contextMenu]=\"contextMenu\"\n                    (onNodeSelect)=\"nodeSelect($event)\">\n                    <ng-template let-node pTemplate=\"default\">\n                        <span [id]=\"node.data\" class=\"custom-node\"\n                            (contextmenu)=\"showContextMenu($event, node, true)\">{{node.label}}</span>\n                    </ng-template>\n                </p-tree>\n            </perfect-scrollbar>\n        </div>\n    </div>\n    <div class=\"fm-grid\" [class]=\"visibleFolder ? 'p-col-12 p-lg-10' : 'p-col-12' \">\n        <crud-list #crudList [model]=\"model\" [setting]=\"setting\" [dataSource]=\"_dataSource\"\n            [disableKeypressControl]=\"true\" [showScrollBar]=\"false\" class=\"--auto-height-content --no-wrapper-padding\"\n            [widthFunctionColumn]=\"'8.2rem'\" [showScrollHorizontal]=\"true\" (onReload)=\"_triggerProcessData($event)\"\n            (onRowSelect)=\"onRowSelect($event)\">\n            <ng-template #customTitle>\n                <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n            </ng-template>\n            <ng-template #toolbar>\n                <button *ngIf=\"!control.uploadOnly\" pButton pRipple type=\"button\"\n                    [pTooltip]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" tooltipPosition=\"top\"\n                    [icon]=\"visibleFolder ? 'far fa-eye-slash': 'far fa-eye'\" class=\"p-button-text\"\n                    [label]=\"visibleFolder == true ? '\u1EA8n c\u00E2y th\u01B0 m\u1EE5c' : 'Hi\u1EC7n c\u00E2y th\u01B0 m\u1EE5c'\" iconPos=\"left\"\n                    (click)=\"changeVisibleFolder()\">\n                </button>\n\n                <button *ngIf=\"!hiddenCreateFolder && !readonly && !visibleFolder && !control.uploadOnly\" pButton\n                    pRipple type=\"button\" pTooltip=\"T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" label=\"T\u1EA1o th\u01B0 m\u1EE5c\" iconPos=\"left\" (click)=\"createFolder()\">\n                </button>\n\n                <button *ngIf=\"!readonly\" pButton icon=\"pi pi-cloud-upload\" pTooltip=\"T\u1EA3i t\u1EC7p tin t\u1EEB m\u00E1y t\u00EDnh c\u1EE7a b\u1EA1n\"\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text p-button-primary\" label=\"T\u1EA3i l\u00EAn\"\n                    (click)=\"selectFile()\"></button>\n\n                <button *ngIf=\"!readonly && !control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    pTooltip=\"T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" label=\"T\u1EA3i li\u00EAn k\u1EBFt\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n\n                <button *ngIf=\"!inTaiLieu && !inTaiLieuChung && !readonly && !control.uploadOnly && !filePickerSetting\"\n                    pButton icon=\"pi pi-book\" pTooltip=\"Sao ch\u00E9p t\u1EEB t\u00E0i li\u1EC7u d\u00F9ng chung ho\u1EB7c c\u00E1 nh\u00E2n\"\n                    tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\" label=\"T\u00E0i li\u1EC7u\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n\n                <button *ngIf=\"filePickerSetting && !filePickerSetting.isHidden\" pButton icon=\"pi pi-book\"\n                    pTooltip=\"{{filePickerSetting.title}}\" tooltipPosition=\"top\" type=\"button\" class=\"p-button-text\"\n                    label=\"{{filePickerSetting.title}}\" (click)=\"showPickerTaiLieu()\">\n                </button>\n\n                <button *ngIf=\"canSelect() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n                    type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\"\n                    icon=\"fas fa-arrows-alt\" iconPos=\"left\" label=\"Di chuy\u1EC3n\" (click)=\"moveExplorerItems()\">\n                </button>\n\n                <button *ngIf=\"canSetMove() && !control.uploadOnly\" class=\"p-button-text p-button-success\" pButton\n                    type=\"button\" pTooltip=\"Di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn t\u1EDBi \u0111\u00E2y\" tooltipPosition=\"top\"\n                    icon=\"far fa-hand-paper\" iconPos=\"left\" label=\"\u0110\u1EB7t t\u1EA1i \u0111\u00E2y\" (click)=\"setMoveExplorerItems()\">\n                </button>\n\n                <button *ngIf=\"canSetMove() && !control.uploadOnly\" icon=\"pi pi-undo\" pButton\n                    class=\"p-button-text p-button-secondary\" type=\"button\"\n                    pTooltip=\"B\u1ECF di chuy\u1EC3n th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn\" tooltipPosition=\"top\" label=\"B\u1ECF qua\"\n                    (click)=\"cancelMove()\">\n                </button>\n\n                <button *ngIf=\"hasSelect() && !readonly\" pButton type=\"button\"\n                    pTooltip=\"{{ 'X\u00F3a th\u01B0 m\u1EE5c/t\u1EC7p tin \u0111\u00E3 ch\u1ECDn' | translate }}\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n                    iconPos=\"left\" class=\"p-button-text p-button-danger\" label=\"X\u00F3a\"\n                    (click)=\"deleteMutiple(model.selectedItems)\"></button>\n\n                <button *ngIf=\"hasSelect() && !control.uploadOnly\" class=\"p-button-text p-button-secondary\" pButton\n                    type=\"button\" pTooltip=\"N\u00E9n & t\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"fas fa-file-archive\"\n                    iconPos=\"left\" label=\"T\u1EA3i v\u1EC1\" (click)=\"downloadMultiple()\">\n                </button>\n            </ng-template>\n\n            <ng-template #explorerItem let-rowData='rowData' let-col='col'>\n                <div style=\"display: flex; align-items: center;\">\n                    <span *ngIf=\"rowData.tailFileUpper != '.JPG'\n                    && rowData.tailFileUpper != '.JPEG' && rowData.tailFileUpper != '.PNG' \"\n                        (click)=\"openObject(rowData)\" class=\"pull-left file-ex-icon\" style=\"display: flex;\"\n                        [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n\n                    <span *ngIf=\"rowData.isFile && (rowData.tailFileUpper == '.JPG'\n                    || rowData.tailFileUpper == '.JPEG' || rowData.tailFileUpper == '.PNG' )\"\n                        (click)=\"openObject(rowData)\" class=\"file-ex-thumbnail\" style=\"display: flex;\">\n                        <img class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"50px\" [alt]=\"rowData.name\"\n                            style=\"margin-right: 7px;\" />\n                    </span>\n\n                    <span (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n                        {{rowData.name}}\n                    </span>\n\n                    <span *ngIf=\"rowData.signatures\" class=\"pull-right signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n                        tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n                        <i class=\"fas fa-signature\"></i>\n                    </span>\n                </div>\n            </ng-template>\n\n            <!-- <ng-template #thumbnail let-rowData=\"rowData\" let-col=\"col\">\n                <div style=\"text-align: center;\">\n                    <img *ngIf=\"rowData.isFile && (rowData.tailFile.toUpperCase() == '.JPG'\n                    || rowData.tailFile.toUpperCase() == '.JPEG' || rowData.tailFile.toUpperCase() == '.PNG' )\"\n                        class=\"thumbnail-img\" [src]=\"getPathImage(rowData.id)\" width=\"100px\" [alt]=\"rowData.name\" />\n                </div>\n            </ng-template> -->\n\n            <ng-template #fileSize let-rowData='rowData'>\n                <div *ngIf=\"rowData.isFile\">{{rowData.fileSize | fileSize}}</div>\n            </ng-template>\n\n            <ng-template #function let-rowData=\"rowData\" let-crudList=\"crudList\">\n                <div class=\"function-list\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            pButton type=\"button\" tooltipPosition=\"top\" pTooltip=\"{{getButtonTooltip(rowData)}}\"\n                            icon=\"{{getButtonIcon(rowData)}}\" (click)=\"onButtonClick(rowData)\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\" pButton type=\"button\"\n                            pTooltip=\"X\u00F3a\" tooltipPosition=\"top\" icon=\"pi pi-trash\"\n                            (click)=\"deleteFile(rowData)\"></button>\n\n                        <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                            class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                            (click)=\"showContextMenu($event, rowData)\"></button>\n                    </ng-container>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\" icon=\"pi pi-cloud-download\"\n                        (click)=\"download(rowData)\"></button>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n                        (click)=\"copyDownloadLink(rowData)\"></button>\n                </div>\n            </ng-template>\n        </crud-list>\n    </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n        <div class=\"fm-toolbar-buttons\">\n            <ng-container *ngIf=\"!readonly\">\n                <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n                    type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n                </button>\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n                    [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\" icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\"\n                    [label]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n                <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n                <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n                    [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n            </ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n    </div>\n\n    <div class=\"nfl-grid\">\n        <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n            <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n                <div class=\"nfl-no\">\n                    {{i + 1}}.\n                </div>\n\n                <div class=\"nfl-name\">\n                    <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n                    <a (click)=\"openObject(rowData)\" class=\"{{rowData.class}} file-ex-name\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n                </div>\n                <div *ngIf=\"rowData.signatures\" class=\"nfl-signature signature\" pTooltip=\"Xem chi ti\u1EBFt k\u00FD s\u1ED1\"\n                    tooltipPosition=\"top\" (click)=\"viewListSign($event, rowData.signatures)\">\n                    <i class=\"fas fa-signature\"></i>\n                </div>\n                <div *ngIf=\"rowData.isFile\" class=\"nfl-version\">\n                    v{{rowData.currentFileVersion}}\n                </div>\n\n                <div class=\"nfl-function\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n                            pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n                            (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n                            icon=\"pi pi-trash\"></button>\n                    </ng-container>\n\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        (click)=\"download(rowData)\" pButton type=\"button\" pTooltip=\"T\u1EA3i v\u1EC1\" tooltipPosition=\"top\"\n                        icon=\"pi pi-cloud-download\"></button>\n                    <button *ngIf=\"readonly\" class=\"p-button-secondary p-button-rounded p-button-text link-or-action\"\n                        pButton type=\"button\" pTooltip=\"Sao ch\u00E9p \u0111\u01B0\u1EDDng d\u1EABn\" tooltipPosition=\"top\" icon=\"pi pi-link\"\n                        (click)=\"copyDownloadLink(rowData)\"></button>\n                    <button *ngIf=\"rowData.hasContextMenu\" type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                        (click)=\"showContextMenu($event, rowData)\"></button>\n                </div>\n            </div>\n        </ng-container>\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n            {{ noFileMessage }}\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layout == _layout.SIMPLE_FOR_LIST\" class=\"not-full-layout\" [class.readonly]=\"readonly\">\n    <div *ngIf=\"!readonly || data.breadcrumbs.length > 0\" class=\"fm-toolbar\">\n        <div class=\"fm-toolbar-buttons\">\n            <ng-container *ngIf=\"!readonly\">\n                <button *ngIf=\"!hiddenCreateFolder && !control.uploadOnly\" (click)=\"createFolder()\" pButton pRipple\n                    type=\"button\" [pTooltip]=\"'T\u1EA1o th\u01B0 m\u1EE5c m\u1EDBi' | translate\" tooltipPosition=\"top\" icon=\"pi pi-folder\"\n                    class=\"p-button-text\" [label]=\"'T\u1EA1o th\u01B0 m\u1EE5c' | translate\" iconPos=\"left\">\n                </button>\n                <button type=\"button\" pButton class=\"p-button-text p-button-info link-or-action\"\n                    icon=\"pi pi-cloud-upload\" (click)=\"selectFile()\" [label]=\"'T\u1EA3i l\u00EAn'| translate\"\n                    [pTooltip]=\"'T\u1EA3i l\u00EAn'| translate\"></button>\n                <button *ngIf=\"!control.uploadOnly\" pButton icon=\"pi pi-link\"\n                    [pTooltip]=\"'T\u1EA3i t\u1EEB li\u00EAn k\u1EBFt trong h\u1EC7 th\u1ED1ng'| translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text p-button-primary\" [label]=\"'T\u1EA3i li\u00EAn k\u1EBFt'| translate\"\n                    (click)=\"showAttachLinkBox = true\"></button>\n                <button *ngIf=\"!inTaiLieu && !control.uploadOnly\" pButton icon=\"pi pi-book\"\n                    [pTooltip]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\" tooltipPosition=\"top\" type=\"button\"\n                    class=\"p-button-text\" [label]=\"'T\u00E0i li\u1EC7u d\u00F9ng chung'|translate\"\n                    (click)=\"showTaiLieuDungChung = true;\">\n                </button>\n            </ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"breadCrumb\"></ng-container>\n    </div>\n\n    <div class=\"nfl-grid\">\n        <ng-container *ngIf=\"_dataSource && _dataSource.length > 0\">\n            <div *ngFor=\"let rowData of _dataSource; index as i\" class=\"nfl-item\">\n                <div class=\"nfl-no\">\n                    {{i + 1}}.\n                </div>\n\n                <div class=\"nfl-name\">\n                    <span class=\"pull-left file-ex-icon\" [innerHTML]=\"rowData.name | fileIcon : !rowData.isFile\">\n                    </span>\n\n                    <a *ngIf=\"!disabled\" class=\"{{rowData.class}} file-ex-name\" (click)=\"openObject(rowData)\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n\n                    <a *ngIf=\"disabled\" class=\"{{rowData.class}} file-ex-name\">\n                        <span>\n                            <span>{{rowData.name}}</span>\n                        </span>\n                    </a>\n                </div>\n\n                <div class=\"nfl-function\">\n                    <ng-container *ngIf=\"!readonly\">\n                        <button *ngIf=\"!control.uploadOnly\" class=\"p-button-rounded p-button-text link-or-action\"\n                            (click)=\"onButtonClick(rowData)\" pButton type=\"button\" tooltipPosition=\"top\"\n                            pTooltip=\"{{getButtonTooltip(rowData)}}\" icon=\"{{getButtonIcon(rowData)}}\"></button>\n\n                        <button *ngIf=\"control.showDelete\"\n                            class=\"p-button-danger p-button-rounded p-button-text link-or-action\"\n                            (click)=\"deleteFile(rowData)\" pButton type=\"button\" pTooltip=\"X\u00F3a\" tooltipPosition=\"top\"\n                            icon=\"pi pi-trash\"></button>\n                    </ng-container>\n                    <button type=\"button\" pButton icon=\"pi pi-ellipsis-v\"\n                        class=\"link-or-action p-button-text p-button-rounded\" pTooltip=\"Th\u00EAm\" tooltipPosition=\"top\"\n                        [disabled]=\"disabled\" (click)=\"showContextMenu($event, rowData)\"></button>\n                </div>\n            </div>\n        </ng-container>\n        <div *ngIf=\"!_dataSource || !_dataSource.length\" class=\"nfl-no-item\">\n            {{ noFileMessage }}\n        </div>\n    </div>\n</div>\n\n<ng-template #breadCrumb>\n    <div *ngIf=\"data.breadcrumbs.length > 1\" class=\"fm-toolbar-path\">\n        <p-breadcrumb class=\"customBreadCrumb\" [model]=\"data.breadcrumbs\"></p-breadcrumb>\n    </div>\n</ng-template>\n\n<p-fileUpload #fileControl [ngStyle]=\"{'display': 'none'}\" mode=\"basic\" [chooseLabel]=\"chooseLabel\" [name]=\"fileInForm\"\n    [url]=\"apiUploadUrl\" auto=\"true\" [invalidFileSizeMessageSummary]=\"invalidFileSizeMessageSummary\"\n    [invalidFileSizeMessageDetail]=\"invalidFileSizeMessageDetail\"\n    [invalidFileTypeMessageSummary]=\"invalidFileTypeMessageSummary\"\n    [invalidFileTypeMessageDetail]=\"invalidFileTypeMessageDetail\"\n    [invalidFileLimitMessageSummary]=\"invalidFileLimitMessageSummary\"\n    [invalidFileLimitMessageDetail]=\"invalidFileLimitMessageDetail\" [accept]=\"accept\" [multiple]=\"control.multiple\"\n    (onProgress)=\"onUploadProgress($event)\" (onBeforeUpload)=\"onBeforeUpload($event)\"\n    (onSelect)=\"handleSelectFile($event)\" (onUpload)=\"onUploaded($event)\" (onError)=\"handleError($event)\">\n</p-fileUpload>\n<p-contextMenu *ngIf=\"data.itemsMenuFile && data.itemsMenuFile.length > 0\" #contextMenu [appendTo]=\"'body'\"\n    [model]=\"data.itemsMenuFile\" styleClass=\"fm-contextMenu-panel\">\n</p-contextMenu>\n\n<!-- T\u1EA1o m\u1EDBi/ \u0111\u1ED5i t\u00EAn th\u01B0 m\u1EE5c -->\n<tn-dialog *ngIf=\"forms.createFolder.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.createFolder.header | translate\" [popupSize]=\"forms[formIds.createFolder].popupSize\"\n    (onHide)=\"onCancelForm(formIds.createFolder)\">\n    <folder-form #formBase [parentModel]=\"model\" [parentContext]=\"context\"\n        [model]=\"forms[formIds.createFolder].formData\" (onSaved)=\"onSavedForm(formIds.createFolder)\"\n        (onCancel)=\"onCancelForm(formIds.createFolder)\">\n    </folder-form>\n</tn-dialog>\n\n<!-- \u0110\u1ED5i t\u00EAn file -->\n<tn-dialog *ngIf=\"forms.renameFile.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.renameFile.header | translate\" [popupSize]=\"forms[formIds.renameFile].popupSize\"\n    (onHide)=\"onCancelForm(formIds.renameFile)\">\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms[formIds.renameFile].formData\"\n        (onSaved)=\"onSavedForm(formIds.renameFile)\" (onCancel)=\"onCancelForm(formIds.renameFile)\">\n    </file-form>\n</tn-dialog>\n\n<!-- Xem file tr\u1EF1c tuy\u1EBFn -->\n<file-viewer *ngIf=\"forms.fileViewer.show\" [parentModel]=\"model\" [parentContext]=\"context\" [readonly]=\"readonly\"\n    [model]=\"forms.fileViewer.formData\" (onClose)=\"closeFileViewer()\">\n</file-viewer>\n\n<!-- Xem phi\u00EAn b\u1EA3n -->\n<tn-dialog *ngIf=\"forms.fileVersionList.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.fileVersionList.header | translate\" [popupSize]=\"forms[formIds.fileVersionList].popupSize\"\n    (onHide)=\"onCancelForm(formIds.fileVersionList)\">\n    <file-version-list *ngIf=\"forms.fileVersionList.show\" [parentModel]=\"model\" [parentContext]=\"context\"\n        [fileId]=\"forms[formIds.fileVersionList].fileId\" [readonly]=\"readonly\"\n        (onSetMajorVersion)=\"_triggerProcessData()\">\n    </file-version-list>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showAttachLinkBox\" #dialog2 [maximizable]=\"false\" [header]=\"'Nh\u1EADp li\u00EAn k\u1EBFt' | translate\"\n    [popupSize]=\"{ width: 600, height: 50}\" (onHide)=\"showAttachLinkBox = false; typedLink=''\">\n    <div class=\"p-col-12\">\n        <div class=\"p-grid\">\n            <div class=\"p-md-10\">\n                <input #input type=\"text\" placeholder=\"Nh\u1EADp li\u00EAn k\u1EBFt sao ch\u00E9p t\u1EEB t\u1EC7p tin kh\u00E1c...\"\n                    (keyup.enter)=\"addAttachLink()\" pInputText [(ngModel)]=\"typedLink\" class=\"p-col-12\" />\n            </div>\n            <div class=\"p-md-2\">\n                <button type=\"button\" (click)=\"addAttachLink()\" [disabled]=\"typedLink != ''? null : true\" pButton\n                    class=\"p-button-primary p-col-12\" label=\"Ok\"></button>\n            </div>\n        </div>\n    </div>\n    <after-view-checked (loaded)=\"focusInput(input)\"></after-view-checked>\n</tn-dialog>\n\n<tn-dialog #dialog3 *ngIf=\"showTaiLieuDungChung\" [header]=\"'T\u00E0i li\u1EC7u' |translate\"\n    [popupSize]=\"{ width:1200, height: 650 }\" (onHide)=\"showTaiLieuDungChung = false\">\n    <file-tai-lieu #formBase [originalFolderId]=\"data.currentFolderId\" [filePickerSetting]=\"filePickerSetting\"\n        (onSaved)=\"showTaiLieuDungChung = false; this._triggerProcessData()\" (onCancel)=\"showTaiLieuDungChung = false\">\n    </file-tai-lieu>\n</tn-dialog>\n\n<!--\n\n<share-file *ngIf=\"forms.shareFile.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n    [model]=\"forms.shareFile.formData\">\n</share-file>\n\n<share-folder *ngIf=\"forms.shareFolder.show\" [parentDataModel]=\"model\" [parentDataContext]=\"context\"\n    [model]=\"forms.shareFolder.formData\">\n</share-folder>\n -->\n\n<!-- Xem ch\u1EEF k\u00FD s\u1ED1 -->\n<tn-dialog *ngIf=\"forms.signatureDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.signatureDetail.header | translate\" [popupSize]=\"forms[formIds.signatureDetail].popupSize\"\n    (onHide)=\"onCancelForm(formIds.signatureDetail)\">\n    <signature-detail [parentModel]=\"model\" [parentContext]=\"context\">\n    </signature-detail>\n</tn-dialog>\n\n<!--K\u00FD s\u1ED1 sim-->\n<tn-dialog *ngIf=\"forms.kySoSim.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"forms.kySoSim.header | translate\"\n    [popupSize]=\"forms.kySoSim.popupSize\" [showFooter]=\"true\" (onHide)=\"onCancelForm(formIds.kySoSim)\">\n    <app-file-ky-so-sim #fileKySoSim [parentModel]=\"model\" [parentContext]=\"context\">\n    </app-file-ky-so-sim>\n    <ng-template #footer>\n        <button type=\"button\" pButton icon=\"fas fa-images\" [disabled]=\"model.submitting\" class=\"p-button-text\"\n            [label]=\"'Ch\u1ECDn ch\u1EEF k\u00FD' | translate\" (click)=\"chonChuKy()\"></button>\n        <button type=\"button\" pButton icon=\"fas fa-signature\" class=\"p-button-text ui-button-success\"\n            [disabled]=\"model.submitting\" [label]=\"'Th\u1EF1c hi\u1EC7n k\u00FD' | translate\" (click)=\"kySo()\"></button>\n        <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\n            [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"forms.kySoSim.show=false\"></button>\n    </ng-template>\n</tn-dialog>\n\n<!-- Xem chi ti\u1EBFt -->\n<tn-dialog *ngIf=\"forms.viewDetail.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"forms.viewDetail.header | translate\" [popupSize]=\"forms[formIds.viewDetail].popupSize\"\n    (onHide)=\"onCancelForm(formIds.viewDetail)\">\n    <view-detail #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"forms.viewDetail.formData\"\n        (onCancel)=\"onCancelForm(formIds.viewDetail)\">\n    </view-detail>\n</tn-dialog>\n<tn-dialog *ngIf=\"signatureFormModel.show\" #dialog [styleClass]=\"'address-form'\" [header]=\"'Ch\u1ECDn ch\u1EEF k\u00FD s\u1ED1' | translate\"\n    [popupSize]=\"signatureFormModel.popupSize\" (onHide)=\"signatureFormModel.show=false\">\n    <signature-select #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"signatureFormModel.formData\"\n        (onCancel)=\"signatureFormModel.show = false\" (onSaved)=\"signFileSmartCA($event)\">\n    </signature-select>\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -50671,10 +50674,10 @@
                 var canvasHeightPoint = this.pixelToPoint(target.height);
                 // Chuyển đổi Y coordinate (PDF origin ở dưới)
                 var pdfY = canvasHeightPoint - clickYPoint;
-                var x1 = clickXPoint;
-                var y1 = pdfY - heightPoint;
-                var x2 = clickXPoint + widthPoint;
-                var y2 = pdfY;
+                var x1 = clickXPoint - (widthPoint / 2);
+                var y1 = pdfY - (heightPoint / 2);
+                var x2 = x1 + widthPoint;
+                var y2 = y1 + heightPoint;
                 var rectangle = Math.floor(x1) + "," + Math.floor(y1) + "," + Math.floor(x2) + "," + Math.floor(y2);
                 console.log('PDF Rectangle:', rectangle);
                 console.log('==================');
@@ -50700,7 +50703,7 @@
     FileViewerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'file-viewer',
-                    template: "<p-sidebar #sidebar [showCloseIcon]=\"false\" [fullScreen]=\"fullScreen\" [appendTo]=\"'body'\" [modal]=\"showModal\"\n    [styleClass]=\"getStyleClassByDocumentType(data.fileType)\" [(visible)]=\"show\">\n    <ng-container *ngIf=\"data.fileType == fileTypes.PDF\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\" style=\"margin: 0px auto;\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <!-- UD-2450 - TuDN -->\n                    <!-- <a *ngIf=\"_deviceDetectorService.isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\"\n                        tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-print\"></i></a> -->\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <!-- End UD-2450 - TuDN -->\n                    <a *ngIf=\"!_deviceDetectorService.isDesktop() && !readonly\" pTooltip=\"\u0110\u1ED5i t\u00EAn\"\n                        tooltipPosition=\"bottom\" (click)=\"renameFile()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\"><i\n                            class=\"fas fa-eraser\"></i></a>\n                    <a *ngIf=\"showDelete && !readonly\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"far fa-trash-alt\"></i></a>\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\"\n                        *ngIf=\"!readonly && _deviceDetectorService.isDesktop()\"\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\"> <i class=\"fas fa-ellipsis-v\"></i>\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\n                            <li *ngIf=\"_deviceDetectorService.isDesktop()\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"editFile()\" class=\"file-row-action\"><i class=\"fas fa-pen-square\"></i>S\u1EEDa\n                                    file\n                                    tr\u1EF1c\n                                    tuy\u1EBFn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\n                                    t\u00EAn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"far fa-trash-alt\"></i>X\u00F3a\n                                    t\u1EC7p\n                                    tin</a>\n                            </li>\n                        </ul>\n                    </a>\n                    <a *ngIf=\"model.data?.showKySoButton\" pTooltip=\"K\u00FD s\u1ED1\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"kySoHandle()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-signature\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n        </div>\n        <ngx-extended-pdf-viewer [src]=\"model.fileUrl\" useBrowserLocale=\"true\" height=\"calc(100vh - 50px)\"\n            [enablePinchOnMobile]=\"true\" [filenameForDownload]=\"data.fileName\" [language]=\"'vi-VN'\"\n            [showBookmarkButton]=\"false\" [showHandToolButton]=\"false\" [showOpenFileButton]=\"false\"\n            [showUnverifiedSignatures]=\"true\">\n        </ngx-extended-pdf-viewer>\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"data.fileType != fileTypes.IMAGE && data.fileType != fileTypes.VIDEO && data.fileType != fileTypes.AUDIO && data.fileType != fileTypes.PDF\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\" tooltipPosition=\"bottom\"\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-print\"></i></a>\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <a *ngIf=\"!readonly && showDelete && isDesktop()\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a *ngIf=\"!readonly && isDesktop()\" pTooltip=\"S\u1EEDa file tr\u1EF1c tuy\u1EBFn\" (click)=\"editFile()\"\n                        placeholder=\"Bottom\" class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\">\n                        <i class=\"fas fa-pen-square\"></i></a>\n\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\" *ngIf=\"!isDesktop()\"\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\">\n                        <i class=\"fas fa-ellipsis-v\"></i>\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"editFile()\" class=\"file-row-action\">\n                                    <i class=\"fas fa-pen-square\"></i>S\u1EEDa file tr\u1EF1c tuy\u1EBFn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\n                                    t\u00EAn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly && showDelete\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"pi pi-trash\"></i>X\u00F3a\n                                    t\u1EC7p tin</a>\n                            </li>\n                        </ul>\n                    </a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\n                [class.view-file-text]=\"isFileType(fileTypes.TEXT)\"\n                [class.view-file-spreadsheet]=\"isFileType(fileTypes.SPREADSHEET)\"\n                [class.view-file-presentation]=\"isFileType(fileTypes.PRESENTATION)\">\n                <div id=\"file-viewer\"></div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.IMAGE && model.images.length > 0\">\n        <div class=\"image-container\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <img *ngIf=\"model.images && model.images.length\" src=\"{{model.images[0]}}\" alt=\"Ch\u01B0a c\u00F3 \u1EA3nh\">\n        </div>\n        <!-- <app-image-viewer [showPDFOnlyLabel]=\"false\" [showPDFOnlyOption]=\"false\" [fullscreen]=\"false\"\n            [images]=\"model.images\" [primaryColor]=\"'#3192e1'\" [idContainer]=\"'image-view-list'\"\n            (mousedown)=\"closeSidebar($event)\" id=\"fileViewerHolder\" [loadOnInit]=\"true\">\n        </app-image-viewer>\n        <a style=\"color: white;\" (click)=\"closeSidebar(null)\" class=\"mobile-image-viewer-close\">\n            <i class=\"far fa-times-circle\"></i></a> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.VIDEO\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" style=\"height: 100%;\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i>\n                    </a>\n                    <a *ngIf=\"!isReadonly && !isDesktop()\" (click)=\"renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                    <a *ngIf=\"!readonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\n                style=\"width: 80%; margin: auto; height: 100%; border-radius: 0px;\">\n                <video width=\"100%\" height=\"100%\" style=\"margin-top: 50px;\" autoplay controls src=\"{{model.fileUrl}}\">\n                    Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 m\u1EDF video.\n                </video>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.AUDIO\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" (mousedown)=\"closeSidebar($event)\" style=\"height: 100%;\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <a *ngIf=\"!isReadonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n            <audio controls autoplay src=\"{{model.fileUrl}}\"\n                style=\"margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);\">\n                Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 ph\u00E1t audio. </audio>\n        </div>\n    </ng-container>\n\n</p-sidebar>\n\n<tn-dialog *ngIf=\"renameFileForm.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"renameFileForm.header | translate\" [popupSize]=\"renameFileForm.popupSize\" (onHide)=\"onCancelRenameFile()\">\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"renameFileForm.formData\"\n        (onSaved)=\"onSavedRenameFile()\" (onCancel)=\"onCancelRenameFile()\">\n    </file-form>\n</tn-dialog>",
+                    template: "<p-sidebar #sidebar [showCloseIcon]=\"false\" [fullScreen]=\"fullScreen\" [appendTo]=\"'body'\" [modal]=\"showModal\"\n    [styleClass]=\"getStyleClassByDocumentType(data.fileType)\" [(visible)]=\"show\">\n    <ng-container *ngIf=\"data.fileType == fileTypes.PDF\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\" style=\"margin: 0px auto;\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <!-- UD-2450 - TuDN -->\n                    <!-- <a *ngIf=\"_deviceDetectorService.isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\"\n                        tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-print\"></i></a> -->\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <!-- End UD-2450 - TuDN -->\n                    <a *ngIf=\"!_deviceDetectorService.isDesktop() && !readonly\" pTooltip=\"\u0110\u1ED5i t\u00EAn\"\n                        tooltipPosition=\"bottom\" (click)=\"renameFile()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\"><i\n                            class=\"fas fa-eraser\"></i></a>\n                    <a *ngIf=\"showDelete && !readonly\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"far fa-trash-alt\"></i></a>\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\"\n                        *ngIf=\"!readonly && _deviceDetectorService.isDesktop()\"\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\"> <i class=\"fas fa-ellipsis-v\"></i>\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\n                            <li *ngIf=\"_deviceDetectorService.isDesktop()\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"editFile()\" class=\"file-row-action\"><i class=\"fas fa-pen-square\"></i>S\u1EEDa\n                                    file\n                                    tr\u1EF1c\n                                    tuy\u1EBFn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\n                                    t\u00EAn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"far fa-trash-alt\"></i>X\u00F3a\n                                    t\u1EC7p\n                                    tin</a>\n                            </li>\n                        </ul>\n                    </a>\n                    <a *ngIf=\"model.data?.showKySoButton\" pTooltip=\"X\u00E1c nh\u1EADn k\u00FD\" tooltipPosition=\"bottom\"\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"kySoHandle()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-signature\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n        </div>\n        <ngx-extended-pdf-viewer [zoom]=\"100\" [src]=\"model.fileUrl\" useBrowserLocale=\"true\" height=\"calc(100vh - 50px)\"\n            [enablePinchOnMobile]=\"true\" [filenameForDownload]=\"data.fileName\" [language]=\"'vi-VN'\"\n            [showBookmarkButton]=\"false\" [showHandToolButton]=\"false\" [showOpenFileButton]=\"false\"\n            [showUnverifiedSignatures]=\"true\">\n        </ngx-extended-pdf-viewer>\n    </ng-container>\n\n    <ng-container\n        *ngIf=\"data.fileType != fileTypes.IMAGE && data.fileType != fileTypes.VIDEO && data.fileType != fileTypes.AUDIO && data.fileType != fileTypes.PDF\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop() && showPrint\" pTooltip=\"In t\u00E0i li\u1EC7u\" tooltipPosition=\"bottom\"\n                        placeholder=\"Bottom\" style=\"color: white;\" (click)=\"print()\"\n                        class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-print\"></i></a>\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <a *ngIf=\"!readonly && showDelete && isDesktop()\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a *ngIf=\"!readonly && isDesktop()\" pTooltip=\"S\u1EEDa file tr\u1EF1c tuy\u1EBFn\" (click)=\"editFile()\"\n                        placeholder=\"Bottom\" class=\"cursor-pointer button-link btn btn-secondary\" style=\"color: white;\">\n                        <i class=\"fas fa-pen-square\"></i></a>\n\n                    <a (click)=\"onTopbarItemClick($event)\" role=\"menuitem\" style=\"color: white;\" *ngIf=\"!isDesktop()\"\n                        class=\"cursor-pointer button-link btn btn-secondary submenu\">\n                        <i class=\"fas fa-ellipsis-v\"></i>\n                        <ul class=\"layout-menu fadeInDown\" *ngIf=\"model.activeTopbarItem\">\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"editFile()\" class=\"file-row-action\">\n                                    <i class=\"fas fa-pen-square\"></i>S\u1EEDa file tr\u1EF1c tuy\u1EBFn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"renameFile()\" class=\"file-row-action\"><i class=\"fas fa-eraser\"></i>\u0110\u1ED5i\n                                    t\u00EAn</a>\n                            </li>\n                            <li *ngIf=\"!isReadonly && showDelete\" role=\"menuitem\" class=\"cursor-pointer\">\n                                <a (click)=\"deleteFile()\" class=\"file-row-action\"><i class=\"pi pi-trash\"></i>X\u00F3a\n                                    t\u1EC7p tin</a>\n                            </li>\n                        </ul>\n                    </a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\n                [class.view-file-text]=\"isFileType(fileTypes.TEXT)\"\n                [class.view-file-spreadsheet]=\"isFileType(fileTypes.SPREADSHEET)\"\n                [class.view-file-presentation]=\"isFileType(fileTypes.PRESENTATION)\">\n                <div id=\"file-viewer\"></div>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.IMAGE && model.images.length > 0\">\n        <div class=\"image-container\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <img *ngIf=\"model.images && model.images.length\" src=\"{{model.images[0]}}\" alt=\"Ch\u01B0a c\u00F3 \u1EA3nh\">\n        </div>\n        <!-- <app-image-viewer [showPDFOnlyLabel]=\"false\" [showPDFOnlyOption]=\"false\" [fullscreen]=\"false\"\n            [images]=\"model.images\" [primaryColor]=\"'#3192e1'\" [idContainer]=\"'image-view-list'\"\n            (mousedown)=\"closeSidebar($event)\" id=\"fileViewerHolder\" [loadOnInit]=\"true\">\n        </app-image-viewer>\n        <a style=\"color: white;\" (click)=\"closeSidebar(null)\" class=\"mobile-image-viewer-close\">\n            <i class=\"far fa-times-circle\"></i></a> -->\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.VIDEO\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" style=\"height: 100%;\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i>\n                    </a>\n                    <a *ngIf=\"!isReadonly && !isDesktop()\" (click)=\"renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                    <a *ngIf=\"!readonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n\n            <div class=\"dialog-material\" [class.view-file]=\"true\" [class.mobile]=\"!isDesktop()\"\n                style=\"width: 80%; margin: auto; height: 100%; border-radius: 0px;\">\n                <video width=\"100%\" height=\"100%\" style=\"margin-top: 50px;\" autoplay controls src=\"{{model.fileUrl}}\">\n                    Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 m\u1EDF video.\n                </video>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"data.fileType == fileTypes.AUDIO\">\n        <div id=\"fileViewerHolder\" class=\"file-viewer-holder\" (mousedown)=\"closeSidebar($event)\" style=\"height: 100%;\">\n            <div #headerdialogmaterial class=\"header-dialog-material\">\n                <div class=\"flex-item\">\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"isDesktop()\" (click)=\"!isReadonly && renameFile()\" style=\"color: white;\"\n                        class=\"btn btn-secondary\">\n                        <i class=\"fas fa-file-alt\"></i><span class=\"cursor-pointer\">\n                            {{ data.name }}\n                        </span>\n                    </a>\n                </div>\n                <div class=\"flex-item\">\n                    <a *ngIf=\"showDownload\" pTooltip=\"T\u1EA3i xu\u1ED1ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\"\n                        style=\"color: white;\" (click)=\"download()\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-download\"></i></a>\n                    <a *ngIf=\"!isReadonly && showDelete\" pTooltip=\"X\u00F3a t\u1EC7p tin\" tooltipPosition=\"bottom\"\n                        (click)=\"deleteFile()\" class=\"cursor-pointer button-link btn btn-secondary\"\n                        style=\"color: white;\"><i class=\"pi pi-trash\"></i></a>\n                    <a pTooltip=\"\u0110\u00F3ng\" tooltipPosition=\"bottom\" placeholder=\"Bottom\" style=\"color: white;\"\n                        (click)=\"closeSidebar(null)\" class=\"cursor-pointer button-link btn btn-secondary\">\n                        <i class=\"fas fa-times\"></i></a>\n                </div>\n            </div>\n            <audio controls autoplay src=\"{{model.fileUrl}}\"\n                style=\"margin: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);\">\n                Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 ph\u00E1t audio. </audio>\n        </div>\n    </ng-container>\n\n</p-sidebar>\n\n<tn-dialog *ngIf=\"renameFileForm.show\" #dialog [styleClass]=\"'address-form'\"\n    [header]=\"renameFileForm.header | translate\" [popupSize]=\"renameFileForm.popupSize\" (onHide)=\"onCancelRenameFile()\">\n    <file-form #formBase [parentModel]=\"model\" [parentContext]=\"context\" [model]=\"renameFileForm.formData\"\n        (onSaved)=\"onSavedRenameFile()\" (onCancel)=\"onCancelRenameFile()\">\n    </file-form>\n</tn-dialog>",
                     providers: [ComponentContextService],
                     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;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:0;align-content:flex-end;flex-direction:column;width:230px;border-radius:2px;padding:5px 0;background:#fff;box-shadow:0 6px 12px rgba(0,0,0,.175);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:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;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:hsla(0,0%,100%,.25)}.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 hsla(0,0%,100%,.2);display:inline-block;font-size:13px;line-height:44px;height:44px;vertical-align:middle;background:#000}.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}@media print{::ng-deep body *{visibility:visible!important}}::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}"]
                 },] }
@@ -53173,6 +53176,64 @@
                 },] }
     ];
 
+    var SignatureSelectComponent = /** @class */ (function (_super) {
+        __extends(SignatureSelectComponent, _super);
+        function SignatureSelectComponent(_injection, _userChuKySoService) {
+            var _this = _super.call(this, _injection) || this;
+            _this._injection = _injection;
+            _this._userChuKySoService = _userChuKySoService;
+            return _this;
+        }
+        SignatureSelectComponent.prototype.ngOnInit = function () {
+            this.doNotCheckBaseService = true;
+            _super.prototype.ngOnInit.call(this);
+            this.setting.schema = [
+                new DropdownControlSchema({
+                    label: 'Mẫu chữ ký',
+                    field: 'idUserChuKySo',
+                    baseService: this._userChuKySoService,
+                    displayField: 'name',
+                    fieldPlus: 'fileBase64Content,height,width',
+                    mdWidth: 12,
+                    required: true,
+                    defaultFilters: [
+                        this.newFilter('provider', exports.Operator.equal, 'SmartCA'),
+                        this.newFilter('userId', exports.Operator.equal, this._userService.getCurrentUser().userId)
+                    ]
+                })
+            ];
+        };
+        SignatureSelectComponent.prototype.onSaveSignarute = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var valid;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.crudForm.validateForm()];
+                        case 1:
+                            valid = _a.sent();
+                            if (valid) {
+                                this.onSaved.emit(this.crudForm.formControls.idUserChuKySo._component._value);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return SignatureSelectComponent;
+    }(DataFormBase));
+    SignatureSelectComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'signature-select',
+                    template: "<crud-form #crudForm [(data)]=\"model.data\" [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\"\n    (onFormReady)=\"_handleFormReady($event)\">\n</crud-form>\n<ng-template #buttonTemplate>\n    <button *ngIf=\"!model.data.__disableEdit && !__isFormView\" type=\"button\" pButton icon=\"fas fa-signature\"\n        class=\"p-button-text\" [label]=\"'K\u00FD s\u1ED1' | translate\" (click)=\"onSaveSignarute()\"></button>\n    <button type=\"button\" pButton icon=\"pi pi-replay\" class=\"p-button-text p-button-secondary\"\n        [label]=\"'FORM.CANCEL' | translate\" preventTab (click)=\"_handleCancel($event)\"></button>\n</ng-template>",
+                    providers: [ComponentContextService],
+                    styles: [""]
+                },] }
+    ];
+    SignatureSelectComponent.ctorParameters = function () { return [
+        { type: i0.Injector },
+        { type: UserChuKySoService }
+    ]; };
+
     /* eslint-disable prefer-const */
     var HtmlPreviewComponent = /** @class */ (function () {
         function HtmlPreviewComponent(gs, _commonService) {
@@ -58011,6 +58072,7 @@
             SettingAuthorizeButtonComponent,
             SettingsWorkflowNo1Component,
             CommonLibComponent,
+            SignatureSelectComponent,
             HtmlPreviewComponent
         ];
     }
@@ -58716,10 +58778,11 @@
     exports["ɵec"] = SettingAuthorizeButtonComponent;
     exports["ɵed"] = BasePermissionService;
     exports["ɵee"] = SettingsWorkflowNo1Component;
-    exports["ɵef"] = HtmlPreviewComponent;
-    exports["ɵeg"] = AUTOCOMPLETE_VALUE_ACCESSOR;
-    exports["ɵeh"] = AutoComplete;
-    exports["ɵei"] = AutoCompleteModule;
+    exports["ɵef"] = SignatureSelectComponent;
+    exports["ɵeg"] = HtmlPreviewComponent;
+    exports["ɵeh"] = AUTOCOMPLETE_VALUE_ACCESSOR;
+    exports["ɵei"] = AutoComplete;
+    exports["ɵej"] = AutoCompleteModule;
     exports["ɵf"] = ListComponentBase;
     exports["ɵg"] = TreeTableComponent;
     exports["ɵh"] = NotFoundComponent;