@eqproject/eqp-attachments 0.1.1 → 0.1.5

package/README.md

@@ -12,7 +12,7 @@ Table of contents
 
 ## Getting started
 This package allows the upload/download of one or multiple attachments (one at a time).
-The attachments can be files or links.
+The attachments can be files or links (except video files, this feature will be added later).
 Has the possibility to render a preview for image files inside the eqp-table (an inline preview).
 Can open a dialog containing a preview of the uploaded IAttachmentDTO (whatever it is - a document, an image or a link).
 
@@ -58,6 +58,7 @@ export class AppModule {}
 | [attachmentsColumns] | `Array<ConfigColumn>` | `null` | no | Has effect only if `[multipleAttachment]="true"`. Columns configuration for the eqp-table showing the list of IAttachmentDTO. 
 | [emptyTableMessage] | `string` | `"Nessun dato trovato"` | no | Has effect only if `[multipleAttachment]="true"`. Sets the message to show if the eqp-table contains no elements. |
 | [allowOnlyImages] | `boolean` | `false` | no | If TRUE allows the user to upload only image files of the following types: `["image/bmp", "image/gif", "image/jpeg", "image/tiff", "image/png"]`. If FALSE the user can upload a file of any type. |
+| [acceptedFileTypes] | `string` | `*` | no | Sets the `accept` input attribute describing which file type to allow. |
 | [isDisabled] | `boolean` | `false` | no | If TRUE it disables the buttons to add a new IAttachmentDTO. |
 | [showInlinePreview] | `boolean` | `true`| no | Has effect only if `[multipleAttachment]="true"` and `attachmentsColumns` are not defined. Adds a column to the eqp-table to show a small preview of the IAttachmentDTO (if it is an image, otherwise an icon based on the content type of the file). With a click on it opens a dialog to view the selected attachment. |
 | [getAttachmentEndpoint] | `string` | null | no | Sets the endpoint to call to get the complete IAttachmentDTO to be displayed inside the preview dialog. Used only for images with the `FileDataBase64` property missing (in any other case the `FilePath` property is used to render the preview). The directive makes a POST request without any token and with the selected IAttachmentDTO in the body. |
@@ -79,6 +80,9 @@ export class AppModule {}
 | [deleteDialogTitle] | `string` | `"Sei sicuro di voler procedere?"` | no | Sets the confirm dialog title when deleting an IAttachmentDTO. |
 | [deleteDialogMessage] | `string` | `"Sei sicuro di voler cancellare quest'allegato?"` | no | Sets the confirm dialog message when deleting an IAttachmentDTO. |
 | [noImageSelectedErrorMessage] | `string` | `"Non è possibile selezionare un file che non sia un'immagine"` | no | Has effect only if `[allowOnlyImages]="true"`. Sets the error dialog message when the user tries to upload a file which is not an image. |
