@eqproject/eqp-attachments 0.1.12 → 0.1.13

package/README.md

@@ -55,6 +55,7 @@ export class AppModule {}
 | [attachmentsList] | `Array<IAttachmentDTO>` | `null` | no | Defines the initial array of attachments. If not passed it is instantiated as an empty array. Even in case `multipleAttachment` is set to FALSE you need to pass the eventual attachment as an Array. |
 | [showMatCard] | `boolean` | `true` | no | If TRUE applies the `box-shadow` style of the mat-card |
 | [multipleAttachment] | `boolean` | `true` | no | Defines how many attachments the directive needs to handle. If TRUE shows an eqp-table containing the values of `attachmentsList` with the possibility to download/open or delete any row. With any other value it shows only a button to upload one IAttachmentDTO (link or file).  |
+| [loadMultipleFiles] | `boolean` | `false` | no | If it assumes the value TRUE then it will be possible to load multiple files at the same time. This feature is active ONLY if you manage multiple attachments, so if the `multipleAttachment` input takes on the value TRUE, otherwise it is always disabled. |
 | [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. |

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

@@ -406,11 +406,12 @@
     }); };
     var ɵ0 = toBase64;
     var EqpAttachmentsComponent = /** @class */ (function () {
-        function EqpAttachmentsComponent(dialog, formBuilder, sanitizer, http) {
+        function EqpAttachmentsComponent(dialog, formBuilder, sanitizer, http, cd) {
             this.dialog = dialog;
             this.formBuilder = formBuilder;
             this.sanitizer = sanitizer;
             this.http = http;
+            this.cd = cd;
             //#region @Input del componente
             /**
              * Se TRUE allora nasconde la colonna per le azioni sull'allegato (nel caso "multipleAttachment" è TRUE).
@@ -437,6 +438,11 @@
              * Se TRUE allora il componente mostra l'elenco di tutti gli allegati ricevuto nel parametro "attachmentsList".
              */
             this.multipleAttachment = true;
+            /**
+             * Se assume il valore TRUE allora sarà possibile caricare più file per volta. Questa funzionalità è attiva
+             * SOLO se si gestiscono allegati multipli, quindi se l'input 'multipleAttachment' assume il valore TRUE, altrimenti è sempre disabilitata.
+             */
+            this.loadMultipleFiles = false;
             /**
              * Configurazione delle colonne della eqp-table per la visualizzazione degli allegati (caso "multipleAttachment" è TRUE).
              */
@@ -524,8 +530,10 @@
             //#endregion
             //#region Proprietà per gestione caricamento nuovo allegato
             this.newAttachment = {};
+            this.newMultipleAttachments = [];
             this.attachmentType = exports.AttachmentType;
             this.selectedFile = null;
+            this.selectedFiles = null;
             this.showCropImage = false;
             //#endregion
             //#region Proprietà per gestione ridimensionamento file di tipo image
@@ -556,8 +564,6 @@
             if (this.attachmentsList == null)
                 this.attachmentsList = new Array();
             this.checkAttachmentImage();
-            // 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)
@@ -670,9 +676,25 @@
          * Apre la modale per la definizione dei parametri del nuovo file
          */
         EqpAttachmentsComponent.prototype.openModalAddAttachment = function (attachmentType) {
+            //Se è stato richiesto il caricamento di un LINK o è impostato il caricamento di FILE SINGOLO allora apre la modale per
+            //il caricamento singolo del file altrimenti apre quella per il caricamento multiplo
+            // if (attachmentType == AttachmentType.LINK || (attachmentType == AttachmentType.FILE && this.loadMultipleFiles != true)) {
             this.newAttachment = {};
             this.newAttachment.IsImage = false;
             this.newAttachment.AttachmentType = attachmentType;
+            this.newMultipleAttachments = new Array();
+            if (attachmentType == exports.AttachmentType.LINK)
+                this.newMultipleAttachments.push(this.newAttachment);
+            this.createAttachmentForm();
+            //Apre la modale
+            this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
+                disableClose: true,
+                hasBackdrop: true,
+                width: '60%',
+                maxHeight: '80%'
+            });
+        };
+        EqpAttachmentsComponent.prototype.createAttachmentForm = function () {
             //Crea la form per la validazione dei campi
             this.newAttachmentForm = this.formBuilder.group({
                 type: [this.newAttachment.AttachmentType, forms.Validators.required],
@@ -681,18 +703,13 @@
                 customHeight: [this.customHeight],
                 customWidth: [this.customWidth]
             });
-            //Apre la modale
-            this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
-                disableClose: true,
-                hasBackdrop: true,
-                width: '60%',
-                maxHeight: '80%'
-            });
         };
         EqpAttachmentsComponent.prototype.close = function () {
             this.newAttachment = {};
+            this.newMultipleAttachments = new Array();
             this.abortFile();
-            this.newAttachmentForm.reset();
+            if (this.newAttachmentForm)
+                this.newAttachmentForm.reset();
             this.dialofRefAddAttachment.close();
         };
         /**
@@ -701,23 +718,37 @@
          * @returns
          */
         EqpAttachmentsComponent.prototype.disableSave = function () {
-            if (this.newAttachment.AttachmentType == exports.AttachmentType.FILE) {
-                return !this.newAttachment.FileDataBase64;
+            if (this.loadMultipleFiles != true) {
+                if (this.newAttachment.AttachmentType == exports.AttachmentType.FILE) {
+                    return !this.newAttachment.FileDataBase64;
+                }
+                else {
+                    return !this.newAttachment.FilePath;
+                }
             }
             else {
-                return !this.newAttachment.FilePath;
+                return this.newMultipleAttachments.filter(function (p) { return (p.AttachmentType == exports.AttachmentType.FILE && !p.FileDataBase64) || (p.AttachmentType == exports.AttachmentType.LINK && !p.FilePath); }).length > 0;
             }
         };
         EqpAttachmentsComponent.prototype.confirmAddAttachment = function () {
-            if (this.newAttachment.AttachmentType == exports.AttachmentType.LINK && !this.newAttachment.FileName)
-                this.newAttachment.FileName = this.newAttachment.FilePath;
-            if (this.attachmentsList == null)
-                this.attachmentsList = new Array();
-            this.attachmentsList.push(this.newAttachment);
+            if (this.loadMultipleFiles != true) {
+                if (this.newAttachment.AttachmentType == exports.AttachmentType.LINK && !this.newAttachment.FileName)
+                    this.newAttachment.FileName = this.newAttachment.FilePath;
+                if (this.attachmentsList == null)
+                    this.attachmentsList = new Array();
+                this.attachmentsList.push(this.newAttachment);
+            }
+            else {
+                if (this.newMultipleAttachments == null || this.newMultipleAttachments.length == 0)
+                    return;
+                if (this.attachmentsList == null)
+                    this.attachmentsList = new Array();
+                this.attachmentsList = this.attachmentsList.concat(this.newMultipleAttachments);
+            }
             if (this.attachmentTable)
                 this.attachmentTable.reloadDatatable();
             this.localEditedAttachments.emit(this.attachmentsList);
-            this.dialofRefAddAttachment.close();
+            this.close();
         };
         /**
          * Apre il dialog per l'anteprima dell'allegato selezionato.
@@ -787,36 +818,39 @@
         };
         //#region Gestione caricamento file
         /**
-         * Se il file caricato è un immagine allora mostra le funzionalità del croppie per ritagliare l'immagine altrimenti
-         * converte il file in base64 e lo associa all'allegato da salvare
+         * Evento scatenato alla selezione del file (o dei file).
+         * Se il caricamento è SINGOLO o se comunque è stato selezionato un solo file allora si occupa di controllare se si tratta di un immagine in modo da
+         * mostrare le funzionalità del croppie (per ritagliare l'immagine) oppure no.
+         * Se il file caricato non è un immagine allora genera direttamente il base64 e lo associa all'allegato da salvare.
+         * Se invece il caricamento dei file è MULTIPLO e sono presenti più file allora esegue le stesse operazioni ignorando però il contrllo
+         * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
          */
         EqpAttachmentsComponent.prototype.onFileInputChange = function (event) {
             return __awaiter(this, void 0, void 0, function () {
-                var base64File;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var _a, checkOnlyImage, base64Result, i, newAttachment, checkOnlyImage;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             this.showCropImage = false;
+                            if (!(__spread(event.target.files).length == 1 || this.loadMultipleFiles != true)) return [3 /*break*/, 5];
                             this.selectedFile = event.target.files[0];
+                            this.selectedFiles = event.target.files;
                             if (!this.selectedFile)
                                 return [2 /*return*/];
                             //Memorizza i dati per l'allegato        
-                            this.newAttachment.FileContentType = this.selectedFile.type;
-                            this.newAttachment.FileName = this.selectedFile.name;
-                            this.newAttachment.FileExtension = this.selectedFile.name.substr(this.selectedFile.name.lastIndexOf('.') + 1);
-                            this.newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(this.selectedFile.type);
-                            //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
-                            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();
+                            _a = this;
+                            return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFile, false)];
+                        case 1:
+                            //Memorizza i dati per l'allegato        
+                            _a.newAttachment = _b.sent();
+                            this.newMultipleAttachments = new Array();
+                            this.newMultipleAttachments.push(this.newAttachment);
+                            checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
+                            if (checkOnlyImage == false)
                                 return [2 /*return*/];
-                            }
-                            if (!(this.newAttachment.IsImage == true)) return [3 /*break*/, 1];
+                            if (this.loadMultipleFiles == true && __spread(event.target.files).length == 1)
+                                this.createAttachmentForm();
+                            if (!(this.newAttachment.IsImage == true)) return [3 /*break*/, 2];
                             this.getImageDimensions(event.target.files[0]);
                             //Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
                             this.newAttachmentForm.disable();
@@ -824,23 +858,103 @@
                             this.newAttachmentForm.controls["customHeight"].enable();
                             this.showCropImage = true;
                             this.imageChangedEvent = event;
-                            return [3 /*break*/, 3];
-                        case 1:
-                            this.showCropImage = false;
-                            return [4 /*yield*/, toBase64(this.selectedFile)];
+                            return [3 /*break*/, 4];
                         case 2:
+                            this.showCropImage = false;
+                            return [4 /*yield*/, this.getBase64FromFile(this.selectedFile)];
+                        case 3:
+                            base64Result = _b.sent();
+                            this.newAttachment.FileDataBase64 = base64Result.Base64File;
+                            this.newAttachment.FileContentType = base64Result.ContentType;
+                            _b.label = 4;
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
+                            this.selectedFiles = event.target.files;
+                            if (!this.selectedFiles || this.selectedFiles.length == 0)
+                                return [2 /*return*/];
+                            this.newMultipleAttachments = new Array();
+                            i = 0;
+                            _b.label = 6;
+                        case 6:
+                            if (!(i < this.selectedFiles.length)) return [3 /*break*/, 9];
+                            return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFiles[i], true)];
+                        case 7:
+                            newAttachment = _b.sent();
+                            checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
+                            if (checkOnlyImage == false)
+                                return [2 /*return*/];
+                            this.newMultipleAttachments.push(newAttachment);
+                            _b.label = 8;
+                        case 8:
+                            i++;
+                            return [3 /*break*/, 6];
+                        case 9: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * A partire dal FILE ricevuto in input ricostruisce l'oggetto IAttachmentDTO e lo restituisce.
+         * Se il parametro getBase64 viene passato a TRUE allora, sempre a partire dal file,genera il base64 e
+         * ricava il ContentType da associare all'oggetto IAttachmentDTO da restituire
+         * @param currentFile Oggetto FILE da processare
+         * @param getBase64 Se TRUE allora calcola base64 e ContentType del file passato in input
+         * @returns Restituisce un oggetto di tipo IAttachmentDTO
+         */
+        EqpAttachmentsComponent.prototype.createAttachmentFromUploadedFile = function (currentFile, getBase64) {
+            if (getBase64 === void 0) { getBase64 = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var newAttachment, base64Result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            newAttachment = {};
+                            //Memorizza i dati per l'allegato        
+                            newAttachment.AttachmentType = exports.AttachmentType.FILE;
+                            newAttachment.FileContentType = currentFile.type;
+                            newAttachment.FileName = currentFile.name;
+                            newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf('.') + 1);
+                            newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
+                            if (!(getBase64 == true)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.getBase64FromFile(currentFile)];
+                        case 1:
+                            base64Result = _a.sent();
+                            newAttachment.FileDataBase64 = base64Result.Base64File;
+                            newAttachment.FileContentType = base64Result.ContentType;
+                            _a.label = 2;
+                        case 2: return [2 /*return*/, newAttachment];
+                    }
+                });
+            });
+        };
+        /**
+         * A partire dal file passato in input restituisce un oggetto
+         * contenente il base64 del file e il suo contentType
+         * @param currentFile Oggetto File da cui estrapolare base64 e contentType
+         * @returns Restituisce un oggetto avente le proprietà Base64File e ContentType
+         */
+        EqpAttachmentsComponent.prototype.getBase64FromFile = function (currentFile) {
+            return __awaiter(this, void 0, void 0, function () {
+                var base64File, contentType, result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, toBase64(currentFile)];
+                        case 1:
                             base64File = _a.sent();
+                            contentType = null;
                             if (base64File) {
                                 // Loris 20/01/2022: PROBLEMA - Quando eseguo l'upload di un file .sql non viene salvato/scaricato correttamente.
                                 //                   Questo succede perchè non viene popolato il FileContentType. Per risolvere il problema
                                 //                   faccio un controllo e se non esiste il FileContentType allora lo recupero dal base64 ottenuto.
-                                this.newAttachment.FileContentType = !this.newAttachment.FileContentType ? base64File.split(",")[0].split(":")[1].split(";")[0] : this.newAttachment.FileContentType;
+                                contentType = base64File.split(",")[0].split(":")[1].split(";")[0];
                                 // Un altro metodo per leggere il ccontent type del file è tramite una regular expression:
-                                // this.newAttachment.FileContentType = !this.newAttachment.FileContentType ? base64File.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : this.newAttachment.FileContentType;
-                                this.newAttachment.FileDataBase64 = base64File.split(",")[1];
+                                base64File = base64File.split(",")[1];
                             }
-                            _a.label = 3;
-                        case 3: return [2 /*return*/];
+                            result = {
+                                Base64File: base64File,
+                                ContentType: contentType
+                            };
+                            return [2 /*return*/, result];
                     }
                 });
             });
