@eqproject/eqp-attachments 2.5.3 → 2.5.4

package/fesm2020/eqproject-eqp-attachments.mjs

@@ -412,6 +412,7 @@ class EqpAttachmentsComponent {
         this.flipVerticalLabel = "Capovolgi verticalmente";
         this.rotateRightLabel = "Ruota a destra";
         this.rotateLeftLabel = "Ruota a sinistra";
+        this.base64LimitMB = 100;
         //#endregion
         //#region @Output del componente
         /**
@@ -573,6 +574,17 @@ class EqpAttachmentsComponent {
             window.open(attachment.FilePath, "_blank");
             return;
         }
+        if (attachment.LargeFile) {
+            const file = attachment.LargeFile;
+            const url = URL.createObjectURL(file);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = attachment.FileName || file.name;
+            link.click();
+            // Importante: revocare l'URL dopo il click per liberare memoria
+            setTimeout(() => URL.revokeObjectURL(url), 1000);
+            return;
+        }
         if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
             let source = `data:${attachment.FileContentType};base64,${attachment.FileDataBase64}`;
             const link = document.createElement("a");
@@ -639,14 +651,15 @@ class EqpAttachmentsComponent {
     disableSave() {
         if (this.loadMultipleFiles != true) {
             if (this.newAttachment.AttachmentType == AttachmentType.FILE) {
-                return !this.newAttachment.FileDataBase64;
+                // Valido se c'è il Base64 OPPURE se c'è il file originale (caso file grande)
+                return !this.newAttachment.FileDataBase64 && !this.newAttachment.LargeFile;
             }
             else {
                 return !this.newAttachment.FilePath;
             }
         }
         else {
-            return (this.newMultipleAttachments.filter((p) => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) ||
+            return (this.newMultipleAttachments.filter((p) => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64 && !p.LargeFile) ||
                 (p.AttachmentType == AttachmentType.LINK && !p.FilePath)).length > 0);
         }
     }
@@ -815,16 +828,33 @@ class EqpAttachmentsComponent {
      */
     async createAttachmentFromUploadedFile(currentFile, getBase64 = true, cropFile = false) {
         let newAttachment = {};
-        //Memorizza i dati per l'allegato
+        // 1. Metadati di base (sempre popolati)
         newAttachment.AttachmentType = 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);
+        // 2. Controllo Dimensione Immediato
+        const fileSizeMB = currentFile.size / 1024 / 1024;
+        const isLargeFile = fileSizeMB > this.base64LimitMB;
+        if (isLargeFile) {
+            // CASO LARGE FILE:
+            // Popoliamo OriginalFile e forziamo il Base64 a null.
+            // Questo avviene ANCHE se getBase64 era false (così onFileAdded si trova l'oggetto già pronto)
+            newAttachment.FileDataBase64 = null;
+            newAttachment.LargeFile = currentFile;
+            newAttachment.IsLargeFile = true;
+            // Se è grande, impediamo qualsiasi tentativo di conversione successivo in questa funzione
+            getBase64 = false;
+        }
+        // 3. Generazione Base64 (Solo se richiesto E se il file è piccolo)
         if (getBase64 == true) {
+            // Qui siamo sicuri che il file è piccolo perché se fosse grande isLargeFile avrebbe messo getBase64 = false
             let base64Result = await this.getBase64FromFile(currentFile);
             newAttachment.FileDataBase64 = base64Result.Base64File;
-            newAttachment.FileContentType = base64Result.ContentType;
+            if (!newAttachment.FileContentType && base64Result.ContentType) {
+                newAttachment.FileContentType = base64Result.ContentType;
+            }
             if (newAttachment.IsImage && newAttachment.FileDataBase64 && cropFile) {
                 this.getCroppedAndUpload(`data:${base64Result.ContentType};base64,${base64Result.Base64File}`, newAttachment);
             }
@@ -838,30 +868,40 @@ class EqpAttachmentsComponent {
      * @returns Restituisce un oggetto avente le proprietà Base64File e ContentType
      */
     async getBase64FromFile(currentFile) {
-        let base64File = await toBase64(currentFile);
-        let 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.
-            contentType = base64File.split(",")[0].split(":")[1].split(";")[0];
-            // Un altro metodo per leggere il ccontent type del file è tramite una regular expression:
-            base64File = base64File.split(",")[1];
+        const fileSizeMB = currentFile.size / 1024 / 1024;
+        if (fileSizeMB > this.base64LimitMB) {
+            return {
+                Base64File: null,
+                ContentType: currentFile.type
+            };
+        }
+        // Procedura standard
+        try {
+            let base64File = await toBase64(currentFile);
+            let contentType = null;
+            if (base64File) {
+                contentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                base64File = base64File.split(",")[1];
+            }
+            return {
+                Base64File: base64File,
+                ContentType: contentType
+            };
+        }
+        catch (ex) {
+            return { Base64File: null, ContentType: null };
         }
-        let result = {
-            Base64File: base64File,
-            ContentType: contentType
-        };
-        return result;
     }
     /**
      * Controlla se il file che si sta caricando è supportato dal sistema.
      * @returns
      */
     checkAcceptedFiles() {
-        if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
-            (this.loadMultipleFiles == true && [...this.selectedFiles].filter((p) => p.type.startsWith("video")).length > 0))
-            return false;
+        // if (
+        //   (this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
+        //   (this.loadMultipleFiles == true && [...this.selectedFiles].filter((p) => p.type.startsWith("video")).length > 0)
+        // )
+        //   return false;
         if (this.acceptedFileTypes == "*")
             return true;
         //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
@@ -1096,7 +1136,7 @@ class EqpAttachmentsComponent {
     }
 }
 EqpAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EqpAttachmentsComponent, deps: [{ token: i1.MatDialog }, { token: i2.FormBuilder }, { token: i3.DomSanitizer }, { token: i4.HttpClient }, { token: i0.ChangeDetectorRef }, { token: EqpAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-EqpAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", headerTitle: "headerTitle", attachmentsList: "attachmentsList", showMatCard: "showMatCard", multipleAttachment: "multipleAttachment", loadMultipleFiles: "loadMultipleFiles", attachmentsColumns: "attachmentsColumns", emptyTableMessage: "emptyTableMessage", allowOnlyImages: "allowOnlyImages", acceptedFileTypes: "acceptedFileTypes", isDisabled: "isDisabled", showInlinePreview: "showInlinePreview", getAttachmentEndpoint: "getAttachmentEndpoint", productionBaseUrl: "productionBaseUrl", compressionOptions: "compressionOptions", allowedTypes: "allowedTypes", isEqpTableMultiLanguage: "isEqpTableMultiLanguage", tablePaginatorVisible: "tablePaginatorVisible", isTableSearcheable: "isTableSearcheable", tablePaginatorSize: "tablePaginatorSize", separatedUploadButtons: "separatedUploadButtons", showPreview: "showPreview", singleAttachmentDragAndDrop: "singleAttachmentDragAndDrop", cropOptions: "cropOptions", cropDialogClass: "cropDialogClass", downloadTooltipPosition: "downloadTooltipPosition", openLinkLabel: "openLinkLabel", addButtonLabel: "addButtonLabel", downloadLabel: "downloadLabel", deleteLabel: "deleteLabel", fileNameLabel: "fileNameLabel", previewLabel: "previewLabel", uploadFileLabel: "uploadFileLabel", confirmLabel: "confirmLabel", abortLabel: "abortLabel", saveLabel: "saveLabel", exitLabel: "exitLabel", uploadWithDropboxLabel: "uploadWithDropboxLabel", cropLabel: "cropLabel", eqpTableSearchText: "eqpTableSearchText", deleteDialogTitle: "deleteDialogTitle", deleteDialogMessage: "deleteDialogMessage", noImageSelectedErrorMessage: "noImageSelectedErrorMessage", wrongTypeSelectedErrorMessage: "wrongTypeSelectedErrorMessage", videoPreviewErrorMessage: "videoPreviewErrorMessage", audioPreviewErrorMessage: ["videoPreviewErrorMessage", "audioPreviewErrorMessage"], flipHorinzontalLabel: "flipHorinzontalLabel", flipVerticalLabel: "flipVerticalLabel", rotateRightLabel: "rotateRightLabel", rotateLeftLabel: "rotateLeftLabel" }, outputs: { localEditedAttachments: "localEditedAttachments", abortAddAttachment: "abortAddAttachment", downloadAttachment: "downloadAttachment", onDeleteAttachment: "onDeleteAttachment" }, viewQueries: [{ propertyName: "dialogAddAttachment", first: true, predicate: ["dialogAddAttachment"], descendants: true, static: true }, { propertyName: "dialogAddMultipleAttachment", first: true, predicate: ["dialogAddMultipleAttachment"], descendants: true, static: true }, { propertyName: "dialogCropImage", first: true, predicate: ["dialogCropImage"], descendants: true, static: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "attachmentTable", first: true, predicate: ["attachmentTable"], descendants: true }, { propertyName: "inlinePreviewTemplate", first: true, predicate: ["inlinePreviewTemplate"], descendants: true, static: true }, { propertyName: "dialogPreview", first: true, predicate: ["dialogPreview"], descendants: true, static: true }], ngImport: i0, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n  <div *ngIf=\"!singleAttachmentDragAndDrop\">\r\n    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <div *ngIf=\"!addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n    </div>\r\n    <!-- Template della form per l'aggiunta di un link -->\r\n    <div *ngIf=\"addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n    <input\r\n      #fileInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <ngx-file-drop\r\n      (onFileDrop)=\"fileDropped($event)\"\r\n      (click)=\"onSelectFile($event, fileInput)\"\r\n      *ngIf=\"\r\n        allowedTypes &&\r\n        allowedTypes.includes(1) &&\r\n        (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\r\n      \">\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n        <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n        Trascina i file qui\r\n        <div class=\"btn-group mt-1\" role=\"group\">\r\n          <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n          <div class=\"btn-group\" role=\"group\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-light border-start dropdown-toggle\"\r\n              [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n            <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n              <button\r\n                *ngIf=\"allowedTypes.includes(1)\"\r\n                mat-menu-item\r\n                (click)=\"fileInput.click()\"\r\n                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\r\n                *ngIf=\"allowedTypes.includes(2)\"\r\n                mat-menu-item\r\n                (click)=\"switchToAddingLinkMode()\"\r\n                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              <button\r\n                *ngIf=\"allowedTypes.includes(3)\"\r\n                mat-menu-item\r\n                (click)=\"chooseDropboxFile()\"\r\n                class=\"eqp-attachments-link-btn\">\r\n                <i class=\"fa-brands fa-dropbox\"></i>\r\n                <span style=\"margin-left: 10px\">Dropbox</span>\r\n              </button>\r\n            </mat-menu>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n        <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </div>\r\n  <div class=\"text-center\">\r\n    <button\r\n      class=\"mb-2 me-2 eqp-attachments-download-btn\"\r\n      (click)=\"viewAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      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\r\n      class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n      (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      *ngIf=\"\r\n        showPreview &&\r\n        attachmentsList &&\r\n        attachmentsList.length > 0 &&\r\n        attachmentsList[0] &&\r\n        (!attachmentsList[0].FileContentType ||\r\n          (!attachmentsList[0].FileContentType.startsWith('video') &&\r\n            !attachmentsList[0].FileContentType.startsWith('audio'))) &&\r\n        attachmentsList[0].IsImage == true\r\n      \">\r\n      <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n    </button>\r\n    <button\r\n      class=\"mb-2 eqp-attachments-delete-btn\"\r\n      (click)=\"deleteAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      [disabled]=\"isDisabled\">\r\n      <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n    </button>\r\n  </div>\r\n  <div\r\n    class=\"row\"\r\n    style=\"margin-top: 10px\"\r\n    *ngIf=\"\r\n      attachmentsList.length > 0 &&\r\n      attachmentsList[0] &&\r\n      attachmentsList[0].FileDataBase64 &&\r\n      attachmentsList[0].IsImage == true\r\n    \">\r\n    <div class=\"col-sm-12 d-flex justify-content-center\">\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<div *ngIf=\"multipleAttachment == true\">\r\n  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n      <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n      Trascina i file qui\r\n      <div class=\"btn-group mt-1\" role=\"group\">\r\n        <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border-start dropdown-toggle\"\r\n            [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n          <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n            <button\r\n              *ngIf=\"allowedTypes.includes(1)\"\r\n              mat-menu-item\r\n              (click)=\"fileInput.click()\"\r\n              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\r\n              *ngIf=\"allowedTypes.includes(2)\"\r\n              mat-menu-item\r\n              (click)=\"switchToAddingLinkMode()\"\r\n              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            <button\r\n              *ngIf=\"allowedTypes.includes(3)\"\r\n              mat-menu-item\r\n              (click)=\"chooseDropboxFile()\"\r\n              class=\"eqp-attachments-link-btn\">\r\n              <i class=\"fa-brands fa-dropbox\"></i>\r\n              <span style=\"margin-left: 10px\">Dropbox</span>\r\n            </button>\r\n          </mat-menu>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </ng-template>\r\n  </ngx-file-drop>\r\n  <div class=\"mt-2\">\r\n    <eqp-table\r\n      #attachmentTable\r\n      [createMatCard]=\"false\"\r\n      #table\r\n      [columns]=\"attachmentsColumns\"\r\n      [isMultiLanguage]=\"isEqpTableMultiLanguage\"\r\n      [data]=\"attachmentsList\"\r\n      [paginatorVisible]=\"tablePaginatorVisible\"\r\n      [matPaginatorSize]=\"tablePaginatorSize\"\r\n      [emptyTableMessage]=\"emptyTableMessage\"\r\n      [searchText]=\"eqpTableSearchText\"\r\n      [isTableSearcheable]=\"isTableSearcheable\">\r\n    </eqp-table>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dialogCropImage>\r\n  <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n  <div style=\"overflow-x: hidden\" [ngClass]=\"cropDialogClass\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"croppieTemplate\"\r\n      [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n      *ngIf=\"showCropImage == true\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <img src=\"data:image/png;base64,{{ row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64 }}\" />\r\n  </div>\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogPreview>\r\n  <mat-card class=\"example-card\" *ngIf=\"selectedAttachment\">\r\n    <mat-card-content>\r\n      <div class=\"row\">\r\n        <div class=\"header-title-standard\">\r\n          {{ previewLabel }} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? \"File\" : \"Link\" }}\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-close closeButton\"\r\n            mat-dialog-close\r\n            (click)=\"selectedAttachment = null\"></button>\r\n        </div>\r\n      </div>\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\r\n            class=\"image-preview\"\r\n            src=\"data:image/png;base64,{{\r\n              selectedAttachment.FileDataBase64\r\n                ? selectedAttachment.FileDataBase64\r\n                : selectedAttachment.FileThumbnailBase64\r\n            }}\" />\r\n        </div>\r\n\r\n        <!-- ANTEPRIMA LINK -->\r\n        <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n          <iframe\r\n            class=\"link-preview\"\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"></iframe>\r\n        </div>\r\n      </div>\r\n      <div class=\"row mt-3\">\r\n        <div class=\"col-sm-12 text-center\">\r\n          <button\r\n            mat-mini-fab\r\n            color=\"primary\"\r\n            matTooltip=\"Download\"\r\n            (click)=\"viewAttachment(selectedAttachment)\"\r\n            *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n            <mat-icon>download</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    *ngIf=\"\r\n      allowedTypes &&\r\n      allowedTypes.length == 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \"\r\n    (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n    [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    <i class=\"fa-brands fa-dropbox\" *ngIf=\"allowedTypes[0] == 3\"></i>\r\n    <span style=\"margin-left: 10px\">\r\n      {{\r\n        allowedTypes[0] == 1\r\n          ? addButtonLabel + \" file\"\r\n          : allowedTypes[0] == 2\r\n          ? addButtonLabel + \" link\"\r\n          : uploadWithDropboxLabel\r\n      }}</span\r\n    >\r\n  </button>\r\n\r\n  <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    [matMenuTriggerFor]=\"attachmentTypeMenu\"\r\n    [disabled]=\"isDisabled\"\r\n    *ngIf=\"\r\n      !separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\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    <input\r\n      #imageInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <button\r\n      *ngIf=\"allowedTypes.includes(1)\"\r\n      mat-menu-item\r\n      (click)=\"imageInput.click()\"\r\n      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\r\n      *ngIf=\"allowedTypes.includes(2)\"\r\n      mat-menu-item\r\n      (click)=\"switchToAddingLinkMode()\"\r\n      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    <button\r\n      *ngIf=\"allowedTypes.includes(3)\"\r\n      mat-menu-item\r\n      (click)=\"chooseDropboxFile()\"\r\n      class=\"eqp-attachments-link-btn\">\r\n      <i class=\"fa-brands fa-dropbox\"></i>\r\n      <span style=\"margin-left: 10px\">Dropbox</span>\r\n    </button>\r\n  </mat-menu>\r\n\r\n  <div\r\n    *ngIf=\"\r\n      separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\r\n    <div class=\"btn-group\">\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(1)\"\r\n        (click)=\"imageInput.click()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-solid fa-cloud-upload\"></i>\r\n        <span style=\"margin-left: 10px\">File</span>\r\n      </button>\r\n      <input\r\n        #imageInput\r\n        style=\"display: none\"\r\n        id=\"file_attachment\"\r\n        name=\"file_attachment\"\r\n        type=\"file\"\r\n        (change)=\"onFileAdded($event)\"\r\n        [accept]=\"acceptedFileTypes\"\r\n        [multiple]=\"loadMultipleFiles\" />\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(2)\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fas fa-link\"></i>\r\n        <span style=\"margin-left: 10px\">Link</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(3)\"\r\n        (click)=\"chooseDropboxFile()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-brands fa-dropbox\"></i>\r\n        <span style=\"margin-left: 10px\">Dropbox</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #croppieTemplate>\r\n  <div class=\"row m-3\">\r\n    <h4>{{ cropLabel }}</h4>\r\n  </div>\r\n  <div class=\"row m-2 crop-large\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        [matTooltip]=\"rotateLeftLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateLeft()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_left</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"rotateRightLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateRight()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_right</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipHorinzontalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipHorizontal()\">\r\n        <mat-icon style=\"vertical-align: middle\">flip_horizontal</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipVerticalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipVertical()\">\r\n        <div style=\"transform: rotate(90deg)\"><mat-icon style=\"vertical-align: middle\">flip_vertical</mat-icon></div>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"'Reset'\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"restoreOriginalDimensions()\">\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 m-2 crop-small\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <mat-icon *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle\" (click)=\"rotateLeft()\"\r\n        >rotate_left</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"rotateRight()\"\r\n        >rotate_right</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"flipHorizontal()\"\r\n        >flip_horizontal</mat-icon\r\n      >\r\n      <div class=\"ms-3\" style=\"transform: rotate(90deg)\">\r\n        <mat-icon\r\n          *ngIf=\"cropOptions.includes(2)\"\r\n          style=\"font-size: 27px; vertical-align: middle\"\r\n          (click)=\"flipVertical()\"\r\n          >flip_vertical</mat-icon\r\n        >\r\n      </div>\r\n      <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle\"\r\n        >replay</mat-icon\r\n      >\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <div class=\"crop-container\">\r\n        <image-cropper\r\n          [imageFile]=\"selectedFile\"\r\n          [maintainAspectRatio]=\"false\"\r\n          [autoCrop]=\"false\"\r\n          [containWithinAspectRatio]=\"false\"\r\n          [aspectRatio]=\"4 / 3\"\r\n          [cropperMinWidth]=\"128\"\r\n          [onlyScaleDown]=\"true\"\r\n          [roundCropper]=\"false\"\r\n          [canvasRotation]=\"0\"\r\n          [transform]=\"transform\"\r\n          [alignImage]=\"'left'\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          [resizeToWidth]=\"customWidth\"\r\n          [resizeToHeight]=\"customHeight\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [output]=\"'base64'\">\r\n        </image-cropper>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center mt-2 mb-2 crop-large\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\"\r\n        type=\"button\"\r\n        (click)=\"confirmAddAttachment()\">\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  <div class=\"row justify-content-center mt-2 mb-2 crop-small\">\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-times\" (click)=\"abortFile()\"></i>\r\n    </div>\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-check\" (click)=\"confirmAddAttachment()\"></i>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n  <span class=\"mb-1\" style=\"font-size: 20px\"><i class=\"fa fa-link\"></i>Inserisci l'URL</span>\r\n  <form [formGroup]=\"newAttachmentForm\" *ngIf=\"newAttachmentForm\">\r\n    <div class=\"row mb-2\" style=\"height: 80px\">\r\n      <div class=\"col-6 d-grid gap-2 mx-auto\">\r\n        <div class=\"input-group mb-1\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"{{ fileNameLabel }}\"\r\n            formControlName=\"name\"\r\n            [(ngModel)]=\"newAttachment.FileName\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 d-grid gap-2\">\r\n        <div class=\"input-group\">\r\n          <input\r\n            required\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"Link\"\r\n            formControlName=\"path\"\r\n            [(ngModel)]=\"newAttachment.FilePath\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-secondary mat-raised-button\"\r\n          (click)=\"selectedAttachment = null; addingLinkMode = false\"\r\n          type=\"button\">\r\n          {{ exitLabel }}\r\n        </button>\r\n      </div>\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-primary mat-raised-button\"\r\n          type=\"submit\"\r\n          (click)=\"confirmAddAttachment(); selectedAttachment = null; addingLinkMode = false\">\r\n          {{ saveLabel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", styles: ["ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone{min-height:30vh;border-radius:5px!important;background-color:#e4e6ea!important;cursor:pointer;font-size:17px!important;border:dotted!important;padding-top:7vh}ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone .ngx-file-drop__content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#73777a!important;margin:auto}.custom-height .mat-form-field-wrapper{height:20px}.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}.closeButton{float:right}@media (max-width: 768px){.crop-large{display:none}}@media (min-width: 768px){.crop-small{display:none}}@media (max-width: 768px){.crop-container{max-width:55%}}@media (min-width: 768px){.crop-container{max-width:35%}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i14.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i15.EqpTableComponent, selector: "eqp-table" }, { kind: "component", type: i16.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i16.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }] });
+EqpAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", headerTitle: "headerTitle", attachmentsList: "attachmentsList", showMatCard: "showMatCard", multipleAttachment: "multipleAttachment", loadMultipleFiles: "loadMultipleFiles", attachmentsColumns: "attachmentsColumns", emptyTableMessage: "emptyTableMessage", allowOnlyImages: "allowOnlyImages", acceptedFileTypes: "acceptedFileTypes", isDisabled: "isDisabled", showInlinePreview: "showInlinePreview", getAttachmentEndpoint: "getAttachmentEndpoint", productionBaseUrl: "productionBaseUrl", compressionOptions: "compressionOptions", allowedTypes: "allowedTypes", isEqpTableMultiLanguage: "isEqpTableMultiLanguage", tablePaginatorVisible: "tablePaginatorVisible", isTableSearcheable: "isTableSearcheable", tablePaginatorSize: "tablePaginatorSize", separatedUploadButtons: "separatedUploadButtons", showPreview: "showPreview", singleAttachmentDragAndDrop: "singleAttachmentDragAndDrop", cropOptions: "cropOptions", cropDialogClass: "cropDialogClass", downloadTooltipPosition: "downloadTooltipPosition", openLinkLabel: "openLinkLabel", addButtonLabel: "addButtonLabel", downloadLabel: "downloadLabel", deleteLabel: "deleteLabel", fileNameLabel: "fileNameLabel", previewLabel: "previewLabel", uploadFileLabel: "uploadFileLabel", confirmLabel: "confirmLabel", abortLabel: "abortLabel", saveLabel: "saveLabel", exitLabel: "exitLabel", uploadWithDropboxLabel: "uploadWithDropboxLabel", cropLabel: "cropLabel", eqpTableSearchText: "eqpTableSearchText", deleteDialogTitle: "deleteDialogTitle", deleteDialogMessage: "deleteDialogMessage", noImageSelectedErrorMessage: "noImageSelectedErrorMessage", wrongTypeSelectedErrorMessage: "wrongTypeSelectedErrorMessage", videoPreviewErrorMessage: "videoPreviewErrorMessage", audioPreviewErrorMessage: ["videoPreviewErrorMessage", "audioPreviewErrorMessage"], flipHorinzontalLabel: "flipHorinzontalLabel", flipVerticalLabel: "flipVerticalLabel", rotateRightLabel: "rotateRightLabel", rotateLeftLabel: "rotateLeftLabel", base64LimitMB: "base64LimitMB" }, outputs: { localEditedAttachments: "localEditedAttachments", abortAddAttachment: "abortAddAttachment", downloadAttachment: "downloadAttachment", onDeleteAttachment: "onDeleteAttachment" }, viewQueries: [{ propertyName: "dialogAddAttachment", first: true, predicate: ["dialogAddAttachment"], descendants: true, static: true }, { propertyName: "dialogAddMultipleAttachment", first: true, predicate: ["dialogAddMultipleAttachment"], descendants: true, static: true }, { propertyName: "dialogCropImage", first: true, predicate: ["dialogCropImage"], descendants: true, static: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "attachmentTable", first: true, predicate: ["attachmentTable"], descendants: true }, { propertyName: "inlinePreviewTemplate", first: true, predicate: ["inlinePreviewTemplate"], descendants: true, static: true }, { propertyName: "dialogPreview", first: true, predicate: ["dialogPreview"], descendants: true, static: true }], ngImport: i0, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n  <div *ngIf=\"!singleAttachmentDragAndDrop\">\r\n    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <div *ngIf=\"!addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n    </div>\r\n    <!-- Template della form per l'aggiunta di un link -->\r\n    <div *ngIf=\"addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n    <input\r\n      #fileInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <ngx-file-drop\r\n      (onFileDrop)=\"fileDropped($event)\"\r\n      (click)=\"onSelectFile($event, fileInput)\"\r\n      *ngIf=\"\r\n        allowedTypes &&\r\n        allowedTypes.includes(1) &&\r\n        (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\r\n      \">\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n        <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n        Trascina i file qui\r\n        <div class=\"btn-group mt-1\" role=\"group\">\r\n          <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n          <div class=\"btn-group\" role=\"group\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-light border-start dropdown-toggle\"\r\n              [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n            <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n              <button\r\n                *ngIf=\"allowedTypes.includes(1)\"\r\n                mat-menu-item\r\n                (click)=\"fileInput.click()\"\r\n                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\r\n                *ngIf=\"allowedTypes.includes(2)\"\r\n                mat-menu-item\r\n                (click)=\"switchToAddingLinkMode()\"\r\n                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              <button\r\n                *ngIf=\"allowedTypes.includes(3)\"\r\n                mat-menu-item\r\n                (click)=\"chooseDropboxFile()\"\r\n                class=\"eqp-attachments-link-btn\">\r\n                <i class=\"fa-brands fa-dropbox\"></i>\r\n                <span style=\"margin-left: 10px\">Dropbox</span>\r\n              </button>\r\n            </mat-menu>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n        <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </div>\r\n  <div class=\"text-center\">\r\n    <button\r\n      class=\"mb-2 me-2 eqp-attachments-download-btn\"\r\n      (click)=\"viewAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      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\r\n      class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n      (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      *ngIf=\"\r\n        showPreview &&\r\n        attachmentsList &&\r\n        attachmentsList.length > 0 &&\r\n        attachmentsList[0] &&\r\n        (!attachmentsList[0].FileContentType ||\r\n          (!attachmentsList[0].FileContentType.startsWith('video') &&\r\n            !attachmentsList[0].FileContentType.startsWith('audio'))) &&\r\n        attachmentsList[0].IsImage == true\r\n      \">\r\n      <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n    </button>\r\n    <button\r\n      class=\"mb-2 eqp-attachments-delete-btn\"\r\n      (click)=\"deleteAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      [disabled]=\"isDisabled\">\r\n      <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n    </button>\r\n  </div>\r\n  <div\r\n    class=\"row\"\r\n    style=\"margin-top: 10px\"\r\n    *ngIf=\"\r\n      attachmentsList.length > 0 &&\r\n      attachmentsList[0] &&\r\n      attachmentsList[0].FileDataBase64 &&\r\n      attachmentsList[0].IsImage == true\r\n    \">\r\n    <div class=\"col-sm-12 d-flex justify-content-center\">\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<div *ngIf=\"multipleAttachment == true\">\r\n  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n      <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n      Trascina i file qui\r\n      <div class=\"btn-group mt-1\" role=\"group\">\r\n        <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border-start dropdown-toggle\"\r\n            [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n          <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n            <button\r\n              *ngIf=\"allowedTypes.includes(1)\"\r\n              mat-menu-item\r\n              (click)=\"fileInput.click()\"\r\n              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\r\n              *ngIf=\"allowedTypes.includes(2)\"\r\n              mat-menu-item\r\n              (click)=\"switchToAddingLinkMode()\"\r\n              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            <button\r\n              *ngIf=\"allowedTypes.includes(3)\"\r\n              mat-menu-item\r\n              (click)=\"chooseDropboxFile()\"\r\n              class=\"eqp-attachments-link-btn\">\r\n              <i class=\"fa-brands fa-dropbox\"></i>\r\n              <span style=\"margin-left: 10px\">Dropbox</span>\r\n            </button>\r\n          </mat-menu>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </ng-template>\r\n  </ngx-file-drop>\r\n  <div class=\"mt-2\">\r\n    <eqp-table\r\n      #attachmentTable\r\n      [createMatCard]=\"false\"\r\n      #table\r\n      [columns]=\"attachmentsColumns\"\r\n      [isMultiLanguage]=\"isEqpTableMultiLanguage\"\r\n      [data]=\"attachmentsList\"\r\n      [paginatorVisible]=\"tablePaginatorVisible\"\r\n      [matPaginatorSize]=\"tablePaginatorSize\"\r\n      [emptyTableMessage]=\"emptyTableMessage\"\r\n      [searchText]=\"eqpTableSearchText\"\r\n      [isTableSearcheable]=\"isTableSearcheable\">\r\n    </eqp-table>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dialogCropImage>\r\n  <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n  <div style=\"overflow-x: hidden\" [ngClass]=\"cropDialogClass\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"croppieTemplate\"\r\n      [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n      *ngIf=\"showCropImage == true\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <img src=\"data:image/png;base64,{{ row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64 }}\" />\r\n  </div>\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogPreview>\r\n  <mat-card class=\"example-card\" *ngIf=\"selectedAttachment\">\r\n    <mat-card-content>\r\n      <div class=\"row\">\r\n        <div class=\"header-title-standard\">\r\n          {{ previewLabel }} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? \"File\" : \"Link\" }}\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-close closeButton\"\r\n            mat-dialog-close\r\n            (click)=\"selectedAttachment = null\"></button>\r\n        </div>\r\n      </div>\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\r\n            class=\"image-preview\"\r\n            src=\"data:image/png;base64,{{\r\n              selectedAttachment.FileDataBase64\r\n                ? selectedAttachment.FileDataBase64\r\n                : selectedAttachment.FileThumbnailBase64\r\n            }}\" />\r\n        </div>\r\n\r\n        <!-- ANTEPRIMA LINK -->\r\n        <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n          <iframe\r\n            class=\"link-preview\"\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"></iframe>\r\n        </div>\r\n      </div>\r\n      <div class=\"row mt-3\">\r\n        <div class=\"col-sm-12 text-center\">\r\n          <button\r\n            mat-mini-fab\r\n            color=\"primary\"\r\n            matTooltip=\"Download\"\r\n            (click)=\"viewAttachment(selectedAttachment)\"\r\n            *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n            <mat-icon>download</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    *ngIf=\"\r\n      allowedTypes &&\r\n      allowedTypes.length == 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \"\r\n    (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n    [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    <i class=\"fa-brands fa-dropbox\" *ngIf=\"allowedTypes[0] == 3\"></i>\r\n    <span style=\"margin-left: 10px\">\r\n      {{\r\n        allowedTypes[0] == 1\r\n          ? addButtonLabel + \" file\"\r\n          : allowedTypes[0] == 2\r\n          ? addButtonLabel + \" link\"\r\n          : uploadWithDropboxLabel\r\n      }}</span\r\n    >\r\n  </button>\r\n\r\n  <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    [matMenuTriggerFor]=\"attachmentTypeMenu\"\r\n    [disabled]=\"isDisabled\"\r\n    *ngIf=\"\r\n      !separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\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    <input\r\n      #imageInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <button\r\n      *ngIf=\"allowedTypes.includes(1)\"\r\n      mat-menu-item\r\n      (click)=\"imageInput.click()\"\r\n      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\r\n      *ngIf=\"allowedTypes.includes(2)\"\r\n      mat-menu-item\r\n      (click)=\"switchToAddingLinkMode()\"\r\n      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    <button\r\n      *ngIf=\"allowedTypes.includes(3)\"\r\n      mat-menu-item\r\n      (click)=\"chooseDropboxFile()\"\r\n      class=\"eqp-attachments-link-btn\">\r\n      <i class=\"fa-brands fa-dropbox\"></i>\r\n      <span style=\"margin-left: 10px\">Dropbox</span>\r\n    </button>\r\n  </mat-menu>\r\n\r\n  <div\r\n    *ngIf=\"\r\n      separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\r\n    <div class=\"btn-group\">\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(1)\"\r\n        (click)=\"imageInput.click()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-solid fa-cloud-upload\"></i>\r\n        <span style=\"margin-left: 10px\">File</span>\r\n      </button>\r\n      <input\r\n        #imageInput\r\n        style=\"display: none\"\r\n        id=\"file_attachment\"\r\n        name=\"file_attachment\"\r\n        type=\"file\"\r\n        (change)=\"onFileAdded($event)\"\r\n        [accept]=\"acceptedFileTypes\"\r\n        [multiple]=\"loadMultipleFiles\" />\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(2)\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fas fa-link\"></i>\r\n        <span style=\"margin-left: 10px\">Link</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(3)\"\r\n        (click)=\"chooseDropboxFile()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-brands fa-dropbox\"></i>\r\n        <span style=\"margin-left: 10px\">Dropbox</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #croppieTemplate>\r\n  <div class=\"row m-3\">\r\n    <h4>{{ cropLabel }}</h4>\r\n  </div>\r\n  <div class=\"row m-2 crop-large\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        [matTooltip]=\"rotateLeftLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateLeft()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_left</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"rotateRightLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateRight()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_right</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipHorinzontalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipHorizontal()\">\r\n        <mat-icon style=\"vertical-align: middle\">flip_horizontal</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipVerticalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipVertical()\">\r\n        <div style=\"transform: rotate(90deg)\"><mat-icon style=\"vertical-align: middle\">flip_vertical</mat-icon></div>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"'Reset'\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"restoreOriginalDimensions()\">\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 m-2 crop-small\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <mat-icon *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle\" (click)=\"rotateLeft()\"\r\n        >rotate_left</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"rotateRight()\"\r\n        >rotate_right</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"flipHorizontal()\"\r\n        >flip_horizontal</mat-icon\r\n      >\r\n      <div class=\"ms-3\" style=\"transform: rotate(90deg)\">\r\n        <mat-icon\r\n          *ngIf=\"cropOptions.includes(2)\"\r\n          style=\"font-size: 27px; vertical-align: middle\"\r\n          (click)=\"flipVertical()\"\r\n          >flip_vertical</mat-icon\r\n        >\r\n      </div>\r\n      <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle\"\r\n        >replay</mat-icon\r\n      >\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <div class=\"crop-container\">\r\n        <image-cropper\r\n          [imageFile]=\"selectedFile\"\r\n          [maintainAspectRatio]=\"false\"\r\n          [autoCrop]=\"false\"\r\n          [containWithinAspectRatio]=\"false\"\r\n          [aspectRatio]=\"4 / 3\"\r\n          [cropperMinWidth]=\"128\"\r\n          [onlyScaleDown]=\"true\"\r\n          [roundCropper]=\"false\"\r\n          [canvasRotation]=\"0\"\r\n          [transform]=\"transform\"\r\n          [alignImage]=\"'left'\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          [resizeToWidth]=\"customWidth\"\r\n          [resizeToHeight]=\"customHeight\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [output]=\"'base64'\">\r\n        </image-cropper>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center mt-2 mb-2 crop-large\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\"\r\n        type=\"button\"\r\n        (click)=\"confirmAddAttachment()\">\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  <div class=\"row justify-content-center mt-2 mb-2 crop-small\">\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-times\" (click)=\"abortFile()\"></i>\r\n    </div>\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-check\" (click)=\"confirmAddAttachment()\"></i>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n  <span class=\"mb-1\" style=\"font-size: 20px\"><i class=\"fa fa-link\"></i>Inserisci l'URL</span>\r\n  <form [formGroup]=\"newAttachmentForm\" *ngIf=\"newAttachmentForm\">\r\n    <div class=\"row mb-2\" style=\"height: 80px\">\r\n      <div class=\"col-6 d-grid gap-2 mx-auto\">\r\n        <div class=\"input-group mb-1\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"{{ fileNameLabel }}\"\r\n            formControlName=\"name\"\r\n            [(ngModel)]=\"newAttachment.FileName\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 d-grid gap-2\">\r\n        <div class=\"input-group\">\r\n          <input\r\n            required\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"Link\"\r\n            formControlName=\"path\"\r\n            [(ngModel)]=\"newAttachment.FilePath\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-secondary mat-raised-button\"\r\n          (click)=\"selectedAttachment = null; addingLinkMode = false\"\r\n          type=\"button\">\r\n          {{ exitLabel }}\r\n        </button>\r\n      </div>\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-primary mat-raised-button\"\r\n          type=\"submit\"\r\n          (click)=\"confirmAddAttachment(); selectedAttachment = null; addingLinkMode = false\">\r\n          {{ saveLabel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", styles: ["ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone{min-height:30vh;border-radius:5px!important;background-color:#e4e6ea!important;cursor:pointer;font-size:17px!important;border:dotted!important;padding-top:7vh}ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone .ngx-file-drop__content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#73777a!important;margin:auto}.custom-height .mat-form-field-wrapper{height:20px}.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}.closeButton{float:right}@media (max-width: 768px){.crop-large{display:none}}@media (min-width: 768px){.crop-small{display:none}}@media (max-width: 768px){.crop-container{max-width:55%}}@media (min-width: 768px){.crop-container{max-width:35%}}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i14.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i15.EqpTableComponent, selector: "eqp-table" }, { kind: "component", type: i16.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i16.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EqpAttachmentsComponent, decorators: [{
             type: Component,
             args: [{ selector: "eqp-attachments", template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n  <div *ngIf=\"!singleAttachmentDragAndDrop\">\r\n    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <div *ngIf=\"!addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n    </div>\r\n    <!-- Template della form per l'aggiunta di un link -->\r\n    <div *ngIf=\"addingLinkMode\" class=\"text-center\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n    <input\r\n      #fileInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <ngx-file-drop\r\n      (onFileDrop)=\"fileDropped($event)\"\r\n      (click)=\"onSelectFile($event, fileInput)\"\r\n      *ngIf=\"\r\n        allowedTypes &&\r\n        allowedTypes.includes(1) &&\r\n        (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\r\n      \">\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n        <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n        Trascina i file qui\r\n        <div class=\"btn-group mt-1\" role=\"group\">\r\n          <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n          <div class=\"btn-group\" role=\"group\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-light border-start dropdown-toggle\"\r\n              [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n            <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n              <button\r\n                *ngIf=\"allowedTypes.includes(1)\"\r\n                mat-menu-item\r\n                (click)=\"fileInput.click()\"\r\n                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\r\n                *ngIf=\"allowedTypes.includes(2)\"\r\n                mat-menu-item\r\n                (click)=\"switchToAddingLinkMode()\"\r\n                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              <button\r\n                *ngIf=\"allowedTypes.includes(3)\"\r\n                mat-menu-item\r\n                (click)=\"chooseDropboxFile()\"\r\n                class=\"eqp-attachments-link-btn\">\r\n                <i class=\"fa-brands fa-dropbox\"></i>\r\n                <span style=\"margin-left: 10px\">Dropbox</span>\r\n              </button>\r\n            </mat-menu>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n        <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n      </ng-template>\r\n    </ngx-file-drop>\r\n  </div>\r\n  <div class=\"text-center\">\r\n    <button\r\n      class=\"mb-2 me-2 eqp-attachments-download-btn\"\r\n      (click)=\"viewAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      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\r\n      class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n      (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      *ngIf=\"\r\n        showPreview &&\r\n        attachmentsList &&\r\n        attachmentsList.length > 0 &&\r\n        attachmentsList[0] &&\r\n        (!attachmentsList[0].FileContentType ||\r\n          (!attachmentsList[0].FileContentType.startsWith('video') &&\r\n            !attachmentsList[0].FileContentType.startsWith('audio'))) &&\r\n        attachmentsList[0].IsImage == true\r\n      \">\r\n      <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n    </button>\r\n    <button\r\n      class=\"mb-2 eqp-attachments-delete-btn\"\r\n      (click)=\"deleteAttachment(attachmentsList[0])\"\r\n      type=\"button\"\r\n      mat-raised-button\r\n      *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n      [disabled]=\"isDisabled\">\r\n      <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n    </button>\r\n  </div>\r\n  <div\r\n    class=\"row\"\r\n    style=\"margin-top: 10px\"\r\n    *ngIf=\"\r\n      attachmentsList.length > 0 &&\r\n      attachmentsList[0] &&\r\n      attachmentsList[0].FileDataBase64 &&\r\n      attachmentsList[0].IsImage == true\r\n    \">\r\n    <div class=\"col-sm-12 d-flex justify-content-center\">\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<div *ngIf=\"multipleAttachment == true\">\r\n  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n      <i class=\"fa-solid fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n      Trascina i file qui\r\n      <div class=\"btn-group mt-1\" role=\"group\">\r\n        <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border-start dropdown-toggle\"\r\n            [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n          <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n            <button\r\n              *ngIf=\"allowedTypes.includes(1)\"\r\n              mat-menu-item\r\n              (click)=\"fileInput.click()\"\r\n              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\r\n              *ngIf=\"allowedTypes.includes(2)\"\r\n              mat-menu-item\r\n              (click)=\"switchToAddingLinkMode()\"\r\n              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            <button\r\n              *ngIf=\"allowedTypes.includes(3)\"\r\n              mat-menu-item\r\n              (click)=\"chooseDropboxFile()\"\r\n              class=\"eqp-attachments-link-btn\">\r\n              <i class=\"fa-brands fa-dropbox\"></i>\r\n              <span style=\"margin-left: 10px\">Dropbox</span>\r\n            </button>\r\n          </mat-menu>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\">\r\n      <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n    </ng-template>\r\n  </ngx-file-drop>\r\n  <div class=\"mt-2\">\r\n    <eqp-table\r\n      #attachmentTable\r\n      [createMatCard]=\"false\"\r\n      #table\r\n      [columns]=\"attachmentsColumns\"\r\n      [isMultiLanguage]=\"isEqpTableMultiLanguage\"\r\n      [data]=\"attachmentsList\"\r\n      [paginatorVisible]=\"tablePaginatorVisible\"\r\n      [matPaginatorSize]=\"tablePaginatorSize\"\r\n      [emptyTableMessage]=\"emptyTableMessage\"\r\n      [searchText]=\"eqpTableSearchText\"\r\n      [isTableSearcheable]=\"isTableSearcheable\">\r\n    </eqp-table>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #dialogCropImage>\r\n  <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n  <div style=\"overflow-x: hidden\" [ngClass]=\"cropDialogClass\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"croppieTemplate\"\r\n      [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n      *ngIf=\"showCropImage == true\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <img src=\"data:image/png;base64,{{ row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64 }}\" />\r\n  </div>\r\n  <div\r\n    class=\"inline-preview-container\"\r\n    *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\"\r\n    (click)=\"openPreviewDialog(row)\">\r\n    <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogPreview>\r\n  <mat-card class=\"example-card\" *ngIf=\"selectedAttachment\">\r\n    <mat-card-content>\r\n      <div class=\"row\">\r\n        <div class=\"header-title-standard\">\r\n          {{ previewLabel }} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? \"File\" : \"Link\" }}\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-close closeButton\"\r\n            mat-dialog-close\r\n            (click)=\"selectedAttachment = null\"></button>\r\n        </div>\r\n      </div>\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\r\n            class=\"image-preview\"\r\n            src=\"data:image/png;base64,{{\r\n              selectedAttachment.FileDataBase64\r\n                ? selectedAttachment.FileDataBase64\r\n                : selectedAttachment.FileThumbnailBase64\r\n            }}\" />\r\n        </div>\r\n\r\n        <!-- ANTEPRIMA LINK -->\r\n        <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n          <iframe\r\n            class=\"link-preview\"\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"></iframe>\r\n        </div>\r\n      </div>\r\n      <div class=\"row mt-3\">\r\n        <div class=\"col-sm-12 text-center\">\r\n          <button\r\n            mat-mini-fab\r\n            color=\"primary\"\r\n            matTooltip=\"Download\"\r\n            (click)=\"viewAttachment(selectedAttachment)\"\r\n            *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n            <mat-icon>download</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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  <input\r\n    #fileInput\r\n    style=\"display: none\"\r\n    id=\"file_attachment\"\r\n    name=\"file_attachment\"\r\n    type=\"file\"\r\n    (change)=\"onFileAdded($event)\"\r\n    [accept]=\"acceptedFileTypes\"\r\n    [multiple]=\"loadMultipleFiles\" />\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    *ngIf=\"\r\n      allowedTypes &&\r\n      allowedTypes.length == 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \"\r\n    (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n    [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    <i class=\"fa-brands fa-dropbox\" *ngIf=\"allowedTypes[0] == 3\"></i>\r\n    <span style=\"margin-left: 10px\">\r\n      {{\r\n        allowedTypes[0] == 1\r\n          ? addButtonLabel + \" file\"\r\n          : allowedTypes[0] == 2\r\n          ? addButtonLabel + \" link\"\r\n          : uploadWithDropboxLabel\r\n      }}</span\r\n    >\r\n  </button>\r\n\r\n  <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n  <button\r\n    class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    type=\"button\"\r\n    [matMenuTriggerFor]=\"attachmentTypeMenu\"\r\n    [disabled]=\"isDisabled\"\r\n    *ngIf=\"\r\n      !separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\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    <input\r\n      #imageInput\r\n      style=\"display: none\"\r\n      id=\"file_attachment\"\r\n      name=\"file_attachment\"\r\n      type=\"file\"\r\n      (change)=\"onFileAdded($event)\"\r\n      [accept]=\"acceptedFileTypes\"\r\n      [multiple]=\"loadMultipleFiles\" />\r\n    <button\r\n      *ngIf=\"allowedTypes.includes(1)\"\r\n      mat-menu-item\r\n      (click)=\"imageInput.click()\"\r\n      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\r\n      *ngIf=\"allowedTypes.includes(2)\"\r\n      mat-menu-item\r\n      (click)=\"switchToAddingLinkMode()\"\r\n      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    <button\r\n      *ngIf=\"allowedTypes.includes(3)\"\r\n      mat-menu-item\r\n      (click)=\"chooseDropboxFile()\"\r\n      class=\"eqp-attachments-link-btn\">\r\n      <i class=\"fa-brands fa-dropbox\"></i>\r\n      <span style=\"margin-left: 10px\">Dropbox</span>\r\n    </button>\r\n  </mat-menu>\r\n\r\n  <div\r\n    *ngIf=\"\r\n      separatedUploadButtons &&\r\n      allowedTypes &&\r\n      allowedTypes.length > 1 &&\r\n      (multipleAttachment == true ||\r\n        !attachmentsList ||\r\n        attachmentsList.length == 0 ||\r\n        (attachmentsList.length > 0 && !attachmentsList[0]))\r\n    \">\r\n    <div class=\"btn-group\">\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(1)\"\r\n        (click)=\"imageInput.click()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-solid fa-cloud-upload\"></i>\r\n        <span style=\"margin-left: 10px\">File</span>\r\n      </button>\r\n      <input\r\n        #imageInput\r\n        style=\"display: none\"\r\n        id=\"file_attachment\"\r\n        name=\"file_attachment\"\r\n        type=\"file\"\r\n        (change)=\"onFileAdded($event)\"\r\n        [accept]=\"acceptedFileTypes\"\r\n        [multiple]=\"loadMultipleFiles\" />\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(2)\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fas fa-link\"></i>\r\n        <span style=\"margin-left: 10px\">Link</span>\r\n      </button>\r\n      <button\r\n        *ngIf=\"allowedTypes.includes(3)\"\r\n        (click)=\"chooseDropboxFile()\"\r\n        class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n        mat-raised-button\r\n        color=\"secondary\"\r\n        type=\"button\">\r\n        <i class=\"fa-brands fa-dropbox\"></i>\r\n        <span style=\"margin-left: 10px\">Dropbox</span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #croppieTemplate>\r\n  <div class=\"row m-3\">\r\n    <h4>{{ cropLabel }}</h4>\r\n  </div>\r\n  <div class=\"row m-2 crop-large\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        [matTooltip]=\"rotateLeftLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateLeft()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_left</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"rotateRightLabel\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"rotateRight()\">\r\n        <mat-icon style=\"vertical-align: middle\">rotate_right</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipHorinzontalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipHorizontal()\">\r\n        <mat-icon style=\"vertical-align: middle\">flip_horizontal</mat-icon>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"flipVerticalLabel\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"flipVertical()\">\r\n        <div style=\"transform: rotate(90deg)\"><mat-icon style=\"vertical-align: middle\">flip_vertical</mat-icon></div>\r\n      </button>\r\n      <button\r\n        [matTooltip]=\"'Reset'\"\r\n        class=\"btn btn-primary mat-raised-button ms-2\"\r\n        (click)=\"restoreOriginalDimensions()\">\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 m-2 crop-small\">\r\n    <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n      <mat-icon *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle\" (click)=\"rotateLeft()\"\r\n        >rotate_left</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(1)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"rotateRight()\"\r\n        >rotate_right</mat-icon\r\n      >\r\n      <mat-icon\r\n        class=\"ms-3\"\r\n        *ngIf=\"cropOptions.includes(2)\"\r\n        style=\"font-size: 27px; vertical-align: middle\"\r\n        (click)=\"flipHorizontal()\"\r\n        >flip_horizontal</mat-icon\r\n      >\r\n      <div class=\"ms-3\" style=\"transform: rotate(90deg)\">\r\n        <mat-icon\r\n          *ngIf=\"cropOptions.includes(2)\"\r\n          style=\"font-size: 27px; vertical-align: middle\"\r\n          (click)=\"flipVertical()\"\r\n          >flip_vertical</mat-icon\r\n        >\r\n      </div>\r\n      <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle\"\r\n        >replay</mat-icon\r\n      >\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <div class=\"crop-container\">\r\n        <image-cropper\r\n          [imageFile]=\"selectedFile\"\r\n          [maintainAspectRatio]=\"false\"\r\n          [autoCrop]=\"false\"\r\n          [containWithinAspectRatio]=\"false\"\r\n          [aspectRatio]=\"4 / 3\"\r\n          [cropperMinWidth]=\"128\"\r\n          [onlyScaleDown]=\"true\"\r\n          [roundCropper]=\"false\"\r\n          [canvasRotation]=\"0\"\r\n          [transform]=\"transform\"\r\n          [alignImage]=\"'left'\"\r\n          format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\"\r\n          [resizeToWidth]=\"customWidth\"\r\n          [resizeToHeight]=\"customHeight\"\r\n          [canvasRotation]=\"canvasRotation\"\r\n          [output]=\"'base64'\">\r\n        </image-cropper>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row justify-content-center mt-2 mb-2 crop-large\">\r\n    <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n      <button\r\n        class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\"\r\n        type=\"button\"\r\n        (click)=\"confirmAddAttachment()\">\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  <div class=\"row justify-content-center mt-2 mb-2 crop-small\">\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-times\" (click)=\"abortFile()\"></i>\r\n    </div>\r\n    <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n      <i class=\"fa fa-check\" (click)=\"confirmAddAttachment()\"></i>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n  <span class=\"mb-1\" style=\"font-size: 20px\"><i class=\"fa fa-link\"></i>Inserisci l'URL</span>\r\n  <form [formGroup]=\"newAttachmentForm\" *ngIf=\"newAttachmentForm\">\r\n    <div class=\"row mb-2\" style=\"height: 80px\">\r\n      <div class=\"col-6 d-grid gap-2 mx-auto\">\r\n        <div class=\"input-group mb-1\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"{{ fileNameLabel }}\"\r\n            formControlName=\"name\"\r\n            [(ngModel)]=\"newAttachment.FileName\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 d-grid gap-2\">\r\n        <div class=\"input-group\">\r\n          <input\r\n            required\r\n            type=\"text\"\r\n            class=\"form-control\"\r\n            placeholder=\"Link\"\r\n            formControlName=\"path\"\r\n            [(ngModel)]=\"newAttachment.FilePath\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-secondary mat-raised-button\"\r\n          (click)=\"selectedAttachment = null; addingLinkMode = false\"\r\n          type=\"button\">\r\n          {{ exitLabel }}\r\n        </button>\r\n      </div>\r\n      <div class=\"col-6 d-grid gap-2\">\r\n        <button\r\n          class=\"btn btn-primary mat-raised-button\"\r\n          type=\"submit\"\r\n          (click)=\"confirmAddAttachment(); selectedAttachment = null; addingLinkMode = false\">\r\n          {{ saveLabel }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</ng-template>\r\n", styles: ["ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone{min-height:30vh;border-radius:5px!important;background-color:#e4e6ea!important;cursor:pointer;font-size:17px!important;border:dotted!important;padding-top:7vh}ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone .ngx-file-drop__content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#73777a!important;margin:auto}.custom-height .mat-form-field-wrapper{height:20px}.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}.closeButton{float:right}@media (max-width: 768px){.crop-large{display:none}}@media (min-width: 768px){.crop-small{display:none}}@media (max-width: 768px){.crop-container{max-width:55%}}@media (min-width: 768px){.crop-container{max-width:35%}}\n"] }]
@@ -1253,6 +1293,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], rotateLeftLabel: [{
                 type: Input,
                 args: ["rotateLeftLabel"]
+            }], base64LimitMB: [{
+                type: Input,
+                args: ["base64LimitMB"]
             }], localEditedAttachments: [{
                 type: Output
             }], abortAddAttachment: [{