+| [wrongTypeSelectedErrorMessage] | `string` | `"Non è possibile caricare il file selezionato."` | no | Sets the error dialog message when user tries to upload a not allowed file . | 
+| [videoPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file video.` | no | Sets the warning dialog merrage when the user tries to open the preview of a video file. |
+| [audioPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file audio.` | no | Sets the warning dialog merrage when the user tries to open the preview of an audio file. |
  
 
 ### Outputs

package/bundles/eqproject-eqp-attachments.umd.js

@@ -262,6 +262,24 @@
             "jpeg": "fas fa-file-image",
             "png": "fas fa-file-image",
             "bmp": "fas fa-file-image",
+            "mkv": "fas fa-file-video",
+            "flv": "fas fa-file-video",
+            "gif": "fas fa-file-video",
+            "gifv": "fas fa-file-video",
+            "avi": "fas fa-file-video",
+            "wmv": "fas fa-file-video",
+            "mp4": "fas fa-file-video",
+            "m4p": "fas fa-file-video",
+            "m4v": "fas fa-file-video",
+            "mpg": "fas fa-file-video",
+            "mp2": "fas fa-file-video",
+            "mpeg": "fas fa-file-video",
+            "mpe": "fas fa-file-video",
+            "mpv": "fas fa-file-video",
+            "m2v": "fas fa-file-video",
+            "3gp": "fas fa-file-video",
+            "3g2": "fas fa-file-video",
+            "mp3": "fas fa-file-audio",
         };
         AttachmentHelperService.ɵprov = core.ɵɵdefineInjectable({ factory: function AttachmentHelperService_Factory() { return new AttachmentHelperService(); }, token: AttachmentHelperService, providedIn: "root" });
         AttachmentHelperService = __decorate([
@@ -440,7 +458,7 @@
             /**
              * Mostra/nasconde la colonna per visualizzare l'anteprima dei file nella tabella (caso multipleAtatchments = true).
              */
-            this.showInlinePreview = true;
+            this.showInlinePreview = false;
             /**
              * Endpoint da chiamare per recueprare l'IAttachmentDTO completo da vedere nell'anteprima. La chiamata sarà in POST e nel body
              * conterrà l'IAttachmentDTO selezionato dall'utente.
@@ -477,7 +495,10 @@
             this.eqpTableSearchText = "Cerca";
             this.deleteDialogTitle = null;
             this.deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
-            this.noImageSelectedErrorMessage = "Non è possibile selezionare un file che non sia un'immagine";
+            this.noImageSelectedErrorMessage = "Non è possibile selezionare un file che non sia un'immagine.";
+            this.wrongTypeSelectedErrorMessage = "Non è possibile caricare il file selezionato.";
+            this.videoPreviewErrorMessage = "Impossibile aprire l'anteprima di un file video.";
+            this.audioPreviewErrorMessage = "Impossibile aprire l'anteprima di un file audio.";
             //#endregion
             //#region @Output del componente
             /**
@@ -498,7 +519,6 @@
             this.attachmentType = exports.AttachmentType;
             this.selectedFile = null;
             this.showCropImage = false;
-            this.acceptedFileTypes = "*";
             //#endregion
             //#region Proprietà per gestione ridimensionamento file di tipo image
             this.imageChangedEvent = '';
@@ -509,10 +529,11 @@
         }
         EqpAttachmentsComponent.prototype.ngOnInit = function () {
             //Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
-            if (this.allowOnlyImages == true)
-                this.acceptedFileTypes = "image/*";
-            else
-                this.acceptedFileTypes = "*";
+            if (!this.acceptedFileTypes)
+                if (this.allowOnlyImages == true)
+                    this.acceptedFileTypes = "image/*";
+                else
+                    this.acceptedFileTypes = "*";
             //Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
             if (this.multipleAttachment == true && (!this.attachmentsColumns || this.attachmentsColumns.length == 0)) {
                 this.configureColumns();
@@ -523,6 +544,10 @@
             // if (!this.compressionOptions || !this.compressionOptions.maxSizeMB || !this.compressionOptions.maxWidthOrHeight)
             //   this.compressionOptions = { maxSizeMB: 0.5, maxWidthOrHeight: 1920, useWebWorker: true };
         };
+        EqpAttachmentsComponent.prototype.reloadData = function () {
+            if (this.attachmentTable)
+                this.attachmentTable.reloadDatatable();
+        };
         EqpAttachmentsComponent.prototype.checkAttachmentImage = function () {
             this.attachmentsList.forEach(function (a) {
                 a.IsImage = AttachmentHelperService.checkImageFromMimeType(a.FileContentType);
@@ -607,7 +632,7 @@
                 var source = "data:" + attachment.FileContentType + ";base64," + attachment.FileDataBase64;
                 var link = document.createElement("a");
                 link.href = source;
-                link.download = attachment.FileName + "." + attachment.FileExtension;
+                link.download = "" + attachment.FileName;
                 link.click();
             }
             else {
@@ -655,6 +680,19 @@
             this.newAttachmentForm.reset();
             this.dialofRefAddAttachment.close();
         };
+        /**
+         * In base al tipo di allegato controlla se disabilitare o meno il pulsante per salvare.
+         * Funzione usata nel [disable] del pulsante "Salva" del dialog per l'aggiunta di un allegato.
+         * @returns
+         */
+        EqpAttachmentsComponent.prototype.disableSave = function () {
+            if (this.newAttachment.AttachmentType == exports.AttachmentType.FILE) {
+                return !this.newAttachment.FileDataBase64;
+            }
+            else {
+                return !this.newAttachment.FilePath;
+            }
+        };
         EqpAttachmentsComponent.prototype.confirmAddAttachment = function () {
             if (this.newAttachment.AttachmentType == exports.AttachmentType.LINK && !this.newAttachment.FileName)
                 this.newAttachment.FileName = this.newAttachment.FilePath;
@@ -666,6 +704,11 @@
             this.localEditedAttachments.emit(this.attachmentsList);
             this.dialofRefAddAttachment.close();
         };
+        /**
+         * Apre il dialog per l'anteprima dell'allegato selezionato.
+         * @param row
+         * @returns
+         */
         EqpAttachmentsComponent.prototype.openPreviewDialog = function (row) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
@@ -673,6 +716,16 @@
                     switch (_a.label) {
                         case 0:
                             this.selectedAttachment = JSON.parse(JSON.stringify(row));
+                            if (this.selectedAttachment.AttachmentType == exports.AttachmentType.FILE) {
+                                if (this.selectedAttachment.FileContentType.startsWith("video")) {
+                                    EqpAttachmentDialogService.Warning(this.videoPreviewErrorMessage);
+                                    return [2 /*return*/];
+                                }
+                                else if (this.selectedAttachment.FileContentType.startsWith("audio")) {
+                                    EqpAttachmentDialogService.Warning(this.audioPreviewErrorMessage);
+                                    return [2 /*return*/];
+                                }
+                            }
                             if (!(this.getAttachmentEndpoint && this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.getAttachmentByID()
                                     .then(function (res) { _this.selectedAttachment.FileDataBase64 = res.FileDataBase64; })
@@ -741,10 +794,15 @@
                             if (this.allowOnlyImages == true && this.newAttachment.IsImage != true) {
                                 EqpAttachmentDialogService.Error(this.noImageSelectedErrorMessage);
                                 this.abortFile();
+                                return [2 /*return*/];
+                            }
+                            else if (!this.checkAcceptedFiles()) {
+                                EqpAttachmentDialogService.Error(this.wrongTypeSelectedErrorMessage);
+                                this.abortFile();
+                                return [2 /*return*/];
                             }
                             if (!(this.newAttachment.IsImage == true)) return [3 /*break*/, 1];
                             this.getImageDimensions(event.target.files[0]);
-                            console.log(this.customHeight, this.customWidth);
                             //Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
                             this.newAttachmentForm.disable();
                             this.newAttachmentForm.controls["customWidth"].enable();
@@ -765,6 +823,36 @@
                 });
             });
         };