@@ -851,12 +965,25 @@
          */
         EqpAttachmentsComponent.prototype.checkAcceptedFiles = function () {
             var e_1, _a;
-            if (this.selectedFile.type.startsWith("video"))
+            var _this = this;
+            if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video"))
+                || (this.loadMultipleFiles == true && __spread(this.selectedFiles).filter(function (p) { return p.type.startsWith("video"); }).length > 0))
                 return false;
             if (this.acceptedFileTypes == "*")
                 return true;
-            var accepted = this.acceptedFileTypes.includes(this.selectedFile.type);
-            if (!accepted) {
+            //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
+            var accepted = true;
+            if (this.loadMultipleFiles != true)
+                accepted = this.acceptedFileTypes.includes(this.selectedFile.type);
+            else {
+                var uploadedFileTypes = __spread(this.selectedFiles).map(function (p) { return p.type; });
+                uploadedFileTypes.forEach(function (type) {
+                    if (!_this.acceptedFileTypes.includes(type))
+                        accepted = false;
+                });
+            }
+            //Questo controllo permette di gestire le casistiche per cui vengono indicati come tipi validi, ad esempio, 'image/*'
+            if (!accepted && this.loadMultipleFiles != true) {
                 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;
@@ -875,6 +1002,24 @@
             }
             return accepted;
         };
