@eqproject/eqp-attachments 3.0.4 → 3.1.0

package/fesm2022/eqproject-eqp-attachments.mjs

@@ -2,12 +2,10 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TooltipPositionType, TypeColumn } from '@eqproject/eqp-common';
 import imageCompression from 'browser-image-compression';
 import * as i14 from 'ngx-image-cropper';
-import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
+import { base64ToFile, ImageCropperComponent } from 'ngx-image-cropper';
 import Swal from 'sweetalert2';
-import { Observable, from, concatMap } from 'rxjs';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i3 from '@angular/platform-browser';
@@ -20,18 +18,14 @@ import * as i8 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i9 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i10 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
+import * as i10 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i11 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i12 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i13 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i15 from '@eqproject/eqp-table';
-import { EqpTableModule } from '@eqproject/eqp-table';
-import * as i16 from 'ngx-file-drop';
-import { NgxFileDropModule } from 'ngx-file-drop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -43,10 +37,10 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatListModule } from '@angular/material/list';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -282,6 +276,10 @@ class EqpAttachmentsComponent {
      * Sorgente dati da visualizzare. Nel caso si vuole gestire un singolo allegato va passato in ogni caso come Array.
      */
     attachmentsList = null;
+    /**
+     * Nel caso si vuole gestire un solo elemento senza passarlo come array, lo passo come singolo allegato e gestisco nella libreria l'array.
+     */
+    singleAttachment = null;
     /**
      * Se TRUE non mostra la MatCard (nel caso in cui "multipleAttachment" è TRUE).
      */
