@eqproject/eqp-attachments 3.1.14 → 21.0.0

package/fesm2022/eqproject-eqp-attachments.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { Injectable, input, output, viewChild, signal, computed, effect, Input, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import imageCompression from 'browser-image-compression';
-import * as i14 from 'ngx-image-cropper';
-import { base64ToFile, ImageCropperComponent } from 'ngx-image-cropper';
+import * as i13 from 'ngx-image-cropper';
+import { ImageCropperComponent, base64ToFile } from 'ngx-image-cropper';
 import Swal from 'sweetalert2';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -14,21 +14,20 @@ import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/menu';
+import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i10 from '@angular/material/button-toggle';
+import * as i9 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i11 from '@angular/material/icon';
+import * as i10 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i12 from '@angular/material/tooltip';
+import * as i11 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i13 from '@angular/common';
+import * as i12 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSliderModule } from '@angular/material/slider';
@@ -104,10 +103,10 @@ class AttachmentHelperService {
         let fileIcon = this.fileExtensionIcon[extension];
         return fileIcon ?? "fas fa-file";
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AttachmentHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AttachmentHelperService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AttachmentHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -222,10 +221,10 @@ class EqpAttachmentDialogService {
             Swal.fire(currentTitle, message, 'warning');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -242,10 +241,10 @@ class EqpAttachmentService {
         script.dataset.appKey = AttachmentHelperService.dropboxCredentials.apiKey;
         document.body.appendChild(script);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: "root"
@@ -268,11 +267,11 @@ class EqpAttachmentsComponent {
     /**
      * Se TRUE allora nasconde la colonna per le azioni sull'allegato (nel caso "multipleAttachment" è TRUE).
      */
-    disableAction = false;
+    disableAction = input(false, ...(ngDevMode ? [{ debugName: "disableAction" }] : /* istanbul ignore next */ []));
     /**
      * Se TRUE mostra il titolo nell'header nel caso in cui "multipleAttachment" è TRUE ("Elenco allegati" di default).
      */
-    showHeader = true;
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
     /**
      * Sorgente dati da visualizzare. Nel caso si vuole gestire un singolo allegato va passato in ogni caso come Array.
      */
@@ -280,31 +279,31 @@ class EqpAttachmentsComponent {
     /**
      * 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;
+    singleAttachment = input(null, ...(ngDevMode ? [{ debugName: "singleAttachment" }] : /* istanbul ignore next */ []));
     /**
      * Se TRUE non mostra la MatCard (nel caso in cui "multipleAttachment" è TRUE).
      */
-    showMatCard = true;
+    showMatCard = input(true, ...(ngDevMode ? [{ debugName: "showMatCard" }] : /* istanbul ignore next */ []));
     /**
      * Se FALSE allora il componente mostra solo il pulsante di caricamento di un singolo file, una volta caricato il file invoca l'evento di output "localEditedAttachments".
      * Se TRUE allora il componente mostra l'elenco di tutti gli allegati ricevuto nel parametro "attachmentsList".
      */
-    multipleAttachment = true;
+    multipleAttachment = input(true, ...(ngDevMode ? [{ debugName: "multipleAttachment" }] : /* istanbul ignore next */ []));
     /**
      * Se assume il valore TRUE allora sarà possibile caricare più file per volta. Questa funzionalità è attiva
      * SOLO se si gestiscono allegati multipli, quindi se l'input 'multipleAttachment' assume il valore TRUE, altrimenti è sempre disabilitata.
      */
-    loadMultipleFiles = false;
+    loadMultipleFiles = input(false, ...(ngDevMode ? [{ debugName: "loadMultipleFiles" }] : /* istanbul ignore next */ []));
     /**
      * Imposta il messaggio da visualizzare nel caso in cui la tabella degli allegati (nel caso in cui "multipleAttachment" è TRUE) è vuota.
      */
-    emptyTableMessage = "Nessun dato trovato";
+    emptyTableMessage = input("Nessun dato trovato", ...(ngDevMode ? [{ debugName: "emptyTableMessage" }] : /* istanbul ignore next */ []));
     /**
      * Se TRUE allora permette di selezionare soltanto file di tipo immagine, avente uno dei mimetype
      * specificati dentro AttachmentHelperService.
      * Se FALSE permette di selezionare qualsiasi tipo di file
      */
-    allowOnlyImages = false;
+    allowOnlyImages = input(false, ...(ngDevMode ? [{ debugName: "allowOnlyImages" }] : /* istanbul ignore next */ []));
     /**
      * Specifica i tipi di file che è possibile caricare
      */
@@ -312,57 +311,60 @@ class EqpAttachmentsComponent {
     /**
      * Se TRUE disabilita il pulsante di Aggiunta allegato (a prescindere dal valore del parametro "multipleAttachment").
      */
-    isDisabled = false;
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /**
      * Mostra/nasconde la colonna per visualizzare l'anteprima dei file nella tabella (caso multipleAtatchments = true).
      */
-    showInlinePreview = false;
+    showInlinePreview = input(false, ...(ngDevMode ? [{ debugName: "showInlinePreview" }] : /* istanbul ignore next */ []));
     /**
      * Endpoint da chiamare per recueprare l'IAttachmentDTO completo da vedere nell'anteprima. La chiamata sarà in POST e nel body
      * conterrà l'IAttachmentDTO selezionato dall'utente.
      * La chiamata viene eseguita solo per l'anteprima delle immagini essendo necessario il base64 completo dell'immagine a dimensione reale.
      * Per documenti/link basta che sia popolata la proprietà FilePath di IAttachmentDTO.
      */
-    getAttachmentEndpoint = null;
+    getAttachmentEndpoint = input(null, ...(ngDevMode ? [{ debugName: "getAttachmentEndpoint" }] : /* istanbul ignore next */ []));
     /**
      * Hostname dell'ambiente di produzione dell'applicativo. Necessario per visualizzare l'anteprima dei documenti
      * tramite il viewer di google.
      * NOTA: Per visualizzare l'anteprima è necessario che la prorietà FilePath dell'IAttachmentDTO sia popolata e che
      * sia abilitato l'accesso alla cartella sul server tramite hostname.
      */
-    productionBaseUrl = null;
+    productionBaseUrl = input(null, ...(ngDevMode ? [{ debugName: "productionBaseUrl" }] : /* istanbul ignore next */ []));
     /**
      * Opzioni per la compressione delle immagini caricate.
      */
-    compressionOptions = {
+    compressionOptions = input({
         maxSizeMB: 0.5,
         maxWidthOrHeight: 1920,
-        useWebWorker: true
-    };
+        useWebWorker: true,
+    }, ...(ngDevMode ? [{ debugName: "compressionOptions" }] : /* istanbul ignore next */ []));
     /**
      * Array di AttachmentType che si possono aggiungere
      */
-    allowedTypes = [AttachmentType.FILE, AttachmentType.LINK];
+    allowedTypes = [
+        AttachmentType.FILE,
+        AttachmentType.LINK,
+    ];
     /**
      * Permette di stabilire se la eqp-table contenente l'elenco degli allegati utilizza
      * il multilingua oppure no
      */
-    isEqpTableMultiLanguage = false;
+    isEqpTableMultiLanguage = input(false, ...(ngDevMode ? [{ debugName: "isEqpTableMultiLanguage" }] : /* istanbul ignore next */ []));
     /**
      * Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
      * degli allegati deve essere paginata oppure no
      */
-    tablePaginatorVisible = true;
+    tablePaginatorVisible = input(true, ...(ngDevMode ? [{ debugName: "tablePaginatorVisible" }] : /* istanbul ignore next */ []));
     /**
      * Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
      * degli allegati deve contenere il campo di ricerca oppure no
      */
-    isTableSearcheable = true;
+    isTableSearcheable = input(true, ...(ngDevMode ? [{ debugName: "isTableSearcheable" }] : /* istanbul ignore next */ []));
     /**
      * In caso di gestione allegati multipli, permette di stabilire la dimensione pagina di default
      * per la tabella contenente l'elenco degli allegati
      */
-    tablePaginatorSize = null;
+    tablePaginatorSize = input(null, ...(ngDevMode ? [{ debugName: "tablePaginatorSize" }] : /* istanbul ignore next */ []));
     /**
      * Permette di scegliere il modo in cui i file devono essere caricati
      */
@@ -370,127 +372,124 @@ class EqpAttachmentsComponent {
     /**
      * Permette di stabilire se i pulsanti per il caricamento dei file sono separati o in un menù a tendina
      */
-    separatedUploadButtons = false;
+    separatedUploadButtons = input(false, ...(ngDevMode ? [{ debugName: "separatedUploadButtons" }] : /* istanbul ignore next */ []));
     /**
      * Permette di scegliere se dare la possibilità di vedere o no l'anteprima
      */
-    showPreview = true;
+    showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : /* istanbul ignore next */ []));
     /**
      * In caso di allegato singolo, permette di scegliere se aggiungere file tramite drag and drop
      */
-    singleAttachmentDragAndDrop = true;
+    singleAttachmentDragAndDrop = input(true, ...(ngDevMode ? [{ debugName: "singleAttachmentDragAndDrop" }] : /* istanbul ignore next */ []));
     /**
      * Array di opzioni che si possono utilizzare per il crop
      */
-    cropOptions = [1, 2];
+    cropOptions = input([1, 2], ...(ngDevMode ? [{ debugName: "cropOptions" }] : /* istanbul ignore next */ []));
     /**
      * Classe custom da assegnare al dialog del crop immagini
      */
-    cropDialogClass;
-    maxFileSizeMB = 500; // Default max size of 100 MB
-    cardSize = 'small'; // Default
-    customCardWidthPx = 200; // Larghezza custom in px
-    customCardHeightPx = 180; // Altezza custom in px
-    layout = 'compact';
+    cropDialogClass = input(undefined, ...(ngDevMode ? [{ debugName: "cropDialogClass" }] : /* istanbul ignore next */ []));
+    maxFileSizeMB = input(500, ...(ngDevMode ? [{ debugName: "maxFileSizeMB" }] : /* istanbul ignore next */ [])); // Default max size of 100 MB
+    cardSize = input("small", ...(ngDevMode ? [{ debugName: "cardSize" }] : /* istanbul ignore next */ [])); // Default
+    customCardWidthPx = input(200, ...(ngDevMode ? [{ debugName: "customCardWidthPx" }] : /* istanbul ignore next */ [])); // Larghezza custom in px
+    customCardHeightPx = input(180, ...(ngDevMode ? [{ debugName: "customCardHeightPx" }] : /* istanbul ignore next */ [])); // Altezza custom in px
+    layout = input("compact", ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     /**
      * Input per definire le label da usare nel componente
      */
-    openLinkLabel = "Apri link";
-    addButtonLabel = "Aggiungi";
-    downloadLabel = "Download";
-    deleteLabel = "Elimina";
-    fileNameLabel = "Nome file";
-    previewLabel = "Anteprima";
-    uploadFileLabel = "Carica file";
-    confirmLabel = "Conferma";
-    abortLabel = "Annulla";
-    saveLabel = "Salva";
-    exitLabel = "Esci";
-    uploadWithDropboxLabel = "Carica con Dropbox";
-    cropLabel = "Scegli le dimensioni dell'immagine";
-    deleteDialogTitle = null;
-    deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
-    noImageSelectedErrorMessage = "Non è possibile selezionare un file che non sia un'immagine.";
-    wrongTypeSelectedErrorMessage = "Non è possibile caricare il file selezionato.";
-    videoPreviewErrorMessage = "Impossibile aprire l'anteprima di un file video.";
-    audioPreviewErrorMessage = "Impossibile aprire l'anteprima di un file audio.";
-    flipHorinzontalLabel = "Capovolgi orizzontalmente";
-    flipVerticalLabel = "Capovolgi verticalmente";
-    rotateRightLabel = "Ruota a destra";
-    rotateLeftLabel = "Ruota a sinistra";
-    base64LimitMB = 100;
-    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';
+    openLinkLabel = input("Apri link", ...(ngDevMode ? [{ debugName: "openLinkLabel" }] : /* istanbul ignore next */ []));
+    addButtonLabel = input("Aggiungi", ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
+    downloadLabel = input("Download", ...(ngDevMode ? [{ debugName: "downloadLabel" }] : /* istanbul ignore next */ []));
+    deleteLabel = input("Elimina", ...(ngDevMode ? [{ debugName: "deleteLabel" }] : /* istanbul ignore next */ []));
+    fileNameLabel = input("Nome file", ...(ngDevMode ? [{ debugName: "fileNameLabel" }] : /* istanbul ignore next */ []));
+    previewLabel = input("Anteprima", ...(ngDevMode ? [{ debugName: "previewLabel" }] : /* istanbul ignore next */ []));
+    uploadFileLabel = input("Carica file", ...(ngDevMode ? [{ debugName: "uploadFileLabel" }] : /* istanbul ignore next */ []));
+    confirmLabel = input("Conferma", ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    abortLabel = input("Annulla", ...(ngDevMode ? [{ debugName: "abortLabel" }] : /* istanbul ignore next */ []));
+    saveLabel = input("Salva", ...(ngDevMode ? [{ debugName: "saveLabel" }] : /* istanbul ignore next */ []));
+    exitLabel = input("Esci", ...(ngDevMode ? [{ debugName: "exitLabel" }] : /* istanbul ignore next */ []));
+    uploadWithDropboxLabel = input("Carica con Dropbox", ...(ngDevMode ? [{ debugName: "uploadWithDropboxLabel" }] : /* istanbul ignore next */ []));
+    cropLabel = input("Scegli le dimensioni dell'immagine", ...(ngDevMode ? [{ debugName: "cropLabel" }] : /* istanbul ignore next */ []));
+    deleteDialogTitle = input(null, ...(ngDevMode ? [{ debugName: "deleteDialogTitle" }] : /* istanbul ignore next */ []));
+    deleteDialogMessage = input("Sei sicuro di voler cancellare quest'allegato?", ...(ngDevMode ? [{ debugName: "deleteDialogMessage" }] : /* istanbul ignore next */ []));
+    noImageSelectedErrorMessage = input("Non è possibile selezionare un file che non sia un'immagine.", ...(ngDevMode ? [{ debugName: "noImageSelectedErrorMessage" }] : /* istanbul ignore next */ []));
+    wrongTypeSelectedErrorMessage = input("Non è possibile caricare il file selezionato.", ...(ngDevMode ? [{ debugName: "wrongTypeSelectedErrorMessage" }] : /* istanbul ignore next */ []));
+    videoPreviewErrorMessage = input("Impossibile aprire l'anteprima di un file video.", ...(ngDevMode ? [{ debugName: "videoPreviewErrorMessage" }] : /* istanbul ignore next */ []));
+    audioPreviewErrorMessage = input("Impossibile aprire l'anteprima di un file audio.", { ...(ngDevMode ? { debugName: "audioPreviewErrorMessage" } : /* istanbul ignore next */ {}), alias: "videoPreviewErrorMessage" });
+    flipHorinzontalLabel = input("Capovolgi orizzontalmente", ...(ngDevMode ? [{ debugName: "flipHorinzontalLabel" }] : /* istanbul ignore next */ []));
+    flipVerticalLabel = input("Capovolgi verticalmente", ...(ngDevMode ? [{ debugName: "flipVerticalLabel" }] : /* istanbul ignore next */ []));
+    rotateRightLabel = input("Ruota a destra", ...(ngDevMode ? [{ debugName: "rotateRightLabel" }] : /* istanbul ignore next */ []));
+    rotateLeftLabel = input("Ruota a sinistra", ...(ngDevMode ? [{ debugName: "rotateLeftLabel" }] : /* istanbul ignore next */ []));
+    base64LimitMB = input(100, ...(ngDevMode ? [{ debugName: "base64LimitMB" }] : /* istanbul ignore next */ []));
+    uploadTitle = input("Upload file", ...(ngDevMode ? [{ debugName: "uploadTitle" }] : /* istanbul ignore next */ []));
+    uploadSubtitle = input("Drag & drop files o click", ...(ngDevMode ? [{ debugName: "uploadSubtitle" }] : /* istanbul ignore next */ []));
+    dropHereLabel = input("Rilascia i file qui", ...(ngDevMode ? [{ debugName: "dropHereLabel" }] : /* istanbul ignore next */ []));
+    supportedFormatsLabel = input("Formati supportati: JPEG, PNG, PDF (Max 100MB)", ...(ngDevMode ? [{ debugName: "supportedFormatsLabel" }] : /* istanbul ignore next */ []));
+    browseFilesLabel = input("Cerca i file", ...(ngDevMode ? [{ debugName: "browseFilesLabel" }] : /* istanbul ignore next */ []));
+    uploadSummaryLabel = input("Lista allegati", ...(ngDevMode ? [{ debugName: "uploadSummaryLabel" }] : /* istanbul ignore next */ []));
+    filesLabel = input("Files", ...(ngDevMode ? [{ debugName: "filesLabel" }] : /* istanbul ignore next */ []));
+    totalSizeLabel = input("Dimensione totale", ...(ngDevMode ? [{ debugName: "totalSizeLabel" }] : /* istanbul ignore next */ []));
+    emptyStateLabel = input("Non sono presenti file caricati", ...(ngDevMode ? [{ debugName: "emptyStateLabel" }] : /* istanbul ignore next */ []));
+    addedSuccessfullyLabel = input("file(s) caricati con successo.", ...(ngDevMode ? [{ debugName: "addedSuccessfullyLabel" }] : /* istanbul ignore next */ []));
+    removedLabel = input("File rimosso", ...(ngDevMode ? [{ debugName: "removedLabel" }] : /* istanbul ignore next */ []));
     // @Input() removeLabel = 'Rimuovi file';
-    chooseView = true;
-    showSummary = false;
-    viewMode = 'table';
-    showUploadTitle = true;
-    showDropArea = true;
-    hiddenColumns = [];
-    hiddenActions = [];
-    showActionButtons = false;
+    chooseView = input(true, ...(ngDevMode ? [{ debugName: "chooseView" }] : /* istanbul ignore next */ []));
+    showSummary = input(false, ...(ngDevMode ? [{ debugName: "showSummary" }] : /* istanbul ignore next */ []));
+    viewMode = "table";
+    showUploadTitle = input(true, ...(ngDevMode ? [{ debugName: "showUploadTitle" }] : /* istanbul ignore next */ []));
+    showDropArea = input(true, ...(ngDevMode ? [{ debugName: "showDropArea" }] : /* istanbul ignore next */ []));
+    hiddenColumns = input([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    hiddenActions = input([], ...(ngDevMode ? [{ debugName: "hiddenActions" }] : /* istanbul ignore next */ []));
+    showActionButtons = input(false, ...(ngDevMode ? [{ debugName: "showActionButtons" }] : /* istanbul ignore next */ []));
     /**
      * Se TRUE allora mostra il dialog di crop per le immagini singole.
      * Se FALSE carica l'immagine direttamente (applicando comunque la compressione se attiva).
      */
-    enableImageCrop = true;
+    enableImageCrop = input(true, ...(ngDevMode ? [{ debugName: "enableImageCrop" }] : /* istanbul ignore next */ []));
     /**
      * Hook globale: decide se nascondere un’azione per quello specifico allegato.
      */
-    actionHiddenFn;
+    actionHiddenFn = input(undefined, ...(ngDevMode ? [{ debugName: "actionHiddenFn" }] : /* istanbul ignore next */ []));
     /**
      * Hook globale: decide se disabilitare un’azione per quello specifico allegato.
      */
-    actionDisabledFn;
-    videoCompression = { enabled: false, maxWidth: 1280, crf: 23, preset: 'veryfast', maxFps: 30, audioBitrate: 128000 };
-    _customMenuActions = [];
+    actionDisabledFn = input(undefined, ...(ngDevMode ? [{ debugName: "actionDisabledFn" }] : /* istanbul ignore next */ []));
+    videoCompression = input({
+        enabled: false,
+        maxWidth: 1280,
+        crf: 23,
+        preset: "veryfast",
+        maxFps: 30,
+        audioBitrate: 128000,
+    }, ...(ngDevMode ? [{ debugName: "videoCompression" }] : /* istanbul ignore next */ []));
+    customMenuActions = input([], ...(ngDevMode ? [{ debugName: "customMenuActions" }] : /* istanbul ignore next */ []));
     _sortedMenuActions = [];
-    set customMenuActions(value) {
-        this._customMenuActions = value || [];
-        this.setupMenuActions();
-    }
-    get customMenuActions() {
-        return this._customMenuActions;
-    }
-    _customColumns = [];
     /**
      * SOLO quando [customColumns]="..." cambia.
      */
-    set customColumns(value) {
-        this._customColumns = value || [];
-        this.setupTableColumns();
-    }
-    get customColumns() {
-        return this._customColumns;
-    }
+    customColumns = input([], ...(ngDevMode ? [{ debugName: "customColumns" }] : /* istanbul ignore next */ []));
     //#endregion
     //#region @Output del componente
     /**
      * Restituisce la lista aggiornata degli allegati.
      */
-    localEditedAttachments = new EventEmitter();
+    localEditedAttachments = output();
     /**
      * Evento scatenato alla pressione del pulsante ESCI della modale di caricamento file.
      */
-    abortAddAttachment = new EventEmitter();
+    abortAddAttachment = output();
     /**
      * Evento di output che restituisce l'IAttachmentDTO selezionato per il download nel caso FileDataBase64, FileContentType o FileName non fossero specificati.
      */
-    downloadAttachment = new EventEmitter();
+    downloadAttachment = output({
+        alias: "downloadAttachment",
+    });
     /**
      * Evento di output che restituisce l'elemento eliminato prima che questo venga effettivamente rismosso dalla lista.
      */
-    onDeleteAttachment = new EventEmitter();
+    onDeleteAttachment = output({
+        alias: "onDeleteAttachment",
+    });
     //#endregion
     //#region Proprietà per gestione caricamento nuovo allegato
     newAttachment = {};
@@ -501,20 +500,20 @@ class EqpAttachmentsComponent {
     selectedFile = null;
     selectedFiles = null;
     showCropImage = false;
-    dialogAddAttachment;
+    dialogAddAttachment = viewChild("dialogAddAttachment", ...(ngDevMode ? [{ debugName: "dialogAddAttachment" }] : /* istanbul ignore next */ []));
     dialogRefAddAttachment;
-    dialogAddMultipleAttachment;
+    dialogAddMultipleAttachment = viewChild("dialogAddMultipleAttachment", ...(ngDevMode ? [{ debugName: "dialogAddMultipleAttachment" }] : /* istanbul ignore next */ []));
     dialogRefCropImage;
-    dialogCropImage;
-    addingLinkTemplate;
+    dialogCropImage = viewChild("dialogCropImage", ...(ngDevMode ? [{ debugName: "dialogCropImage" }] : /* istanbul ignore next */ []));
+    addingLinkTemplate = viewChild("addingLinkTemplate", ...(ngDevMode ? [{ debugName: "addingLinkTemplate" }] : /* istanbul ignore next */ []));
     //#endregion
     //#region Proprietà per gestione ridimensionamento file di tipo image
     imageChangedEvent = "";
     croppedImage = "";
     transform = {};
     canvasRotation = 0;
-    imageCropper;
-    imageInput;
+    imageCropper = viewChild(ImageCropperComponent, ...(ngDevMode ? [{ debugName: "imageCropper" }] : /* istanbul ignore next */ []));
+    imageInput = viewChild("imageInput", ...(ngDevMode ? [{ debugName: "imageInput" }] : /* istanbul ignore next */ []));
     //#endregion
     AttachmentType = AttachmentType;
     selectedAttachment;
@@ -522,37 +521,37 @@ class EqpAttachmentsComponent {
     originalHeight;
     customWidth;
     customHeight;
-    inlinePreviewTemplate;
-    dialogPreview;
+    inlinePreviewTemplate = viewChild("inlinePreviewTemplate", ...(ngDevMode ? [{ debugName: "inlinePreviewTemplate" }] : /* istanbul ignore next */ []));
+    dialogPreview = viewChild("dialogPreview", ...(ngDevMode ? [{ debugName: "dialogPreview" }] : /* istanbul ignore next */ []));
     imageFile;
-    addingLinkMode = false;
+    addingLinkMode = signal(false, ...(ngDevMode ? [{ debugName: "addingLinkMode" }] : /* istanbul ignore next */ []));
     //#region Sezione nuova refactoring
     // Proprietà interna che conterrà l'array finale di colonne ordinate
     _tableColumns = [];
-    defaultFileTemplate;
-    defaultActionsTemplate;
+    defaultFileTemplate = viewChild("defaultFileTemplate", ...(ngDevMode ? [{ debugName: "defaultFileTemplate" }] : /* istanbul ignore next */ []));
+    defaultActionsTemplate = viewChild("defaultActionsTemplate", ...(ngDevMode ? [{ debugName: "defaultActionsTemplate" }] : /* istanbul ignore next */ []));
     // Stato drag & drop e toast
     dragOver = false;
     toast = {
         visible: false,
-        type: 'success',
-        text: '',
-        timeoutId: 0
+        type: "success",
+        text: "",
+        timeoutId: 0,
     };
-    progressPercent = 0;
-    totalSizeBytes = 0;
-    get totalSizeFormatted() { return this.formatFileSize(this.totalSizeBytes); }
+    progressPercent = signal(0, ...(ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []));
+    totalSizeBytes = signal(0, ...(ngDevMode ? [{ debugName: "totalSizeBytes" }] : /* istanbul ignore next */ []));
+    totalSizeFormatted = computed(() => this.formatFileSize(this.totalSizeBytes()), ...(ngDevMode ? [{ debugName: "totalSizeFormatted" }] : /* istanbul ignore next */ []));
     // Utility per formattare bytes (2 decimali)
     formatFileSize(bytes) {
         if (!bytes || bytes <= 0)
-            return '0 Bytes';
+            return "0 Bytes";
         const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        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) {
+    showToast(message, type = "success", durationMs = 3000) {
         if (this.toast.visible && this.toast.text === message) {
             return;
         }
@@ -577,46 +576,61 @@ class EqpAttachmentsComponent {
         this.sanitizer = sanitizer;
         this.http = http;
         this.eqpAttachmentService = eqpAttachmentService;
+        effect(() => {
+            this.setupMenuActions();
+        });
+        effect(() => {
+            this.setupTableColumns();
+        });
     }
     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)
+            if (this.allowOnlyImages() == true)
                 this.acceptedFileTypes = "image/*";
             else
                 this.acceptedFileTypes = "*";
         // Se non sono stati specificati i tipi da gestire ma è stato passato null o un array vuoto imposto i tipi di default.
         if (!this.allowedTypes || this.allowedTypes.length == 0)
-            this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
-        else if (this.allowedTypes.find((t) => t != AttachmentType.FILE && t != AttachmentType.LINK && t != AttachmentType.DROPBOX)) {
+            this.allowedTypes = [
+                AttachmentType.FILE,
+                AttachmentType.LINK,
+                AttachmentType.DROPBOX,
+            ];
+        else if (this.allowedTypes.find((t) => t != AttachmentType.FILE &&
+            t != AttachmentType.LINK &&
+            t != AttachmentType.DROPBOX)) {
             EqpAttachmentDialogService.Warning('Almeno uno degli AttachmentType selezionati nel parametro "allowedTypes" non esiste.');
-            this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
+            this.allowedTypes = [
+                AttachmentType.FILE,
+                AttachmentType.LINK,
+                AttachmentType.DROPBOX,
+            ];
         }
         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);
+        if (this.singleAttachment() != null && this.attachmentsList.length == 0) {
+            this.attachmentsList.push(this.singleAttachment());
         }
         this.checkAttachmentImage();
         if (this.allowedTypes.includes(3)) {
             this.eqpAttachmentService.loadDropboxScript();
         }
-        this.setupTableColumns();
-        this.setupMenuActions();
     }
     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);
+        this.totalSizeBytes.set((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;
+        this.progressPercent.set(this.attachmentsList && this.attachmentsList.length > 0 ? 100 : 0);
     }
     ngOnDestroy() {
         if (this.toast.timeoutId)
@@ -627,17 +641,17 @@ class EqpAttachmentsComponent {
         if (!base64)
             return 0;
         // Rimuovi eventuale prefisso data URL
-        const commaIdx = base64.indexOf(',');
+        const commaIdx = base64.indexOf(",");
         const b64 = commaIdx >= 0 ? base64.substring(commaIdx + 1) : base64;
         // Conta padding
         let padding = 0;
-        if (b64.endsWith('=='))
+        if (b64.endsWith("=="))
             padding = 2;
-        else if (b64.endsWith('='))
+        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);
+        return Math.max(0, 3 * Math.floor(len / 4) - padding);
     }
     checkAttachmentImage() {
         this.attachmentsList.forEach((a) => {
@@ -650,9 +664,9 @@ class EqpAttachmentsComponent {
      * @param element IAttachmentDTO da cancellare
      */
     deleteAttachment(element) {
-        EqpAttachmentDialogService.Confirm(this.deleteDialogMessage, () => {
+        EqpAttachmentDialogService.Confirm(this.deleteDialogMessage(), () => {
             this.removeAttachmentFromList(this.attachmentsList.indexOf(element));
-        }, true, this.deleteDialogTitle);
+        }, true, this.deleteDialogTitle());
     }
     /**
      * Rimuove l'allegato selezionato dalla lista "attachmentsList" e invoca l'evento di output che restituisce la lista aggiornata.
@@ -663,16 +677,16 @@ class EqpAttachmentsComponent {
         this.attachmentsList.splice(attachmentIndex, 1);
         this.localEditedAttachments.emit(this.attachmentsList);
         this.recomputeTotalsAndProgress();
-        this.showToast(this.removedLabel || 'File removed', 'success');
+        this.showToast(this.removedLabel() || "File removed", "success");
     }
     simulateProgress() {
-        this.progressPercent = 0;
+        this.progressPercent.set(0);
         setTimeout(() => {
-            this.progressPercent = 30;
+            this.progressPercent.set(30);
             setTimeout(() => {
-                this.progressPercent = 60;
+                this.progressPercent.set(60);
                 setTimeout(() => {
-                    this.progressPercent = 100;
+                    this.progressPercent.set(100);
                 }, 200);
             }, 200);
         }, 100);
@@ -696,7 +710,9 @@ class EqpAttachmentsComponent {
             setTimeout(() => URL.revokeObjectURL(url), 1000);
             return;
         }
-        if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
+        if (attachment.FileDataBase64 &&
+            attachment.FileContentType &&
+            attachment.FileName) {
             let source = `data:${attachment.FileContentType};base64,${attachment.FileDataBase64}`;
             const link = document.createElement("a");
             link.href = source;
@@ -740,7 +756,7 @@ class EqpAttachmentsComponent {
             name: [this.newAttachment.FileName],
             path: [this.newAttachment.FilePath],
             customHeight: [this.customHeight],
-            customWidth: [this.customWidth]
+            customWidth: [this.customWidth],
         });
     }
     close(emitCloseEvent = true) {
@@ -760,32 +776,39 @@ class EqpAttachmentsComponent {
      * @returns
      */
     disableSave() {
-        if (this.loadMultipleFiles != true) {
+        if (this.loadMultipleFiles() != true) {
             if (this.newAttachment.AttachmentType == AttachmentType.FILE) {
-                return !this.newAttachment.FileDataBase64 && !this.newAttachment.LargeFile;
+                return (!this.newAttachment.FileDataBase64 && !this.newAttachment.LargeFile);
             }
             else {
                 return !this.newAttachment.FilePath;
             }
         }
         else {
-            return (this.newMultipleAttachments.filter((p) => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64 && !p.LargeFile) ||
+            return (this.newMultipleAttachments.filter((p) => (p.AttachmentType == AttachmentType.FILE &&
+                !p.FileDataBase64 &&
+                !p.LargeFile) ||
                 (p.AttachmentType == AttachmentType.LINK && !p.FilePath)).length > 0);
         }
     }
     confirmAddAttachment() {
-        if (this.newAttachment.IsImage && this.imageCropper) {
-            this.newAttachment.FileDataBase64 = this.imageCropper.crop().base64.split(";base64,")[1];
+        const imageCropper = this.imageCropper();
+        if (this.newAttachment.IsImage && imageCropper) {
+            this.newAttachment.FileDataBase64 = imageCropper
+                .crop()
+                .base64.split(";base64,")[1];
         }
-        if (this.loadMultipleFiles != true) {
-            if (this.newAttachment.AttachmentType == AttachmentType.LINK && !this.newAttachment.FileName)
+        if (this.loadMultipleFiles() != true) {
+            if (this.newAttachment.AttachmentType == AttachmentType.LINK &&
+                !this.newAttachment.FileName)
                 this.newAttachment.FileName = this.newAttachment.FilePath;
             if (this.attachmentsList == null)
                 this.attachmentsList = new Array();
             this.attachmentsList.push(this.newAttachment);
         }
         else {
-            if (this.newMultipleAttachments == null || this.newMultipleAttachments.length == 0)
+            if (this.newMultipleAttachments == null ||
+                this.newMultipleAttachments.length == 0)
                 return;
             if (this.attachmentsList == null)
                 this.attachmentsList = new Array();
@@ -803,7 +826,7 @@ class EqpAttachmentsComponent {
         }
         this.resetSelectedFiles();
     }
-    // 2. RESET TOTALE: Svuotiamo le proprietà di classe per evitare che 
+    // 2. RESET TOTALE: Svuotiamo le proprietà di classe per evitare che
     // residui di upload precedenti (singoli o multipli) vengano trascinati.
     resetSelectedFiles() {
         this.newAttachment = {};
@@ -818,7 +841,9 @@ class EqpAttachmentsComponent {
      */
     async openPreviewDialog(row) {
         this.selectedAttachment = { ...row };
-        if (this.getAttachmentEndpoint && this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64) {
+        if (this.getAttachmentEndpoint() &&
+            this.selectedAttachment.IsImage &&
+            !this.selectedAttachment.FileDataBase64) {
             await this.getAttachmentByID()
                 .then((res) => {
                 this.selectedAttachment.FileDataBase64 = res.FileDataBase64;
@@ -828,12 +853,15 @@ class EqpAttachmentsComponent {
             });
         }
         if (this.selectedAttachment.AttachmentType == AttachmentType.LINK) {
-            this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedAttachment.FilePath);
+            this.selectedAttachment.TrustedUrl =
+                this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedAttachment.FilePath);
         }
-        else if (this.selectedAttachment.FileContentType?.startsWith("video/") && this.selectedAttachment.LargeFile) {
+        else if (this.selectedAttachment.FileContentType?.startsWith("video/") &&
+            this.selectedAttachment.LargeFile) {
             const videoUrl = URL.createObjectURL(this.selectedAttachment.LargeFile);
             // Usiamo bypassSecurityTrustUrl per la sorgente del video
-            this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustUrl(videoUrl);
+            this.selectedAttachment.TrustedUrl =
+                this.sanitizer.bypassSecurityTrustUrl(videoUrl);
         }
         else if (this.selectedAttachment.IsImage &&
             !this.selectedAttachment.FileDataBase64 &&
@@ -841,26 +869,32 @@ class EqpAttachmentsComponent {
             EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima dell'allegato, file mancante.");
             return;
         }
-        else if (this.selectedAttachment.FileContentType === 'application/pdf' && this.selectedAttachment.FileDataBase64) {
-            this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`data:application/pdf;base64,${this.selectedAttachment.FileDataBase64}`);
+        else if (this.selectedAttachment.FileContentType === "application/pdf" &&
+            this.selectedAttachment.FileDataBase64) {
+            this.selectedAttachment.TrustedUrl =
+                this.sanitizer.bypassSecurityTrustResourceUrl(`data:application/pdf;base64,${this.selectedAttachment.FileDataBase64}`);
         }
         else if (!this.selectedAttachment.IsImage) {
-            if (this.selectedAttachment.FilePath && this.productionBaseUrl) {
-                this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://docs.google.com/gview?url=" +
-                    this.productionBaseUrl +
-                    "/" +
-                    this.selectedAttachment.FilePath +
-                    "&embedded=true");
+            const productionBaseUrl = this.productionBaseUrl();
+            if (this.selectedAttachment.FilePath && productionBaseUrl) {
+                this.selectedAttachment.TrustedUrl =
+                    this.sanitizer.bypassSecurityTrustResourceUrl("https://docs.google.com/gview?url=" +
+                        productionBaseUrl +
+                        "/" +
+                        this.selectedAttachment.FilePath +
+                        "&embedded=true");
             }
             else {
                 EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima del documento!");
                 return;
             }
         }
-        const dialogRef = this.dialog.open(this.dialogPreview, {
-            panelClass: 'eqp-attachments-preview-dialog',
-            maxWidth: '95vw',
-            width: row.IsImage || row.FileContentType?.startsWith('video/') ? 'auto' : '1100px',
+        const dialogRef = this.dialog.open(this.dialogPreview(), {
+            panelClass: "eqp-attachments-preview-dialog",
+            maxWidth: "95vw",
+            width: row.IsImage || row.FileContentType?.startsWith("video/")
+                ? "auto"
+                : "1100px",
         });
         // Pulizia della memoria quando il dialog si chiude
         dialogRef.afterClosed().subscribe(() => {
@@ -870,7 +904,9 @@ class EqpAttachmentsComponent {
         });
     }
     async getAttachmentByID() {
-        return this.http.post(this.getAttachmentEndpoint, this.selectedAttachment).toPromise();
+        return this.http
+            .post(this.getAttachmentEndpoint(), this.selectedAttachment)
+            .toPromise();
     }
     //#region Gestione caricamento file
     /**
@@ -882,7 +918,7 @@ class EqpAttachmentsComponent {
      * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
      */
     async onFileAdded(event, isFileDropped = false) {
-        if (this.isDisabled) {
+        if (this.isDisabled()) {
             EqpAttachmentDialogService.Info("Caricamento allegati non disponibile.");
             event.preventDefault();
             return;
@@ -895,13 +931,13 @@ class EqpAttachmentsComponent {
         const { validFiles, oversizedFiles } = this.validationFile(filesOnInput);
         if (!validFiles || validFiles.length === 0) {
             if (!isFileDropped && event?.target instanceof HTMLInputElement) {
-                event.target.value = '';
+                event.target.value = "";
             }
             return;
         }
         //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 ([...validFiles].length == 1 || this.loadMultipleFiles != true) {
+        if ([...validFiles].length == 1 || this.loadMultipleFiles() != true) {
             this.selectedFile = validFiles[0];
             this.selectedFiles = validFiles;
             if (!this.selectedFile)
@@ -917,7 +953,7 @@ class EqpAttachmentsComponent {
             this.createAttachmentForm();
             //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.enableImageCrop) {
+            if (this.newAttachment.IsImage == true && this.enableImageCrop()) {
                 this.getImageDimensions(validFiles[0]);
                 //Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
                 this.newAttachmentForm.disable();
@@ -926,13 +962,13 @@ class EqpAttachmentsComponent {
                 setTimeout(() => {
                     this.showCropImage = true;
                     this.imageFile = event;
-                    this.dialogRefCropImage = this.dialog.open(this.dialogCropImage, {
+                    this.dialogRefCropImage = this.dialog.open(this.dialogCropImage(), {
                         disableClose: true,
                         hasBackdrop: true,
-                        width: "95vw",
-                        maxWidth: "800px",
-                        maxHeight: "90vh",
-                        panelClass: ['eqp-attachments-dialog', 'crop-dialog']
+                        width: "60%",
+                        maxHeight: "80%",
+                        maxWidth: "70vh",
+                        panelClass: ["eqp-attachments-dialog", "crop-dialog"],
                     });
                 });
             }
@@ -964,15 +1000,15 @@ class EqpAttachmentsComponent {
         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');
+            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');
+            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)
@@ -983,7 +1019,7 @@ class EqpAttachmentsComponent {
         const oversizedFiles = [];
         for (const file of filesOnInput) {
             const fileSizeMB = file.size / 1024 / 1024;
-            if (fileSizeMB > this.maxFileSizeMB) {
+            if (fileSizeMB > this.maxFileSizeMB()) {
                 oversizedFiles.push(file.name);
             }
             else {
@@ -991,8 +1027,8 @@ class EqpAttachmentsComponent {
             }
         }
         if (oversizedFiles.length > 0) {
-            const fileNames = oversizedFiles.join(', ');
-            this.showToast(`File(s) troppo grandi: ${fileNames}. Limite: ${this.maxFileSizeMB}MB`, 'error');
+            const fileNames = oversizedFiles.join(", ");
+            this.showToast(`File(s) troppo grandi: ${fileNames}. Limite: ${this.maxFileSizeMB()}MB`, "error");
         }
         return { validFiles, oversizedFiles };
     }
@@ -1013,22 +1049,25 @@ class EqpAttachmentsComponent {
         newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(".") + 1);
         newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
         const fileSizeMB = currentFile.size / 1024 / 1024;
-        const isLargeFile = fileSizeMB > this.base64LimitMB;
-        const isVideo = currentFile.type.startsWith('video');
+        const isLargeFile = fileSizeMB > this.base64LimitMB();
+        const isVideo = currentFile.type.startsWith("video");
         if (isVideo) {
             let finalFile = currentFile;
             // 1. Genera la miniatura (rimane lato client perché è un'operazione istantanea)
             newAttachment.FileThumbnailBase64 = await this.generateVideoThumbnail(currentFile);
             // 2. Se la compressione è abilitata, inviamo il file all'API C#
-            if (this.videoCompression.enabled) {
+            const videoCompression = this.videoCompression();
+            if (videoCompression.enabled) {
                 this.showToast("Compressione video in corso... L'operazione potrebbe richiedere alcuni minuti.", "info");
                 try {
                     // Chiamata al microservizio C# (metodo ristrutturato precedentemente)
-                    const compressedBlob = await this.compressVideoApi(currentFile, this.videoCompression);
+                    const compressedBlob = await this.compressVideoApi(currentFile, videoCompression);
                     // Creiamo il nuovo nome file con estensione .mp4
                     const newFileName = currentFile.name.replace(/\.[^/.]+$/, "") + ".mp4";
                     // Trasformiamo il Blob ricevuto in un File per mantenere la coerenza nell'oggetto DTO
-                    finalFile = new File([compressedBlob], newFileName, { type: "video/mp4" });
+                    finalFile = new File([compressedBlob], newFileName, {
+                        type: "video/mp4",
+                    });
                     // Aggiorniamo i metadati dell'allegato
                     newAttachment.FileName = newFileName;
                     newAttachment.FileContentType = "video/mp4";
@@ -1072,10 +1111,10 @@ class EqpAttachmentsComponent {
      */
     async getBase64FromFile(currentFile) {
         const fileSizeMB = currentFile.size / 1024 / 1024;
-        if (fileSizeMB > this.base64LimitMB) {
+        if (fileSizeMB > this.base64LimitMB()) {
             return {
                 Base64File: null,
-                ContentType: currentFile.type
+                ContentType: currentFile.type,
             };
         }
         // Procedura standard
@@ -1088,7 +1127,7 @@ class EqpAttachmentsComponent {
             }
             return {
                 Base64File: base64File,
-                ContentType: contentType
+                ContentType: contentType,
             };
         }
         catch (ex) {
@@ -1109,7 +1148,9 @@ class EqpAttachmentsComponent {
             // Controllo corrispondenza esatta (es. image/png)
             if (this.acceptedFileTypes.includes(mimeType))
                 return true;
-            const wildcards = this.acceptedFileTypes.split(",").filter(t => t.includes("*"));
+            const wildcards = this.acceptedFileTypes
+                .split(",")
+                .filter((t) => t.includes("*"));
             for (let t of wildcards) {
                 const prefix = t.split("*")[0]; // Prende "image/" da "image/*"
                 if (mimeType.startsWith(prefix))
@@ -1117,13 +1158,13 @@ class EqpAttachmentsComponent {
             }
             return false;
         };
-        if (this.loadMultipleFiles !== true) {
+        if (this.loadMultipleFiles() !== true) {
             // Caso Singolo
             return isTypeValid(this.selectedFile.type);
         }
         else {
             // Caso Multiplo: TUTTI i file selezionati devono essere validi
-            return Array.from(this.selectedFiles).every(file => isTypeValid(file.type));
+            return Array.from(this.selectedFiles).every((file) => isTypeValid(file.type));
         }
     }
     /**
@@ -1132,13 +1173,13 @@ class EqpAttachmentsComponent {
      * Se il controllo va a buon fine restituisce TRUE altrimenti mostra un messaggio d'errore e restituisce FALSE
      */
     checkAllowOnlyImageFile(newAttachment) {
-        if (this.allowOnlyImages == true && newAttachment.IsImage != true) {
-            EqpAttachmentDialogService.Error(this.noImageSelectedErrorMessage);
+        if (this.allowOnlyImages() == true && newAttachment.IsImage != true) {
+            EqpAttachmentDialogService.Error(this.noImageSelectedErrorMessage());
             this.abortFile();
             return false;
         }
         else if (!this.checkAcceptedFiles()) {
-            EqpAttachmentDialogService.Error(this.wrongTypeSelectedErrorMessage);
+            EqpAttachmentDialogService.Error(this.wrongTypeSelectedErrorMessage());
             this.abortFile();
             return false;
         }
@@ -1186,7 +1227,7 @@ class EqpAttachmentsComponent {
     getCroppedAndUpload(file, newAttachment) {
         var self = this;
         var file = base64ToFile(file);
-        const options = this.compressionOptions;
+        const options = this.compressionOptions();
         /**
          * Comprime l'immagine passando come parametri le options create nell'oggetto sopra, e il file dal reader principale
          */
@@ -1219,19 +1260,19 @@ class EqpAttachmentsComponent {
         this.transform = {
             ...this.transform,
             flipH: flippedV,
-            flipV: flippedH
+            flipV: flippedH,
         };
     }
     flipHorizontal() {
         this.transform = {
             ...this.transform,
-            flipH: !this.transform.flipH
+            flipH: !this.transform.flipH,
         };
     }
     flipVertical() {
         this.transform = {
             ...this.transform,
-            flipV: !this.transform.flipV
+            flipV: !this.transform.flipV,
         };
     }
     //#endregion
@@ -1239,8 +1280,9 @@ class EqpAttachmentsComponent {
      * Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
      */
     abortFile() {
-        if (this.imageInput)
-            this.imageInput.nativeElement.value = "";
+        const imageInput = this.imageInput();
+        if (imageInput)
+            imageInput.nativeElement.value = "";
         this.selectedFile = null;
         this.selectedFiles = null;
         this.showCropImage = false;
@@ -1270,7 +1312,7 @@ class EqpAttachmentsComponent {
     // 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.
     chooseDropboxFile() {
-        if (this.isDisabled)
+        if (this.isDisabled())
             return;
         var options = {
             success: (files) => {
@@ -1288,7 +1330,7 @@ class EqpAttachmentsComponent {
             },
             linkType: "direct",
             multiselect: false,
-            extensions: [".jpg", ".png", ".pdf", ".doc", ".docx", ".txt"]
+            extensions: [".jpg", ".png", ".pdf", ".doc", ".docx", ".txt"],
         };
         Dropbox.choose(options);
     }
@@ -1296,7 +1338,7 @@ class EqpAttachmentsComponent {
     onSelectFile(event, fileInput) {
         if (event.target.tagName === "BUTTON" ||
             event.target.tagName === "INPUT" ||
-            this.addingLinkMode == true) {
+            this.addingLinkMode() == true) {
             return;
         }
         fileInput.click();
@@ -1305,17 +1347,17 @@ class EqpAttachmentsComponent {
      * Apre il dialogo per l'inserimento del link.
      */
     switchToAddingLinkMode() {
-        if (this.isDisabled)
+        if (this.isDisabled())
             return;
         this.newAttachmentForm = this.formBuilder.group({
-            fileName: [''],
-            filePath: ['', [Validators.required, Validators.pattern('https?://.+')]]
+            fileName: [""],
+            filePath: ["", [Validators.required, Validators.pattern("https?://.+")]],
         });
-        const dialogRef = this.dialog.open(this.addingLinkTemplate, {
-            width: '500px',
-            panelClass: 'eqp-attachments-dialog'
+        const dialogRef = this.dialog.open(this.addingLinkTemplate(), {
+            width: "500px",
+            panelClass: "eqp-attachments-dialog",
         });
-        dialogRef.afterClosed().subscribe(result => {
+        dialogRef.afterClosed().subscribe((result) => {
             if (result) {
                 // Crea l'oggetto per il nuovo link dai dati del form
                 const newLinkObject = {
@@ -1323,7 +1365,7 @@ class EqpAttachmentsComponent {
                     AttachmentType: AttachmentType.LINK,
                     FileName: result.fileName,
                     FilePath: result.filePath,
-                    IsImage: false
+                    IsImage: false,
                 };
                 this.newAttachment = newLinkObject;
                 this.newMultipleAttachments = [newLinkObject];
@@ -1334,26 +1376,27 @@ class EqpAttachmentsComponent {
     // 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',
+            "file-preview": true,
+            uploading: !!att.isUploading,
+            "card-small": this.cardSize() === "small",
+            "card-medium": this.cardSize() === "medium",
+            "card-large": this.cardSize() === "large",
         };
     }
     // 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';
+        let minWidth = "200px"; // Dimensione di default per 'medium'
+        const cardSize = this.cardSize();
+        if (cardSize === "small") {
+            minWidth = "140px";
         }
-        else if (this.cardSize === 'large') {
-            minWidth = '280px';
+        else if (cardSize === "large") {
+            minWidth = "280px";
         }
-        else if (this.cardSize === 'custom') {
-            minWidth = `${this.customCardWidthPx}px`;
+        else if (cardSize === "custom") {
+            minWidth = `${this.customCardWidthPx()}px`;
         }
-        return { '--card-min-width': minWidth };
+        return { "--card-min-width": minWidth };
     }
     handlePrimaryAction(attachment) {
         // Se il file può essere visualizzato in anteprima, apri il dialog
@@ -1366,10 +1409,10 @@ class EqpAttachmentsComponent {
         }
     }
     /**
-   * Determines if an attachment can be previewed in the dialog.
-   * @param att The attachment to check.
-   * @returns `true` if a preview is available, otherwise `false`.
-   */
+     * Determines if an attachment can be previewed in the dialog.
+     * @param att The attachment to check.
+     * @returns `true` if a preview is available, otherwise `false`.
+     */
     canBePreviewed(att) {
         if (!att) {
             return false;
@@ -1377,56 +1420,60 @@ class EqpAttachmentsComponent {
         // Case 1: It's an image with Base64 data.
         const isPreviewableImage = att.IsImage && !!att.FileDataBase64;
         // Case 2: It's a PDF with Base64 data.
-        const isPreviewablePdf = att.FileContentType === 'application/pdf' && !!att.FileDataBase64;
+        const isPreviewablePdf = att.FileContentType === "application/pdf" && !!att.FileDataBase64;
         // Case 3: It's a remote document with a URL (for Google Viewer).
-        const isRemoteDocument = !att.IsImage && !!att.FilePath && !!this.productionBaseUrl;
+        const isRemoteDocument = !att.IsImage && !!att.FilePath && !!this.productionBaseUrl();
         //Case 4: Video - È un video e abbiamo il file binario salvato in LargeFile
-        const isPreviewableVideo = att.FileContentType?.startsWith('video/') && !!att.LargeFile;
+        const isPreviewableVideo = att.FileContentType?.startsWith("video/") && !!att.LargeFile;
         // A preview is possible if any of these conditions are true.
-        return isPreviewableImage || isPreviewablePdf || isRemoteDocument || isPreviewableVideo;
+        return (isPreviewableImage ||
+            isPreviewablePdf ||
+            isRemoteDocument ||
+            isPreviewableVideo);
     }
     isColumnHidden(col) {
         // 1) hiddenColumns
-        if (this.hiddenColumns?.includes(col.key))
+        if (this.hiddenColumns()?.includes(col.key))
             return true;
         // 2) hidden definito sulla colonna (boolean o funzione senza args)
-        if (typeof col.hidden === 'function')
+        if (typeof col.hidden === "function")
             return !!col.hidden();
         return !!col.hidden;
     }
     isActionHidden(action, att) {
-        if (this.hiddenActions?.includes(action.key))
+        if (this.hiddenActions()?.includes(action.key))
             return true;
-        if (this.actionHiddenFn?.(action.key, att))
+        if (this.actionHiddenFn()?.(action.key, att))
             return true;
-        if (typeof action.hidden === 'function')
+        if (typeof action.hidden === "function")
             return !!action.hidden(att);
         return !!action.hidden;
     }
     isActionDisabled(action, att) {
-        if (this.actionDisabledFn?.(action.key, att))
+        if (this.actionDisabledFn()?.(action.key, att))
             return true;
-        if (typeof action.disabled === 'function')
+        if (typeof action.disabled === "function")
             return !!action.disabled(att);
         return !!action.disabled;
     }
     isDeleteHidden(att) {
-        return this.actionHiddenFn?.('delete', att) || this.hiddenActions?.includes('delete');
+        return (this.actionHiddenFn()?.("delete", att) ||
+            this.hiddenActions()?.includes("delete"));
     }
     isDeleteDisabled(att) {
-        return this.disableAction || !!this.actionDisabledFn?.('delete', att);
+        return this.disableAction() || !!this.actionDisabledFn()?.("delete", att);
     }
     isPrimaryActionHidden(att) {
-        if (this.hiddenActions?.includes('download') || this.hiddenActions?.includes('preview') || this.hiddenActions?.includes('primaryAction'))
+        if (this.hiddenActions()?.includes('download') || this.hiddenActions()?.includes('preview') || this.hiddenActions()?.includes('primaryAction'))
             return true;
-        if (this.hiddenColumns?.includes('download') || this.hiddenColumns?.includes('preview') || this.hiddenColumns?.includes('primaryAction'))
+        if (this.hiddenColumns()?.includes('download') || this.hiddenColumns()?.includes('preview') || this.hiddenColumns()?.includes('primaryAction'))
             return true;
-        if (this.actionHiddenFn?.('primaryAction', att) || this.actionHiddenFn?.('download', att) || this.actionHiddenFn?.('preview', att))
+        if (this.actionHiddenFn()?.('primaryAction', att) || this.actionHiddenFn()?.('download', att) || this.actionHiddenFn()?.('preview', att))
             return true;
         return false;
     }
     isPrimaryActionDisabled(att) {
-        if (this.actionDisabledFn?.('primaryAction', att) || this.actionDisabledFn?.('download', att) || this.actionDisabledFn?.('preview', att))
+        if (this.actionDisabledFn()?.('primaryAction', att) || this.actionDisabledFn()?.('download', att) || this.actionDisabledFn()?.('preview', att))
             return true;
         return false;
     }
@@ -1436,28 +1483,28 @@ class EqpAttachmentsComponent {
     setupTableColumns() {
         // Definiamo le colonne standard con una posizione
         const defaultFileColumn = {
-            key: 'file',
-            display: 'File',
+            key: "file",
+            display: "File",
             type: TypeAttachmentColumn.TEMPLATE,
-            externalTemplate: this.defaultFileTemplate,
-            styles: { flex: '1 1 0%' },
-            position: 10
+            externalTemplate: this.defaultFileTemplate(),
+            styles: { flex: "1 1 0%" },
+            position: 10,
         };
         const defaultActionsColumn = {
-            key: 'actions',
-            display: 'Azioni',
+            key: "actions",
+            display: "Azioni",
             type: TypeAttachmentColumn.TEMPLATE,
-            externalTemplate: this.defaultActionsTemplate,
+            externalTemplate: this.defaultActionsTemplate(),
             position: 100,
-            class: 'col-actions',
-            styles: { flex: '0 0 150px' }
+            class: "col-actions",
+            styles: { flex: "0 0 150px" },
         };
-        const processedCustomColumns = this._customColumns.map(col => {
+        const processedCustomColumns = this.customColumns().map((col) => {
             // Flex di default
             if (!col.styles || !col.styles.flex) {
                 return {
                     ...col,
-                    styles: { ...col.styles, flex: '1 1 0%' }
+                    styles: { ...col.styles, flex: "1 1 0%" },
                 };
             }
             return col;
@@ -1465,10 +1512,11 @@ class EqpAttachmentsComponent {
         const allColumns = [
             defaultFileColumn,
             defaultActionsColumn,
-            ...processedCustomColumns
+            ...processedCustomColumns,
         ];
         // Ordiniamo l'array finale in base alla proprietà 'position'
-        this._tableColumns = allColumns.filter(col => !this.isColumnHidden(col))
+        this._tableColumns = allColumns
+            .filter((col) => !this.isColumnHidden(col))
             .sort((a, b) => {
             const posA = a.position || 99;
             const posB = b.position || 99;
@@ -1477,25 +1525,25 @@ class EqpAttachmentsComponent {
     }
     setupMenuActions() {
         const defaultPreviewAction = {
-            key: 'preview',
-            icon: 'visibility',
-            name: 'Anteprima',
+            key: "preview",
+            icon: "visibility",
+            name: "Anteprima",
             fn: (att) => this.openPreviewDialog(att),
             disabled: (att) => !this.canBePreviewed(att),
-            position: 10
+            position: 10,
         };
         const defaultDeleteAction = {
-            key: 'delete',
-            icon: 'delete',
-            name: 'Elimina',
+            key: "delete",
+            icon: "delete",
+            name: "Elimina",
             fn: (att) => this.deleteAttachment(att),
-            disabled: () => this.disableAction,
-            position: 100
+            disabled: () => this.disableAction(),
+            position: 100,
         };
         const allActions = [
             defaultPreviewAction,
             defaultDeleteAction,
-            ...this._customMenuActions
+            ...this.customMenuActions(),
         ];
         // Ordiniamo l'array finale in base alla proprietà 'position'
         this._sortedMenuActions = allActions.sort((a, b) => {
@@ -1506,13 +1554,13 @@ class EqpAttachmentsComponent {
     }
     generateVideoThumbnail(file) {
         return new Promise((resolve, reject) => {
-            const video = document.createElement('video');
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
+            const video = document.createElement("video");
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
             // Crea un URL temporaneo per il file video
             const videoUrl = URL.createObjectURL(file);
             video.src = videoUrl;
-            video.preload = 'metadata';
+            video.preload = "metadata";
             video.muted = true;
             video.playsInline = true;
             video.onloadedmetadata = () => {
@@ -1526,10 +1574,10 @@ class EqpAttachmentsComponent {
                 // Disegna il fotogramma sul canvas
                 context.drawImage(video, 0, 0, canvas.width, canvas.height);
                 // Estrai il Base64 (qualità 0.7 per risparmiare spazio)
-                const thumbnail = canvas.toDataURL('image/jpeg', 0.7);
+                const thumbnail = canvas.toDataURL("image/jpeg", 0.7);
                 // Pulisci la memoria
                 URL.revokeObjectURL(videoUrl);
-                resolve(thumbnail.split(',')[1]); // Restituiamo solo la parte Base64
+                resolve(thumbnail.split(",")[1]); // Restituiamo solo la parte Base64
             };
             video.onerror = (err) => {
                 URL.revokeObjectURL(videoUrl);
@@ -1540,25 +1588,25 @@ class EqpAttachmentsComponent {
     async compressVideoApi(file, config) {
         // Prepariamo il FormData per inviare il file binario e i parametri di configurazione
         const formData = new FormData();
-        formData.append('video', file);
-        formData.append('maxWidth', String(config.maxWidth ?? 1280));
+        formData.append("video", file);
+        formData.append("maxWidth", String(config.maxWidth ?? 1280));
         if (config.crf != null)
-            formData.append('crf', String(config.crf));
+            formData.append("crf", String(config.crf));
         if (config.preset)
-            formData.append('preset', config.preset);
+            formData.append("preset", config.preset);
         if (config.crf == null) {
-            formData.append('bitrate', String(config.bitrate ?? 2500000));
+            formData.append("bitrate", String(config.bitrate ?? 2500000));
         }
         if (config.maxFps != null)
-            formData.append('maxFps', String(config.maxFps));
+            formData.append("maxFps", String(config.maxFps));
         if (config.audioBitrate != null)
-            formData.append('audioBitrate', String(config.audioBitrate));
+            formData.append("audioBitrate", String(config.audioBitrate));
         // URL della tua API C#
-        const apiUrl = 'https://tuo-servizio-api.it/api/video/compress';
+        const apiUrl = "https://tuo-servizio-api.it/api/video/compress";
         try {
             // Effettuiamo la chiamata. Usiamo 'fetch' per semplicità o HttpClient di Angular
             const response = await fetch(apiUrl, {
-                method: 'POST',
+                method: "POST",
                 body: formData,
                 // Nota: Non impostare Content-Type, il browser lo farà correttamente includendo il boundary
             });
@@ -1573,268 +1621,29 @@ class EqpAttachmentsComponent {
             throw error;
         }
     }
-    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: EqpAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", 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", layout: "layout", 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", base64LimitMB: "base64LimitMB", 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", showUploadTitle: "showUploadTitle", showDropArea: "showDropArea", hiddenColumns: "hiddenColumns", hiddenActions: "hiddenActions", showActionButtons: "showActionButtons", enableImageCrop: "enableImageCrop", actionHiddenFn: "actionHiddenFn", actionDisabledFn: "actionDisabledFn", videoCompression: "videoCompression", customMenuActions: "customMenuActions", customColumns: "customColumns" }, 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 }, { propertyName: "defaultFileTemplate", first: true, predicate: ["defaultFileTemplate"], descendants: true, static: true }, { propertyName: "defaultActionsTemplate", first: true, predicate: ["defaultActionsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n@if(showUploadTitle == true || chooseView == true){\r\n<div class=\"header\">\r\n  @if(showUploadTitle == true){\r\n  <h4>{{ uploadTitle }}</h4>\r\n  }\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\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\r\n@if (showDropArea == true) {\r\n<!-- FULL -->\r\n@if (layout === 'full') {\r\n\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\"\r\n  (click)=\"!isDisabled && onSelectFile($event, fileInput)\" role=\"button\" [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n  (keydown.enter)=\"!isDisabled && fileInput.click()\" (keydown.space)=\"!isDisabled && 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]=\"isDisabled ? null : linkMenu\"\r\n      [class.disabled-link]=\"isDisabled\" (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.disabled-link]=\"isDisabled\" class=\"secondary-action-link\"\r\n      (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.disabled-link]=\"isDisabled\" class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); chooseDropboxFile()\">\r\n      carica da Dropbox\r\n    </a>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}@else {\r\n<div class=\"compact-uploader\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\">\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"!isDisabled && onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button mat-stroked-button color=\"primary\" [disabled]=\"isDisabled\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\">Sfoglia</button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\">Link</button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) { <button mat-menu-item [disabled]=\"isDisabled\"\r\n        (click)=\"switchToAddingLinkMode()\">{{ openLinkLabel }}</button> }\r\n      @if (allowedTypes.includes(3)) { <button mat-menu-item [disabled]=\"isDisabled\" (click)=\"chooseDropboxFile()\">{{\r\n        uploadWithDropboxLabel }}</button> }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}\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] && showActionButtons == true) {\r\n  @if (!isPrimaryActionHidden(attachmentsList[0])) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\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\r\n  @if (!isPrimaryActionHidden(attachmentsList[0]) && 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    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\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 && showDropArea == 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@if (layout === 'full') {\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\"\r\n  (click)=\"!isDisabled && onSelectFile($event, fileInput)\" role=\"button\" [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n  (keydown.enter)=\"!isDisabled && fileInput.click()\" (keydown.space)=\"!isDisabled && 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  @if (allowedTypes.includes(2)) {\r\n  <div class=\"secondary-action-link\">\r\n    o <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">aggiungi un link</a>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<div class=\"compact-uploader\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\">\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"!isDisabled && onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" color=\"primary\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\">Sfoglia</button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\">Link</button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) { <button mat-menu-item [disabled]=\"isDisabled\"\r\n        (click)=\"switchToAddingLinkMode()\">{{ openLinkLabel }}</button> }\r\n      @if (allowedTypes.includes(3)) { <button mat-menu-item [disabled]=\"isDisabled\" (click)=\"chooseDropboxFile()\">{{\r\n        uploadWithDropboxLabel }}</button> }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n}\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    <div class=\"preview-img-container\" (click)=\"!att.isUploading && !isPrimaryActionHidden(att) && !isPrimaryActionDisabled(att) && handlePrimaryAction(att)\">\r\n\r\n      @if (att.IsImage || att.FileThumbnailBase64) {\r\n      <img class=\"preview-img\" [src]=\"'data:image/jpeg;base64,' + (att.FileThumbnailBase64 || att.FileDataBase64)\"\r\n        [alt]=\"att.FileName\" />\r\n      } @else {\r\n      <div class=\"file-icon\"><i [ngClass]=\"getAttachmentIcon(att)\"></i></div>\r\n      }\r\n\r\n      @if (!isPrimaryActionHidden(att)) {\r\n      <div class=\"preview-action-overlay\">\r\n        @if (att.FileContentType?.startsWith('video/')) {\r\n        <mat-icon>play_arrow</mat-icon>\r\n        }\r\n        @else if (att.IsImage && canBePreviewed(att)) {\r\n        <mat-icon>visibility</mat-icon>\r\n        }\r\n        @else if (att.FileContentType === 'application/pdf' && canBePreviewed(att)) {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        }\r\n        @else if (att.AttachmentType === AttachmentType.FILE) {\r\n        <mat-icon>download</mat-icon>\r\n        }\r\n        @else {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        }\r\n      </div>\r\n      }\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(!isDeleteHidden(att)){\r\n    <button mat-icon-button class=\"remove-btn\" (click)=\"deleteAttachment(att)\"\r\n      [disabled]=\"att.isUploading || isDeleteDisabled(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 if(viewMode === 'table' && attachmentsList?.length > 0) {\r\n\r\n\r\n<div class=\"table-view-container\">\r\n\r\n  <div class=\"table-header\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div class=\"table-cell\" [style.flex]=\"col.styles?.flex\" [ngClass]=\"col.class\">\r\n      {{ col.display }}\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div class=\"table-cell\" [style.flex]=\"col.styles?.flex\" [ngClass]=\"col.class\">\r\n\r\n      @switch (col.type) {\r\n\r\n      @case ('template') {\r\n      <div class=\"template-wrapper\">\r\n        <ng-container [ngTemplateOutlet]=\"col.externalTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: att }\"></ng-container>\r\n      </div>\r\n      }\r\n      @case ('date') {\r\n      <span class=\"metadata-value\">{{ att[col.key] | date:'dd/MM/yyyy' }}</span>\r\n      }\r\n      @default {\r\n      <span class=\"metadata-value\">{{ att[col.key] }}</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\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<ng-template #defaultFileTemplate let-att>\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</ng-template>\r\n\r\n<ng-template #defaultActionsTemplate let-att>\r\n  @if (!isPrimaryActionHidden(att)) {\r\n  <button mat-icon-button (click)=\"handlePrimaryAction(att)\" [disabled]=\"isPrimaryActionDisabled(att)\"\r\n    [matTooltip]=\"att.FileContentType?.startsWith('video/') ? 'Riproduci video' : 'Visualizza/Scarica'\">\r\n\r\n    <mat-icon>\r\n      @if (att.FileContentType?.startsWith('video/')) {\r\n      play_arrow\r\n      } @else {\r\n      {{ att.AttachmentType === AttachmentType.FILE ? 'download' : 'open_in_new' }}\r\n      }\r\n    </mat-icon>\r\n  </button>\r\n  }\r\n\r\n  @if (!hiddenActions.includes('actionsMenu')) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"actionsMenu\" matTooltip=\"Altre opzioni\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n  }\r\n\r\n  <mat-menu #actionsMenu=\"matMenu\">\r\n    @for (action of _sortedMenuActions; track action.name) {\r\n    @if (!isActionHidden(action, att)) {\r\n    <button mat-menu-item (click)=\"action.fn(att)\" [disabled]=\"isActionDisabled(action, att)\">\r\n      <mat-icon [color]=\"action.icon === 'delete' ? 'warn' : undefined\">\r\n        {{ action.icon }}\r\n      </mat-icon>\r\n      <span>{{ action.name }}</span>\r\n    </button>\r\n    }\r\n    }\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogCropImage>\r\n  <div style=\"overflow-x: hidden; display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto;\"\r\n    [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  <div class=\"modern-dialog-container\"> @if (selectedAttachment) {\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ previewLabel }}</span>\r\n          <span class=\"file-t\">{{ selectedAttachment.FileName }}</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"media-viewer-wrapper\">\r\n        @if (selectedAttachment.IsImage) {\r\n        <img class=\"main-preview-media\"\r\n          [src]=\"'data:image/png;base64,' + (selectedAttachment.FileDataBase64 || selectedAttachment.FileThumbnailBase64)\"\r\n          [alt]=\"selectedAttachment.FileName\" />\r\n        }\r\n        @else if (selectedAttachment.FileContentType?.startsWith('video/')) {\r\n        <video controls autoplay playsinline class=\"main-preview-media video-player\">\r\n          <source [src]=\"selectedAttachment.TrustedUrl\" [type]=\"selectedAttachment.FileContentType\">\r\n          Il tuo browser non supporta il video.\r\n        </video>\r\n        }\r\n        @else {\r\n        <div class=\"iframe-container\">\r\n          <iframe class=\"preview-iframe-modern\" [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"></iframe>\r\n        </div>\r\n        }\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Chiudi</button>\r\n      @if (selectedAttachment.AttachmentType !== AttachmentType.LINK) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"viewAttachment(selectedAttachment)\" class=\"btn-download\">\r\n        <mat-icon>download</mat-icon> <span>{{ downloadLabel }}</span>\r\n      </button>\r\n      }\r\n    </mat-dialog-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n  <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 [disabled]=\"isDisabled\" (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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ cropLabel }}</span>\r\n          <span class=\"file-t\">Regola le dimensioni e l'orientamento</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button type=\"button\" (click)=\"abortFile()\" class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"crop-toolbar\">\r\n        @if (cropOptions.includes(1)) {\r\n        <button mat-icon-button [matTooltip]=\"rotateLeftLabel\"\r\n          (click)=\"rotateLeft()\"><mat-icon>rotate_left</mat-icon></button>\r\n        <button mat-icon-button [matTooltip]=\"rotateRightLabel\"\r\n          (click)=\"rotateRight()\"><mat-icon>rotate_right</mat-icon></button>\r\n        }\r\n        @if (cropOptions.includes(2)) {\r\n        <button mat-icon-button [matTooltip]=\"flipHorinzontalLabel\"\r\n          (click)=\"flipHorizontal()\"><mat-icon>flip_horizontal</mat-icon></button>\r\n        <button mat-icon-button [matTooltip]=\"flipVerticalLabel\"\r\n          (click)=\"flipVertical()\"><mat-icon>flip_vertical</mat-icon></button>\r\n        }\r\n        <button mat-icon-button matTooltip=\"Reset\"\r\n          (click)=\"restoreOriginalDimensions()\"><mat-icon>replay</mat-icon></button>\r\n      </div>\r\n\r\n      <div class=\"media-viewer-wrapper\">\r\n        <div class=\"crop-container-modern\">\r\n          <image-cropper [imageFile]=\"selectedFile\" [maintainAspectRatio]=\"false\" [canvasRotation]=\"canvasRotation\"\r\n            [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\" [resizeToWidth]=\"customWidth\"\r\n            [resizeToHeight]=\"customHeight\" [output]=\"'base64'\" [containWithinAspectRatio]=\"true\" [onlyScaleDown]=\"true\"\r\n            [alignImage]=\"'center'\">\r\n          </image-cropper>\r\n        </div>\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button (click)=\"abortFile()\" class=\"btn-close\">{{ abortLabel }}</button>\r\n      <button mat-raised-button color=\"primary\" (click)=\"confirmAddAttachment()\" class=\"btn-download\">\r\n        <mat-icon>check</mat-icon> {{ confirmLabel }}\r\n      </button>\r\n    </mat-dialog-actions>\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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"type-icon-wrapper\">\r\n          <mat-icon>link</mat-icon>\r\n        </div>\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">Aggiungi un link</span>\r\n          <span class=\"file-t\">Inserisci l'URL della risorsa web</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"add-link-modern-content\">\r\n      <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n        <mat-form-field appearance=\"outline\" class=\"w-100 mt-3\">\r\n          <mat-label>URL del collegamento</mat-label>\r\n          <input matInput formControlName=\"filePath\" placeholder=\"https://...\" required>\r\n          <mat-icon matSuffix>language</mat-icon>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>Titolo (opzionale)</mat-label>\r\n          <input matInput formControlName=\"fileName\" placeholder=\"Es. Documento Progetto\">\r\n          <mat-icon matSuffix>title</mat-icon>\r\n        </mat-form-field>\r\n      </form>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Annulla</button>\r\n      <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"newAttachmentForm.value\"\r\n        [disabled]=\"newAttachmentForm.invalid\" class=\"btn-download\">\r\n        <mat-icon>add</mat-icon> Aggiungi\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";: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 .preview-action-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#0006;color:#fff;opacity:1;transition:opacity .3s ease}.file-preview .preview-action-overlay .mat-icon{font-size:36px;width:36px;height:36px}.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){.file-preview .remove-btn .file-preview .preview-action-overlay{opacity:0}.file-preview .remove-btn .file-preview:hover .preview-action-overlay,.file-preview .remove-btn .file-preview:hover .remove-btn{opacity:1}.file-preview .remove-btn .file-preview .remove-btn{opacity:0}}@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)}::ng-deep .cdk-overlay-pane.eqp-crop-dialog{transform:translateY(-4vh)}@media (max-width: 600px){::ng-deep .cdk-overlay-pane.crop-dialog{width:auto!important}}::ng-deep .eqp-attachments-dialog{display:flex!important;flex-direction:column!important}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__container{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__container .mdc-dialog__surface{border-radius:20px!important;padding:0!important;overflow:hidden!important;width:fit-content!important;min-width:350px!important;max-width:95vw!important;max-height:90vh!important;margin:0 auto;background-color:#fff!important;display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden!important}.modern-dialog-container{display:flex;flex-direction:column;width:100%;max-width:100%;flex:1 1 auto;min-height:0;height:100%;max-height:100%;background:#fff;--preview-header-h: 66px;--preview-footer-h: 66px;--preview-padding-y: 30px}.modern-dialog-container .main-preview-media{display:block;max-width:100%;max-height:var(--media-max-h);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 10px 30px #00000014}.modern-dialog-container video.main-preview-media{width:min(100%,1100px);background:#000}.modern-dialog-container .iframe-container{width:min(100%,1100px);height:var(--media-max-h);display:flex;width:100%;max-width:1100px}.modern-dialog-container .preview-iframe-modern{width:100%;height:100%;border:0;border-radius:12px;background:#f8fafc}.modern-dialog-container .preview-header{flex:0 0 auto;flex-shrink:0;padding:14px 20px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid var(--border-color);background:#f8fafc;z-index:10;width:100%}.modern-dialog-container .preview-header .close-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;width:40px!important;height:40px!important}.modern-dialog-container .preview-header .close-btn ::ng-deep mat-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;line-height:1!important}.modern-dialog-container .preview-header .header-info{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:1 1 auto;min-width:0;text-align:left}.modern-dialog-container .preview-header .header-info .type-icon-wrapper{background:var(--primary-color);color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px var(--shadow-color)}.modern-dialog-container .preview-header .header-info .title-group{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .main-t{font-weight:800;color:var(--text-color);font-size:.95rem;line-height:1.2;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .file-t{font-size:.75rem;color:var(--text-color-light);max-width:250px;overflow:hidden;text-overflow:ellipsis;text-align:left}.modern-dialog-container .preview-content-area{flex:1 1 auto;background:#fff!important;display:flex;flex-direction:column;padding:15px 15px 22px!important;overflow:hidden!important;min-height:0;width:100%;--media-max-h: calc(90vh - var(--preview-header-h) - var(--preview-footer-h) - var(--preview-padding-y))}.modern-dialog-container .preview-content-area .crop-toolbar{flex-shrink:0;z-index:20;background:#0f172a14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 16px;border-radius:30px;margin:0 auto 15px;display:flex;gap:8px;box-shadow:0 4px 12px #0000000d}.modern-dialog-container .preview-content-area .crop-toolbar button{color:var(--text-color)!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper{flex:1 1 auto;width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:hidden}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;border-radius:12px;padding:0;overflow:hidden;min-height:0;width:100%;height:100%}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern image-cropper{flex:1 1 auto;width:100%;height:100%;max-width:100%!important;max-height:100%!important;display:block;min-height:0}.modern-dialog-container .add-link-modern-content{flex:1;background:#fff;padding:24px!important}.modern-dialog-container .add-link-modern-content .add-link-form{display:flex;flex-direction:column;gap:10px}.modern-dialog-container .preview-actions{flex-shrink:0;padding:12px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;margin:0}.modern-dialog-container .preview-actions .btn-download{border-radius:12px;font-weight:600;box-shadow:0 4px 12px var(--shadow-color)}@media (max-width: 600px){.modern-dialog-container{max-height:95vh}.modern-dialog-container .preview-content-area{padding:10px!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper video.main-preview-media{width:100%!important;max-height:55vh!important;border-radius:4px;box-shadow:none}.modern-dialog-container .preview-content-area .media-viewer-wrapper .iframe-container{height:50vh}.modern-dialog-container .preview-content-area .crop-toolbar{width:calc(100% - 20px);max-width:400px;margin-bottom:10px;padding:4px 8px;gap:4px;overflow-x:auto;justify-content:center;-webkit-overflow-scrolling:touch;scrollbar-width:none}.modern-dialog-container .preview-content-area .crop-toolbar::-webkit-scrollbar{display:none}.modern-dialog-container .preview-content-area .crop-toolbar button{flex-shrink:0;transform:scale(.85);width:40px;height:40px}.modern-dialog-container .preview-actions{padding:10px 15px;flex-direction:column-reverse;gap:8px}.modern-dialog-container .preview-actions button{width:100%;margin:0!important}}@media (max-width: 360px){.modern-dialog-container .preview-content-area .crop-toolbar{gap:2px}.modern-dialog-container .preview-content-area .crop-toolbar button{transform:scale(.75)}}.control-icon{font-size:28px;cursor:pointer}image-cropper{display:flex!important;max-width:100%!important;max-height:100%!important;height:100%;width:100%}image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.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}::ng-deep .eqp-attachments-preview-dialog{--mdc-dialog-subhead-line-height: normal}::ng-deep .eqp-attachments-preview-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;background:#fff!important}:host ::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{--mdc-dialog-subhead-size: 1.25rem;--mdc-dialog-subhead-line-height: 1.5;--mdc-dialog-subhead-weight: 600;--mdc-dialog-supporting-text-size: 1rem}.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem;margin-top:1.5rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#f8f9fa;text-align:center;color:var(--text-color-light);animation:fadeIn .5s ease-out}.empty-state:before{content:\"\\1f4ed\";font-size:2.5rem;margin-bottom:1rem;opacity:.7}.secondary-action-link.disabled-link{color:#adb5bd;cursor:not-allowed;border-bottom-color:transparent}.secondary-action-link.disabled-link:hover{color:#adb5bd;border-bottom-color:transparent}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden}.table-cell.col-actions{flex:0 0 150px;justify-content:flex-end;overflow:visible}.compact-uploader{display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#fcfdff;transition:all .3s ease}.compact-uploader .compact-text{flex:1 1 auto;min-width:0;cursor:pointer}.compact-uploader .compact-text:hover .compact-title{color:var(--primary-color)}.compact-uploader .compact-title{font-weight:600;color:var(--text-color);transition:color .3s ease}.compact-uploader .compact-subtitle{font-size:.8rem;color:var(--text-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-uploader .compact-icon mat-icon{font-size:36px;width:36px;height:36px;color:var(--primary-color)}.compact-uploader .compact-actions{display:flex;gap:8px;flex-shrink:0}.compact-uploader.dragover{background-color:#f4f8ff;border-color:var(--primary-color);box-shadow:0 0 10px var(--shadow-color)}.disabled-dropzone{opacity:.5;cursor:not-allowed!important;background-color:#f5f5f5;border-color:#d1d5db}.disabled-dropzone *{pointer-events:none}.disabled-dropzone .browse-btn,.disabled-dropzone button{cursor:not-allowed!important;background-color:#e5e7eb;color:#9ca3af;border:none}.disabled-dropzone .secondary-action-link,.disabled-dropzone a{color:#9ca3af;text-decoration:none}\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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }, { kind: "pipe", type: i13.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentsComponent, deps: [{ token: i1.MatDialog }, { token: i2.FormBuilder }, { token: i3.DomSanitizer }, { token: i4.HttpClient }, { token: EqpAttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EqpAttachmentsComponent, isStandalone: false, selector: "eqp-attachments", inputs: { disableAction: { classPropertyName: "disableAction", publicName: "disableAction", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, attachmentsList: { classPropertyName: "attachmentsList", publicName: "attachmentsList", isSignal: false, isRequired: false, transformFunction: null }, singleAttachment: { classPropertyName: "singleAttachment", publicName: "singleAttachment", isSignal: true, isRequired: false, transformFunction: null }, showMatCard: { classPropertyName: "showMatCard", publicName: "showMatCard", isSignal: true, isRequired: false, transformFunction: null }, multipleAttachment: { classPropertyName: "multipleAttachment", publicName: "multipleAttachment", isSignal: true, isRequired: false, transformFunction: null }, loadMultipleFiles: { classPropertyName: "loadMultipleFiles", publicName: "loadMultipleFiles", isSignal: true, isRequired: false, transformFunction: null }, emptyTableMessage: { classPropertyName: "emptyTableMessage", publicName: "emptyTableMessage", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyImages: { classPropertyName: "allowOnlyImages", publicName: "allowOnlyImages", isSignal: true, isRequired: false, transformFunction: null }, acceptedFileTypes: { classPropertyName: "acceptedFileTypes", publicName: "acceptedFileTypes", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, showInlinePreview: { classPropertyName: "showInlinePreview", publicName: "showInlinePreview", isSignal: true, isRequired: false, transformFunction: null }, getAttachmentEndpoint: { classPropertyName: "getAttachmentEndpoint", publicName: "getAttachmentEndpoint", isSignal: true, isRequired: false, transformFunction: null }, productionBaseUrl: { classPropertyName: "productionBaseUrl", publicName: "productionBaseUrl", isSignal: true, isRequired: false, transformFunction: null }, compressionOptions: { classPropertyName: "compressionOptions", publicName: "compressionOptions", isSignal: true, isRequired: false, transformFunction: null }, allowedTypes: { classPropertyName: "allowedTypes", publicName: "allowedTypes", isSignal: false, isRequired: false, transformFunction: null }, isEqpTableMultiLanguage: { classPropertyName: "isEqpTableMultiLanguage", publicName: "isEqpTableMultiLanguage", isSignal: true, isRequired: false, transformFunction: null }, tablePaginatorVisible: { classPropertyName: "tablePaginatorVisible", publicName: "tablePaginatorVisible", isSignal: true, isRequired: false, transformFunction: null }, isTableSearcheable: { classPropertyName: "isTableSearcheable", publicName: "isTableSearcheable", isSignal: true, isRequired: false, transformFunction: null }, tablePaginatorSize: { classPropertyName: "tablePaginatorSize", publicName: "tablePaginatorSize", isSignal: true, isRequired: false, transformFunction: null }, separatedUploadButtons: { classPropertyName: "separatedUploadButtons", publicName: "separatedUploadButtons", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, singleAttachmentDragAndDrop: { classPropertyName: "singleAttachmentDragAndDrop", publicName: "singleAttachmentDragAndDrop", isSignal: true, isRequired: false, transformFunction: null }, cropOptions: { classPropertyName: "cropOptions", publicName: "cropOptions", isSignal: true, isRequired: false, transformFunction: null }, cropDialogClass: { classPropertyName: "cropDialogClass", publicName: "cropDialogClass", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeMB: { classPropertyName: "maxFileSizeMB", publicName: "maxFileSizeMB", isSignal: true, isRequired: false, transformFunction: null }, cardSize: { classPropertyName: "cardSize", publicName: "cardSize", isSignal: true, isRequired: false, transformFunction: null }, customCardWidthPx: { classPropertyName: "customCardWidthPx", publicName: "customCardWidthPx", isSignal: true, isRequired: false, transformFunction: null }, customCardHeightPx: { classPropertyName: "customCardHeightPx", publicName: "customCardHeightPx", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, openLinkLabel: { classPropertyName: "openLinkLabel", publicName: "openLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, downloadLabel: { classPropertyName: "downloadLabel", publicName: "downloadLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, fileNameLabel: { classPropertyName: "fileNameLabel", publicName: "fileNameLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadFileLabel: { classPropertyName: "uploadFileLabel", publicName: "uploadFileLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, abortLabel: { classPropertyName: "abortLabel", publicName: "abortLabel", isSignal: true, isRequired: false, transformFunction: null }, saveLabel: { classPropertyName: "saveLabel", publicName: "saveLabel", isSignal: true, isRequired: false, transformFunction: null }, exitLabel: { classPropertyName: "exitLabel", publicName: "exitLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadWithDropboxLabel: { classPropertyName: "uploadWithDropboxLabel", publicName: "uploadWithDropboxLabel", isSignal: true, isRequired: false, transformFunction: null }, cropLabel: { classPropertyName: "cropLabel", publicName: "cropLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteDialogTitle: { classPropertyName: "deleteDialogTitle", publicName: "deleteDialogTitle", isSignal: true, isRequired: false, transformFunction: null }, deleteDialogMessage: { classPropertyName: "deleteDialogMessage", publicName: "deleteDialogMessage", isSignal: true, isRequired: false, transformFunction: null }, noImageSelectedErrorMessage: { classPropertyName: "noImageSelectedErrorMessage", publicName: "noImageSelectedErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeSelectedErrorMessage: { classPropertyName: "wrongTypeSelectedErrorMessage", publicName: "wrongTypeSelectedErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, videoPreviewErrorMessage: { classPropertyName: "videoPreviewErrorMessage", publicName: "videoPreviewErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, audioPreviewErrorMessage: { classPropertyName: "audioPreviewErrorMessage", publicName: "videoPreviewErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, flipHorinzontalLabel: { classPropertyName: "flipHorinzontalLabel", publicName: "flipHorinzontalLabel", isSignal: true, isRequired: false, transformFunction: null }, flipVerticalLabel: { classPropertyName: "flipVerticalLabel", publicName: "flipVerticalLabel", isSignal: true, isRequired: false, transformFunction: null }, rotateRightLabel: { classPropertyName: "rotateRightLabel", publicName: "rotateRightLabel", isSignal: true, isRequired: false, transformFunction: null }, rotateLeftLabel: { classPropertyName: "rotateLeftLabel", publicName: "rotateLeftLabel", isSignal: true, isRequired: false, transformFunction: null }, base64LimitMB: { classPropertyName: "base64LimitMB", publicName: "base64LimitMB", isSignal: true, isRequired: false, transformFunction: null }, uploadTitle: { classPropertyName: "uploadTitle", publicName: "uploadTitle", isSignal: true, isRequired: false, transformFunction: null }, uploadSubtitle: { classPropertyName: "uploadSubtitle", publicName: "uploadSubtitle", isSignal: true, isRequired: false, transformFunction: null }, dropHereLabel: { classPropertyName: "dropHereLabel", publicName: "dropHereLabel", isSignal: true, isRequired: false, transformFunction: null }, supportedFormatsLabel: { classPropertyName: "supportedFormatsLabel", publicName: "supportedFormatsLabel", isSignal: true, isRequired: false, transformFunction: null }, browseFilesLabel: { classPropertyName: "browseFilesLabel", publicName: "browseFilesLabel", isSignal: true, isRequired: false, transformFunction: null }, uploadSummaryLabel: { classPropertyName: "uploadSummaryLabel", publicName: "uploadSummaryLabel", isSignal: true, isRequired: false, transformFunction: null }, filesLabel: { classPropertyName: "filesLabel", publicName: "filesLabel", isSignal: true, isRequired: false, transformFunction: null }, totalSizeLabel: { classPropertyName: "totalSizeLabel", publicName: "totalSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyStateLabel: { classPropertyName: "emptyStateLabel", publicName: "emptyStateLabel", isSignal: true, isRequired: false, transformFunction: null }, addedSuccessfullyLabel: { classPropertyName: "addedSuccessfullyLabel", publicName: "addedSuccessfullyLabel", isSignal: true, isRequired: false, transformFunction: null }, removedLabel: { classPropertyName: "removedLabel", publicName: "removedLabel", isSignal: true, isRequired: false, transformFunction: null }, chooseView: { classPropertyName: "chooseView", publicName: "chooseView", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, showUploadTitle: { classPropertyName: "showUploadTitle", publicName: "showUploadTitle", isSignal: true, isRequired: false, transformFunction: null }, showDropArea: { classPropertyName: "showDropArea", publicName: "showDropArea", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hiddenActions: { classPropertyName: "hiddenActions", publicName: "hiddenActions", isSignal: true, isRequired: false, transformFunction: null }, showActionButtons: { classPropertyName: "showActionButtons", publicName: "showActionButtons", isSignal: true, isRequired: false, transformFunction: null }, enableImageCrop: { classPropertyName: "enableImageCrop", publicName: "enableImageCrop", isSignal: true, isRequired: false, transformFunction: null }, actionHiddenFn: { classPropertyName: "actionHiddenFn", publicName: "actionHiddenFn", isSignal: true, isRequired: false, transformFunction: null }, actionDisabledFn: { classPropertyName: "actionDisabledFn", publicName: "actionDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, videoCompression: { classPropertyName: "videoCompression", publicName: "videoCompression", isSignal: true, isRequired: false, transformFunction: null }, customMenuActions: { classPropertyName: "customMenuActions", publicName: "customMenuActions", isSignal: true, isRequired: false, transformFunction: null }, customColumns: { classPropertyName: "customColumns", publicName: "customColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { localEditedAttachments: "localEditedAttachments", abortAddAttachment: "abortAddAttachment", downloadAttachment: "downloadAttachment", onDeleteAttachment: "onDeleteAttachment" }, viewQueries: [{ propertyName: "dialogAddAttachment", first: true, predicate: ["dialogAddAttachment"], descendants: true, isSignal: true }, { propertyName: "dialogAddMultipleAttachment", first: true, predicate: ["dialogAddMultipleAttachment"], descendants: true, isSignal: true }, { propertyName: "dialogCropImage", first: true, predicate: ["dialogCropImage"], descendants: true, isSignal: true }, { propertyName: "addingLinkTemplate", first: true, predicate: ["addingLinkTemplate"], descendants: true, isSignal: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true, isSignal: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true, isSignal: true }, { propertyName: "inlinePreviewTemplate", first: true, predicate: ["inlinePreviewTemplate"], descendants: true, isSignal: true }, { propertyName: "dialogPreview", first: true, predicate: ["dialogPreview"], descendants: true, isSignal: true }, { propertyName: "defaultFileTemplate", first: true, predicate: ["defaultFileTemplate"], descendants: true, isSignal: true }, { propertyName: "defaultActionsTemplate", first: true, predicate: ["defaultActionsTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n@if(showUploadTitle() == true || chooseView() == true){\r\n<div class=\"header\">\r\n  @if(showUploadTitle() == true){\r\n  <h4>{{ uploadTitle() }}</h4>\r\n  } @if(chooseView() == true){\r\n  <mat-button-toggle-group\r\n    [value]=\"viewMode\"\r\n    (change)=\"setViewMode($event.value)\"\r\n    aria-label=\"Modalit\u00E0 di visualizzazione\"\r\n  >\r\n    <mat-button-toggle value=\"card\"\r\n      ><mat-icon>grid_view</mat-icon></mat-button-toggle\r\n    >\r\n    <mat-button-toggle value=\"table\"\r\n      ><mat-icon>view_list</mat-icon></mat-button-toggle\r\n    >\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Gestione singolo -->\r\n@if (multipleAttachment() != true) { @if (!singleAttachmentDragAndDrop()) { @if\r\n(!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} } @else {\r\n<input\r\n  #fileInput\r\n  id=\"file_attachment\"\r\n  name=\"file_attachment\"\r\n  type=\"file\"\r\n  hidden\r\n  (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\"\r\n  [multiple]=\"loadMultipleFiles()\"\r\n/>\r\n\r\n@if (allowedTypes && allowedTypes.includes(1) && (!attachmentsList ||\r\nattachmentsList.length == 0 || (attachmentsList.length > 0 &&\r\n!attachmentsList[0]))) { @if (showDropArea() == true) {\r\n<!-- FULL -->\r\n@if (layout() === 'full') {\r\n\r\n<div\r\n  class=\"dropbox\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\"\r\n>\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\r\n    class=\"browse-btn\"\r\n    type=\"button\"\r\n    (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n  >\r\n    {{ browseFilesLabel() }}\r\n  </button>\r\n  <div class=\"secondary-action\">\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) { @if\r\n    (allowedTypes.includes(2) && allowedTypes.includes(3)) {\r\n    <a\r\n      class=\"secondary-action-link\"\r\n      [matMenuTriggerFor]=\"isDisabled() ? null : linkMenu\"\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\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    } @else if (allowedTypes.includes(2)) {\r\n    <a\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\"\r\n    >\r\n      aggiungi un link\r\n    </a>\r\n    } @else if (allowedTypes.includes(3)) {\r\n    <a\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); chooseDropboxFile()\"\r\n    >\r\n      carica da Dropbox\r\n    </a>\r\n    } }\r\n  </div>\r\n</div>\r\n}@else {\r\n<div\r\n  class=\"compact-uploader\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n>\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel() }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button\r\n      mat-stroked-button\r\n      color=\"primary\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n    >\r\n      Sfoglia\r\n    </button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      Link\r\n    </button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n      >\r\n        {{ openLinkLabel() }}\r\n      </button>\r\n      } @if (allowedTypes.includes(3)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"chooseDropboxFile()\"\r\n      >\r\n        {{ uploadWithDropboxLabel() }}\r\n      </button>\r\n      }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\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  showActionButtons() == true) {\r\n  @if (!isPrimaryActionHidden(attachmentsList[0])) {\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    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n  >\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    {{\r\n      attachmentsList[0].AttachmentType == AttachmentType.FILE\r\n        ? downloadLabel()\r\n        : openLinkLabel()\r\n    }}\r\n  </button>\r\n  }\r\n\r\n  @if (!isPrimaryActionHidden(attachmentsList[0]) && showPreview() && (!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  <button\r\n    class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n    (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n    type=\"button\"\r\n    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon>visibility</mat-icon> {{ previewLabel() }}\r\n  </button>\r\n  }\r\n\r\n  <button\r\n    [disabled]=\"disableAction()\"\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    [disabled]=\"isDisabled()\"\r\n  >\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 && showDropArea() == true) {\r\n<input\r\n  #fileInput\r\n  id=\"file_attachment_multi\"\r\n  name=\"file_attachment_multi\"\r\n  type=\"file\"\r\n  hidden\r\n  (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\"\r\n  [multiple]=\"loadMultipleFiles()\"\r\n/>\r\n\r\n@if (layout() === 'full') {\r\n<div\r\n  class=\"dropbox\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\"\r\n>\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\r\n    class=\"browse-btn\"\r\n    type=\"button\"\r\n    (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n  >\r\n    {{ browseFilesLabel() }}\r\n  </button>\r\n  @if (allowedTypes.includes(2)) {\r\n  <div class=\"secondary-action-link\">\r\n    o\r\n    <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\"\r\n      >aggiungi un link</a\r\n    >\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<div\r\n  class=\"compact-uploader\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n>\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel() }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n    >\r\n      Sfoglia\r\n    </button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      Link\r\n    </button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n      >\r\n        {{ openLinkLabel() }}\r\n      </button>\r\n      } @if (allowedTypes.includes(3)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"chooseDropboxFile()\"\r\n      >\r\n        {{ uploadWithDropboxLabel() }}\r\n      </button>\r\n      }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n} } @if (attachmentsList?.length > 0 && showSummary()) {\r\n<div class=\"upload-stats\">\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</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    <div\r\n      class=\"preview-img-container\"\r\n      (click)=\"!att.isUploading && handlePrimaryAction(att)\"\r\n    >\r\n      @if (att.IsImage || att.FileThumbnailBase64) {\r\n      <img\r\n        class=\"preview-img\"\r\n        [src]=\"\r\n          'data:image/jpeg;base64,' +\r\n          (att.FileThumbnailBase64 || att.FileDataBase64)\r\n        \"\r\n        [alt]=\"att.FileName\"\r\n      />\r\n      } @else {\r\n      <div class=\"file-icon\"><i [ngClass]=\"getAttachmentIcon(att)\"></i></div>\r\n      }\r\n\r\n      <div class=\"preview-action-overlay\">\r\n        @if (att.FileContentType?.startsWith('video/')) {\r\n        <mat-icon>play_arrow</mat-icon>\r\n        } @else if (att.IsImage && canBePreviewed(att)) {\r\n        <mat-icon>visibility</mat-icon>\r\n        } @else if (att.FileContentType === 'application/pdf' &&\r\n        canBePreviewed(att)) {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        } @else if (att.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      </div>\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(!isDeleteHidden(att)){\r\n    <button\r\n      mat-icon-button\r\n      class=\"remove-btn\"\r\n      (click)=\"deleteAttachment(att)\"\r\n      [disabled]=\"att.isUploading || isDeleteDisabled(att)\"\r\n    >\r\n      <mat-icon>delete</mat-icon>\r\n    </button>\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 if(viewMode === 'table' && attachmentsList?.length > 0) {\r\n\r\n<div class=\"table-view-container\">\r\n  <div class=\"table-header\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div\r\n      class=\"table-cell\"\r\n      [style.flex]=\"col.styles?.flex\"\r\n      [ngClass]=\"col.class\"\r\n    >\r\n      {{ col.display }}\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div\r\n      class=\"table-cell\"\r\n      [style.flex]=\"col.styles?.flex\"\r\n      [ngClass]=\"col.class\"\r\n    >\r\n      @switch (col.type) { @case ('template') {\r\n      <div class=\"template-wrapper\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"col.externalTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: att }\"\r\n        ></ng-container>\r\n      </div>\r\n      } @case ('date') {\r\n      <span class=\"metadata-value\">{{\r\n        att[col.key] | date : \"dd/MM/yyyy\"\r\n      }}</span>\r\n      } @default {\r\n      <span class=\"metadata-value\">{{ att[col.key] }}</span>\r\n      } }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Notifica toast -->\r\n<div\r\n  class=\"upload-notification\"\r\n  [class.show]=\"toast?.visible\"\r\n  [class.success]=\"toast?.type === 'success'\"\r\n  [class.error]=\"toast?.type === 'error'\"\r\n>\r\n  <span>{{ toast?.text }}</span>\r\n  <div class=\"notification-progress\"></div>\r\n</div>\r\n\r\n<ng-template #defaultFileTemplate let-att>\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</ng-template>\r\n\r\n<ng-template #defaultActionsTemplate let-att>\r\n  <button\r\n    mat-icon-button\r\n    (click)=\"handlePrimaryAction(att)\"\r\n    [matTooltip]=\"\r\n      att.FileContentType?.startsWith('video/')\r\n        ? 'Riproduci video'\r\n        : 'Visualizza/Scarica'\r\n    \"\r\n  >\r\n    <mat-icon>\r\n      @if (att.FileContentType?.startsWith('video/')) { play_arrow } @else {\r\n      {{\r\n        att.AttachmentType === AttachmentType.FILE ? \"download\" : \"open_in_new\"\r\n      }}\r\n      }\r\n    </mat-icon>\r\n  </button>\r\n\r\n  @if (!hiddenActions().includes('actionsMenu')) {\r\n  <button\r\n    mat-icon-button\r\n    [matMenuTriggerFor]=\"actionsMenu\"\r\n    matTooltip=\"Altre opzioni\"\r\n  >\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n  }\r\n\r\n  <mat-menu #actionsMenu=\"matMenu\">\r\n    @for (action of _sortedMenuActions; track action.name) { @if\r\n    (!isActionHidden(action, att)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"action.fn(att)\"\r\n      [disabled]=\"isActionDisabled(action, att)\"\r\n    >\r\n      <mat-icon [color]=\"action.icon === 'delete' ? 'warn' : undefined\">\r\n        {{ action.icon }}\r\n      </mat-icon>\r\n      <span>{{ action.name }}</span>\r\n    </button>\r\n    } }\r\n  </mat-menu>\r\n</ng-template>\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\r\n      [ngTemplateOutlet]=\"croppieTemplate\"\r\n      [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n    >\r\n    </ng-container>\r\n    <!-- } -->\r\n  </div>\r\n</ng-template>\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\r\n      [src]=\"\r\n        'data:image/png;base64,' +\r\n        (row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64)\r\n      \"\r\n    />\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<ng-template #dialogPreview>\r\n  <div class=\"modern-dialog-container\">\r\n    @if (selectedAttachment) {\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ previewLabel() }}</span>\r\n          <span class=\"file-t\">{{ selectedAttachment.FileName }}</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"media-viewer-wrapper\">\r\n        @if (selectedAttachment.IsImage) {\r\n        <img\r\n          class=\"main-preview-media\"\r\n          [src]=\"\r\n            'data:image/png;base64,' +\r\n            (selectedAttachment.FileDataBase64 ||\r\n              selectedAttachment.FileThumbnailBase64)\r\n          \"\r\n          [alt]=\"selectedAttachment.FileName\"\r\n        />\r\n        } @else if (selectedAttachment.FileContentType?.startsWith('video/')) {\r\n        <video\r\n          controls\r\n          autoplay\r\n          playsinline\r\n          class=\"main-preview-media video-player\"\r\n        >\r\n          <source\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [type]=\"selectedAttachment.FileContentType\"\r\n          />\r\n          Il tuo browser non supporta il video.\r\n        </video>\r\n        } @else {\r\n        <div class=\"iframe-container\">\r\n          <iframe\r\n            class=\"preview-iframe-modern\"\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"\r\n          ></iframe>\r\n        </div>\r\n        }\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Chiudi</button>\r\n      @if (selectedAttachment.AttachmentType !== AttachmentType.LINK) {\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        (click)=\"viewAttachment(selectedAttachment)\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>download</mat-icon> <span>{{ downloadLabel() }}</span>\r\n      </button>\r\n      }\r\n    </mat-dialog-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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  />\r\n\r\n  @if (allowedTypes && allowedTypes.length == 1 && (multipleAttachment() == true\r\n  || !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length\r\n  > 0 && !attachmentsList[0]))) {\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    (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n    [disabled]=\"isDisabled()\"\r\n  >\r\n    @if (allowedTypes[0] == 1) { <mat-icon>cloud_upload</mat-icon> } @if\r\n    (allowedTypes[0] == 2) { <i class=\"fas fa-link\"></i> } @if (allowedTypes[0]\r\n    == 3) { <i class=\"fa-brands fa-dropbox\"></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      }}\r\n    </span>\r\n  </button>\r\n  } @if (!separatedUploadButtons() && allowedTypes && allowedTypes.length > 1 &&\r\n  (multipleAttachment() == true || !attachmentsList || attachmentsList.length == 0\r\n  || (attachmentsList.length > 0 && !attachmentsList[0]))) {\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  >\r\n    @if (multipleAttachment() != true) { <mat-icon>cloud_upload</mat-icon> } @else\r\n    { <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\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    />\r\n    @if (allowedTypes.includes(1)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"imageInput.click()\"\r\n      class=\"eqp-attachments-file-btn\"\r\n    >\r\n      <i class=\"fas fa-file\"></i>\r\n      <span style=\"margin-left: 10px\">File</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(2)) {\r\n    <button\r\n      mat-menu-item\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"switchToAddingLinkMode()\"\r\n      class=\"eqp-attachments-link-btn\"\r\n    >\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(3)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"chooseDropboxFile()\"\r\n      class=\"eqp-attachments-link-btn\"\r\n    >\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  } @if (separatedUploadButtons() && allowedTypes && allowedTypes.length > 1 &&\r\n  (multipleAttachment() == true || !attachmentsList || attachmentsList.length == 0\r\n  || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <div class=\"btn-group\">\r\n    @if (allowedTypes.includes(1)) {\r\n    <button\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    >\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\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    />\r\n    @if (allowedTypes.includes(2)) {\r\n    <button\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    >\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(3)) {\r\n    <button\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    >\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<ng-template #croppieTemplate>\r\n  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ cropLabel() }}</span>\r\n          <span class=\"file-t\">Regola le dimensioni e l'orientamento</span>\r\n        </div>\r\n      </div>\r\n      <button\r\n        mat-icon-button\r\n        type=\"button\"\r\n        (click)=\"abortFile()\"\r\n        class=\"close-btn\"\r\n      >\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"crop-toolbar\">\r\n        @if (cropOptions().includes(1)) {\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"rotateLeftLabel()\"\r\n          (click)=\"rotateLeft()\"\r\n        >\r\n          <mat-icon>rotate_left</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"rotateRightLabel()\"\r\n          (click)=\"rotateRight()\"\r\n        >\r\n          <mat-icon>rotate_right</mat-icon>\r\n        </button>\r\n        } @if (cropOptions().includes(2)) {\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"flipHorinzontalLabel()\"\r\n          (click)=\"flipHorizontal()\"\r\n        >\r\n          <mat-icon>flip_horizontal</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"flipVerticalLabel()\"\r\n          (click)=\"flipVertical()\"\r\n        >\r\n          <mat-icon>flip_vertical</mat-icon>\r\n        </button>\r\n        }\r\n        <button\r\n          mat-icon-button\r\n          matTooltip=\"Reset\"\r\n          (click)=\"restoreOriginalDimensions()\"\r\n        >\r\n          <mat-icon>replay</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"media-viewer-wrapper\">\r\n        <div class=\"crop-container-modern\">\r\n          <image-cropper\r\n            [imageFile]=\"selectedFile\"\r\n            [maintainAspectRatio]=\"false\"\r\n            [canvasRotation]=\"canvasRotation\"\r\n            [transform]=\"transform\"\r\n            format=\"png\"\r\n            (imageCropped)=\"imageCropped($event)\"\r\n            [resizeToWidth]=\"customWidth\"\r\n            [resizeToHeight]=\"customHeight\"\r\n            [output]=\"'base64'\"\r\n            [containWithinAspectRatio]=\"true\"\r\n            [onlyScaleDown]=\"true\"\r\n            [alignImage]=\"'center'\"\r\n          >\r\n          </image-cropper>\r\n        </div>\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button (click)=\"abortFile()\" class=\"btn-close\">\r\n        {{ abortLabel() }}\r\n      </button>\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        (click)=\"confirmAddAttachment()\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>check</mat-icon> {{ confirmLabel() }}\r\n      </button>\r\n    </mat-dialog-actions>\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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"type-icon-wrapper\">\r\n          <mat-icon>link</mat-icon>\r\n        </div>\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">Aggiungi un link</span>\r\n          <span class=\"file-t\">Inserisci l'URL della risorsa web</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"add-link-modern-content\">\r\n      <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n        <mat-form-field appearance=\"outline\" class=\"w-100 mt-3\">\r\n          <mat-label>URL del collegamento</mat-label>\r\n          <input\r\n            matInput\r\n            formControlName=\"filePath\"\r\n            placeholder=\"https://...\"\r\n            required\r\n          />\r\n          <mat-icon matSuffix>language</mat-icon>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>Titolo (opzionale)</mat-label>\r\n          <input\r\n            matInput\r\n            formControlName=\"fileName\"\r\n            placeholder=\"Es. Documento Progetto\"\r\n          />\r\n          <mat-icon matSuffix>title</mat-icon>\r\n        </mat-form-field>\r\n      </form>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Annulla</button>\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        [mat-dialog-close]=\"newAttachmentForm.value\"\r\n        [disabled]=\"newAttachmentForm.invalid\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>add</mat-icon> Aggiungi\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--primary-color: #6a5af9;--primary-color-dark: rgb(83.7807017544, 65.3947368421, 248.1052631579);--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);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;backdrop-filter:blur(5px);pointer-events:none}.file-preview .preview-action-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#0006;color:#fff;opacity:1;transition:opacity .3s ease}.file-preview .preview-action-overlay .mat-icon{font-size:36px;width:36px;height:36px}.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){.file-preview .remove-btn .file-preview .preview-action-overlay{opacity:0}.file-preview .remove-btn .file-preview:hover .preview-action-overlay,.file-preview .remove-btn .file-preview:hover .remove-btn{opacity:1}.file-preview .remove-btn .file-preview .remove-btn{opacity:0}}@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);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)}::ng-deep .cdk-overlay-pane.eqp-crop-dialog{transform:translateY(-4vh)}@media(max-width:600px){::ng-deep .cdk-overlay-pane.crop-dialog{width:auto!important}}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:20px!important;padding:0!important;overflow:hidden!important;width:fit-content!important;min-width:350px!important;max-width:95vw!important;margin:0 auto;background-color:#fff!important}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;display:flex;flex-direction:column}.modern-dialog-container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;max-height:90vh;background:#fff;--preview-header-h: 66px;--preview-footer-h: 66px;--preview-padding-y: 30px}.modern-dialog-container .main-preview-media{display:block;max-width:100%;max-height:var(--media-max-h);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 10px 30px #00000014}.modern-dialog-container video.main-preview-media{width:min(100%,1100px);background:#000}.modern-dialog-container .iframe-container{width:min(100%,1100px);height:var(--media-max-h);display:flex;width:100%;max-width:1100px}.modern-dialog-container .preview-iframe-modern{width:100%;height:100%;border:0;border-radius:12px;background:#f8fafc}.modern-dialog-container .preview-header{flex:0 0 auto;flex-shrink:0;padding:14px 20px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid var(--border-color);background:#f8fafc;z-index:10;width:100%}.modern-dialog-container .preview-header .header-info{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:1 1 auto;min-width:0;text-align:left}.modern-dialog-container .preview-header .header-info .type-icon-wrapper{background:var(--primary-color);color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px var(--shadow-color)}.modern-dialog-container .preview-header .header-info .title-group{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .main-t{font-weight:800;color:var(--text-color);font-size:.95rem;line-height:1.2;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .file-t{font-size:.75rem;color:var(--text-color-light);max-width:250px;overflow:hidden;text-overflow:ellipsis;text-align:left}.modern-dialog-container .preview-content-area{flex:1;background:#fff!important;display:flex;flex-direction:column;padding:15px 15px 22px!important;overflow:hidden!important;min-height:0;width:auto;--media-max-h: calc(90vh - var(--preview-header-h) - var(--preview-footer-h) - var(--preview-padding-y));width:100%}.modern-dialog-container .preview-content-area .crop-toolbar{flex-shrink:0;z-index:20;background:#0f172a14;backdrop-filter:blur(10px);padding:6px 16px;border-radius:30px;margin:0 auto 15px;display:flex;gap:8px;box-shadow:0 4px 12px #0000000d}.modern-dialog-container .preview-content-area .crop-toolbar button{color:var(--text-color)!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper{flex:1;width:100%;display:flex;justify-content:center;align-items:center;min-height:0;overflow:visible}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:transparent;border-radius:12px;padding:0}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern image-cropper{max-width:100%;max-height:100%;display:block}.modern-dialog-container .add-link-modern-content{flex:1;background:#fff;padding:24px!important}.modern-dialog-container .add-link-modern-content .add-link-form{display:flex;flex-direction:column;gap:10px}.modern-dialog-container .preview-actions{flex-shrink:0;padding:12px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;margin:0}.modern-dialog-container .preview-actions .btn-download{border-radius:12px;font-weight:600;box-shadow:0 4px 12px var(--shadow-color)}@media(max-width:600px){.modern-dialog-container{max-height:95vh}.modern-dialog-container .preview-content-area{padding:10px!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper video.main-preview-media{width:100%!important;max-height:55vh!important;border-radius:4px;box-shadow:none}.modern-dialog-container .preview-content-area .media-viewer-wrapper .iframe-container{height:50vh}.modern-dialog-container .preview-content-area .crop-toolbar{width:calc(100% - 20px);max-width:400px;margin-bottom:10px;padding:4px 8px;gap:4px;overflow-x:auto;justify-content:center;-webkit-overflow-scrolling:touch}.modern-dialog-container .preview-content-area .crop-toolbar::-webkit-scrollbar{display:none}.modern-dialog-container .preview-content-area .crop-toolbar{scrollbar-width:none}.modern-dialog-container .preview-content-area .crop-toolbar button{flex-shrink:0;transform:scale(.85);width:40px;height:40px}.modern-dialog-container .preview-actions{padding:10px 15px;flex-direction:column-reverse;gap:8px}.modern-dialog-container .preview-actions button{width:100%;margin:0!important}}@media(max-width:360px){.modern-dialog-container .preview-content-area .crop-toolbar{gap:2px}.modern-dialog-container .preview-content-area .crop-toolbar button{transform:scale(.75)}}.control-icon{font-size:28px;cursor:pointer}image-cropper,image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.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}::ng-deep .eqp-attachments-preview-dialog{--mat-dialog-subhead-line-height: normal}::ng-deep .eqp-attachments-preview-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;background:#fff!important}:host ::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{--mat-dialog-subhead-size: 1.25rem;--mat-dialog-subhead-line-height: 1.5;--mat-dialog-subhead-weight: 600;--mat-dialog-supporting-text-size: 1rem}.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem;margin-top:1.5rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#f8f9fa;text-align:center;color:var(--text-color-light);animation:fadeIn .5s ease-out}.empty-state:before{content:\"\\1f4ed\";font-size:2.5rem;margin-bottom:1rem;opacity:.7}.secondary-action-link.disabled-link{color:#adb5bd;cursor:not-allowed;border-bottom-color:transparent}.secondary-action-link.disabled-link:hover{color:#adb5bd;border-bottom-color:transparent}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden}.table-cell.col-actions{flex:0 0 150px;justify-content:flex-end;overflow:visible}.compact-uploader{display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#fcfdff;transition:all .3s ease}.compact-uploader .compact-text{flex:1 1 auto;min-width:0;cursor:pointer}.compact-uploader .compact-text:hover .compact-title{color:var(--primary-color)}.compact-uploader .compact-title{font-weight:600;color:var(--text-color);transition:color .3s ease}.compact-uploader .compact-subtitle{font-size:.8rem;color:var(--text-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-uploader .compact-icon mat-icon{font-size:36px;width:36px;height:36px;color:var(--primary-color)}.compact-uploader .compact-actions{display:flex;gap:8px;flex-shrink:0}.compact-uploader.dragover{background-color:#f4f8ff;border-color:var(--primary-color);box-shadow:0 0 10px var(--shadow-color)}\n"], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.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: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.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: i9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10.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: i11.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],[formArray],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: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i12.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: i13.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"] }, { kind: "pipe", type: i12.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", 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@if(showUploadTitle == true || chooseView == true){\r\n<div class=\"header\">\r\n  @if(showUploadTitle == true){\r\n  <h4>{{ uploadTitle }}</h4>\r\n  }\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\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\r\n@if (showDropArea == true) {\r\n<!-- FULL -->\r\n@if (layout === 'full') {\r\n\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\"\r\n  (click)=\"!isDisabled && onSelectFile($event, fileInput)\" role=\"button\" [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n  (keydown.enter)=\"!isDisabled && fileInput.click()\" (keydown.space)=\"!isDisabled && 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]=\"isDisabled ? null : linkMenu\"\r\n      [class.disabled-link]=\"isDisabled\" (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.disabled-link]=\"isDisabled\" class=\"secondary-action-link\"\r\n      (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.disabled-link]=\"isDisabled\" class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); chooseDropboxFile()\">\r\n      carica da Dropbox\r\n    </a>\r\n    }\r\n    }\r\n  </div>\r\n</div>\r\n}@else {\r\n<div class=\"compact-uploader\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\">\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"!isDisabled && onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button mat-stroked-button color=\"primary\" [disabled]=\"isDisabled\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\">Sfoglia</button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\">Link</button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) { <button mat-menu-item [disabled]=\"isDisabled\"\r\n        (click)=\"switchToAddingLinkMode()\">{{ openLinkLabel }}</button> }\r\n      @if (allowedTypes.includes(3)) { <button mat-menu-item [disabled]=\"isDisabled\" (click)=\"chooseDropboxFile()\">{{\r\n        uploadWithDropboxLabel }}</button> }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n}\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] && showActionButtons == true) {\r\n  @if (!isPrimaryActionHidden(attachmentsList[0])) {\r\n  <button class=\"mb-2 me-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\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\r\n  @if (!isPrimaryActionHidden(attachmentsList[0]) && 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    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\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 && showDropArea == 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@if (layout === 'full') {\r\n<div class=\"dropbox\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\"\r\n  (click)=\"!isDisabled && onSelectFile($event, fileInput)\" role=\"button\" [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n  (keydown.enter)=\"!isDisabled && fileInput.click()\" (keydown.space)=\"!isDisabled && 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  @if (allowedTypes.includes(2)) {\r\n  <div class=\"secondary-action-link\">\r\n    o <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\">aggiungi un link</a>\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<div class=\"compact-uploader\" [class.dragover]=\"dragOver && !isDisabled\" [class.disabled-dropzone]=\"isDisabled\"\r\n  (dragover)=\"!isDisabled ? dragOver = true : null; $event.preventDefault()\" (dragleave)=\"dragOver = false\"\r\n  (drop)=\"!isDisabled ? (dragOver = false) : null; fileDropped($event)\">\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"!isDisabled && onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" color=\"primary\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\">Sfoglia</button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button mat-stroked-button [disabled]=\"isDisabled\" [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\">Link</button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) { <button mat-menu-item [disabled]=\"isDisabled\"\r\n        (click)=\"switchToAddingLinkMode()\">{{ openLinkLabel }}</button> }\r\n      @if (allowedTypes.includes(3)) { <button mat-menu-item [disabled]=\"isDisabled\" (click)=\"chooseDropboxFile()\">{{\r\n        uploadWithDropboxLabel }}</button> }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n}\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    <div class=\"preview-img-container\" (click)=\"!att.isUploading && !isPrimaryActionHidden(att) && !isPrimaryActionDisabled(att) && handlePrimaryAction(att)\">\r\n\r\n      @if (att.IsImage || att.FileThumbnailBase64) {\r\n      <img class=\"preview-img\" [src]=\"'data:image/jpeg;base64,' + (att.FileThumbnailBase64 || att.FileDataBase64)\"\r\n        [alt]=\"att.FileName\" />\r\n      } @else {\r\n      <div class=\"file-icon\"><i [ngClass]=\"getAttachmentIcon(att)\"></i></div>\r\n      }\r\n\r\n      @if (!isPrimaryActionHidden(att)) {\r\n      <div class=\"preview-action-overlay\">\r\n        @if (att.FileContentType?.startsWith('video/')) {\r\n        <mat-icon>play_arrow</mat-icon>\r\n        }\r\n        @else if (att.IsImage && canBePreviewed(att)) {\r\n        <mat-icon>visibility</mat-icon>\r\n        }\r\n        @else if (att.FileContentType === 'application/pdf' && canBePreviewed(att)) {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        }\r\n        @else if (att.AttachmentType === AttachmentType.FILE) {\r\n        <mat-icon>download</mat-icon>\r\n        }\r\n        @else {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        }\r\n      </div>\r\n      }\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(!isDeleteHidden(att)){\r\n    <button mat-icon-button class=\"remove-btn\" (click)=\"deleteAttachment(att)\"\r\n      [disabled]=\"att.isUploading || isDeleteDisabled(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 if(viewMode === 'table' && attachmentsList?.length > 0) {\r\n\r\n\r\n<div class=\"table-view-container\">\r\n\r\n  <div class=\"table-header\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div class=\"table-cell\" [style.flex]=\"col.styles?.flex\" [ngClass]=\"col.class\">\r\n      {{ col.display }}\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div class=\"table-cell\" [style.flex]=\"col.styles?.flex\" [ngClass]=\"col.class\">\r\n\r\n      @switch (col.type) {\r\n\r\n      @case ('template') {\r\n      <div class=\"template-wrapper\">\r\n        <ng-container [ngTemplateOutlet]=\"col.externalTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: att }\"></ng-container>\r\n      </div>\r\n      }\r\n      @case ('date') {\r\n      <span class=\"metadata-value\">{{ att[col.key] | date:'dd/MM/yyyy' }}</span>\r\n      }\r\n      @default {\r\n      <span class=\"metadata-value\">{{ att[col.key] }}</span>\r\n      }\r\n      }\r\n    </div>\r\n    }\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<ng-template #defaultFileTemplate let-att>\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</ng-template>\r\n\r\n<ng-template #defaultActionsTemplate let-att>\r\n  @if (!isPrimaryActionHidden(att)) {\r\n  <button mat-icon-button (click)=\"handlePrimaryAction(att)\" [disabled]=\"isPrimaryActionDisabled(att)\"\r\n    [matTooltip]=\"att.FileContentType?.startsWith('video/') ? 'Riproduci video' : 'Visualizza/Scarica'\">\r\n\r\n    <mat-icon>\r\n      @if (att.FileContentType?.startsWith('video/')) {\r\n      play_arrow\r\n      } @else {\r\n      {{ att.AttachmentType === AttachmentType.FILE ? 'download' : 'open_in_new' }}\r\n      }\r\n    </mat-icon>\r\n  </button>\r\n  }\r\n\r\n  @if (!hiddenActions.includes('actionsMenu')) {\r\n  <button mat-icon-button [matMenuTriggerFor]=\"actionsMenu\" matTooltip=\"Altre opzioni\">\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n  }\r\n\r\n  <mat-menu #actionsMenu=\"matMenu\">\r\n    @for (action of _sortedMenuActions; track action.name) {\r\n    @if (!isActionHidden(action, att)) {\r\n    <button mat-menu-item (click)=\"action.fn(att)\" [disabled]=\"isActionDisabled(action, att)\">\r\n      <mat-icon [color]=\"action.icon === 'delete' ? 'warn' : undefined\">\r\n        {{ action.icon }}\r\n      </mat-icon>\r\n      <span>{{ action.name }}</span>\r\n    </button>\r\n    }\r\n    }\r\n  </mat-menu>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogCropImage>\r\n  <div style=\"overflow-x: hidden; display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto;\"\r\n    [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  <div class=\"modern-dialog-container\"> @if (selectedAttachment) {\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ previewLabel }}</span>\r\n          <span class=\"file-t\">{{ selectedAttachment.FileName }}</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"media-viewer-wrapper\">\r\n        @if (selectedAttachment.IsImage) {\r\n        <img class=\"main-preview-media\"\r\n          [src]=\"'data:image/png;base64,' + (selectedAttachment.FileDataBase64 || selectedAttachment.FileThumbnailBase64)\"\r\n          [alt]=\"selectedAttachment.FileName\" />\r\n        }\r\n        @else if (selectedAttachment.FileContentType?.startsWith('video/')) {\r\n        <video controls autoplay playsinline class=\"main-preview-media video-player\">\r\n          <source [src]=\"selectedAttachment.TrustedUrl\" [type]=\"selectedAttachment.FileContentType\">\r\n          Il tuo browser non supporta il video.\r\n        </video>\r\n        }\r\n        @else {\r\n        <div class=\"iframe-container\">\r\n          <iframe class=\"preview-iframe-modern\" [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"></iframe>\r\n        </div>\r\n        }\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Chiudi</button>\r\n      @if (selectedAttachment.AttachmentType !== AttachmentType.LINK) {\r\n      <button mat-raised-button color=\"primary\" (click)=\"viewAttachment(selectedAttachment)\" class=\"btn-download\">\r\n        <mat-icon>download</mat-icon> <span>{{ downloadLabel }}</span>\r\n      </button>\r\n      }\r\n    </mat-dialog-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n  <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 [disabled]=\"isDisabled\" (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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ cropLabel }}</span>\r\n          <span class=\"file-t\">Regola le dimensioni e l'orientamento</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button type=\"button\" (click)=\"abortFile()\" class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"crop-toolbar\">\r\n        @if (cropOptions.includes(1)) {\r\n        <button mat-icon-button [matTooltip]=\"rotateLeftLabel\"\r\n          (click)=\"rotateLeft()\"><mat-icon>rotate_left</mat-icon></button>\r\n        <button mat-icon-button [matTooltip]=\"rotateRightLabel\"\r\n          (click)=\"rotateRight()\"><mat-icon>rotate_right</mat-icon></button>\r\n        }\r\n        @if (cropOptions.includes(2)) {\r\n        <button mat-icon-button [matTooltip]=\"flipHorinzontalLabel\"\r\n          (click)=\"flipHorizontal()\"><mat-icon>flip_horizontal</mat-icon></button>\r\n        <button mat-icon-button [matTooltip]=\"flipVerticalLabel\"\r\n          (click)=\"flipVertical()\"><mat-icon>flip_vertical</mat-icon></button>\r\n        }\r\n        <button mat-icon-button matTooltip=\"Reset\"\r\n          (click)=\"restoreOriginalDimensions()\"><mat-icon>replay</mat-icon></button>\r\n      </div>\r\n\r\n      <div class=\"media-viewer-wrapper\">\r\n        <div class=\"crop-container-modern\">\r\n          <image-cropper [imageFile]=\"selectedFile\" [maintainAspectRatio]=\"false\" [canvasRotation]=\"canvasRotation\"\r\n            [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\" [resizeToWidth]=\"customWidth\"\r\n            [resizeToHeight]=\"customHeight\" [output]=\"'base64'\" [containWithinAspectRatio]=\"true\" [onlyScaleDown]=\"true\"\r\n            [alignImage]=\"'center'\">\r\n          </image-cropper>\r\n        </div>\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button (click)=\"abortFile()\" class=\"btn-close\">{{ abortLabel }}</button>\r\n      <button mat-raised-button color=\"primary\" (click)=\"confirmAddAttachment()\" class=\"btn-download\">\r\n        <mat-icon>check</mat-icon> {{ confirmLabel }}\r\n      </button>\r\n    </mat-dialog-actions>\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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"type-icon-wrapper\">\r\n          <mat-icon>link</mat-icon>\r\n        </div>\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">Aggiungi un link</span>\r\n          <span class=\"file-t\">Inserisci l'URL della risorsa web</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"add-link-modern-content\">\r\n      <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n        <mat-form-field appearance=\"outline\" class=\"w-100 mt-3\">\r\n          <mat-label>URL del collegamento</mat-label>\r\n          <input matInput formControlName=\"filePath\" placeholder=\"https://...\" required>\r\n          <mat-icon matSuffix>language</mat-icon>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>Titolo (opzionale)</mat-label>\r\n          <input matInput formControlName=\"fileName\" placeholder=\"Es. Documento Progetto\">\r\n          <mat-icon matSuffix>title</mat-icon>\r\n        </mat-form-field>\r\n      </form>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Annulla</button>\r\n      <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"newAttachmentForm.value\"\r\n        [disabled]=\"newAttachmentForm.invalid\" class=\"btn-download\">\r\n        <mat-icon>add</mat-icon> Aggiungi\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";: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 .preview-action-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#0006;color:#fff;opacity:1;transition:opacity .3s ease}.file-preview .preview-action-overlay .mat-icon{font-size:36px;width:36px;height:36px}.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){.file-preview .remove-btn .file-preview .preview-action-overlay{opacity:0}.file-preview .remove-btn .file-preview:hover .preview-action-overlay,.file-preview .remove-btn .file-preview:hover .remove-btn{opacity:1}.file-preview .remove-btn .file-preview .remove-btn{opacity:0}}@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)}::ng-deep .cdk-overlay-pane.eqp-crop-dialog{transform:translateY(-4vh)}@media (max-width: 600px){::ng-deep .cdk-overlay-pane.crop-dialog{width:auto!important}}::ng-deep .eqp-attachments-dialog{display:flex!important;flex-direction:column!important}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__container{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__container .mdc-dialog__surface{border-radius:20px!important;padding:0!important;overflow:hidden!important;width:fit-content!important;min-width:350px!important;max-width:95vw!important;max-height:90vh!important;margin:0 auto;background-color:#fff!important;display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden!important}.modern-dialog-container{display:flex;flex-direction:column;width:100%;max-width:100%;flex:1 1 auto;min-height:0;height:100%;max-height:100%;background:#fff;--preview-header-h: 66px;--preview-footer-h: 66px;--preview-padding-y: 30px}.modern-dialog-container .main-preview-media{display:block;max-width:100%;max-height:var(--media-max-h);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 10px 30px #00000014}.modern-dialog-container video.main-preview-media{width:min(100%,1100px);background:#000}.modern-dialog-container .iframe-container{width:min(100%,1100px);height:var(--media-max-h);display:flex;width:100%;max-width:1100px}.modern-dialog-container .preview-iframe-modern{width:100%;height:100%;border:0;border-radius:12px;background:#f8fafc}.modern-dialog-container .preview-header{flex:0 0 auto;flex-shrink:0;padding:14px 20px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid var(--border-color);background:#f8fafc;z-index:10;width:100%}.modern-dialog-container .preview-header .close-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;width:40px!important;height:40px!important}.modern-dialog-container .preview-header .close-btn ::ng-deep mat-icon{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;line-height:1!important}.modern-dialog-container .preview-header .header-info{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:1 1 auto;min-width:0;text-align:left}.modern-dialog-container .preview-header .header-info .type-icon-wrapper{background:var(--primary-color);color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px var(--shadow-color)}.modern-dialog-container .preview-header .header-info .title-group{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .main-t{font-weight:800;color:var(--text-color);font-size:.95rem;line-height:1.2;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .file-t{font-size:.75rem;color:var(--text-color-light);max-width:250px;overflow:hidden;text-overflow:ellipsis;text-align:left}.modern-dialog-container .preview-content-area{flex:1 1 auto;background:#fff!important;display:flex;flex-direction:column;padding:15px 15px 22px!important;overflow:hidden!important;min-height:0;width:100%;--media-max-h: calc(90vh - var(--preview-header-h) - var(--preview-footer-h) - var(--preview-padding-y))}.modern-dialog-container .preview-content-area .crop-toolbar{flex-shrink:0;z-index:20;background:#0f172a14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 16px;border-radius:30px;margin:0 auto 15px;display:flex;gap:8px;box-shadow:0 4px 12px #0000000d}.modern-dialog-container .preview-content-area .crop-toolbar button{color:var(--text-color)!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper{flex:1 1 auto;width:100%;height:100%;display:flex;flex-direction:column;align-items:stretch;min-height:0;overflow:hidden}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;border-radius:12px;padding:0;overflow:hidden;min-height:0;width:100%;height:100%}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern image-cropper{flex:1 1 auto;width:100%;height:100%;max-width:100%!important;max-height:100%!important;display:block;min-height:0}.modern-dialog-container .add-link-modern-content{flex:1;background:#fff;padding:24px!important}.modern-dialog-container .add-link-modern-content .add-link-form{display:flex;flex-direction:column;gap:10px}.modern-dialog-container .preview-actions{flex-shrink:0;padding:12px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;margin:0}.modern-dialog-container .preview-actions .btn-download{border-radius:12px;font-weight:600;box-shadow:0 4px 12px var(--shadow-color)}@media (max-width: 600px){.modern-dialog-container{max-height:95vh}.modern-dialog-container .preview-content-area{padding:10px!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper video.main-preview-media{width:100%!important;max-height:55vh!important;border-radius:4px;box-shadow:none}.modern-dialog-container .preview-content-area .media-viewer-wrapper .iframe-container{height:50vh}.modern-dialog-container .preview-content-area .crop-toolbar{width:calc(100% - 20px);max-width:400px;margin-bottom:10px;padding:4px 8px;gap:4px;overflow-x:auto;justify-content:center;-webkit-overflow-scrolling:touch;scrollbar-width:none}.modern-dialog-container .preview-content-area .crop-toolbar::-webkit-scrollbar{display:none}.modern-dialog-container .preview-content-area .crop-toolbar button{flex-shrink:0;transform:scale(.85);width:40px;height:40px}.modern-dialog-container .preview-actions{padding:10px 15px;flex-direction:column-reverse;gap:8px}.modern-dialog-container .preview-actions button{width:100%;margin:0!important}}@media (max-width: 360px){.modern-dialog-container .preview-content-area .crop-toolbar{gap:2px}.modern-dialog-container .preview-content-area .crop-toolbar button{transform:scale(.75)}}.control-icon{font-size:28px;cursor:pointer}image-cropper{display:flex!important;max-width:100%!important;max-height:100%!important;height:100%;width:100%}image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.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}::ng-deep .eqp-attachments-preview-dialog{--mdc-dialog-subhead-line-height: normal}::ng-deep .eqp-attachments-preview-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;background:#fff!important}:host ::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{--mdc-dialog-subhead-size: 1.25rem;--mdc-dialog-subhead-line-height: 1.5;--mdc-dialog-subhead-weight: 600;--mdc-dialog-supporting-text-size: 1rem}.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem;margin-top:1.5rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#f8f9fa;text-align:center;color:var(--text-color-light);animation:fadeIn .5s ease-out}.empty-state:before{content:\"\\1f4ed\";font-size:2.5rem;margin-bottom:1rem;opacity:.7}.secondary-action-link.disabled-link{color:#adb5bd;cursor:not-allowed;border-bottom-color:transparent}.secondary-action-link.disabled-link:hover{color:#adb5bd;border-bottom-color:transparent}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden}.table-cell.col-actions{flex:0 0 150px;justify-content:flex-end;overflow:visible}.compact-uploader{display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#fcfdff;transition:all .3s ease}.compact-uploader .compact-text{flex:1 1 auto;min-width:0;cursor:pointer}.compact-uploader .compact-text:hover .compact-title{color:var(--primary-color)}.compact-uploader .compact-title{font-weight:600;color:var(--text-color);transition:color .3s ease}.compact-uploader .compact-subtitle{font-size:.8rem;color:var(--text-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-uploader .compact-icon mat-icon{font-size:36px;width:36px;height:36px;color:var(--primary-color)}.compact-uploader .compact-actions{display:flex;gap:8px;flex-shrink:0}.compact-uploader.dragover{background-color:#f4f8ff;border-color:var(--primary-color);box-shadow:0 0 10px var(--shadow-color)}.disabled-dropzone{opacity:.5;cursor:not-allowed!important;background-color:#f5f5f5;border-color:#d1d5db}.disabled-dropzone *{pointer-events:none}.disabled-dropzone .browse-btn,.disabled-dropzone button{cursor:not-allowed!important;background-color:#e5e7eb;color:#9ca3af;border:none}.disabled-dropzone .secondary-action-link,.disabled-dropzone a{color:#9ca3af;text-decoration:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: EqpAttachmentService }], propDecorators: { disableAction: [{
-                type: Input,
-                args: ["disableAction"]
-            }], showHeader: [{
-                type: Input,
-                args: ["showHeader"]
-            }], attachmentsList: [{
+            args: [{ selector: "eqp-attachments", standalone: false, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n@if(showUploadTitle() == true || chooseView() == true){\r\n<div class=\"header\">\r\n  @if(showUploadTitle() == true){\r\n  <h4>{{ uploadTitle() }}</h4>\r\n  } @if(chooseView() == true){\r\n  <mat-button-toggle-group\r\n    [value]=\"viewMode\"\r\n    (change)=\"setViewMode($event.value)\"\r\n    aria-label=\"Modalit\u00E0 di visualizzazione\"\r\n  >\r\n    <mat-button-toggle value=\"card\"\r\n      ><mat-icon>grid_view</mat-icon></mat-button-toggle\r\n    >\r\n    <mat-button-toggle value=\"table\"\r\n      ><mat-icon>view_list</mat-icon></mat-button-toggle\r\n    >\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Gestione singolo -->\r\n@if (multipleAttachment() != true) { @if (!singleAttachmentDragAndDrop()) { @if\r\n(!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} } @else {\r\n<input\r\n  #fileInput\r\n  id=\"file_attachment\"\r\n  name=\"file_attachment\"\r\n  type=\"file\"\r\n  hidden\r\n  (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\"\r\n  [multiple]=\"loadMultipleFiles()\"\r\n/>\r\n\r\n@if (allowedTypes && allowedTypes.includes(1) && (!attachmentsList ||\r\nattachmentsList.length == 0 || (attachmentsList.length > 0 &&\r\n!attachmentsList[0]))) { @if (showDropArea() == true) {\r\n<!-- FULL -->\r\n@if (layout() === 'full') {\r\n\r\n<div\r\n  class=\"dropbox\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\"\r\n>\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\r\n    class=\"browse-btn\"\r\n    type=\"button\"\r\n    (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n  >\r\n    {{ browseFilesLabel() }}\r\n  </button>\r\n  <div class=\"secondary-action\">\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) { @if\r\n    (allowedTypes.includes(2) && allowedTypes.includes(3)) {\r\n    <a\r\n      class=\"secondary-action-link\"\r\n      [matMenuTriggerFor]=\"isDisabled() ? null : linkMenu\"\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\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    } @else if (allowedTypes.includes(2)) {\r\n    <a\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\"\r\n    >\r\n      aggiungi un link\r\n    </a>\r\n    } @else if (allowedTypes.includes(3)) {\r\n    <a\r\n      [class.disabled-link]=\"isDisabled()\"\r\n      class=\"secondary-action-link\"\r\n      (click)=\"$event.stopPropagation(); chooseDropboxFile()\"\r\n    >\r\n      carica da Dropbox\r\n    </a>\r\n    } }\r\n  </div>\r\n</div>\r\n}@else {\r\n<div\r\n  class=\"compact-uploader\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n>\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel() }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button\r\n      mat-stroked-button\r\n      color=\"primary\"\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n    >\r\n      Sfoglia\r\n    </button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      Link\r\n    </button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n      >\r\n        {{ openLinkLabel() }}\r\n      </button>\r\n      } @if (allowedTypes.includes(3)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"chooseDropboxFile()\"\r\n      >\r\n        {{ uploadWithDropboxLabel() }}\r\n      </button>\r\n      }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\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  showActionButtons() == true) {\r\n  @if (!isPrimaryActionHidden(attachmentsList[0])) {\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    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n  >\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    {{\r\n      attachmentsList[0].AttachmentType == AttachmentType.FILE\r\n        ? downloadLabel()\r\n        : openLinkLabel()\r\n    }}\r\n  </button>\r\n  }\r\n\r\n  @if (!isPrimaryActionHidden(attachmentsList[0]) && showPreview() && (!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  <button\r\n    class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n    (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n    type=\"button\"\r\n    [disabled]=\"isPrimaryActionDisabled(attachmentsList[0])\"\r\n    mat-raised-button\r\n    color=\"primary\"\r\n  >\r\n    <mat-icon>visibility</mat-icon> {{ previewLabel() }}\r\n  </button>\r\n  }\r\n\r\n  <button\r\n    [disabled]=\"disableAction()\"\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    [disabled]=\"isDisabled()\"\r\n  >\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 && showDropArea() == true) {\r\n<input\r\n  #fileInput\r\n  id=\"file_attachment_multi\"\r\n  name=\"file_attachment_multi\"\r\n  type=\"file\"\r\n  hidden\r\n  (change)=\"onFileAdded($event)\"\r\n  [accept]=\"acceptedFileTypes\"\r\n  [multiple]=\"loadMultipleFiles()\"\r\n/>\r\n\r\n@if (layout() === 'full') {\r\n<div\r\n  class=\"dropbox\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n  (click)=\"onSelectFile($event, fileInput)\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  (keydown.enter)=\"fileInput.click()\"\r\n  (keydown.space)=\"fileInput.click()\"\r\n>\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\r\n    class=\"browse-btn\"\r\n    type=\"button\"\r\n    (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n  >\r\n    {{ browseFilesLabel() }}\r\n  </button>\r\n  @if (allowedTypes.includes(2)) {\r\n  <div class=\"secondary-action-link\">\r\n    o\r\n    <a (click)=\"$event.stopPropagation(); switchToAddingLinkMode()\"\r\n      >aggiungi un link</a\r\n    >\r\n  </div>\r\n  }\r\n</div>\r\n}@else{\r\n<div\r\n  class=\"compact-uploader\"\r\n  [class.dragover]=\"dragOver\"\r\n  (dragover)=\"dragOver = true; $event.preventDefault()\"\r\n  (dragleave)=\"dragOver = false\"\r\n  (drop)=\"dragOver = false; fileDropped($event)\"\r\n>\r\n  <div class=\"compact-icon\"><mat-icon>folder_open</mat-icon></div>\r\n  <div class=\"compact-text\" (click)=\"onSelectFile($event, fileInput)\">\r\n    <div class=\"compact-title\">Trascina i file o seleziona dal computer</div>\r\n    <div class=\"compact-subtitle\">{{ supportedFormatsLabel() }}</div>\r\n  </div>\r\n  <div class=\"compact-actions\">\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      color=\"primary\"\r\n      (click)=\"$event.stopPropagation(); fileInput.click()\"\r\n    >\r\n      Sfoglia\r\n    </button>\r\n    @if (allowedTypes.includes(2) || allowedTypes.includes(3)) {\r\n    <button\r\n      mat-stroked-button\r\n      [disabled]=\"isDisabled()\"\r\n      [matMenuTriggerFor]=\"compactLinkMenu\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      Link\r\n    </button>\r\n    <mat-menu #compactLinkMenu=\"matMenu\">\r\n      @if (allowedTypes.includes(2)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"switchToAddingLinkMode()\"\r\n      >\r\n        {{ openLinkLabel() }}\r\n      </button>\r\n      } @if (allowedTypes.includes(3)) {\r\n      <button\r\n        mat-menu-item\r\n        [disabled]=\"isDisabled()\"\r\n        (click)=\"chooseDropboxFile()\"\r\n      >\r\n        {{ uploadWithDropboxLabel() }}\r\n      </button>\r\n      }\r\n    </mat-menu>\r\n    }\r\n  </div>\r\n</div>\r\n} } @if (attachmentsList?.length > 0 && showSummary()) {\r\n<div class=\"upload-stats\">\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</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    <div\r\n      class=\"preview-img-container\"\r\n      (click)=\"!att.isUploading && handlePrimaryAction(att)\"\r\n    >\r\n      @if (att.IsImage || att.FileThumbnailBase64) {\r\n      <img\r\n        class=\"preview-img\"\r\n        [src]=\"\r\n          'data:image/jpeg;base64,' +\r\n          (att.FileThumbnailBase64 || att.FileDataBase64)\r\n        \"\r\n        [alt]=\"att.FileName\"\r\n      />\r\n      } @else {\r\n      <div class=\"file-icon\"><i [ngClass]=\"getAttachmentIcon(att)\"></i></div>\r\n      }\r\n\r\n      <div class=\"preview-action-overlay\">\r\n        @if (att.FileContentType?.startsWith('video/')) {\r\n        <mat-icon>play_arrow</mat-icon>\r\n        } @else if (att.IsImage && canBePreviewed(att)) {\r\n        <mat-icon>visibility</mat-icon>\r\n        } @else if (att.FileContentType === 'application/pdf' &&\r\n        canBePreviewed(att)) {\r\n        <mat-icon>open_in_new</mat-icon>\r\n        } @else if (att.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      </div>\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(!isDeleteHidden(att)){\r\n    <button\r\n      mat-icon-button\r\n      class=\"remove-btn\"\r\n      (click)=\"deleteAttachment(att)\"\r\n      [disabled]=\"att.isUploading || isDeleteDisabled(att)\"\r\n    >\r\n      <mat-icon>delete</mat-icon>\r\n    </button>\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 if(viewMode === 'table' && attachmentsList?.length > 0) {\r\n\r\n<div class=\"table-view-container\">\r\n  <div class=\"table-header\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div\r\n      class=\"table-cell\"\r\n      [style.flex]=\"col.styles?.flex\"\r\n      [ngClass]=\"col.class\"\r\n    >\r\n      {{ col.display }}\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @for (att of attachmentsList; track att.ID) {\r\n  <div class=\"table-row\">\r\n    @for (col of _tableColumns; track col.key) {\r\n    <div\r\n      class=\"table-cell\"\r\n      [style.flex]=\"col.styles?.flex\"\r\n      [ngClass]=\"col.class\"\r\n    >\r\n      @switch (col.type) { @case ('template') {\r\n      <div class=\"template-wrapper\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"col.externalTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: att }\"\r\n        ></ng-container>\r\n      </div>\r\n      } @case ('date') {\r\n      <span class=\"metadata-value\">{{\r\n        att[col.key] | date : \"dd/MM/yyyy\"\r\n      }}</span>\r\n      } @default {\r\n      <span class=\"metadata-value\">{{ att[col.key] }}</span>\r\n      } }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<!-- Notifica toast -->\r\n<div\r\n  class=\"upload-notification\"\r\n  [class.show]=\"toast?.visible\"\r\n  [class.success]=\"toast?.type === 'success'\"\r\n  [class.error]=\"toast?.type === 'error'\"\r\n>\r\n  <span>{{ toast?.text }}</span>\r\n  <div class=\"notification-progress\"></div>\r\n</div>\r\n\r\n<ng-template #defaultFileTemplate let-att>\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</ng-template>\r\n\r\n<ng-template #defaultActionsTemplate let-att>\r\n  <button\r\n    mat-icon-button\r\n    (click)=\"handlePrimaryAction(att)\"\r\n    [matTooltip]=\"\r\n      att.FileContentType?.startsWith('video/')\r\n        ? 'Riproduci video'\r\n        : 'Visualizza/Scarica'\r\n    \"\r\n  >\r\n    <mat-icon>\r\n      @if (att.FileContentType?.startsWith('video/')) { play_arrow } @else {\r\n      {{\r\n        att.AttachmentType === AttachmentType.FILE ? \"download\" : \"open_in_new\"\r\n      }}\r\n      }\r\n    </mat-icon>\r\n  </button>\r\n\r\n  @if (!hiddenActions().includes('actionsMenu')) {\r\n  <button\r\n    mat-icon-button\r\n    [matMenuTriggerFor]=\"actionsMenu\"\r\n    matTooltip=\"Altre opzioni\"\r\n  >\r\n    <mat-icon>more_vert</mat-icon>\r\n  </button>\r\n  }\r\n\r\n  <mat-menu #actionsMenu=\"matMenu\">\r\n    @for (action of _sortedMenuActions; track action.name) { @if\r\n    (!isActionHidden(action, att)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"action.fn(att)\"\r\n      [disabled]=\"isActionDisabled(action, att)\"\r\n    >\r\n      <mat-icon [color]=\"action.icon === 'delete' ? 'warn' : undefined\">\r\n        {{ action.icon }}\r\n      </mat-icon>\r\n      <span>{{ action.name }}</span>\r\n    </button>\r\n    } }\r\n  </mat-menu>\r\n</ng-template>\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\r\n      [ngTemplateOutlet]=\"croppieTemplate\"\r\n      [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n    >\r\n    </ng-container>\r\n    <!-- } -->\r\n  </div>\r\n</ng-template>\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\r\n      [src]=\"\r\n        'data:image/png;base64,' +\r\n        (row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64)\r\n      \"\r\n    />\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<ng-template #dialogPreview>\r\n  <div class=\"modern-dialog-container\">\r\n    @if (selectedAttachment) {\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ previewLabel() }}</span>\r\n          <span class=\"file-t\">{{ selectedAttachment.FileName }}</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"media-viewer-wrapper\">\r\n        @if (selectedAttachment.IsImage) {\r\n        <img\r\n          class=\"main-preview-media\"\r\n          [src]=\"\r\n            'data:image/png;base64,' +\r\n            (selectedAttachment.FileDataBase64 ||\r\n              selectedAttachment.FileThumbnailBase64)\r\n          \"\r\n          [alt]=\"selectedAttachment.FileName\"\r\n        />\r\n        } @else if (selectedAttachment.FileContentType?.startsWith('video/')) {\r\n        <video\r\n          controls\r\n          autoplay\r\n          playsinline\r\n          class=\"main-preview-media video-player\"\r\n        >\r\n          <source\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [type]=\"selectedAttachment.FileContentType\"\r\n          />\r\n          Il tuo browser non supporta il video.\r\n        </video>\r\n        } @else {\r\n        <div class=\"iframe-container\">\r\n          <iframe\r\n            class=\"preview-iframe-modern\"\r\n            [src]=\"selectedAttachment.TrustedUrl\"\r\n            [title]=\"selectedAttachment.FileName\"\r\n          ></iframe>\r\n        </div>\r\n        }\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Chiudi</button>\r\n      @if (selectedAttachment.AttachmentType !== AttachmentType.LINK) {\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        (click)=\"viewAttachment(selectedAttachment)\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>download</mat-icon> <span>{{ downloadLabel() }}</span>\r\n      </button>\r\n      }\r\n    </mat-dialog-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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  />\r\n\r\n  @if (allowedTypes && allowedTypes.length == 1 && (multipleAttachment() == true\r\n  || !attachmentsList || attachmentsList.length == 0 || (attachmentsList.length\r\n  > 0 && !attachmentsList[0]))) {\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    (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n    [disabled]=\"isDisabled()\"\r\n  >\r\n    @if (allowedTypes[0] == 1) { <mat-icon>cloud_upload</mat-icon> } @if\r\n    (allowedTypes[0] == 2) { <i class=\"fas fa-link\"></i> } @if (allowedTypes[0]\r\n    == 3) { <i class=\"fa-brands fa-dropbox\"></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      }}\r\n    </span>\r\n  </button>\r\n  } @if (!separatedUploadButtons() && allowedTypes && allowedTypes.length > 1 &&\r\n  (multipleAttachment() == true || !attachmentsList || attachmentsList.length == 0\r\n  || (attachmentsList.length > 0 && !attachmentsList[0]))) {\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  >\r\n    @if (multipleAttachment() != true) { <mat-icon>cloud_upload</mat-icon> } @else\r\n    { <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\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    />\r\n    @if (allowedTypes.includes(1)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"imageInput.click()\"\r\n      class=\"eqp-attachments-file-btn\"\r\n    >\r\n      <i class=\"fas fa-file\"></i>\r\n      <span style=\"margin-left: 10px\">File</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(2)) {\r\n    <button\r\n      mat-menu-item\r\n      [disabled]=\"isDisabled()\"\r\n      (click)=\"switchToAddingLinkMode()\"\r\n      class=\"eqp-attachments-link-btn\"\r\n    >\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(3)) {\r\n    <button\r\n      mat-menu-item\r\n      (click)=\"chooseDropboxFile()\"\r\n      class=\"eqp-attachments-link-btn\"\r\n    >\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  } @if (separatedUploadButtons() && allowedTypes && allowedTypes.length > 1 &&\r\n  (multipleAttachment() == true || !attachmentsList || attachmentsList.length == 0\r\n  || (attachmentsList.length > 0 && !attachmentsList[0]))) {\r\n  <div class=\"btn-group\">\r\n    @if (allowedTypes.includes(1)) {\r\n    <button\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    >\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\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    />\r\n    @if (allowedTypes.includes(2)) {\r\n    <button\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    >\r\n      <i class=\"fas fa-link\"></i>\r\n      <span style=\"margin-left: 10px\">Link</span>\r\n    </button>\r\n    } @if (allowedTypes.includes(3)) {\r\n    <button\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    >\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<ng-template #croppieTemplate>\r\n  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">{{ cropLabel() }}</span>\r\n          <span class=\"file-t\">Regola le dimensioni e l'orientamento</span>\r\n        </div>\r\n      </div>\r\n      <button\r\n        mat-icon-button\r\n        type=\"button\"\r\n        (click)=\"abortFile()\"\r\n        class=\"close-btn\"\r\n      >\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"preview-content-area\">\r\n      <div class=\"crop-toolbar\">\r\n        @if (cropOptions().includes(1)) {\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"rotateLeftLabel()\"\r\n          (click)=\"rotateLeft()\"\r\n        >\r\n          <mat-icon>rotate_left</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"rotateRightLabel()\"\r\n          (click)=\"rotateRight()\"\r\n        >\r\n          <mat-icon>rotate_right</mat-icon>\r\n        </button>\r\n        } @if (cropOptions().includes(2)) {\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"flipHorinzontalLabel()\"\r\n          (click)=\"flipHorizontal()\"\r\n        >\r\n          <mat-icon>flip_horizontal</mat-icon>\r\n        </button>\r\n        <button\r\n          mat-icon-button\r\n          [matTooltip]=\"flipVerticalLabel()\"\r\n          (click)=\"flipVertical()\"\r\n        >\r\n          <mat-icon>flip_vertical</mat-icon>\r\n        </button>\r\n        }\r\n        <button\r\n          mat-icon-button\r\n          matTooltip=\"Reset\"\r\n          (click)=\"restoreOriginalDimensions()\"\r\n        >\r\n          <mat-icon>replay</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"media-viewer-wrapper\">\r\n        <div class=\"crop-container-modern\">\r\n          <image-cropper\r\n            [imageFile]=\"selectedFile\"\r\n            [maintainAspectRatio]=\"false\"\r\n            [canvasRotation]=\"canvasRotation\"\r\n            [transform]=\"transform\"\r\n            format=\"png\"\r\n            (imageCropped)=\"imageCropped($event)\"\r\n            [resizeToWidth]=\"customWidth\"\r\n            [resizeToHeight]=\"customHeight\"\r\n            [output]=\"'base64'\"\r\n            [containWithinAspectRatio]=\"true\"\r\n            [onlyScaleDown]=\"true\"\r\n            [alignImage]=\"'center'\"\r\n          >\r\n          </image-cropper>\r\n        </div>\r\n      </div>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button (click)=\"abortFile()\" class=\"btn-close\">\r\n        {{ abortLabel() }}\r\n      </button>\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        (click)=\"confirmAddAttachment()\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>check</mat-icon> {{ confirmLabel() }}\r\n      </button>\r\n    </mat-dialog-actions>\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  <div class=\"modern-dialog-container\">\r\n    <div mat-dialog-title class=\"preview-header\">\r\n      <div class=\"header-info\">\r\n        <div class=\"type-icon-wrapper\">\r\n          <mat-icon>link</mat-icon>\r\n        </div>\r\n        <div class=\"title-group\">\r\n          <span class=\"main-t\">Aggiungi un link</span>\r\n          <span class=\"file-t\">Inserisci l'URL della risorsa web</span>\r\n        </div>\r\n      </div>\r\n      <button mat-icon-button mat-dialog-close class=\"close-btn\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"add-link-modern-content\">\r\n      <form [formGroup]=\"newAttachmentForm\" class=\"add-link-form\">\r\n        <mat-form-field appearance=\"outline\" class=\"w-100 mt-3\">\r\n          <mat-label>URL del collegamento</mat-label>\r\n          <input\r\n            matInput\r\n            formControlName=\"filePath\"\r\n            placeholder=\"https://...\"\r\n            required\r\n          />\r\n          <mat-icon matSuffix>language</mat-icon>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"outline\" class=\"w-100\">\r\n          <mat-label>Titolo (opzionale)</mat-label>\r\n          <input\r\n            matInput\r\n            formControlName=\"fileName\"\r\n            placeholder=\"Es. Documento Progetto\"\r\n          />\r\n          <mat-icon matSuffix>title</mat-icon>\r\n        </mat-form-field>\r\n      </form>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\" class=\"preview-actions\">\r\n      <button mat-button mat-dialog-close class=\"btn-close\">Annulla</button>\r\n      <button\r\n        mat-raised-button\r\n        color=\"primary\"\r\n        [mat-dialog-close]=\"newAttachmentForm.value\"\r\n        [disabled]=\"newAttachmentForm.invalid\"\r\n        class=\"btn-download\"\r\n      >\r\n        <mat-icon>add</mat-icon> Aggiungi\r\n      </button>\r\n    </mat-dialog-actions>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--primary-color: #6a5af9;--primary-color-dark: rgb(83.7807017544, 65.3947368421, 248.1052631579);--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);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;backdrop-filter:blur(5px);pointer-events:none}.file-preview .preview-action-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:#0006;color:#fff;opacity:1;transition:opacity .3s ease}.file-preview .preview-action-overlay .mat-icon{font-size:36px;width:36px;height:36px}.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){.file-preview .remove-btn .file-preview .preview-action-overlay{opacity:0}.file-preview .remove-btn .file-preview:hover .preview-action-overlay,.file-preview .remove-btn .file-preview:hover .remove-btn{opacity:1}.file-preview .remove-btn .file-preview .remove-btn{opacity:0}}@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);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)}::ng-deep .cdk-overlay-pane.eqp-crop-dialog{transform:translateY(-4vh)}@media(max-width:600px){::ng-deep .cdk-overlay-pane.crop-dialog{width:auto!important}}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:20px!important;padding:0!important;overflow:hidden!important;width:fit-content!important;min-width:350px!important;max-width:95vw!important;margin:0 auto;background-color:#fff!important}::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;display:flex;flex-direction:column}.modern-dialog-container{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;max-height:90vh;background:#fff;--preview-header-h: 66px;--preview-footer-h: 66px;--preview-padding-y: 30px}.modern-dialog-container .main-preview-media{display:block;max-width:100%;max-height:var(--media-max-h);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#fff;padding:4px;box-shadow:0 10px 30px #00000014}.modern-dialog-container video.main-preview-media{width:min(100%,1100px);background:#000}.modern-dialog-container .iframe-container{width:min(100%,1100px);height:var(--media-max-h);display:flex;width:100%;max-width:1100px}.modern-dialog-container .preview-iframe-modern{width:100%;height:100%;border:0;border-radius:12px;background:#f8fafc}.modern-dialog-container .preview-header{flex:0 0 auto;flex-shrink:0;padding:14px 20px;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid var(--border-color);background:#f8fafc;z-index:10;width:100%}.modern-dialog-container .preview-header .header-info{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:1 1 auto;min-width:0;text-align:left}.modern-dialog-container .preview-header .header-info .type-icon-wrapper{background:var(--primary-color);color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px var(--shadow-color)}.modern-dialog-container .preview-header .header-info .title-group{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .main-t{font-weight:800;color:var(--text-color);font-size:.95rem;line-height:1.2;text-align:left}.modern-dialog-container .preview-header .header-info .title-group .file-t{font-size:.75rem;color:var(--text-color-light);max-width:250px;overflow:hidden;text-overflow:ellipsis;text-align:left}.modern-dialog-container .preview-content-area{flex:1;background:#fff!important;display:flex;flex-direction:column;padding:15px 15px 22px!important;overflow:hidden!important;min-height:0;width:auto;--media-max-h: calc(90vh - var(--preview-header-h) - var(--preview-footer-h) - var(--preview-padding-y));width:100%}.modern-dialog-container .preview-content-area .crop-toolbar{flex-shrink:0;z-index:20;background:#0f172a14;backdrop-filter:blur(10px);padding:6px 16px;border-radius:30px;margin:0 auto 15px;display:flex;gap:8px;box-shadow:0 4px 12px #0000000d}.modern-dialog-container .preview-content-area .crop-toolbar button{color:var(--text-color)!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper{flex:1;width:100%;display:flex;justify-content:center;align-items:center;min-height:0;overflow:visible}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:transparent;border-radius:12px;padding:0}.modern-dialog-container .preview-content-area .media-viewer-wrapper .crop-container-modern image-cropper{max-width:100%;max-height:100%;display:block}.modern-dialog-container .add-link-modern-content{flex:1;background:#fff;padding:24px!important}.modern-dialog-container .add-link-modern-content .add-link-form{display:flex;flex-direction:column;gap:10px}.modern-dialog-container .preview-actions{flex-shrink:0;padding:12px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;margin:0}.modern-dialog-container .preview-actions .btn-download{border-radius:12px;font-weight:600;box-shadow:0 4px 12px var(--shadow-color)}@media(max-width:600px){.modern-dialog-container{max-height:95vh}.modern-dialog-container .preview-content-area{padding:10px!important}.modern-dialog-container .preview-content-area .media-viewer-wrapper video.main-preview-media{width:100%!important;max-height:55vh!important;border-radius:4px;box-shadow:none}.modern-dialog-container .preview-content-area .media-viewer-wrapper .iframe-container{height:50vh}.modern-dialog-container .preview-content-area .crop-toolbar{width:calc(100% - 20px);max-width:400px;margin-bottom:10px;padding:4px 8px;gap:4px;overflow-x:auto;justify-content:center;-webkit-overflow-scrolling:touch}.modern-dialog-container .preview-content-area .crop-toolbar::-webkit-scrollbar{display:none}.modern-dialog-container .preview-content-area .crop-toolbar{scrollbar-width:none}.modern-dialog-container .preview-content-area .crop-toolbar button{flex-shrink:0;transform:scale(.85);width:40px;height:40px}.modern-dialog-container .preview-actions{padding:10px 15px;flex-direction:column-reverse;gap:8px}.modern-dialog-container .preview-actions button{width:100%;margin:0!important}}@media(max-width:360px){.modern-dialog-container .preview-content-area .crop-toolbar{gap:2px}.modern-dialog-container .preview-content-area .crop-toolbar button{transform:scale(.75)}}.control-icon{font-size:28px;cursor:pointer}image-cropper,image-cropper canvas,image-cropper img{max-width:100%!important;max-height:100%!important}.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}::ng-deep .eqp-attachments-preview-dialog{--mat-dialog-subhead-line-height: normal}::ng-deep .eqp-attachments-preview-dialog .mat-mdc-dialog-content{padding:0!important;margin:0!important;max-height:none!important;background:#fff!important}:host ::ng-deep .eqp-attachments-dialog .mat-mdc-dialog-container{--mat-dialog-subhead-size: 1.25rem;--mat-dialog-subhead-line-height: 1.5;--mat-dialog-subhead-weight: 600;--mat-dialog-supporting-text-size: 1rem}.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem 1rem;margin-top:1.5rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#f8f9fa;text-align:center;color:var(--text-color-light);animation:fadeIn .5s ease-out}.empty-state:before{content:\"\\1f4ed\";font-size:2.5rem;margin-bottom:1rem;opacity:.7}.secondary-action-link.disabled-link{color:#adb5bd;cursor:not-allowed;border-bottom-color:transparent}.secondary-action-link.disabled-link:hover{color:#adb5bd;border-bottom-color:transparent}.table-cell{padding:1rem .5rem;display:flex;align-items:center;gap:1rem;min-width:0;overflow:hidden}.table-cell.col-actions{flex:0 0 150px;justify-content:flex-end;overflow:visible}.compact-uploader{display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--border-color);border-radius:var(--border-radius);background-color:#fcfdff;transition:all .3s ease}.compact-uploader .compact-text{flex:1 1 auto;min-width:0;cursor:pointer}.compact-uploader .compact-text:hover .compact-title{color:var(--primary-color)}.compact-uploader .compact-title{font-weight:600;color:var(--text-color);transition:color .3s ease}.compact-uploader .compact-subtitle{font-size:.8rem;color:var(--text-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-uploader .compact-icon mat-icon{font-size:36px;width:36px;height:36px;color:var(--primary-color)}.compact-uploader .compact-actions{display:flex;gap:8px;flex-shrink:0}.compact-uploader.dragover{background-color:#f4f8ff;border-color:var(--primary-color);box-shadow:0 0 10px var(--shadow-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: EqpAttachmentService }], propDecorators: { disableAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAction", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], attachmentsList: [{
                 type: Input,
                 args: ["attachmentsList"]
-            }], singleAttachment: [{
-                type: Input,
-                args: ["singleAttachment"]
-            }], showMatCard: [{
-                type: Input,
-                args: ["showMatCard"]
-            }], multipleAttachment: [{
-                type: Input,
-                args: ["multipleAttachment"]
-            }], loadMultipleFiles: [{
-                type: Input,
-                args: ["loadMultipleFiles"]
-            }], emptyTableMessage: [{
-                type: Input,
-                args: ["emptyTableMessage"]
-            }], allowOnlyImages: [{
-                type: Input,
-                args: ["allowOnlyImages"]
-            }], acceptedFileTypes: [{
+            }], singleAttachment: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleAttachment", required: false }] }], showMatCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMatCard", required: false }] }], multipleAttachment: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleAttachment", required: false }] }], loadMultipleFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMultipleFiles", required: false }] }], emptyTableMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTableMessage", required: false }] }], allowOnlyImages: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyImages", required: false }] }], acceptedFileTypes: [{
                 type: Input,
                 args: ["acceptedFileTypes"]
-            }], isDisabled: [{
-                type: Input,
-                args: ["isDisabled"]
-            }], showInlinePreview: [{
-                type: Input,
-                args: ["showInlinePreview"]
-            }], getAttachmentEndpoint: [{
-                type: Input,
-                args: ["getAttachmentEndpoint"]
-            }], productionBaseUrl: [{
-                type: Input,
-                args: ["productionBaseUrl"]
-            }], compressionOptions: [{
-                type: Input,
-                args: ["compressionOptions"]
-            }], allowedTypes: [{
+            }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], showInlinePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInlinePreview", required: false }] }], getAttachmentEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "getAttachmentEndpoint", required: false }] }], productionBaseUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "productionBaseUrl", required: false }] }], compressionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "compressionOptions", required: false }] }], allowedTypes: [{
                 type: Input,
                 args: ["allowedTypes"]
-            }], isEqpTableMultiLanguage: [{
-                type: Input,
-                args: ["isEqpTableMultiLanguage"]
-            }], tablePaginatorVisible: [{
-                type: Input,
-                args: ["tablePaginatorVisible"]
-            }], isTableSearcheable: [{
-                type: Input,
-                args: ["isTableSearcheable"]
-            }], tablePaginatorSize: [{
-                type: Input,
-                args: ["tablePaginatorSize"]
-            }], separatedUploadButtons: [{
-                type: Input,
-                args: ["separatedUploadButtons"]
-            }], showPreview: [{
-                type: Input,
-                args: ["showPreview"]
-            }], singleAttachmentDragAndDrop: [{
-                type: Input,
-                args: ["singleAttachmentDragAndDrop"]
-            }], cropOptions: [{
-                type: Input,
-                args: ["cropOptions"]
-            }], cropDialogClass: [{
-                type: Input,
-                args: ["cropDialogClass"]
-            }], maxFileSizeMB: [{
-                type: Input
-            }], cardSize: [{
-                type: Input
-            }], customCardWidthPx: [{
-                type: Input
-            }], customCardHeightPx: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], openLinkLabel: [{
-                type: Input,
-                args: ["openLinkLabel"]
-            }], addButtonLabel: [{
-                type: Input,
-                args: ["addButtonLabel"]
-            }], downloadLabel: [{
-                type: Input,
-                args: ["downloadLabel"]
-            }], deleteLabel: [{
-                type: Input,
-                args: ["deleteLabel"]
-            }], fileNameLabel: [{
-                type: Input,
-                args: ["fileNameLabel"]
-            }], previewLabel: [{
-                type: Input,
-                args: ["previewLabel"]
-            }], uploadFileLabel: [{
-                type: Input,
-                args: ["uploadFileLabel"]
-            }], confirmLabel: [{
-                type: Input,
-                args: ["confirmLabel"]
-            }], abortLabel: [{
-                type: Input,
-                args: ["abortLabel"]
-            }], saveLabel: [{
-                type: Input,
-                args: ["saveLabel"]
-            }], exitLabel: [{
-                type: Input,
-                args: ["exitLabel"]
-            }], uploadWithDropboxLabel: [{
-                type: Input,
-                args: ["uploadWithDropboxLabel"]
-            }], cropLabel: [{
-                type: Input,
-                args: ["cropLabel"]
-            }], deleteDialogTitle: [{
-                type: Input,
-                args: ["deleteDialogTitle"]
-            }], deleteDialogMessage: [{
-                type: Input,
-                args: ["deleteDialogMessage"]
-            }], noImageSelectedErrorMessage: [{
-                type: Input,
-                args: ["noImageSelectedErrorMessage"]
-            }], wrongTypeSelectedErrorMessage: [{
-                type: Input,
-                args: ["wrongTypeSelectedErrorMessage"]
-            }], videoPreviewErrorMessage: [{
-                type: Input,
-                args: ["videoPreviewErrorMessage"]
-            }], audioPreviewErrorMessage: [{
-                type: Input,
-                args: ["videoPreviewErrorMessage"]
-            }], flipHorinzontalLabel: [{
-                type: Input,
-                args: ["flipHorinzontalLabel"]
-            }], flipVerticalLabel: [{
-                type: Input,
-                args: ["flipVerticalLabel"]
-            }], rotateRightLabel: [{
-                type: Input,
-                args: ["rotateRightLabel"]
-            }], rotateLeftLabel: [{
-                type: Input,
-                args: ["rotateLeftLabel"]
-            }], base64LimitMB: [{
-                type: Input,
-                args: ["base64LimitMB"]
-            }], 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: [{
+            }], isEqpTableMultiLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEqpTableMultiLanguage", required: false }] }], tablePaginatorVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginatorVisible", required: false }] }], isTableSearcheable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableSearcheable", required: false }] }], tablePaginatorSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tablePaginatorSize", required: false }] }], separatedUploadButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatedUploadButtons", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], singleAttachmentDragAndDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleAttachmentDragAndDrop", required: false }] }], cropOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropOptions", required: false }] }], cropDialogClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropDialogClass", required: false }] }], maxFileSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeMB", required: false }] }], cardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSize", required: false }] }], customCardWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCardWidthPx", required: false }] }], customCardHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCardHeightPx", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], openLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLinkLabel", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], downloadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadLabel", required: false }] }], deleteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteLabel", required: false }] }], fileNameLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileNameLabel", required: false }] }], previewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLabel", required: false }] }], uploadFileLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFileLabel", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], abortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "abortLabel", required: false }] }], saveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLabel", required: false }] }], exitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exitLabel", required: false }] }], uploadWithDropboxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadWithDropboxLabel", required: false }] }], cropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropLabel", required: false }] }], deleteDialogTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteDialogTitle", required: false }] }], deleteDialogMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteDialogMessage", required: false }] }], noImageSelectedErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noImageSelectedErrorMessage", required: false }] }], wrongTypeSelectedErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeSelectedErrorMessage", required: false }] }], videoPreviewErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoPreviewErrorMessage", required: false }] }], audioPreviewErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoPreviewErrorMessage", required: false }] }], flipHorinzontalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipHorinzontalLabel", required: false }] }], flipVerticalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipVerticalLabel", required: false }] }], rotateRightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateRightLabel", required: false }] }], rotateLeftLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateLeftLabel", required: false }] }], base64LimitMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "base64LimitMB", required: false }] }], uploadTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTitle", required: false }] }], uploadSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadSubtitle", required: false }] }], dropHereLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropHereLabel", required: false }] }], supportedFormatsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportedFormatsLabel", required: false }] }], browseFilesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseFilesLabel", required: false }] }], uploadSummaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadSummaryLabel", required: false }] }], filesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesLabel", required: false }] }], totalSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalSizeLabel", required: false }] }], emptyStateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateLabel", required: false }] }], addedSuccessfullyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedSuccessfullyLabel", required: false }] }], removedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removedLabel", required: false }] }], chooseView: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseView", required: false }] }], showSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSummary", required: false }] }], viewMode: [{
                 type: Input,
                 args: ["viewMode"]