+        /**
+         * Se eqp-attachments è stata configurata per il caricamento delle sole immagini allora verifica che il file passato in
+         * input sia effettivamente un immagine o no.
+         * Se il controllo va a buon fine restituisce TRUE altrimenti mostra un messaggio d'errore e restituisce FALSE
+         */
+        EqpAttachmentsComponent.prototype.checkAllowOnlyImageFile = function (newAttachment) {
+            if (this.allowOnlyImages == true && newAttachment.IsImage != true) {
+                EqpAttachmentDialogService.Error(this.noImageSelectedErrorMessage);
+                this.abortFile();
+                return false;
+            }
+            else if (!this.checkAcceptedFiles()) {
+                EqpAttachmentDialogService.Error(this.wrongTypeSelectedErrorMessage);
+                this.abortFile();
+                return false;
+            }
+            return true;
+        };
         EqpAttachmentsComponent.prototype.getImageDimensions = function (img) {
             var _this = this;
             var reader = new FileReader();
@@ -943,12 +1088,14 @@
             if (this.imageInput)
                 this.imageInput.nativeElement.value = '';
             this.selectedFile = null;
+            this.selectedFiles = null;
             this.showCropImage = false;
             this.newAttachment.IsImage = false;
             this.newAttachment.FileDataBase64 = null;
             this.newAttachment.FileName = null;
             this.newAttachment.FileExtension = null;
             this.newAttachment.FileContentType = null;
+            this.newMultipleAttachments = new Array();
             this.customHeight = null;
             this.customWidth = null;
             this.originalHeight = null;
@@ -958,7 +1105,8 @@
             { type: dialog.MatDialog },
             { type: forms.FormBuilder },
             { type: platformBrowser.DomSanitizer },
-            { type: http.HttpClient }
+            { type: http.HttpClient },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input("disableAction")
@@ -978,6 +1126,9 @@
         __decorate([
             core.Input("multipleAttachment")
         ], EqpAttachmentsComponent.prototype, "multipleAttachment", void 0);
+        __decorate([
+            core.Input("loadMultipleFiles")
+        ], EqpAttachmentsComponent.prototype, "loadMultipleFiles", void 0);
         __decorate([
             core.Input("attachmentsColumns")
         ], EqpAttachmentsComponent.prototype, "attachmentsColumns", void 0);
@@ -1080,6 +1231,9 @@
         __decorate([
             core.ViewChild('dialogAddAttachment', { static: true })
         ], EqpAttachmentsComponent.prototype, "dialogAddAttachment", void 0);
+        __decorate([
+            core.ViewChild('dialogAddMultipleAttachment', { static: true })
+        ], EqpAttachmentsComponent.prototype, "dialogAddMultipleAttachment", void 0);
         __decorate([
             core.ViewChild(ngxImageCropper.ImageCropperComponent)
         ], EqpAttachmentsComponent.prototype, "imageCropper", void 0);
@@ -1098,7 +1252,7 @@
         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                    <!-- Template del button per l'aggiunta di un allegato -->\r\n                    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\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\" [isMultiLanguage]=\"isEqpTableMultiLanguage\"\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    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\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 eqp-attachments-dialog-add-container\"\r\n        style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\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>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n\r\n    <!-- \r\n        Pulsanti per l'aggiunta di un file o un link. Ne viene visualizzato uno se:\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di pi\u00F9 allegati (multipleAttachment == true)\r\n        OPPURE\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di un singolo allegato (multipleAttachment == true) e non ne \u00E8 ancora stato selezionato uno (ovvero attachmentsList non esiste o non ha elementi)\r\n    -->\r\n    <button class=\"btn btn-primary  mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\"\r\n        (click)=\"openModalAddAttachment(allowedTypes[0])\" [disabled]=\"isDisabled\">\r\n        <!-- Per l'aggiunta dei file mostro un'icona diversa dall'aggiunta dei link -->\r\n        <mat-icon *ngIf=\"allowedTypes[0] == 1\">cloud_upload</mat-icon>\r\n        <i class=\"fas fa-link\" *ngIf=\"allowedTypes[0] == 2\"></i>\r\n        <span style=\"margin-left: 10px;\">{{addButtonLabel}} {{allowedTypes[0] == 1 ? \"file\" : \"link\"}}</span>\r\n    </button>\r\n\r\n\r\n    <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\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=\"allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n        <mat-icon *ngIf=\"multipleAttachment != true\">cloud_upload</mat-icon>\r\n        <mat-icon *ngIf=\"multipleAttachment == true\">add</mat-icon>\r\n        <span style=\"margin-left: 0px;\"> {{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</ng-template>",
+                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                    <!-- Template del button per l'aggiunta di un allegato -->\r\n                    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\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                [isMultiLanguage]=\"isEqpTableMultiLanguage\" [data]=\"attachmentsList\"\r\n                [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    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\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 eqp-attachments-dialog-add-container\"\r\n        style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\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\"\r\n                        name=\"file_attachment\" type=\"file\" (change)=\"onFileInputChange($event)\"\r\n                        [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\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=\"(loadMultipleFiles != true && !newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length == 0)\">\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=\"(loadMultipleFiles != true && newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0)\" 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 && loadMultipleFiles != true)\">\r\n                    <mat-form-field style=\"width: 100%;\">\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 style=\"width: 100%;\">\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\r\n            <!-- Riporta l'elenco dei nomi dei file caricati contemporaneamente (visibile solo se loadMultipleFiles = TRUE e se ci sono realmente pi\u00F9 file senza link) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0 && newMultipleAttachments[0].AttachmentType != attachmentType.LINK\">\r\n                <div class=\"col-12\" *ngFor=\"let attach of newMultipleAttachments\">\r\n                    <mat-form-field style=\"width: 100%\">\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input disabled matInput [(ngModel)]=\"attach.FileName\" [ngModelOptions]=\"{standalone: true}\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento MULTIPLO ma \u00E8 stata selezionata una sola immagine (quindi \u00E8 entrato in gioco anche il croppie) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && showCropImage != true && newMultipleAttachments && newMultipleAttachments.length == 1 && newMultipleAttachments[0].IsImage == true\" 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,{{newMultipleAttachments[0].FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento SINGOLO ed \u00E8 stata selezionata un'immagine -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles != true && showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\" 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\r\n            <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n            <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\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 || (loadMultipleFiles != 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    </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && 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.AttachmentType != AttachmentType.LINK && !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>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n\r\n    <!-- \r\n        Pulsanti per l'aggiunta di un file o un link. Ne viene visualizzato uno se:\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di pi\u00F9 allegati (multipleAttachment == true)\r\n        OPPURE\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di un singolo allegato (multipleAttachment == true) e non ne \u00E8 ancora stato selezionato uno (ovvero attachmentsList non esiste o non ha elementi)\r\n    -->\r\n    <button class=\"btn btn-primary  mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\"\r\n        (click)=\"openModalAddAttachment(allowedTypes[0])\" [disabled]=\"isDisabled\">\r\n        <!-- Per l'aggiunta dei file mostro un'icona diversa dall'aggiunta dei link -->\r\n        <mat-icon *ngIf=\"allowedTypes[0] == 1\">cloud_upload</mat-icon>\r\n        <i class=\"fas fa-link\" *ngIf=\"allowedTypes[0] == 2\"></i>\r\n        <span style=\"margin-left: 10px;\">{{addButtonLabel}} {{allowedTypes[0] == 1 ? \"file\" : \"link\"}}</span>\r\n    </button>\r\n\r\n\r\n    <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\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=\"allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n        <mat-icon *ngIf=\"multipleAttachment != true\">cloud_upload</mat-icon>\r\n        <mat-icon *ngIf=\"multipleAttachment == true\">add</mat-icon>\r\n        <span style=\"margin-left: 0px;\"> {{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</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate let-form=\"form\">\r\n    <div class=\"row mt-2 mb-2\" [formGroup]=\"form\">\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\">\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\">\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</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);