+        /**
+         * Controlla se il file che si sta caricando è supportato dal sistema.
+         * @returns
+         */
+        EqpAttachmentsComponent.prototype.checkAcceptedFiles = function () {
+            var e_1, _a;
+            if (this.selectedFile.type.startsWith("video"))
+                return false;
+            if (this.acceptedFileTypes == "*")
+                return true;
+            var accepted = this.acceptedFileTypes.includes(this.selectedFile.type);
+            if (!accepted) {
+                try {
+                    for (var _b = __values(this.acceptedFileTypes.split(",").filter(function (t) { return t.includes("*"); })), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var t = _c.value;
+                        accepted = this.selectedFile.type.startsWith(t.split("*")[0]);
+                        if (accepted)
+                            break;
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            return accepted;
+        };
         EqpAttachmentsComponent.prototype.getImageDimensions = function (img) {
             var _this = this;
             var reader = new FileReader();
@@ -877,6 +965,9 @@
         __decorate([
             core.Input("allowOnlyImages")
         ], EqpAttachmentsComponent.prototype, "allowOnlyImages", void 0);
+        __decorate([
+            core.Input("acceptedFileTypes")
+        ], EqpAttachmentsComponent.prototype, "acceptedFileTypes", void 0);
         __decorate([
             core.Input("isDisabled")
         ], EqpAttachmentsComponent.prototype, "isDisabled", void 0);
@@ -940,6 +1031,15 @@
         __decorate([
             core.Input("noImageSelectedErrorMessage")
         ], EqpAttachmentsComponent.prototype, "noImageSelectedErrorMessage", void 0);
+        __decorate([
+            core.Input("wrongTypeSelectedErrorMessage")
+        ], EqpAttachmentsComponent.prototype, "wrongTypeSelectedErrorMessage", void 0);
+        __decorate([
+            core.Input("videoPreviewErrorMessage")
+        ], EqpAttachmentsComponent.prototype, "videoPreviewErrorMessage", void 0);
+        __decorate([
+            core.Input("videoPreviewErrorMessage")
+        ], EqpAttachmentsComponent.prototype, "audioPreviewErrorMessage", void 0);
         __decorate([
             core.Output()
         ], EqpAttachmentsComponent.prototype, "localEditedAttachments", void 0);
@@ -970,8 +1070,8 @@
         EqpAttachmentsComponent = __decorate([
             core.Component({
                 selector: 'eqp-attachments',
-                template: "<!-- Se richiesta la gestione multipla mostra il pulsante di aggiunta e la tabella con l'elenco allegati -->\r\n<div *ngIf=\"multipleAttachment == true\">\r\n    <mat-card [ngStyle]=\"{ 'box-shadow': showMatCard == false ? 'none' : null }\">\r\n        <mat-card-header>\r\n            <div class=\"col-md-6\">\r\n                <div class=\"text-nowrap eqp-attachments-header-title\" *ngIf=\"showHeader == true\">\r\n                    {{headerTitle}}\r\n                </div>\r\n            </div>\r\n            <div class=\"col-md-6 text-right\">\r\n                <div class=\"row justify-content-end\">\r\n                    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\"\r\n                        type=\"button\" [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\">\r\n                        <mat-icon>add</mat-icon><span> {{addButtonLabel}} </span>\r\n                    </button>\r\n                    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n                        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n                            <i class=\"fas fa-file\"></i>\r\n                            <span style=\"margin-left: 10px;\">File</span>\r\n                        </button>\r\n                        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n                            <i class=\"fas fa-link\"></i>\r\n                            <span style=\"margin-left: 10px;\">Link</span>\r\n                        </button>\r\n                    </mat-menu>\r\n                </div>\r\n            </div>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n            <eqp-table #attachmentTable [createMatCard]=\"false\" #table [columns]=\"attachmentsColumns\"\r\n                [data]=\"attachmentsList\" [emptyTableMessage]=\"emptyTableMessage\" [searchText]=\"eqpTableSearchText\">\r\n            </eqp-table>\r\n        </mat-card-content>\r\n    </mat-card>\r\n</div>\r\n\r\n<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n        *ngIf=\"!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])\">\r\n        <mat-icon>cloud_upload</mat-icon><span> {{addButtonLabel}} </span>\r\n    </button>\r\n    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n            <i class=\"fas fa-file\"></i>\r\n            <span style=\"margin-left: 10px;\">File</span>\r\n        </button>\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n            <i class=\"fas fa-link\"></i>\r\n            <span style=\"margin-left: 10px;\">Link</span>\r\n        </button>\r\n    </mat-menu>\r\n\r\n    <button class=\"mb-2 mr-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n        <mat-icon>download</mat-icon> {{attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel :\r\n        openLinkLabel}}\r\n    </button>\r\n    <button class=\"mb-2 mr-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n        <mat-icon>visibility</mat-icon> {{previewLabel}}\r\n    </button>\r\n    <button class=\"mb-2 eqp-attachments-delete-btn\" (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n        [disabled]=\"isDisabled\">\r\n        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n    </button>\r\n\r\n    <div class=\"row\" style=\"margin-top: 10px;\"\r\n        *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].FileDataBase64 && attachmentsList[0].IsImage == true\">\r\n        <div class=\"col-sm-12\">\r\n            <div class=\"single-attachment-inline-preview-container\">\r\n                <img src=\"data:image/png;base64,{{attachmentsList[0].FileDataBase64}}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].IsImage != true\">\r\n        <div class=\"col-sm-12\">\r\n            <mat-form-field>\r\n                <mat-label>{{fileNameLabel}}</mat-label>\r\n                <input readonly matInput [(ngModel)]=\"attachmentsList[0].FileName\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #dialogAddAttachment>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\">\r\n        <form [formGroup]=\"newAttachmentForm\" (ngSubmit)=\"confirmAddAttachment()\" *ngIf=\"newAttachmentForm\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\"> {{addButtonLabel}} {{ newAttachment.AttachmentType ==\r\n                    attachmentType.FILE ?\r\n                    'File' : 'Link'}} </div>\r\n            </div>\r\n            <div class=\"row\" style=\"margin-top: 20px;\">\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == attachmentType.FILE\">\r\n                    <input #imageInput style=\"display:none;\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n                        (change)=\"onFileInputChange($event)\" [accept]=\"acceptedFileTypes\" />\r\n                    <button (click)=\"imageInput.click()\" type=\"button\" style=\"margin-left: 10px;\" id=\"file_attachment\"\r\n                        mat-raised-button color=\"primary\" [disabled]=\"showCropImage == true\"\r\n                        class=\"mb-2 btn btn-primary eqp-attachments-upload-btn\" *ngIf=\"!newAttachment.FileDataBase64\">\r\n                        <mat-icon>cloud_upload</mat-icon>\r\n                        {{uploadFileLabel}}\r\n                    </button>\r\n                    <button (click)=\"abortFile()\" type=\"button\" style=\"margin-left: 10px;\" mat-raised-button\r\n                        *ngIf=\"newAttachment.FileDataBase64\" class=\"mb-2 eqp-attachments-delete-btn\">\r\n                        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2 || selectedFile\">\r\n                    <mat-form-field>\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input formControlName=\"name\" matInput [(ngModel)]=\"newAttachment.FileName\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Link </mat-label>\r\n                        <input formControlName=\"path\" required matInput [(ngModel)]=\"newAttachment.FilePath\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\"\r\n                *ngIf=\"showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\"\r\n                style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newAttachment.FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"row mt-2 mb-2\" *ngIf=\"showCropImage == true\">\r\n                <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n                    <span class=\"mr-1\">Max H(px):</span>\r\n                    <mat-form-field>\r\n                        <input formControlName=\"customHeight\" type=\"number\" matInput [(ngModel)]=\"customHeight\"\r\n                            (change)=\"onDimensionsChange('H')\">\r\n                    </mat-form-field>\r\n\r\n                    <span class=\"ml-2 mr-1\">Max W(px):</span>\r\n                    <mat-form-field>\r\n                        <input formControlName=\"customWidth\" type=\"number\" matInput [(ngModel)]=\"customWidth\"\r\n                            (change)=\"onDimensionsChange('W')\">\r\n                    </mat-form-field>\r\n\r\n                    <button class=\"btn btn-primary mat-raised-button ml-2\" (click)=\"restoreOriginalDimensions()\"\r\n                        [disabled]=\"customWidth == originalWidth && customHeight == originalHeight\">\r\n                        <mat-icon style=\"vertical-align: middle;\">replay</mat-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"row justify-content-center\" *ngIf=\"showCropImage == true\">\r\n                <div style=\"max-height: 450px; max-width: 450px;\">\r\n                    <image-cropper [imageChangedEvent]=\"imageChangedEvent\" [maintainAspectRatio]=\"false\"\r\n                        [autoCrop]=\"false\" [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4/3\"\r\n                        [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\" [roundCropper]=\"false\" [canvasRotation]=\"0\"\r\n                        [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\" (imageCropped)=\"imageCropped($event)\"\r\n                        [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\">\r\n                    </image-cropper>\r\n                </div>\r\n            </div>\r\n            <div class=\"row justify-content-center mt-2\" *ngIf=\"showCropImage == true\">\r\n                <div style=\"max-height: 450px; max-width: 450px;\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn mr-2\" type=\"button\"\r\n                        (click)=\"confirmCrop()\">\r\n                        {{confirmLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-abort-btn\" type=\"button\" (click)=\"abortFile()\">\r\n                        {{abortLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mt-2\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                        [disabled]=\"showCropImage == true || newAttachmentForm?.disabled == true\">\r\n                        {{saveLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" (click)=\"close()\"\r\n                        [disabled]=\"showCropImage == true\" type=\"button\">\r\n                        {{exitLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <img src=\"data:image/png;base64,{{row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64}}\">\r\n    </div>\r\n    <div class=\"inline-preview-container\" *ngIf=\"!row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\" *ngIf=\"selectedAttachment\">\r\n        <div class=\"row\">\r\n            <div class=\"header-title-standard\">\r\n                {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-2\">\r\n            <!-- ANTEPRIMA IMMAGINE -->\r\n            <div class=\"col-12 text-center\" *ngIf=\"selectedAttachment.IsImage\">\r\n                <img class=\"image-preview\"\r\n                    src=\"data:image/png;base64,{{selectedAttachment.FileDataBase64 ? selectedAttachment.FileDataBase64 : selectedAttachment.FileThumbnailBase64}}\">\r\n            </div>\r\n\r\n            <!-- ANTEPRIMA LINK -->\r\n            <div class=\"col-12\" *ngIf=\"!selectedAttachment.IsImage\">\r\n                <iframe class=\"link-preview\" [src]=\"selectedAttachment.TrustedUrl\"\r\n                    [title]=\"selectedAttachment.FileName\"></iframe>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-3\">\r\n            <div class=\"col-sm-12 text-right\">\r\n                <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                    (click)=\"viewAttachment(selectedAttachment)\"\r\n                    *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n                    {{downloadLabel}}\r\n                </button>\r\n                <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" mat-dialog-close type=\"button\"\r\n                    (click)=\"selectedAttachment = null\">\r\n                    {{exitLabel}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>",
-                styles: [".eqp-attachments-header-title{font-weight:700;font-size:19px;line-height:24px;margin-bottom:auto}.single-attachment-inline-preview-container{max-height:400px;max-width:400px;display:flex;align-items:center}.single-attachment-inline-preview-container img{max-width:100%;max-height:120px}.inline-preview-container{max-height:100px;max-width:100px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer}.inline-preview-container img{max-width:100%;max-height:100px}.inline-preview-container i{font-size:25px;margin:auto}.image-preview{max-width:100%;max-height:100%}.link-preview{width:70vw;height:55vh}"]
+                template: "<!-- Se richiesta la gestione multipla mostra il pulsante di aggiunta e la tabella con l'elenco allegati -->\r\n<div *ngIf=\"multipleAttachment == true\">\r\n    <mat-card [ngStyle]=\"{ 'box-shadow': showMatCard == false ? 'none' : null }\">\r\n        <mat-card-header>\r\n            <div class=\"col-md-6\">\r\n                <div class=\"text-nowrap eqp-attachments-header-title\" *ngIf=\"showHeader == true\">\r\n                    {{headerTitle}}\r\n                </div>\r\n            </div>\r\n            <div class=\"col-md-6 text-right\">\r\n                <div class=\"row justify-content-end\">\r\n                    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\"\r\n                        type=\"button\" [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\">\r\n                        <mat-icon>add</mat-icon><span> {{addButtonLabel}} </span>\r\n                    </button>\r\n                    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n                        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n                            <i class=\"fas fa-file\"></i>\r\n                            <span style=\"margin-left: 10px;\">File</span>\r\n                        </button>\r\n                        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n                            <i class=\"fas fa-link\"></i>\r\n                            <span style=\"margin-left: 10px;\">Link</span>\r\n                        </button>\r\n                    </mat-menu>\r\n                </div>\r\n            </div>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n            <eqp-table #attachmentTable [createMatCard]=\"false\" #table [columns]=\"attachmentsColumns\"\r\n                [data]=\"attachmentsList\" [emptyTableMessage]=\"emptyTableMessage\" [searchText]=\"eqpTableSearchText\">\r\n            </eqp-table>\r\n        </mat-card-content>\r\n    </mat-card>\r\n</div>\r\n\r\n<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n        *ngIf=\"!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])\">\r\n        <mat-icon>cloud_upload</mat-icon><span> {{addButtonLabel}} </span>\r\n    </button>\r\n    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n            <i class=\"fas fa-file\"></i>\r\n            <span style=\"margin-left: 10px;\">File</span>\r\n        </button>\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n            <i class=\"fas fa-link\"></i>\r\n            <span style=\"margin-left: 10px;\">Link</span>\r\n        </button>\r\n    </mat-menu>\r\n\r\n    <button class=\"mb-2 mr-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType == AttachmentType.FILE\">download</mat-icon>\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType != AttachmentType.FILE\">open_in_new</mat-icon>\r\n        {{attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel}}\r\n    </button>\r\n    <button class=\"mb-2 mr-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button color=\"primary\"\r\n        *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio')))\">\r\n        <mat-icon>visibility</mat-icon> {{previewLabel}}\r\n    </button>\r\n    <button class=\"mb-2 eqp-attachments-delete-btn\" (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n        [disabled]=\"isDisabled\">\r\n        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n    </button>\r\n\r\n    <div class=\"row\" style=\"margin-top: 10px;\"\r\n        *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].FileDataBase64 && attachmentsList[0].IsImage == true\">\r\n        <div class=\"col-sm-12\">\r\n            <div class=\"single-attachment-inline-preview-container\">\r\n                <img src=\"data:image/png;base64,{{attachmentsList[0].FileDataBase64}}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].IsImage != true\">\r\n        <div class=\"col-sm-12\">\r\n            <mat-form-field>\r\n                <mat-label>{{fileNameLabel}}</mat-label>\r\n                <input readonly matInput [(ngModel)]=\"attachmentsList[0].FileName\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #dialogAddAttachment>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\">\r\n        <form [formGroup]=\"newAttachmentForm\" (ngSubmit)=\"confirmAddAttachment()\" *ngIf=\"newAttachmentForm\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\"> {{addButtonLabel}} {{ newAttachment.AttachmentType ==\r\n                    attachmentType.FILE ?\r\n                    'File' : 'Link'}} </div>\r\n            </div>\r\n            <div class=\"row\" style=\"margin-top: 20px;\">\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == attachmentType.FILE\">\r\n                    <input #imageInput style=\"display:none;\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n                        (change)=\"onFileInputChange($event)\" [accept]=\"acceptedFileTypes\" />\r\n                    <button (click)=\"imageInput.click()\" type=\"button\" style=\"margin-left: 10px;\" id=\"file_attachment\"\r\n                        mat-raised-button color=\"primary\" [disabled]=\"showCropImage == true\"\r\n                        class=\"mb-2 btn btn-primary eqp-attachments-upload-btn\" *ngIf=\"!newAttachment.FileDataBase64\">\r\n                        <mat-icon>cloud_upload</mat-icon>\r\n                        {{uploadFileLabel}}\r\n                    </button>\r\n                    <button (click)=\"abortFile()\" type=\"button\" style=\"margin-left: 10px;\" mat-raised-button\r\n                        *ngIf=\"newAttachment.FileDataBase64\" class=\"mb-2 eqp-attachments-delete-btn\">\r\n                        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2 || selectedFile\">\r\n                    <mat-form-field>\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input formControlName=\"name\" matInput [(ngModel)]=\"newAttachment.FileName\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Link </mat-label>\r\n                        <input formControlName=\"path\" required matInput [(ngModel)]=\"newAttachment.FilePath\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\"\r\n                *ngIf=\"showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\"\r\n                style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newAttachment.FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"row mt-2 mb-2\" *ngIf=\"showCropImage == true\">\r\n                <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n                    <span class=\"mr-1\">Max H(px):</span>\r\n                    <mat-form-field>\r\n                        <input formControlName=\"customHeight\" type=\"number\" matInput [(ngModel)]=\"customHeight\"\r\n                            (change)=\"onDimensionsChange('H')\">\r\n                    </mat-form-field>\r\n\r\n                    <span class=\"ml-2 mr-1\">Max W(px):</span>\r\n                    <mat-form-field>\r\n                        <input formControlName=\"customWidth\" type=\"number\" matInput [(ngModel)]=\"customWidth\"\r\n                            (change)=\"onDimensionsChange('W')\">\r\n                    </mat-form-field>\r\n\r\n                    <button class=\"btn btn-primary mat-raised-button ml-2\" (click)=\"restoreOriginalDimensions()\"\r\n                        [disabled]=\"customWidth == originalWidth && customHeight == originalHeight\">\r\n                        <mat-icon style=\"vertical-align: middle;\">replay</mat-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"row justify-content-center\" *ngIf=\"showCropImage == true\">\r\n                <div style=\"max-height: 450px; max-width: 450px;\">\r\n                    <image-cropper [imageChangedEvent]=\"imageChangedEvent\" [maintainAspectRatio]=\"false\"\r\n                        [autoCrop]=\"false\" [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4/3\"\r\n                        [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\" [roundCropper]=\"false\" [canvasRotation]=\"0\"\r\n                        [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\" (imageCropped)=\"imageCropped($event)\"\r\n                        [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\">\r\n                    </image-cropper>\r\n                </div>\r\n            </div>\r\n            <div class=\"row justify-content-center mt-2\" *ngIf=\"showCropImage == true\">\r\n                <div style=\"max-height: 450px; max-width: 450px;\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn mr-2\" type=\"button\"\r\n                        (click)=\"confirmCrop()\">\r\n                        {{confirmLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-abort-btn\" type=\"button\" (click)=\"abortFile()\">\r\n                        {{abortLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mt-2\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                        [disabled]=\"showCropImage == true || newAttachmentForm?.disabled == true || disableSave()\">\r\n                        {{saveLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" (click)=\"close()\"\r\n                        [disabled]=\"showCropImage == true\" type=\"button\">\r\n                        {{exitLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <img src=\"data:image/png;base64,{{row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64}}\">\r\n    </div>\r\n    <div class=\"inline-preview-container\" *ngIf=\"!row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\" *ngIf=\"selectedAttachment\">\r\n        <div class=\"row\">\r\n            <div class=\"header-title-standard\">\r\n                {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-2\">\r\n            <!-- ANTEPRIMA IMMAGINE -->\r\n            <div class=\"col-12 text-center preview-container\" *ngIf=\"selectedAttachment.IsImage\">\r\n                <img class=\"image-preview\"\r\n                    src=\"data:image/png;base64,{{selectedAttachment.FileDataBase64 ? selectedAttachment.FileDataBase64 : selectedAttachment.FileThumbnailBase64}}\">\r\n            </div>\r\n\r\n            <!-- ANTEPRIMA LINK -->\r\n            <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n                <iframe class=\"link-preview\" [src]=\"selectedAttachment.TrustedUrl\"\r\n                    [title]=\"selectedAttachment.FileName\"></iframe>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-3\">\r\n            <div class=\"col-sm-12 text-right\">\r\n                <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                    (click)=\"viewAttachment(selectedAttachment)\"\r\n                    *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n                    {{downloadLabel}}\r\n                </button>\r\n                <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" mat-dialog-close type=\"button\"\r\n                    (click)=\"selectedAttachment = null\">\r\n                    {{exitLabel}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>",
+                styles: [".eqp-attachments-header-title{font-weight:700;font-size:19px;line-height:24px;margin-bottom:auto}.single-attachment-inline-preview-container{max-height:400px;max-width:400px;display:flex;align-items:center}.single-attachment-inline-preview-container img{max-width:100%;max-height:120px}.inline-preview-container{max-height:100px;max-width:100px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer}.inline-preview-container img{max-width:100%;max-height:100px}.inline-preview-container i{font-size:25px;margin:auto}.preview-container{max-height:60vh;max-width:100%}.preview-container .image-preview{max-width:100%;max-height:100%}.preview-container .link-preview{width:70vw;height:55vh}"]
             })
         ], EqpAttachmentsComponent);
         return EqpAttachmentsComponent;