@@ -296,10 +294,6 @@ class EqpAttachmentsComponent {
      * SOLO se si gestiscono allegati multipli, quindi se l'input 'multipleAttachment' assume il valore TRUE, altrimenti è sempre disabilitata.
      */
     loadMultipleFiles = false;
-    /**
-     * Configurazione delle colonne della eqp-table per la visualizzazione degli allegati (caso "multipleAttachment" è TRUE).
-     */
-    attachmentsColumns = null;
     /**
      * Imposta il messaggio da visualizzare nel caso in cui la tabella degli allegati (nel caso in cui "multipleAttachment" è TRUE) è vuota.
      */
@@ -392,10 +386,13 @@ class EqpAttachmentsComponent {
      * Classe custom da assegnare al dialog del crop immagini
      */
     cropDialogClass;
+    maxFileSizeMB = 100; // Default max size of 100 MB
+    cardSize = 'small'; // Default
+    customCardWidthPx = 200; // Larghezza custom in px
+    customCardHeightPx = 180; // Altezza custom in px
     /**
      * Input per definire le label da usare nel componente
      */
-    downloadTooltipPosition = TooltipPositionType.Below;
     openLinkLabel = "Apri link";
     addButtonLabel = "Aggiungi";
     downloadLabel = "Download";
@@ -409,7 +406,6 @@ class EqpAttachmentsComponent {
     exitLabel = "Esci";
     uploadWithDropboxLabel = "Carica con Dropbox";
     cropLabel = "Scegli le dimensioni dell'immagine";
-    eqpTableSearchText = "Cerca";
     deleteDialogTitle = null;
     deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
     noImageSelectedErrorMessage = "Non è possibile selezionare un file che non sia un'immagine.";
@@ -420,6 +416,21 @@ class EqpAttachmentsComponent {
     flipVerticalLabel = "Capovolgi verticalmente";
     rotateRightLabel = "Ruota a destra";
     rotateLeftLabel = "Ruota a sinistra";
+    uploadTitle = 'Upload file';
+    uploadSubtitle = 'Drag & drop files o click';
+    dropHereLabel = 'Rilascia i file qui';
+    supportedFormatsLabel = 'Formati supportati: JPEG, PNG, PDF (Max 100MB)';
+    browseFilesLabel = 'Cerca i file';
+    uploadSummaryLabel = 'Lista allegati';
+    filesLabel = 'Files';
+    totalSizeLabel = 'Dimensione totale';
+    emptyStateLabel = 'Non sono presenti file caricati';
+    addedSuccessfullyLabel = 'file(s) caricati con successo.';
+    removedLabel = 'File rimosso';
+    // @Input() removeLabel = 'Rimuovi file';
+    chooseView = true;
+    showSummary = false;
+    viewMode = 'table';
     //#endregion
     //#region @Output del componente
     /**
@@ -453,6 +464,7 @@ class EqpAttachmentsComponent {
     dialogAddMultipleAttachment;
     dialogRefCropImage;
     dialogCropImage;
+    addingLinkTemplate;
     //#endregion
     //#region Proprietà per gestione ridimensionamento file di tipo image
     imageChangedEvent = "";
@@ -468,11 +480,51 @@ class EqpAttachmentsComponent {
     originalHeight;
     customWidth;
     customHeight;
-    attachmentTable;
     inlinePreviewTemplate;
     dialogPreview;
     imageFile;
     addingLinkMode = false;
+    //#region Sezione nuova refactoring
+    // Stato drag & drop e toast
+    dragOver = false;
+    toast = {
+        visible: false,
+        type: 'success',
+        text: '',
+        timeoutId: 0
+    };
+    progressPercent = 0;
+    totalSizeBytes = 0;
+    get totalSizeFormatted() { return this.formatFileSize(this.totalSizeBytes); }
+    // Utility per formattare bytes (2 decimali)
+    formatFileSize(bytes) {
+        if (!bytes || bytes <= 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+    }
+    // Mostra toast con auto‑hide e reset progress bar CSS
+    showToast(message, type = 'success', durationMs = 3000) {
+        if (this.toast.visible && this.toast.text === message) {
+            return;
+        }
+        // Cancella il timeout precedente se esiste
+        if (this.toast.timeoutId) {
+            clearTimeout(this.toast.timeoutId);
+        }
+        // Calcola una durata dinamica
+        const duration = durationMs || Math.max(4000, message.length * 100);
+        this.toast.text = message;
+        this.toast.type = type;
+        this.toast.visible = true;
+        // Imposta il nuovo timeout per nascondere automaticamente il toast
+        this.toast.timeoutId = setTimeout(() => {
+            this.toast.visible = false;
+        }, duration);
+    }
+    #endregion;
     constructor(dialog, formBuilder, sanitizer, http, cd, eqpAttachmentService) {
         this.dialog = dialog;
         this.formBuilder = formBuilder;
@@ -481,7 +533,9 @@ class EqpAttachmentsComponent {
         this.cd = cd;
         this.eqpAttachmentService = eqpAttachmentService;
     }
-    async ngOnInit() {
+    ngOnInit() {
+        // Inizializza metriche e progress in base allo stato iniziale
+        this.recomputeTotalsAndProgress();
         //Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
         if (!this.acceptedFileTypes)
             if (this.allowOnlyImages == true)
@@ -495,20 +549,48 @@ class EqpAttachmentsComponent {
             EqpAttachmentDialogService.Warning('Almeno uno degli AttachmentType selezionati nel parametro "allowedTypes" non esiste.');
             this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
         }
-        //Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
-        if (this.multipleAttachment == true && (!this.attachmentsColumns || this.attachmentsColumns.length == 0)) {
-            this.configureColumns();
-        }
         if (this.attachmentsList == null)
             this.attachmentsList = new Array();
+        // Se è stato passato un singolo allegato lo aggiungo alla lista
+        if (this.singleAttachment != null && this.attachmentsList.length == 0) {
+            this.attachmentsList.push(this.singleAttachment);
+        }
         this.checkAttachmentImage();
         if (this.allowedTypes.includes(3)) {
             this.eqpAttachmentService.loadDropboxScript();
         }
     }
-    reloadData() {
-        if (this.attachmentTable)
-            this.attachmentTable.reloadDatatable();
+    setViewMode(mode) {
+        this.viewMode = mode;
+    }
+    // Ricalcola la somma pesata sugli allegati presenti
+    recomputeTotalsAndProgress() {
+        this.totalSizeBytes = (this.attachmentsList || [])
+            .filter(a => !!a)
+            .reduce((sum, a) => sum + this.bytesFromBase64(a.FileDataBase64 || a.FileThumbnailBase64 || ''), 0);
+        // Progress fittizio: 100% se presenti file, 0 se vuoto
+        this.progressPercent = (this.attachmentsList && this.attachmentsList.length > 0) ? 100 : 0;
+    }
+    ngOnDestroy() {
+        if (this.toast.timeoutId)
+            clearTimeout(this.toast.timeoutId);
+    }
+    // Calcola i byte da una stringa Base64 pura (senza prefisso data:...)
+    bytesFromBase64(base64) {
+        if (!base64)
+            return 0;
+        // Rimuovi eventuale prefisso data URL
+        const commaIdx = base64.indexOf(',');
+        const b64 = commaIdx >= 0 ? base64.substring(commaIdx + 1) : base64;
+        // Conta padding
+        let padding = 0;
+        if (b64.endsWith('=='))
+            padding = 2;
+        else if (b64.endsWith('='))
+            padding = 1;
+        // Formula esatta: (3 * (len / 4)) - padding
+        const len = b64.length;
+        return Math.max(0, (3 * Math.floor(len / 4)) - padding);
     }
     checkAttachmentImage() {
         this.attachmentsList.forEach((a) => {
@@ -516,67 +598,6 @@ class EqpAttachmentsComponent {
         });
     }
     //#region Gestione elenco allegati
-    /**
-     * Configura le colonne per l'eqp-table nel caso in cui il parametro "multipleAttachments" è TRUE.
-     */
-    configureColumns() {
-        this.attachmentsColumns = [];
-        if (this.disableAction != true) {
-            this.attachmentsColumns.push({
-                key: "action",
-                display: "",
-                type: TypeColumn.MenuAction,
-                buttonMenuIcon: "more_vert",
-                styles: { flex: "0 0 6%" },
-                actions: [
-                    { name: this.deleteLabel, icon: "delete", fn: (element, index, col) => this.deleteAttachment(element) }
-                ]
-            });
-        }
-        let downloadColumn = {
-            key: "attachment",
-            display: "",
-            type: TypeColumn.SimpleAction,
-            styles: { flex: "0 0 6%" },
-            actions: [
-                {
-                    name: "",
-                    fontawesome: true,
-                    icon: (element) => {
-                        return this.showInlinePreview
-                            ? element.AttachmentType == AttachmentType.FILE
-                                ? "fas fa-cloud-download-alt"
-                                : "fas fa-external-link-alt"
-                            : this.getAttachmentIcon(element);
-                    },
-                    fn: (element, col, elementIndex) => this.viewAttachment(element),
-                    tooltip: {
-                        tooltipText: (element) => {
-                            return element.AttachmentType == AttachmentType.FILE ? this.downloadLabel : this.openLinkLabel;
-                        },
-                        tooltipPosition: this.downloadTooltipPosition
-                    }
-                }
-            ]
-        };
-        let inlinePreviewColumn = {
-            key: "InlinePreview",
-            display: this.previewLabel,
-            type: TypeColumn.ExternalTemplate,
-            externalTemplate: this.inlinePreviewTemplate,
-            styles: { flex: "0 0 10%" }
-        };
-        let fileNameColumn = { key: "FileName", display: this.fileNameLabel };
-        if (this.showInlinePreview) {
-            this.attachmentsColumns.push(inlinePreviewColumn);
-            this.attachmentsColumns.push(fileNameColumn);
-            this.attachmentsColumns.push(downloadColumn);
-        }
-        else {
-            this.attachmentsColumns.push(downloadColumn);
-            this.attachmentsColumns.push(fileNameColumn);
-        }
-    }
     /**
      * Elimina un allegato eliminando anche il file presente nello storage di archiviazione utilizzato (AWS o cartella progetto)
      * @param element IAttachmentDTO da cancellare
@@ -593,9 +614,21 @@ class EqpAttachmentsComponent {
     removeAttachmentFromList(attachmentIndex) {
         this.onDeleteAttachment.emit(this.attachmentsList[attachmentIndex]);
         this.attachmentsList.splice(attachmentIndex, 1);
-        if (this.attachmentTable)
-            this.attachmentTable.reloadDatatable();
         this.localEditedAttachments.emit(this.attachmentsList);
+        this.recomputeTotalsAndProgress();
+        this.showToast(this.removedLabel || 'File removed', 'success');
+    }
+    simulateProgress() {
+        this.progressPercent = 0;
+        setTimeout(() => {
+            this.progressPercent = 30;
+            setTimeout(() => {
+                this.progressPercent = 60;
+                setTimeout(() => {
+                    this.progressPercent = 100;
+                }, 200);
+            }, 200);
+        }, 100);
     }
     /**
      * Scarica l'allegato o apre il link
@@ -684,7 +717,7 @@ class EqpAttachmentsComponent {
         }
     }
     confirmAddAttachment() {
-        if (this.newAttachment.IsImage) {
+        if (this.newAttachment.IsImage && this.imageCropper) {
             this.newAttachment.FileDataBase64 = this.imageCropper.crop().base64.split(";base64,")[1];
         }
         if (this.loadMultipleFiles != true) {
@@ -701,13 +734,17 @@ class EqpAttachmentsComponent {
                 this.attachmentsList = new Array();
             this.attachmentsList = this.attachmentsList.concat(this.newMultipleAttachments);
         }
-        if (this.attachmentTable)
-            this.attachmentTable.reloadDatatable();
+        // if (this.attachmentTable) this.attachmentTable.reloadDatatable();
         this.localEditedAttachments.emit(this.attachmentsList);
         if (this.newAttachment.IsImage) {
             this.dialogRefCropImage.close();
             this.restoreOriginalDimensions();
         }
+        if (this.newAttachment.AttachmentType === AttachmentType.LINK) {
+            this.newAttachment = {};
+            if (this.newAttachmentForm)
+                this.newAttachmentForm.reset();
+        }
     }
     /**
      * Apre il dialog per l'anteprima dell'allegato selezionato.
@@ -776,12 +813,16 @@ class EqpAttachmentsComponent {
      */
     async onFileAdded(event, isFileDropped = false) {
         this.showCropImage = false;
-        let filesOnInput = isFileDropped ? event : event.target.files;
+        // let filesOnInput = isFileDropped ? event : event.target.files;
+        const filesOnInput = isFileDropped
+            ? event
+            : Array.from(event.target?.files || []);
+        const { validFiles, oversizedFiles } = this.validationFile(filesOnInput, isFileDropped);
         //Se è stato richiesto il caricamento SINGOLO oppure se il caricamento è MULTIPLO ma è stato selezionato un solo file
         //allora verifica se il file è un immagine (per mostrare il CROPPIE)
-        if ([...filesOnInput].length == 1 || this.loadMultipleFiles != true) {
-            this.selectedFile = filesOnInput[0];
-            this.selectedFiles = filesOnInput;
+        if ([...validFiles].length == 1 || this.loadMultipleFiles != true) {
+            this.selectedFile = validFiles[0];
+            this.selectedFiles = validFiles;
             if (!this.selectedFile)
                 return;
             //Memorizza i dati per l'allegato
@@ -796,7 +837,7 @@ class EqpAttachmentsComponent {
             //Verifica se il file caricato è un'immagine oppure no. Se è un immagine, prima di caricarla mostra il croppie per il resize.
             //Se non è un immagine allora genera il Base64
             if (this.newAttachment.IsImage == true) {
-                this.getImageDimensions(filesOnInput[0]);
+                this.getImageDimensions(validFiles[0]);
                 //Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
                 this.newAttachmentForm.disable();
                 this.newAttachmentForm.controls["customWidth"].enable();
@@ -820,10 +861,11 @@ class EqpAttachmentsComponent {
             }
         }
         else {
-            this.selectedFiles = filesOnInput;
+            this.selectedFiles = validFiles;
             if (!this.selectedFiles || this.selectedFiles.length == 0)
                 return;
-            this.newMultipleAttachments = new Array();
+            if (!this.newMultipleAttachments)
+                this.newMultipleAttachments = [];
             for (let i = 0; i < this.selectedFiles.length; i++) {
                 let newAttachment = await this.createAttachmentFromUploadedFile(this.selectedFiles[i], true, true);
                 //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
@@ -834,10 +876,50 @@ class EqpAttachmentsComponent {
             }
             this.confirmAddAttachment();
         }
+        this.recomputeTotalsAndProgress();
+        this.simulateProgress();
+        // Caso 1: Successo Parziale (alcuni file validi, altri no)
+        if (oversizedFiles.length > 0 && validFiles.length > 0) {
+            const fileNames = oversizedFiles.join(', ');
+            this.showToast(`${validFiles.length} file aggiunti. ${oversizedFiles.length} non caricati perché troppo grandi (${fileNames}).`, 'error');
+        }
+        // Caso 2: Nessun file valido
+        else if (oversizedFiles.length > 0 && validFiles.length === 0) {
+        }
+        // Caso 3: Tutti i file validi
+        else if (oversizedFiles.length === 0 && validFiles.length > 0) {
+            this.showToast(`${validFiles.length} ${this.addedSuccessfullyLabel || 'file(s) aggiunti con successo.'}`, 'success');
+        }
         //Resetto il valore del file input in modo da scatenare il change anche se si dovesse caricare lo stesso file
         if (!isFileDropped)
             event.target.value = "";
     }
+    validationFile(filesOnInput, isFileDropped) {
+        const validFiles = [];
+        const oversizedFiles = [];
+        for (const file of filesOnInput) {
+            const fileSizeMB = file.size / 1024 / 1024;
+            if (fileSizeMB > this.maxFileSizeMB) {
+                oversizedFiles.push(file.name);
+            }
+            else {
+                validFiles.push(file);
+            }
+        }
+        // Show a single error message for all oversized files
+        if (oversizedFiles.length > 0) {
+            const fileNames = oversizedFiles.join(', ');
+            this.showToast(`File(s) troppo grandi: ${fileNames}. Limite: ${this.maxFileSizeMB}MB`, 'error');
+        }
+        // Abort if no files are valid
+        if (validFiles.length === 0) {
+            if (!isFileDropped) {
+                event.target.value = '';
+            }
+            return;
+        }
+        return { validFiles, oversizedFiles };
+    }
     /**
      * A partire dal FILE ricevuto in input ricostruisce l'oggetto IAttachmentDTO e lo restituisce.
      * Se il parametro getBase64 viene passato a TRUE allora, sempre a partire dal file,genera il base64 e
@@ -1055,35 +1137,14 @@ class EqpAttachmentsComponent {
         this.restoreOriginalDimensions();
     }
     //#endregion
-    // Viene creato un'array observables per memorizzare tutti gli observable creati dalle chiamate a fileEntry.file().
-    // Dopo che tutti gli observables sono stati completati, viene utilizzato il metodo subscribe() per eseguire la funzione onFileAdded().
-    fileDropped(files) {
-        let filesDropped = [];
-        const observables = [];
-        for (let i = 0; i < files.length; i++) {
-            if (files[i].fileEntry.isFile) {
-                const fileEntry = files[i].fileEntry;
-                const observable = new Observable((observer) => {
-                    fileEntry.file((file) => {
-                        filesDropped.push(file);
-                        observer.next(file);
-                        observer.complete();
-                    });
-                });
-                observables.push(observable);
-            }
-            else {
-                const fileEntry = files[i].fileEntry;
-                console.log(files[i].relativePath, fileEntry);
-            }
+    fileDropped(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOver = false;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.onFileAdded({ target: { files: files } });
         }
-        from(observables)
-            .pipe(concatMap((observable) => observable))
-            .subscribe({
-            complete: () => {
-                this.onFileAdded(filesDropped, true);
-            }
-        });
     }
     // Se il caricamento del file dropbox va a buon fine, la funzione di callback restituisce un array di oggetti.
     // Viene poi fatta una XMLHttpRequest con responseType 'blob' per convertire il primo elemento della response in un Blob.
@@ -1118,21 +1179,78 @@ class EqpAttachmentsComponent {
         fileInput.click();
     }
     // Metodo per visualizzare la form di aggiunta di un link
+    // switchToAddingLinkMode() {
+    //   this.addingLinkMode = true;
+    //   this.newAttachment = {} as IAttachmentDTO;
+    //   this.newAttachment.IsImage = false;
+    //   this.newAttachment.AttachmentType = this.attachmentType.LINK;
+    //   this.newMultipleAttachments = new Array<IAttachmentDTO>();
+    //   this.newMultipleAttachments.push(this.newAttachment);
+    //   this.createAttachmentForm();
+    // }
+    /**
+     * Apre il dialogo per l'inserimento del link.
+     */
     switchToAddingLinkMode() {
-        this.addingLinkMode = true;
-        this.newAttachment = {};
-        this.newAttachment.IsImage = false;
-        this.newAttachment.AttachmentType = this.attachmentType.LINK;
-        this.newMultipleAttachments = new Array();
-        this.newMultipleAttachments.push(this.newAttachment);
-        this.createAttachmentForm();
+        // 1. Crea il form per il dialogo
+        this.newAttachmentForm = this.formBuilder.group({
+            fileName: [''],
+            filePath: ['', [Validators.required, Validators.pattern('https?://.+')]]
+        });
+        // 2. Apri il dialogo
+        const dialogRef = this.dialog.open(this.addingLinkTemplate, {
+            width: '500px',
+        });
+        // 3. Gestisci il risultato alla chiusura
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                // A. Crea l'oggetto per il nuovo link dai dati del form
+                const newLinkObject = {
+                    ID: 0,
+                    AttachmentType: AttachmentType.LINK,
+                    FileName: result.fileName,
+                    FilePath: result.filePath,
+                    IsImage: false
+                };
+                // B. Prepara l'oggetto `newAttachment` che `confirmAddAttachment` si aspetta
+                this.newAttachment = newLinkObject;
+                this.newMultipleAttachments = [newLinkObject];
+                // C. Chiama la tua funzione di conferma centrale!
+                this.confirmAddAttachment();
+            }
+        });
+    }
+    // Metodo per ottenere le classi CSS dinamiche
+    getCardClass(att) {
+        return {
+            'file-preview': true,
+            'uploading': !!att.isUploading,
+            'card-small': this.cardSize === 'small',
+            'card-medium': this.cardSize === 'medium',
+            'card-large': this.cardSize === 'large',
+            // Nessuna classe specifica per 'custom', useremo style.cssText
+        };
+    }
+    // Questa funzione ora si applica al contenitore, non alla singola card.
+    getPreviewsContainerStyle() {
+        let minWidth = '200px'; // Dimensione di default per 'medium'
+        if (this.cardSize === 'small') {
+            minWidth = '140px';
+        }
+        else if (this.cardSize === 'large') {
+            minWidth = '280px';
+        }
+        else if (this.cardSize === 'custom') {
+            minWidth = `${this.customCardWidthPx}px`;
+        }
+        return { '--card-min-width': minWidth };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatMiniFabButton, selector: "button[mat-mini-fab]", 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", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", headerTitle: "headerTitle", attachmentsList: "attachmentsList", singleAttachment: "singleAttachment", showMatCard: "showMatCard", multipleAttachment: "multipleAttachment", loadMultipleFiles: "loadMultipleFiles", 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", maxFileSizeMB: "maxFileSizeMB", cardSize: "cardSize", customCardWidthPx: "customCardWidthPx", customCardHeightPx: "customCardHeightPx", 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", deleteDialogTitle: "deleteDialogTitle", deleteDialogMessage: "deleteDialogMessage", noImageSelectedErrorMessage: "noImageSelectedErrorMessage", wrongTypeSelectedErrorMessage: "wrongTypeSelectedErrorMessage", videoPreviewErrorMessage: "videoPreviewErrorMessage", audioPreviewErrorMessage: ["videoPreviewErrorMessage", "audioPreviewErrorMessage"], flipHorinzontalLabel: "flipHorinzontalLabel", flipVerticalLabel: "flipVerticalLabel", rotateRightLabel: "rotateRightLabel", rotateLeftLabel: "rotateLeftLabel", uploadTitle: "uploadTitle", uploadSubtitle: "uploadSubtitle", dropHereLabel: "dropHereLabel", supportedFormatsLabel: "supportedFormatsLabel", browseFilesLabel: "browseFilesLabel", uploadSummaryLabel: "uploadSummaryLabel", filesLabel: "filesLabel", totalSizeLabel: "totalSizeLabel", emptyStateLabel: "emptyStateLabel", addedSuccessfullyLabel: "addedSuccessfullyLabel", removedLabel: "removedLabel", chooseView: "chooseView", showSummary: "showSummary", viewMode: "viewMode" }, 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: "addingLinkTemplate", first: true, predicate: ["addingLinkTemplate"], descendants: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], 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 class=\"header\">\r\n  <h1>{{ uploadTitle }}</h1>\r\n  @if(chooseView == true){\r\n  <mat-button-toggle-group [value]=\"viewMode\" (change)=\"setViewMode($event.value)\"\r\n    aria-label=\"Modalit\u00E0 di visualizzazione\">\r\n    <mat-button-toggle value=\"card\"><mat-icon>grid_view</mat-icon></mat-button-toggle>\r\n    <mat-button-toggle value=\"table\"><mat-icon>view_list</mat-icon></mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n\r\n<!-- Gestione singolo -->\r\n@if (multipleAttachment != true) {\r\n@if (!singleAttachmentDragAndDrop) {\r\n@if (!addingLinkMode) {\r\n<div class=\"text-center\">\r\n  <ng-container [ngTemplateOutlet]=\"addAttachmentButton\"></ng-container>\r\n</div>\r\n} @else {\r\n<div class=\"text-center\">\r\n  <ng-container [ngTemplateOutlet]=\"addingLinkTemplate\"></ng-container>\r\n</div>\r\n}\r\n} @else {\r\n<input #fileInput id=\"file_attachment\" name=\"file_attachment\" type=\"file\" hidden (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n@if (allowedTypes && allowedTypes.includes(1) && (!attachmentsList || attachmentsList.length == 0 ||\r\n(attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver\" (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\" (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\">\r\n  <div class=\"dropbox-icon\">\uD83D\uDCC1</div>\r\n  <div class=\"dropbox-text\">{{ dropHereLabel }}</div>\r\n  <div class=\"dropbox-subtext\">\r\n    {{ supportedFormatsLabel }}\r\n  </div>\r\n  <button class=\"browse-btn\" type=\"button\" (click)=\"$event.stopPropagation(); fileInput.click()\">\r\n    {{ browseFilesLabel }}\r\n  </button>\r\n  <div class=\"secondary-action\">\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    @if (allowedTypes.includes(2) && allowedTypes.includes(3)) {\r\n    <a class=\"secondary-action-link\" [matMenuTriggerFor]=\"linkMenu\" (click)=\"$event.stopPropagation()\">\r\n      o aggiungi da web\r\n    </a>\r\n    <mat-menu #linkMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"switchToAddingLinkMode()\">\r\n        <mat-icon>link</mat-icon>\r\n        <span>Aggiungi da link</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"chooseDropboxFile()\">\r\n        <mat-icon>cloud_queue</mat-icon>\r\n        <span>Carica da Dropbox</span>\r\n      </button>\r\n    </mat-menu>\r\n    }\r\n\r\n    @else if (allowedTypes.includes(2)) {\r\n    <a class=\"secondary-action-link\" (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">\r\n      aggiungi un link\r\n    </a>\r\n    }\r\n\r\n    @else if (allowedTypes.includes(3)) {\r\n    <a class=\"secondary-action-link\" (click)=\"$event.stopPropagation(); chooseDropboxFile()\">\r\n      carica da Dropbox\r\n    </a>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}\r\n\r\n<!-- Azioni singolo elemento (come prima) -->\r\n<div class=\"text-center\">\r\n  @if (attachmentsList && attachmentsList.length > 0 && attachmentsList[0]) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n    mat-raised-button color=\"primary\">\r\n    @if (attachmentsList[0].AttachmentType == AttachmentType.FILE) {\r\n    <mat-icon>download</mat-icon>\r\n    } @else {\r\n    <mat-icon>open_in_new</mat-icon>\r\n    }\r\n    {{ attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel }}\r\n  </button>\r\n\r\n  @if (showPreview && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video')\r\n  && !attachmentsList[0].FileContentType.startsWith('audio'))) && attachmentsList[0].IsImage == true) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n    mat-raised-button color=\"primary\">\r\n    <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n  </button>\r\n  }\r\n\r\n  <button [disabled]=\"disableAction\" class=\"mb-2 eqp-attachments-delete-btn\"\r\n    (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\" mat-raised-button [disabled]=\"isDisabled\">\r\n    <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n  </button>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Gestione multipla -->\r\n@if (multipleAttachment == true) {\r\n<input #fileInput id=\"file_attachment_multi\" name=\"file_attachment_multi\" type=\"file\" hidden\r\n  (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver\" (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\" (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\">\r\n  <div class=\"dropbox-icon\">\uD83D\uDCC1</div>\r\n  <div class=\"dropbox-text\">{{ dropHereLabel }}</div>\r\n  <div class=\"dropbox-subtext\">\r\n    {{ supportedFormatsLabel }}\r\n  </div>\r\n  <button class=\"browse-btn\" type=\"button\" (click)=\"$event.stopPropagation(); fileInput.click()\">\r\n    {{ browseFilesLabel }}\r\n  </button>\r\n  <div class=\"secondary-action-link\">\r\n    o <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">aggiungi un link</a>\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (attachmentsList?.length > 0 && showSummary) {\r\n<div class=\"upload-stats\">\r\n\r\n  <div class=\"stats-info\">\r\n    <div class=\"stat-item\">\r\n      <div class=\"stat-value\">{{ attachmentsList?.length }}</div>\r\n      <div class=\"stat-label\">{{ filesLabel }}</div>\r\n    </div>\r\n    <div class=\"stat-item\">\r\n      <div class=\"stat-value\">{{ totalSizeFormatted }}</div>\r\n      <div class=\"stat-label\">{{ totalSizeLabel }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"progress-bar\">\r\n    <div class=\"progress-fill\" [style.width.%]=\"progressPercent\"></div>\r\n  </div>\r\n\r\n</div>\r\n} @else if(attachmentsList?.length == 0){\r\n<div class=\"empty-state\">{{ emptyStateLabel }}</div>\r\n}\r\n\r\n<!-- Griglia anteprime card (vale per singolo e multiplo) -->\r\n@if (viewMode === 'card') {\r\n\r\n<div class=\"file-previews\" [ngStyle]=\"getPreviewsContainerStyle()\">\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div [ngClass]=\"getCardClass(att)\">\r\n\r\n    <div class=\"preview-img-container\" (click)=\"!att.isUploading && openPreviewDialog(att)\">\r\n      @if (att.IsImage) {\r\n      <img class=\"preview-img\" [src]=\"'data:image/png;base64,' + (att.FileThumbnailBase64 || att.FileDataBase64)\"\r\n        [alt]=\"att.FileName\" />\r\n      } @else {\r\n      <div class=\"file-icon\">\r\n        <i [ngClass]=\"getAttachmentIcon(att)\"></i>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"file-info\">\r\n      <div class=\"file-name\" [title]=\"att.FileName\">{{ att.FileName }}</div>\r\n    </div>\r\n\r\n    @if(!disableAction){\r\n    <button mat-icon-button class=\"remove-btn\" type=\"button\" aria-label=\"Rimuovi allegato\"\r\n      (click)=\"deleteAttachment(att)\">\r\n      <mat-icon>delete</mat-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (att.isUploading) {\r\n    <div class=\"upload-spinner\"></div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n} @else {\r\n\r\n<div class=\"table-view-container\">\r\n  <div class=\"table-header\">\r\n    <div class=\"table-cell name-col\">File</div>\r\n    <div class=\"table-cell actions-col\">Azioni</div>\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n    <div class=\"table-cell name-col\">\r\n      <i class=\"file-icon-small\" [ngClass]=\"getAttachmentIcon(att)\"></i>\r\n      <div class=\"file-info-text\">\r\n        <span class=\"file-name-table\">{{ att.FileName }}</span>\r\n        <span class=\"file-type-table\">{{ att.FileExtension || 'Link' }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-cell actions-col\">\r\n      <button mat-icon-button (click)=\"viewAttachment(att)\" matTooltip=\"Visualizza/Scarica\">\r\n        <mat-icon>{{ att.AttachmentType === attachmentType.FILE ? 'download' : 'open_in_new' }}</mat-icon>\r\n      </button>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"actionsMenu\" matTooltip=\"Altre opzioni\">\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #actionsMenu=\"matMenu\">\r\n        <button mat-menu-item\r\n          (click)=\"openPreviewDialog(att)\"><mat-icon>visibility</mat-icon><span>Anteprima</span></button>\r\n        <button [disabled]=\"disableAction\" mat-menu-item (click)=\"deleteAttachment(att)\" matTooltip=\"Elimina\">\r\n          <mat-icon color=\"warn\">delete</mat-icon>\r\n          <span>Elimina</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Notifica toast -->\r\n<div class=\"upload-notification\" [class.show]=\"toast?.visible\" [class.success]=\"toast?.type === 'success'\"\r\n  [class.error]=\"toast?.type === 'error'\">\r\n  <span>{{ toast?.text }}</span>\r\n  <div class=\"notification-progress\"></div>\r\n</div>\r\n\r\n\r\n<ng-template #dialogCropImage>\r\n  <div style=\"overflow-x: hidden\" [ngClass]=\"cropDialogClass\">\r\n    @if (showCropImage == true) {\r\n    <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\">\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n  @if (row.AttachmentType != AttachmentType.LINK && row.IsImage) {\r\n  <div class=\"inline-preview-container\" (click)=\"openPreviewDialog(row)\">\r\n    <img [src]=\"'data:image/png;base64,' + (row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64)\" />\r\n  </div>\r\n  } @else if (row.AttachmentType != AttachmentType.LINK && !row.IsImage) {\r\n  <div class=\"inline-preview-container\" (click)=\"openPreviewDialog(row)\">\r\n    <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n  @if (selectedAttachment) {\r\n  <h2 mat-dialog-title class=\"dialog-header\">\r\n    <span>\r\n      {{ previewLabel }} {{ selectedAttachment!.AttachmentType === attachmentType.FILE ? \"File\" : \"Link\" }}\r\n    </span>\r\n    <button mat-icon-button mat-dialog-close aria-label=\"Chiudi anteprima\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </h2>\r\n\r\n  <mat-dialog-content class=\"dialog-content\">\r\n    @if (selectedAttachment!.IsImage) {\r\n    <img class=\"preview-image\"\r\n      [src]=\"'data:image/png;base64,' + (selectedAttachment!.FileDataBase64 || selectedAttachment!.FileThumbnailBase64)\"\r\n      alt=\"Anteprima allegato\" />\r\n    } @else {\r\n    <iframe class=\"preview-iframe\" [src]=\"selectedAttachment!.TrustedUrl\" [title]=\"selectedAttachment!.FileName\">\r\n    </iframe>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions [align]=\"'center'\">\r\n    @if (selectedAttachment!.AttachmentType !== AttachmentType.LINK) {\r\n    <button mat-raised-button color=\"primary\" (click)=\"viewAttachment(selectedAttachment!)\">\r\n      <mat-icon>download</mat-icon>\r\n      <span>{{ downloadLabel }}</span>\r\n    </button>\r\n    }\r\n  </mat-dialog-actions>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n  <input #fileInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n    (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n  @if (allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || !attachmentsList ||\r\n  attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <button class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n    (click)=\"addFile(allowedTypes[0], fileInput)\" [disabled]=\"isDisabled\">\r\n    @if (allowedTypes[0] == 1) { <mat-icon>cloud_upload</mat-icon> }\r\n    @if (allowedTypes[0] == 2) { <i class=\"fas fa-link\"></i> }\r\n    @if (allowedTypes[0] == 3) { <i class=\"fa-brands fa-dropbox\"></i> }\r\n    <span style=\"margin-left: 10px\">\r\n      {{ allowedTypes[0] == 1 ? (addButtonLabel + \" file\") : allowedTypes[0] == 2 ? (addButtonLabel + \" link\") :\r\n      uploadWithDropboxLabel }}\r\n    </span>\r\n  </button>\r\n  }\r\n\r\n  @if (!separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true ||\r\n  !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <button class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n    [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\">\r\n    @if (multipleAttachment != true) { <mat-icon>cloud_upload</mat-icon> } @else { <mat-icon>add</mat-icon> }\r\n    <span style=\"margin-left: 0px\">{{ addButtonLabel }}</span>\r\n  </button>\r\n\r\n  <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n    <input #imageInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n      (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n    @if (allowedTypes.includes(1)) {\r\n    <button mat-menu-item (click)=\"imageInput.click()\" 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    }\r\n    @if (allowedTypes.includes(2)) {\r\n    <button mat-menu-item (click)=\"switchToAddingLinkMode()\" 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    }\r\n    @if (allowedTypes.includes(3)) {\r\n    <button mat-menu-item (click)=\"chooseDropboxFile()\" 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    }\r\n  </mat-menu>\r\n  }\r\n\r\n  @if (separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true ||\r\n  !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <div class=\"btn-group\">\r\n    @if (allowedTypes.includes(1)) {\r\n    <button (click)=\"imageInput.click()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" 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    }\r\n    <input #imageInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n      (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n    @if (allowedTypes.includes(2)) {\r\n    <button (click)=\"switchToAddingLinkMode()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" type=\"button\">\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    }\r\n    @if (allowedTypes.includes(3)) {\r\n    <button (click)=\"chooseDropboxFile()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" 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    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate>\r\n  <!-- Header compatto -->\r\n  <h2 class=\"dialog-header m-3\">\r\n    <span>{{ cropLabel }}</span>\r\n    <button mat-icon-button type=\"button\" aria-label=\"Chiudi\" (click)=\"abortFile()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </h2>\r\n\r\n  <!-- Contenuto scrollabile con griglia responsive -->\r\n  <div class=\"dialog-content\">\r\n    <!-- Toolbar controlli (large) -->\r\n    <div class=\"controls-row crop-large\">\r\n      @if (cropOptions.includes(1)) {\r\n      <button [matTooltip]=\"rotateLeftLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"rotateLeft()\">\r\n        <mat-icon>rotate_left</mat-icon>\r\n      </button>\r\n      <button [matTooltip]=\"rotateRightLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"rotateRight()\">\r\n        <mat-icon>rotate_right</mat-icon>\r\n      </button>\r\n      }\r\n      @if (cropOptions.includes(2)) {\r\n      <button [matTooltip]=\"flipHorinzontalLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"flipHorizontal()\">\r\n        <mat-icon>flip_horizontal</mat-icon>\r\n      </button>\r\n      <button [matTooltip]=\"flipVerticalLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"flipVertical()\">\r\n        <mat-icon>flip_vertical</mat-icon>\r\n      </button>\r\n      }\r\n      <button [matTooltip]=\"'Reset'\" class=\"btn btn-primary mat-raised-button\" (click)=\"restoreOriginalDimensions()\">\r\n        <mat-icon>replay</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Toolbar controlli (small) -->\r\n    <div class=\"controls-row crop-small\">\r\n      @if (cropOptions.includes(1)) {\r\n      <mat-icon class=\"control-icon\" (click)=\"rotateLeft()\">rotate_left</mat-icon>\r\n      <mat-icon class=\"control-icon\" (click)=\"rotateRight()\">rotate_right</mat-icon>\r\n      }\r\n      @if (cropOptions.includes(2)) {\r\n      <mat-icon class=\"control-icon\" (click)=\"flipHorizontal()\">flip_horizontal</mat-icon>\r\n      <mat-icon class=\"control-icon\" (click)=\"flipVertical()\">flip_vertical</mat-icon>\r\n      }\r\n      <mat-icon class=\"control-icon\" (click)=\"restoreOriginalDimensions()\">replay</mat-icon>\r\n    </div>\r\n\r\n    <!-- Area crop con contenimento -->\r\n    <div class=\"crop-area\">\r\n      <div class=\"crop-container\">\r\n        <image-cropper [imageFile]=\"selectedFile\" [maintainAspectRatio]=\"false\" [autoCrop]=\"false\"\r\n          [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4 / 3\" [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\"\r\n          [roundCropper]=\"false\" [canvasRotation]=\"0\" [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\" [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\"\r\n          [canvasRotation]=\"canvasRotation\" [output]=\"'base64'\">\r\n        </image-cropper>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Azioni -->\r\n  <div class=\"dialog-actions crop-large\">\r\n    <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn\" 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\r\n  <div class=\"dialog-actions crop-small\">\r\n    <button class=\"icon-action\" type=\"button\" (click)=\"abortFile()\" aria-label=\"Abort\">\r\n      <i class=\"fa fa-times\"></i>\r\n    </button>\r\n    <button class=\"icon-action\" type=\"button\" (click)=\"confirmAddAttachment()\" aria-label=\"Confirm\">\r\n      <i class=\"fa fa-check\"></i>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n  <h2 mat-dialog-title>Aggiungi un link</h2>\r\n  <mat-dialog-content class=\"add-link-dialog-content\">\r\n    <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>URL *</mat-label>\r\n        <input matInput formControlName=\"filePath\" placeholder=\"https://...\" required>\r\n        @if (newAttachmentForm.get('filePath')?.hasError('pattern')) {\r\n        <mat-error>L'URL non sembra valido.</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>Nome (opzionale)</mat-label>\r\n        <input matInput formControlName=\"fileName\" placeholder=\"Es. Documento Progetto\">\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button mat-dialog-close>Annulla</button>\r\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"newAttachmentForm.value\"\r\n      [disabled]=\"newAttachmentForm.invalid\">\r\n      Aggiungi\r\n    </button>\r\n  </mat-dialog-actions>\r\n</ng-template>", styles: [":host{--primary-color: #6a5af9;--primary-color-dark: #5441f8;--success-color: #1ce593;--error-color: #ff5b5b;--background-light: #f7f9fc;--background-card: rgba(255, 255, 255, .7);--text-color: #1e293b;--text-color-light: #64748b;--border-color: rgba(203, 213, 225, .5);--shadow-color: rgba(99, 102, 241, .2);--border-radius: 16px;--transition-speed: .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--primary-color)}70%{box-shadow:0 0 0 10px #6a5af900}to{box-shadow:0 0 #6a5af900}}.container{width:100%;max-width:700px;margin:2rem auto;font-family:Inter,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.header h1{color:var(--text-color);font-size:1.8rem;font-weight:700;margin:0}.dropbox{width:100%;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;background-color:var(--background-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-speed) ease}.dropbox:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color);border-color:var(--primary-color)}.dropbox.dragover{border-style:solid;border-color:var(--primary-color);transform:scale(1.02);box-shadow:0 0 25px var(--shadow-color);animation:pulse 1.5s infinite}.dropbox .dropbox-icon{font-size:3.5rem;color:var(--primary-color)}.dropbox .dropbox-text{font-size:1.1rem;font-weight:600;color:var(--text-color);margin-top:1rem}.dropbox .dropbox-subtext{color:var(--text-color-light);margin-top:.5rem}.dropbox .browse-btn{margin-top:1.5rem;padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:10px;font-weight:600;transition:all var(--transition-speed) ease}.dropbox .browse-btn:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.file-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.file-previews{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width, 200px),1fr))}.file-preview{background-color:var(--background-card);border-radius:var(--border-radius);box-shadow:0 4px 15px #0000000d;border:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column;position:relative;opacity:0;animation:fadeIn .5s ease-out forwards;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.file-preview.uploading{cursor:wait}.file-preview.uploading .preview-img-container:after{content:\"\";position:absolute;inset:0;background:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none}.file-preview .remove-btn{position:absolute;top:8px;right:8px;z-index:2;background-color:#0000004d;color:#fff;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;transition:all var(--transition-speed) ease}.file-preview .remove-btn:hover{background-color:#ff5b5b}.file-preview .remove-btn .mat-icon{font-size:18px}@media (hover: hover) and (min-width: 769px){.file-preview .remove-btn{opacity:0;transform:scale(.8)}.file-preview:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color)}.file-preview:hover .remove-btn{opacity:1;transform:scale(1)}}.file-preview .preview-img-container{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;background-color:#f0f2f5}.file-preview .preview-img{width:100%;height:100%;object-fit:cover}.file-preview .file-icon{font-size:4rem;color:var(--primary-color)}.file-preview .file-info{padding:12px;border-top:1px solid var(--border-color);flex-grow:1;display:flex;align-items:center}.file-preview .file-name{font-weight:600;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview .upload-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;pointer-events:none}.file-preview.card-small{width:140px}.file-preview.card-small .preview-img-container{height:80px}.file-preview.card-small .file-info{padding:8px}.file-preview.card-small .file-name{font-size:.8rem}.file-preview.card-small .file-icon{font-size:3rem}.file-preview.card-small .remove-btn{width:28px;height:28px}.file-preview.card-small .remove-btn .mat-icon{font-size:16px}.file-preview.card-large{width:280px}.file-preview.card-large .preview-img-container{height:180px}.file-preview.card-large .file-info{padding:16px}.file-preview.card-large .file-name{font-size:1rem}.file-preview.card-large .file-icon{font-size:5rem}.file-preview.card-large .remove-btn{width:36px;height:36px}.file-preview.card-large .remove-btn .mat-icon{font-size:20px}.file-preview[style*=--eqp-card-width]{width:var(--eqp-card-width)}.file-preview[style*=--eqp-card-width] .preview-img-container{height:calc(var(--eqp-card-width) * .65)}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.upload-stats{background-color:var(--background-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;margin-top:2rem;animation:fadeIn .5s ease-out}.upload-stats .stats-info{display:flex;justify-content:space-around}.upload-stats .progress-bar{height:10px;background-color:var(--border-color);border-radius:5px;overflow:hidden;margin-top:1rem}.upload-stats .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--success-color));transition:width var(--transition-speed) ease-out;border-radius:5px}.upload-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%,100px);padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;font-weight:600;box-shadow:0 10px 30px #0003;transition:transform var(--transition-speed) cubic-bezier(.175,.885,.32,1.275)}.upload-notification.show{transform:translate(-50%)}.upload-notification.success{background-color:var(--success-color)}.upload-notification.error{background-color:var(--error-color)}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%}.dialog-content{display:flex;justify-content:center;align-items:center;padding:16px 24px;overflow:auto}.preview-image{max-width:100%;max-height:70vh;height:auto;object-fit:contain}.preview-iframe{width:80vw;height:75vh;border:none;max-width:1200px}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog-content{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow:auto;padding:0 16px 8px}.controls-row{display:flex;align-items:center;justify-content:center;gap:8px}.control-icon{font-size:28px;cursor:pointer}.crop-area{display:flex;justify-content:center}.crop-container{width:100%;max-width:720px;aspect-ratio:4/3;border-radius:8px;background:#f9f9f9;overflow:hidden}image-cropper,image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.dialog-actions{display:flex;justify-content:center;gap:12px;padding:12px 16px}.crop-large{display:flex}.crop-small{display:none}@media (max-width: 600px){.dialog-content{max-height:55vh}.crop-container{max-width:100%;aspect-ratio:auto}.crop-large{display:none}.crop-small{display:flex;justify-content:center;gap:14px}.control-icon{font-size:24px}}.stats-header{display:flex;justify-content:space-between;align-items:center;width:100%}.table-view-container{margin-top:1.5rem;background-color:var(--background-card);border-radius:var(--border-radius);border:1px solid var(--border-color);overflow:hidden;animation:fadeIn .5s ease-out}.table-header,.table-row{display:flex;align-items:center;padding:0 1rem;transition:background-color var(--transition-speed) ease}.table-header{background-color:#f8f9fa;font-weight:600;color:var(--text-color-light);font-size:.8rem;text-transform:uppercase;border-bottom:2px solid var(--border-color)}.table-row{border-bottom:1px solid var(--border-color)}.table-row:last-child{border-bottom:none}.table-row:hover{background-color:#00000005}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem}.name-col{flex:4}.size-col,.date-col{flex:2}.actions-col{flex:1;justify-content:flex-end;min-width:150px}.file-icon-small{font-size:1.5rem;color:var(--primary-color)}.file-info-text{display:flex;flex-direction:column}.file-name-table{font-weight:600;color:var(--text-color)}.file-type-table{font-size:.8rem;color:var(--text-color-light)}@media (max-width: 768px){.date-col{display:none}.name-col{flex:3}.size-col{flex:2}.actions-col{flex:2;min-width:120px}}.secondary-action-link{color:var(--primary-color);text-decoration:none;border-bottom:1px solid var(--primary-color);cursor:pointer;font-weight:500}.secondary-action-link:hover{color:var(--primary-color-dark);border-bottom-color:var(--primary-color-dark)}h2[mat-dialog-title]+mat-dialog-content.add-link-dialog-content{padding-top:20px}mat-dialog-content.add-link-dialog-content{padding-left:24px;padding-right:24px;padding-bottom:20px}.add-link-form{display:flex;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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"] }]
+            args: [{ selector: "eqp-attachments", template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div class=\"header\">\r\n  <h1>{{ uploadTitle }}</h1>\r\n  @if(chooseView == true){\r\n  <mat-button-toggle-group [value]=\"viewMode\" (change)=\"setViewMode($event.value)\"\r\n    aria-label=\"Modalit\u00E0 di visualizzazione\">\r\n    <mat-button-toggle value=\"card\"><mat-icon>grid_view</mat-icon></mat-button-toggle>\r\n    <mat-button-toggle value=\"table\"><mat-icon>view_list</mat-icon></mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n\r\n<!-- Gestione singolo -->\r\n@if (multipleAttachment != true) {\r\n@if (!singleAttachmentDragAndDrop) {\r\n@if (!addingLinkMode) {\r\n<div class=\"text-center\">\r\n  <ng-container [ngTemplateOutlet]=\"addAttachmentButton\"></ng-container>\r\n</div>\r\n} @else {\r\n<div class=\"text-center\">\r\n  <ng-container [ngTemplateOutlet]=\"addingLinkTemplate\"></ng-container>\r\n</div>\r\n}\r\n} @else {\r\n<input #fileInput id=\"file_attachment\" name=\"file_attachment\" type=\"file\" hidden (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n@if (allowedTypes && allowedTypes.includes(1) && (!attachmentsList || attachmentsList.length == 0 ||\r\n(attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver\" (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\" (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\">\r\n  <div class=\"dropbox-icon\">\uD83D\uDCC1</div>\r\n  <div class=\"dropbox-text\">{{ dropHereLabel }}</div>\r\n  <div class=\"dropbox-subtext\">\r\n    {{ supportedFormatsLabel }}\r\n  </div>\r\n  <button class=\"browse-btn\" type=\"button\" (click)=\"$event.stopPropagation(); fileInput.click()\">\r\n    {{ browseFilesLabel }}\r\n  </button>\r\n  <div class=\"secondary-action\">\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    @if (allowedTypes.includes(2) && allowedTypes.includes(3)) {\r\n    <a class=\"secondary-action-link\" [matMenuTriggerFor]=\"linkMenu\" (click)=\"$event.stopPropagation()\">\r\n      o aggiungi da web\r\n    </a>\r\n    <mat-menu #linkMenu=\"matMenu\">\r\n      <button mat-menu-item (click)=\"switchToAddingLinkMode()\">\r\n        <mat-icon>link</mat-icon>\r\n        <span>Aggiungi da link</span>\r\n      </button>\r\n      <button mat-menu-item (click)=\"chooseDropboxFile()\">\r\n        <mat-icon>cloud_queue</mat-icon>\r\n        <span>Carica da Dropbox</span>\r\n      </button>\r\n    </mat-menu>\r\n    }\r\n\r\n    @else if (allowedTypes.includes(2)) {\r\n    <a class=\"secondary-action-link\" (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">\r\n      aggiungi un link\r\n    </a>\r\n    }\r\n\r\n    @else if (allowedTypes.includes(3)) {\r\n    <a class=\"secondary-action-link\" (click)=\"$event.stopPropagation(); chooseDropboxFile()\">\r\n      carica da Dropbox\r\n    </a>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}\r\n\r\n<!-- Azioni singolo elemento (come prima) -->\r\n<div class=\"text-center\">\r\n  @if (attachmentsList && attachmentsList.length > 0 && attachmentsList[0]) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n    mat-raised-button color=\"primary\">\r\n    @if (attachmentsList[0].AttachmentType == AttachmentType.FILE) {\r\n    <mat-icon>download</mat-icon>\r\n    } @else {\r\n    <mat-icon>open_in_new</mat-icon>\r\n    }\r\n    {{ attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel }}\r\n  </button>\r\n\r\n  @if (showPreview && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video')\r\n  && !attachmentsList[0].FileContentType.startsWith('audio'))) && attachmentsList[0].IsImage == true) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n    mat-raised-button color=\"primary\">\r\n    <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n  </button>\r\n  }\r\n\r\n  <button [disabled]=\"disableAction\" class=\"mb-2 eqp-attachments-delete-btn\"\r\n    (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\" mat-raised-button [disabled]=\"isDisabled\">\r\n    <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n  </button>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Gestione multipla -->\r\n@if (multipleAttachment == true) {\r\n<input #fileInput id=\"file_attachment_multi\" name=\"file_attachment_multi\" type=\"file\" hidden\r\n  (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver\" (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\" (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\">\r\n  <div class=\"dropbox-icon\">\uD83D\uDCC1</div>\r\n  <div class=\"dropbox-text\">{{ dropHereLabel }}</div>\r\n  <div class=\"dropbox-subtext\">\r\n    {{ supportedFormatsLabel }}\r\n  </div>\r\n  <button class=\"browse-btn\" type=\"button\" (click)=\"$event.stopPropagation(); fileInput.click()\">\r\n    {{ browseFilesLabel }}\r\n  </button>\r\n  <div class=\"secondary-action-link\">\r\n    o <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">aggiungi un link</a>\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (attachmentsList?.length > 0 && showSummary) {\r\n<div class=\"upload-stats\">\r\n\r\n  <div class=\"stats-info\">\r\n    <div class=\"stat-item\">\r\n      <div class=\"stat-value\">{{ attachmentsList?.length }}</div>\r\n      <div class=\"stat-label\">{{ filesLabel }}</div>\r\n    </div>\r\n    <div class=\"stat-item\">\r\n      <div class=\"stat-value\">{{ totalSizeFormatted }}</div>\r\n      <div class=\"stat-label\">{{ totalSizeLabel }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"progress-bar\">\r\n    <div class=\"progress-fill\" [style.width.%]=\"progressPercent\"></div>\r\n  </div>\r\n\r\n</div>\r\n} @else if(attachmentsList?.length == 0){\r\n<div class=\"empty-state\">{{ emptyStateLabel }}</div>\r\n}\r\n\r\n<!-- Griglia anteprime card (vale per singolo e multiplo) -->\r\n@if (viewMode === 'card') {\r\n\r\n<div class=\"file-previews\" [ngStyle]=\"getPreviewsContainerStyle()\">\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div [ngClass]=\"getCardClass(att)\">\r\n\r\n    <div class=\"preview-img-container\" (click)=\"!att.isUploading && openPreviewDialog(att)\">\r\n      @if (att.IsImage) {\r\n      <img class=\"preview-img\" [src]=\"'data:image/png;base64,' + (att.FileThumbnailBase64 || att.FileDataBase64)\"\r\n        [alt]=\"att.FileName\" />\r\n      } @else {\r\n      <div class=\"file-icon\">\r\n        <i [ngClass]=\"getAttachmentIcon(att)\"></i>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"file-info\">\r\n      <div class=\"file-name\" [title]=\"att.FileName\">{{ att.FileName }}</div>\r\n    </div>\r\n\r\n    @if(!disableAction){\r\n    <button mat-icon-button class=\"remove-btn\" type=\"button\" aria-label=\"Rimuovi allegato\"\r\n      (click)=\"deleteAttachment(att)\">\r\n      <mat-icon>delete</mat-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (att.isUploading) {\r\n    <div class=\"upload-spinner\"></div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n} @else {\r\n\r\n<div class=\"table-view-container\">\r\n  <div class=\"table-header\">\r\n    <div class=\"table-cell name-col\">File</div>\r\n    <div class=\"table-cell actions-col\">Azioni</div>\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n    <div class=\"table-cell name-col\">\r\n      <i class=\"file-icon-small\" [ngClass]=\"getAttachmentIcon(att)\"></i>\r\n      <div class=\"file-info-text\">\r\n        <span class=\"file-name-table\">{{ att.FileName }}</span>\r\n        <span class=\"file-type-table\">{{ att.FileExtension || 'Link' }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-cell actions-col\">\r\n      <button mat-icon-button (click)=\"viewAttachment(att)\" matTooltip=\"Visualizza/Scarica\">\r\n        <mat-icon>{{ att.AttachmentType === attachmentType.FILE ? 'download' : 'open_in_new' }}</mat-icon>\r\n      </button>\r\n      <button mat-icon-button [matMenuTriggerFor]=\"actionsMenu\" matTooltip=\"Altre opzioni\">\r\n        <mat-icon>more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #actionsMenu=\"matMenu\">\r\n        <button mat-menu-item\r\n          (click)=\"openPreviewDialog(att)\"><mat-icon>visibility</mat-icon><span>Anteprima</span></button>\r\n        <button [disabled]=\"disableAction\" mat-menu-item (click)=\"deleteAttachment(att)\" matTooltip=\"Elimina\">\r\n          <mat-icon color=\"warn\">delete</mat-icon>\r\n          <span>Elimina</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Notifica toast -->\r\n<div class=\"upload-notification\" [class.show]=\"toast?.visible\" [class.success]=\"toast?.type === 'success'\"\r\n  [class.error]=\"toast?.type === 'error'\">\r\n  <span>{{ toast?.text }}</span>\r\n  <div class=\"notification-progress\"></div>\r\n</div>\r\n\r\n\r\n<ng-template #dialogCropImage>\r\n  <div style=\"overflow-x: hidden\" [ngClass]=\"cropDialogClass\">\r\n    @if (showCropImage == true) {\r\n    <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\">\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n  @if (row.AttachmentType != AttachmentType.LINK && row.IsImage) {\r\n  <div class=\"inline-preview-container\" (click)=\"openPreviewDialog(row)\">\r\n    <img [src]=\"'data:image/png;base64,' + (row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64)\" />\r\n  </div>\r\n  } @else if (row.AttachmentType != AttachmentType.LINK && !row.IsImage) {\r\n  <div class=\"inline-preview-container\" (click)=\"openPreviewDialog(row)\">\r\n    <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n  @if (selectedAttachment) {\r\n  <h2 mat-dialog-title class=\"dialog-header\">\r\n    <span>\r\n      {{ previewLabel }} {{ selectedAttachment!.AttachmentType === attachmentType.FILE ? \"File\" : \"Link\" }}\r\n    </span>\r\n    <button mat-icon-button mat-dialog-close aria-label=\"Chiudi anteprima\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </h2>\r\n\r\n  <mat-dialog-content class=\"dialog-content\">\r\n    @if (selectedAttachment!.IsImage) {\r\n    <img class=\"preview-image\"\r\n      [src]=\"'data:image/png;base64,' + (selectedAttachment!.FileDataBase64 || selectedAttachment!.FileThumbnailBase64)\"\r\n      alt=\"Anteprima allegato\" />\r\n    } @else {\r\n    <iframe class=\"preview-iframe\" [src]=\"selectedAttachment!.TrustedUrl\" [title]=\"selectedAttachment!.FileName\">\r\n    </iframe>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions [align]=\"'center'\">\r\n    @if (selectedAttachment!.AttachmentType !== AttachmentType.LINK) {\r\n    <button mat-raised-button color=\"primary\" (click)=\"viewAttachment(selectedAttachment!)\">\r\n      <mat-icon>download</mat-icon>\r\n      <span>{{ downloadLabel }}</span>\r\n    </button>\r\n    }\r\n  </mat-dialog-actions>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n  <input #fileInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n    (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n\r\n  @if (allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || !attachmentsList ||\r\n  attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <button class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n    (click)=\"addFile(allowedTypes[0], fileInput)\" [disabled]=\"isDisabled\">\r\n    @if (allowedTypes[0] == 1) { <mat-icon>cloud_upload</mat-icon> }\r\n    @if (allowedTypes[0] == 2) { <i class=\"fas fa-link\"></i> }\r\n    @if (allowedTypes[0] == 3) { <i class=\"fa-brands fa-dropbox\"></i> }\r\n    <span style=\"margin-left: 10px\">\r\n      {{ allowedTypes[0] == 1 ? (addButtonLabel + \" file\") : allowedTypes[0] == 2 ? (addButtonLabel + \" link\") :\r\n      uploadWithDropboxLabel }}\r\n    </span>\r\n  </button>\r\n  }\r\n\r\n  @if (!separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true ||\r\n  !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <button class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n    [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\">\r\n    @if (multipleAttachment != true) { <mat-icon>cloud_upload</mat-icon> } @else { <mat-icon>add</mat-icon> }\r\n    <span style=\"margin-left: 0px\">{{ addButtonLabel }}</span>\r\n  </button>\r\n\r\n  <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n    <input #imageInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n      (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n    @if (allowedTypes.includes(1)) {\r\n    <button mat-menu-item (click)=\"imageInput.click()\" 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    }\r\n    @if (allowedTypes.includes(2)) {\r\n    <button mat-menu-item (click)=\"switchToAddingLinkMode()\" 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    }\r\n    @if (allowedTypes.includes(3)) {\r\n    <button mat-menu-item (click)=\"chooseDropboxFile()\" 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    }\r\n  </mat-menu>\r\n  }\r\n\r\n  @if (separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true ||\r\n  !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <div class=\"btn-group\">\r\n    @if (allowedTypes.includes(1)) {\r\n    <button (click)=\"imageInput.click()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" 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    }\r\n    <input #imageInput style=\"display: none\" id=\"file_attachment\" name=\"file_attachment\" type=\"file\"\r\n      (change)=\"onFileAdded($event)\" [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\" />\r\n    @if (allowedTypes.includes(2)) {\r\n    <button (click)=\"switchToAddingLinkMode()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" type=\"button\">\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    }\r\n    @if (allowedTypes.includes(3)) {\r\n    <button (click)=\"chooseDropboxFile()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button\r\n      color=\"secondary\" 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    }\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate>\r\n  <!-- Header compatto -->\r\n  <h2 class=\"dialog-header m-3\">\r\n    <span>{{ cropLabel }}</span>\r\n    <button mat-icon-button type=\"button\" aria-label=\"Chiudi\" (click)=\"abortFile()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </h2>\r\n\r\n  <!-- Contenuto scrollabile con griglia responsive -->\r\n  <div class=\"dialog-content\">\r\n    <!-- Toolbar controlli (large) -->\r\n    <div class=\"controls-row crop-large\">\r\n      @if (cropOptions.includes(1)) {\r\n      <button [matTooltip]=\"rotateLeftLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"rotateLeft()\">\r\n        <mat-icon>rotate_left</mat-icon>\r\n      </button>\r\n      <button [matTooltip]=\"rotateRightLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"rotateRight()\">\r\n        <mat-icon>rotate_right</mat-icon>\r\n      </button>\r\n      }\r\n      @if (cropOptions.includes(2)) {\r\n      <button [matTooltip]=\"flipHorinzontalLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"flipHorizontal()\">\r\n        <mat-icon>flip_horizontal</mat-icon>\r\n      </button>\r\n      <button [matTooltip]=\"flipVerticalLabel\" class=\"btn btn-primary mat-raised-button\" (click)=\"flipVertical()\">\r\n        <mat-icon>flip_vertical</mat-icon>\r\n      </button>\r\n      }\r\n      <button [matTooltip]=\"'Reset'\" class=\"btn btn-primary mat-raised-button\" (click)=\"restoreOriginalDimensions()\">\r\n        <mat-icon>replay</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Toolbar controlli (small) -->\r\n    <div class=\"controls-row crop-small\">\r\n      @if (cropOptions.includes(1)) {\r\n      <mat-icon class=\"control-icon\" (click)=\"rotateLeft()\">rotate_left</mat-icon>\r\n      <mat-icon class=\"control-icon\" (click)=\"rotateRight()\">rotate_right</mat-icon>\r\n      }\r\n      @if (cropOptions.includes(2)) {\r\n      <mat-icon class=\"control-icon\" (click)=\"flipHorizontal()\">flip_horizontal</mat-icon>\r\n      <mat-icon class=\"control-icon\" (click)=\"flipVertical()\">flip_vertical</mat-icon>\r\n      }\r\n      <mat-icon class=\"control-icon\" (click)=\"restoreOriginalDimensions()\">replay</mat-icon>\r\n    </div>\r\n\r\n    <!-- Area crop con contenimento -->\r\n    <div class=\"crop-area\">\r\n      <div class=\"crop-container\">\r\n        <image-cropper [imageFile]=\"selectedFile\" [maintainAspectRatio]=\"false\" [autoCrop]=\"false\"\r\n          [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4 / 3\" [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\"\r\n          [roundCropper]=\"false\" [canvasRotation]=\"0\" [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\"\r\n          (imageCropped)=\"imageCropped($event)\" [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\"\r\n          [canvasRotation]=\"canvasRotation\" [output]=\"'base64'\">\r\n        </image-cropper>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Azioni -->\r\n  <div class=\"dialog-actions crop-large\">\r\n    <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn\" 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\r\n  <div class=\"dialog-actions crop-small\">\r\n    <button class=\"icon-action\" type=\"button\" (click)=\"abortFile()\" aria-label=\"Abort\">\r\n      <i class=\"fa fa-times\"></i>\r\n    </button>\r\n    <button class=\"icon-action\" type=\"button\" (click)=\"confirmAddAttachment()\" aria-label=\"Confirm\">\r\n      <i class=\"fa fa-check\"></i>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n  <h2 mat-dialog-title>Aggiungi un link</h2>\r\n  <mat-dialog-content class=\"add-link-dialog-content\">\r\n    <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>URL *</mat-label>\r\n        <input matInput formControlName=\"filePath\" placeholder=\"https://...\" required>\r\n        @if (newAttachmentForm.get('filePath')?.hasError('pattern')) {\r\n        <mat-error>L'URL non sembra valido.</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>Nome (opzionale)</mat-label>\r\n        <input matInput formControlName=\"fileName\" placeholder=\"Es. Documento Progetto\">\r\n      </mat-form-field>\r\n    </form>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions align=\"end\">\r\n    <button mat-button mat-dialog-close>Annulla</button>\r\n    <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"newAttachmentForm.value\"\r\n      [disabled]=\"newAttachmentForm.invalid\">\r\n      Aggiungi\r\n    </button>\r\n  </mat-dialog-actions>\r\n</ng-template>", styles: [":host{--primary-color: #6a5af9;--primary-color-dark: #5441f8;--success-color: #1ce593;--error-color: #ff5b5b;--background-light: #f7f9fc;--background-card: rgba(255, 255, 255, .7);--text-color: #1e293b;--text-color-light: #64748b;--border-color: rgba(203, 213, 225, .5);--shadow-color: rgba(99, 102, 241, .2);--border-radius: 16px;--transition-speed: .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--primary-color)}70%{box-shadow:0 0 0 10px #6a5af900}to{box-shadow:0 0 #6a5af900}}.container{width:100%;max-width:700px;margin:2rem auto;font-family:Inter,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.header h1{color:var(--text-color);font-size:1.8rem;font-weight:700;margin:0}.dropbox{width:100%;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;background-color:var(--background-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-speed) ease}.dropbox:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color);border-color:var(--primary-color)}.dropbox.dragover{border-style:solid;border-color:var(--primary-color);transform:scale(1.02);box-shadow:0 0 25px var(--shadow-color);animation:pulse 1.5s infinite}.dropbox .dropbox-icon{font-size:3.5rem;color:var(--primary-color)}.dropbox .dropbox-text{font-size:1.1rem;font-weight:600;color:var(--text-color);margin-top:1rem}.dropbox .dropbox-subtext{color:var(--text-color-light);margin-top:.5rem}.dropbox .browse-btn{margin-top:1.5rem;padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:10px;font-weight:600;transition:all var(--transition-speed) ease}.dropbox .browse-btn:hover{background-color:var(--primary-color-dark);transform:translateY(-2px)}.file-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.file-previews{display:grid;gap:16px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width, 200px),1fr))}.file-preview{background-color:var(--background-card);border-radius:var(--border-radius);box-shadow:0 4px 15px #0000000d;border:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column;position:relative;opacity:0;animation:fadeIn .5s ease-out forwards;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.file-preview.uploading{cursor:wait}.file-preview.uploading .preview-img-container:after{content:\"\";position:absolute;inset:0;background:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none}.file-preview .remove-btn{position:absolute;top:8px;right:8px;z-index:2;background-color:#0000004d;color:#fff;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;transition:all var(--transition-speed) ease}.file-preview .remove-btn:hover{background-color:#ff5b5b}.file-preview .remove-btn .mat-icon{font-size:18px}@media (hover: hover) and (min-width: 769px){.file-preview .remove-btn{opacity:0;transform:scale(.8)}.file-preview:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--shadow-color)}.file-preview:hover .remove-btn{opacity:1;transform:scale(1)}}.file-preview .preview-img-container{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;background-color:#f0f2f5}.file-preview .preview-img{width:100%;height:100%;object-fit:cover}.file-preview .file-icon{font-size:4rem;color:var(--primary-color)}.file-preview .file-info{padding:12px;border-top:1px solid var(--border-color);flex-grow:1;display:flex;align-items:center}.file-preview .file-name{font-weight:600;font-size:.9rem;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview .upload-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;pointer-events:none}.file-preview.card-small{width:140px}.file-preview.card-small .preview-img-container{height:80px}.file-preview.card-small .file-info{padding:8px}.file-preview.card-small .file-name{font-size:.8rem}.file-preview.card-small .file-icon{font-size:3rem}.file-preview.card-small .remove-btn{width:28px;height:28px}.file-preview.card-small .remove-btn .mat-icon{font-size:16px}.file-preview.card-large{width:280px}.file-preview.card-large .preview-img-container{height:180px}.file-preview.card-large .file-info{padding:16px}.file-preview.card-large .file-name{font-size:1rem}.file-preview.card-large .file-icon{font-size:5rem}.file-preview.card-large .remove-btn{width:36px;height:36px}.file-preview.card-large .remove-btn .mat-icon{font-size:20px}.file-preview[style*=--eqp-card-width]{width:var(--eqp-card-width)}.file-preview[style*=--eqp-card-width] .preview-img-container{height:calc(var(--eqp-card-width) * .65)}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.upload-stats{background-color:var(--background-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;margin-top:2rem;animation:fadeIn .5s ease-out}.upload-stats .stats-info{display:flex;justify-content:space-around}.upload-stats .progress-bar{height:10px;background-color:var(--border-color);border-radius:5px;overflow:hidden;margin-top:1rem}.upload-stats .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--success-color));transition:width var(--transition-speed) ease-out;border-radius:5px}.upload-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%,100px);padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;font-weight:600;box-shadow:0 10px 30px #0003;transition:transform var(--transition-speed) cubic-bezier(.175,.885,.32,1.275)}.upload-notification.show{transform:translate(-50%)}.upload-notification.success{background-color:var(--success-color)}.upload-notification.error{background-color:var(--error-color)}.dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%}.dialog-content{display:flex;justify-content:center;align-items:center;padding:16px 24px;overflow:auto}.preview-image{max-width:100%;max-height:70vh;height:auto;object-fit:contain}.preview-iframe{width:80vw;height:75vh;border:none;max-width:1200px}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog-content{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow:auto;padding:0 16px 8px}.controls-row{display:flex;align-items:center;justify-content:center;gap:8px}.control-icon{font-size:28px;cursor:pointer}.crop-area{display:flex;justify-content:center}.crop-container{width:100%;max-width:720px;aspect-ratio:4/3;border-radius:8px;background:#f9f9f9;overflow:hidden}image-cropper,image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.dialog-actions{display:flex;justify-content:center;gap:12px;padding:12px 16px}.crop-large{display:flex}.crop-small{display:none}@media (max-width: 600px){.dialog-content{max-height:55vh}.crop-container{max-width:100%;aspect-ratio:auto}.crop-large{display:none}.crop-small{display:flex;justify-content:center;gap:14px}.control-icon{font-size:24px}}.stats-header{display:flex;justify-content:space-between;align-items:center;width:100%}.table-view-container{margin-top:1.5rem;background-color:var(--background-card);border-radius:var(--border-radius);border:1px solid var(--border-color);overflow:hidden;animation:fadeIn .5s ease-out}.table-header,.table-row{display:flex;align-items:center;padding:0 1rem;transition:background-color var(--transition-speed) ease}.table-header{background-color:#f8f9fa;font-weight:600;color:var(--text-color-light);font-size:.8rem;text-transform:uppercase;border-bottom:2px solid var(--border-color)}.table-row{border-bottom:1px solid var(--border-color)}.table-row:last-child{border-bottom:none}.table-row:hover{background-color:#00000005}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem}.name-col{flex:4}.size-col,.date-col{flex:2}.actions-col{flex:1;justify-content:flex-end;min-width:150px}.file-icon-small{font-size:1.5rem;color:var(--primary-color)}.file-info-text{display:flex;flex-direction:column}.file-name-table{font-weight:600;color:var(--text-color)}.file-type-table{font-size:.8rem;color:var(--text-color-light)}@media (max-width: 768px){.date-col{display:none}.name-col{flex:3}.size-col{flex:2}.actions-col{flex:2;min-width:120px}}.secondary-action-link{color:var(--primary-color);text-decoration:none;border-bottom:1px solid var(--primary-color);cursor:pointer;font-weight:500}.secondary-action-link:hover{color:var(--primary-color-dark);border-bottom-color:var(--primary-color-dark)}h2[mat-dialog-title]+mat-dialog-content.add-link-dialog-content{padding-top:20px}mat-dialog-content.add-link-dialog-content{padding-left:24px;padding-right:24px;padding-bottom:20px}.add-link-form{display:flex;flex-direction:column;gap:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: EqpAttachmentService }], propDecorators: { disableAction: [{
                 type: Input,
                 args: ["disableAction"]
@@ -1145,6 +1263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], attachmentsList: [{
                 type: Input,
                 args: ["attachmentsList"]
+            }], singleAttachment: [{
+                type: Input,
+                args: ["singleAttachment"]
             }], showMatCard: [{
                 type: Input,
                 args: ["showMatCard"]
@@ -1154,9 +1275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], loadMultipleFiles: [{
                 type: Input,
                 args: ["loadMultipleFiles"]
-            }], attachmentsColumns: [{
-                type: Input,
-                args: ["attachmentsColumns"]
             }], emptyTableMessage: [{
                 type: Input,
                 args: ["emptyTableMessage"]
@@ -1211,9 +1329,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], cropDialogClass: [{
                 type: Input,
                 args: ["cropDialogClass"]
-            }], downloadTooltipPosition: [{
-                type: Input,
-                args: ["downloadTooltipPosition"]
+            }], maxFileSizeMB: [{
+                type: Input
+            }], cardSize: [{
+                type: Input
+            }], customCardWidthPx: [{
+                type: Input
+            }], customCardHeightPx: [{
+                type: Input
             }], openLinkLabel: [{
                 type: Input,
                 args: ["openLinkLabel"]
@@ -1253,9 +1376,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], cropLabel: [{
                 type: Input,
                 args: ["cropLabel"]
-            }], eqpTableSearchText: [{
-                type: Input,
-                args: ["eqpTableSearchText"]
             }], deleteDialogTitle: [{
                 type: Input,
                 args: ["deleteDialogTitle"]
@@ -1286,6 +1406,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], rotateLeftLabel: [{
                 type: Input,
                 args: ["rotateLeftLabel"]
+            }], uploadTitle: [{
+                type: Input
+            }], uploadSubtitle: [{
+                type: Input
+            }], dropHereLabel: [{
+                type: Input
+            }], supportedFormatsLabel: [{
+                type: Input
+            }], browseFilesLabel: [{
+                type: Input
+            }], uploadSummaryLabel: [{
+                type: Input
+            }], filesLabel: [{
+                type: Input
+            }], totalSizeLabel: [{
+                type: Input
+            }], emptyStateLabel: [{
+                type: Input
+            }], addedSuccessfullyLabel: [{
+                type: Input
+            }], removedLabel: [{
+                type: Input
+            }], chooseView: [{
+                type: Input
+            }], showSummary: [{
+                type: Input
+            }], viewMode: [{
+                type: Input,
+                args: ["viewMode"]
             }], localEditedAttachments: [{
                 type: Output
             }], abortAddAttachment: [{
@@ -1305,15 +1454,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], dialogCropImage: [{
                 type: ViewChild,
                 args: ["dialogCropImage", { static: true }]
+            }], addingLinkTemplate: [{
+                type: ViewChild,
+                args: ['addingLinkTemplate']
             }], imageCropper: [{
                 type: ViewChild,
                 args: [ImageCropperComponent]
             }], imageInput: [{
                 type: ViewChild,
                 args: ["imageInput"]
-            }], attachmentTable: [{
-                type: ViewChild,
-                args: ["attachmentTable", { static: false }]
             }], inlinePreviewTemplate: [{
                 type: ViewChild,
                 args: ["inlinePreviewTemplate", { static: true }]
@@ -1525,16 +1674,12 @@ class EqpAttachmentsModule {
             FormsModule,
             CommonModule,
             ReactiveFormsModule,
-            ImageCropperModule,
-            EqpTableModule,
-            NgxFileDropModule], exports: [EqpAttachmentsComponent] });
+            ImageCropperComponent], exports: [EqpAttachmentsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
             FormsModule,
             CommonModule,
             ReactiveFormsModule,
-            ImageCropperModule,
-            EqpTableModule,
-            NgxFileDropModule] });
+            ImageCropperComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
             type: NgModule,
@@ -1545,9 +1690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormsModule,
                         CommonModule,
                         ReactiveFormsModule,
-                        ImageCropperModule,
-                        EqpTableModule,
-                        NgxFileDropModule
+                        ImageCropperComponent
                     ],
                     exports: [EqpAttachmentsComponent]
                 }]