-            }], showUploadTitle: [{
-                type: Input,
-                args: ["showUploadTitle"]
-            }], showDropArea: [{
-                type: Input,
-                args: ["showDropArea"]
-            }], hiddenColumns: [{
-                type: Input
-            }], hiddenActions: [{
-                type: Input
-            }], showActionButtons: [{
-                type: Input
-            }], enableImageCrop: [{
-                type: Input,
-                args: ["enableImageCrop"]
-            }], actionHiddenFn: [{
-                type: Input
-            }], actionDisabledFn: [{
-                type: Input
-            }], videoCompression: [{
-                type: Input
-            }], customMenuActions: [{
-                type: Input
-            }], customColumns: [{
-                type: Input
-            }], localEditedAttachments: [{
-                type: Output
-            }], abortAddAttachment: [{
-                type: Output
-            }], downloadAttachment: [{
-                type: Output,
-                args: ["downloadAttachment"]
-            }], onDeleteAttachment: [{
-                type: Output,
-                args: ["onDeleteAttachment"]
-            }], dialogAddAttachment: [{
-                type: ViewChild,
-                args: ["dialogAddAttachment", { static: true }]
-            }], dialogAddMultipleAttachment: [{
-                type: ViewChild,
-                args: ["dialogAddMultipleAttachment", { static: true }]
-            }], dialogCropImage: [{
-                type: ViewChild,
-                args: ["dialogCropImage", { static: true }]
-            }], addingLinkTemplate: [{
-                type: ViewChild,
-                args: ['addingLinkTemplate']
-            }], imageCropper: [{
-                type: ViewChild,
-                args: [ImageCropperComponent]
-            }], imageInput: [{
-                type: ViewChild,
-                args: ["imageInput"]
-            }], inlinePreviewTemplate: [{
-                type: ViewChild,
-                args: ["inlinePreviewTemplate", { static: true }]
-            }], dialogPreview: [{
-                type: ViewChild,
-                args: ["dialogPreview", { static: true }]
-            }], defaultFileTemplate: [{
-                type: ViewChild,
-                args: ['defaultFileTemplate', { static: true }]
-            }], defaultActionsTemplate: [{
-                type: ViewChild,
-                args: ['defaultActionsTemplate', { static: true }]
-            }] } });
+            }], showUploadTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadTitle", required: false }] }], showDropArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropArea", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }], hiddenActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenActions", required: false }] }], showActionButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionButtons", required: false }] }], enableImageCrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableImageCrop", required: false }] }], actionHiddenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHiddenFn", required: false }] }], actionDisabledFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionDisabledFn", required: false }] }], videoCompression: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoCompression", required: false }] }], customMenuActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customMenuActions", required: false }] }], customColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColumns", required: false }] }], localEditedAttachments: [{ type: i0.Output, args: ["localEditedAttachments"] }], abortAddAttachment: [{ type: i0.Output, args: ["abortAddAttachment"] }], downloadAttachment: [{ type: i0.Output, args: ["downloadAttachment"] }], onDeleteAttachment: [{ type: i0.Output, args: ["onDeleteAttachment"] }], dialogAddAttachment: [{ type: i0.ViewChild, args: ["dialogAddAttachment", { isSignal: true }] }], dialogAddMultipleAttachment: [{ type: i0.ViewChild, args: ["dialogAddMultipleAttachment", { isSignal: true }] }], dialogCropImage: [{ type: i0.ViewChild, args: ["dialogCropImage", { isSignal: true }] }], addingLinkTemplate: [{ type: i0.ViewChild, args: ["addingLinkTemplate", { isSignal: true }] }], imageCropper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ImageCropperComponent), { isSignal: true }] }], imageInput: [{ type: i0.ViewChild, args: ["imageInput", { isSignal: true }] }], inlinePreviewTemplate: [{ type: i0.ViewChild, args: ["inlinePreviewTemplate", { isSignal: true }] }], dialogPreview: [{ type: i0.ViewChild, args: ["dialogPreview", { isSignal: true }] }], defaultFileTemplate: [{ type: i0.ViewChild, args: ["defaultFileTemplate", { isSignal: true }] }], defaultActionsTemplate: [{ type: i0.ViewChild, args: ["defaultActionsTemplate", { isSignal: true }] }] } });
 
 class MaterialModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
             MatButtonModule,
             MatInputModule,
             MatAutocompleteModule,
@@ -1895,7 +1704,7 @@ class MaterialModule {
             MatTableModule,
             MatSortModule,
             MatPaginatorModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
             MatButtonModule,
             MatInputModule,
             MatAutocompleteModule,
@@ -1957,7 +1766,7 @@ class MaterialModule {
             MatSortModule,
             MatPaginatorModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2030,19 +1839,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 class EqpAttachmentsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, declarations: [EqpAttachmentsComponent], imports: [MaterialModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentsModule, declarations: [EqpAttachmentsComponent], imports: [MaterialModule,
             FormsModule,
             CommonModule,
             ReactiveFormsModule,
             ImageCropperComponent], exports: [EqpAttachmentsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
             FormsModule,
             CommonModule,
             ReactiveFormsModule,
             ImageCropperComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EqpAttachmentsComponent],