@eqproject/eqp-attachments 3.0.3 → 3.1.0

package/lib/eqp-attachments.component.d.ts

@@ -3,14 +3,13 @@ import { ChangeDetectorRef, EventEmitter, OnInit, TemplateRef } from "@angular/c
 import { FormBuilder, FormGroup } from "@angular/forms";
 import { MatDialog, MatDialogRef } from "@angular/material/dialog";
 import { DomSanitizer } from "@angular/platform-browser";
-import { ConfigColumn, TooltipPositionType } from "@eqproject/eqp-common";
 import { ImageCroppedEvent, ImageCropperComponent, ImageTransform } from "ngx-image-cropper";
-import { AttachmentType, CropOptionEnum, IAttachmentDTO } from "./interfaces/IAttachment";
+import { AttachmentCardSize, AttachmentType, CropOptionEnum, IAttachmentDTO } from "./interfaces/IAttachment";
 import { IOptions } from "./interfaces/IOptions";
 import { EqpAttachmentService } from "./services/eqp-attachment.service";
-import { EqpTableComponent } from "@eqproject/eqp-table";
 import * as i0 from "@angular/core";
 export declare class EqpAttachmentsComponent implements OnInit {
+    #private;
     private dialog;
     private formBuilder;
     private sanitizer;
@@ -33,6 +32,10 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * Sorgente dati da visualizzare. Nel caso si vuole gestire un singolo allegato va passato in ogni caso come Array.
      */
     attachmentsList: Array<IAttachmentDTO>;
+    /**
+     * Nel caso si vuole gestire un solo elemento senza passarlo come array, lo passo come singolo allegato e gestisco nella libreria l'array.
+     */
+    singleAttachment: IAttachmentDTO;
     /**
      * Se TRUE non mostra la MatCard (nel caso in cui "multipleAttachment" è TRUE).
      */
@@ -47,10 +50,6 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * SOLO se si gestiscono allegati multipli, quindi se l'input 'multipleAttachment' assume il valore TRUE, altrimenti è sempre disabilitata.
      */
     loadMultipleFiles: boolean;
-    /**
-     * Configurazione delle colonne della eqp-table per la visualizzazione degli allegati (caso "multipleAttachment" è TRUE).
-     */
-    attachmentsColumns: Array<ConfigColumn>;
     /**
      * Imposta il messaggio da visualizzare nel caso in cui la tabella degli allegati (nel caso in cui "multipleAttachment" è TRUE) è vuota.
      */
@@ -138,10 +137,13 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * Classe custom da assegnare al dialog del crop immagini
      */
     cropDialogClass: string;
+    maxFileSizeMB: number;
+    cardSize: AttachmentCardSize;
+    customCardWidthPx: number;
+    customCardHeightPx: number;
     /**
      * Input per definire le label da usare nel componente
      */
-    downloadTooltipPosition: TooltipPositionType;
     openLinkLabel: string;
     addButtonLabel: string;
     downloadLabel: string;
@@ -155,7 +157,6 @@ export declare class EqpAttachmentsComponent implements OnInit {
     exitLabel: string;
     uploadWithDropboxLabel: string;
     cropLabel: string;
-    eqpTableSearchText: string;
     deleteDialogTitle: string;
     deleteDialogMessage: string;
     noImageSelectedErrorMessage: string;
@@ -166,6 +167,20 @@ export declare class EqpAttachmentsComponent implements OnInit {
     flipVerticalLabel: string;
     rotateRightLabel: string;
     rotateLeftLabel: string;
+    uploadTitle: string;
+    uploadSubtitle: string;
+    dropHereLabel: string;
+    supportedFormatsLabel: string;
+    browseFilesLabel: string;
+    uploadSummaryLabel: string;
+    filesLabel: string;
+    totalSizeLabel: string;
+    emptyStateLabel: string;
+    addedSuccessfullyLabel: string;
+    removedLabel: string;
+    chooseView: boolean;
+    showSummary: boolean;
+    viewMode: 'card' | 'table';
     /**
      * Restituisce la lista aggiornata degli allegati.
      */
@@ -194,6 +209,7 @@ export declare class EqpAttachmentsComponent implements OnInit {
     dialogAddMultipleAttachment: TemplateRef<any>;
     dialogRefCropImage: MatDialogRef<TemplateRef<any>>;
     dialogCropImage: TemplateRef<any>;
+    addingLinkTemplate: TemplateRef<any>;
     imageChangedEvent: any;
     croppedImage: any;
     transform: ImageTransform;
@@ -206,19 +222,29 @@ export declare class EqpAttachmentsComponent implements OnInit {
     originalHeight: number;
     customWidth: number;
     customHeight: number;
-    attachmentTable: EqpTableComponent;
     inlinePreviewTemplate: TemplateRef<any>;
     dialogPreview: TemplateRef<any>;
     imageFile: File;
     addingLinkMode: boolean;
+    dragOver: boolean;
+    toast: {
+        visible: boolean;
+        type: "error" | "success";
+        text: string;
+        timeoutId: any;
+    };
+    progressPercent: number;
+    totalSizeBytes: number;
+    get totalSizeFormatted(): string;
+    formatFileSize(bytes: number): string;
+    showToast(message: string, type?: 'success' | 'error', durationMs?: number): void;
     constructor(dialog: MatDialog, formBuilder: FormBuilder, sanitizer: DomSanitizer, http: HttpClient, cd: ChangeDetectorRef, eqpAttachmentService: EqpAttachmentService);
-    ngOnInit(): Promise<void>;
-    reloadData(): void;
+    ngOnInit(): void;
+    setViewMode(mode: 'card' | 'table'): void;
+    private recomputeTotalsAndProgress;
+    ngOnDestroy(): void;
+    bytesFromBase64(base64: string): number;
     checkAttachmentImage(): void;
-    /**
-     * Configura le colonne per l'eqp-table nel caso in cui il parametro "multipleAttachments" è TRUE.
-     */
-    configureColumns(): void;
     /**
      * Elimina un allegato eliminando anche il file presente nello storage di archiviazione utilizzato (AWS o cartella progetto)
      * @param element IAttachmentDTO da cancellare
@@ -229,6 +255,7 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * @param attachmentIndex Indice dell'attachment da rimuovere
      */
     removeAttachmentFromList(attachmentIndex: number): void;
+    private simulateProgress;
     /**
      * Scarica l'allegato o apre il link
      * @param element Allegato da mostrare
@@ -269,6 +296,7 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
      */
     onFileAdded(event: any, isFileDropped?: boolean): Promise<void>;
+    private validationFile;
     /**
      * A partire dal FILE ricevuto in input ricostruisce l'oggetto IAttachmentDTO e lo restituisce.
      * Se il parametro getBase64 viene passato a TRUE allora, sempre a partire dal file,genera il base64 e
@@ -310,10 +338,19 @@ export declare class EqpAttachmentsComponent implements OnInit {
      * Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
      */
     abortFile(): void;
-    fileDropped(files: any): void;
+    fileDropped(event: DragEvent): void;
     chooseDropboxFile(): void;
     onSelectFile(event: any, fileInput: any): void;
+    /**
+     * Apre il dialogo per l'inserimento del link.
+     */
     switchToAddingLinkMode(): void;
+    getCardClass(att: IAttachmentDTO): {
+        [key: string]: boolean;
+    };
+    getPreviewsContainerStyle(): {
+        [key: string]: string;
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<EqpAttachmentsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EqpAttachmentsComponent, "eqp-attachments", never, { "disableAction": { "alias": "disableAction"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "headerTitle": { "alias": "headerTitle"; "required": false; }; "attachmentsList": { "alias": "attachmentsList"; "required": false; }; "showMatCard": { "alias": "showMatCard"; "required": false; }; "multipleAttachment": { "alias": "multipleAttachment"; "required": false; }; "loadMultipleFiles": { "alias": "loadMultipleFiles"; "required": false; }; "attachmentsColumns": { "alias": "attachmentsColumns"; "required": false; }; "emptyTableMessage": { "alias": "emptyTableMessage"; "required": false; }; "allowOnlyImages": { "alias": "allowOnlyImages"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "showInlinePreview": { "alias": "showInlinePreview"; "required": false; }; "getAttachmentEndpoint": { "alias": "getAttachmentEndpoint"; "required": false; }; "productionBaseUrl": { "alias": "productionBaseUrl"; "required": false; }; "compressionOptions": { "alias": "compressionOptions"; "required": false; }; "allowedTypes": { "alias": "allowedTypes"; "required": false; }; "isEqpTableMultiLanguage": { "alias": "isEqpTableMultiLanguage"; "required": false; }; "tablePaginatorVisible": { "alias": "tablePaginatorVisible"; "required": false; }; "isTableSearcheable": { "alias": "isTableSearcheable"; "required": false; }; "tablePaginatorSize": { "alias": "tablePaginatorSize"; "required": false; }; "separatedUploadButtons": { "alias": "separatedUploadButtons"; "required": false; }; "showPreview": { "alias": "showPreview"; "required": false; }; "singleAttachmentDragAndDrop": { "alias": "singleAttachmentDragAndDrop"; "required": false; }; "cropOptions": { "alias": "cropOptions"; "required": false; }; "cropDialogClass": { "alias": "cropDialogClass"; "required": false; }; "downloadTooltipPosition": { "alias": "downloadTooltipPosition"; "required": false; }; "openLinkLabel": { "alias": "openLinkLabel"; "required": false; }; "addButtonLabel": { "alias": "addButtonLabel"; "required": false; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; }; "deleteLabel": { "alias": "deleteLabel"; "required": false; }; "fileNameLabel": { "alias": "fileNameLabel"; "required": false; }; "previewLabel": { "alias": "previewLabel"; "required": false; }; "uploadFileLabel": { "alias": "uploadFileLabel"; "required": false; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; }; "abortLabel": { "alias": "abortLabel"; "required": false; }; "saveLabel": { "alias": "saveLabel"; "required": false; }; "exitLabel": { "alias": "exitLabel"; "required": false; }; "uploadWithDropboxLabel": { "alias": "uploadWithDropboxLabel"; "required": false; }; "cropLabel": { "alias": "cropLabel"; "required": false; }; "eqpTableSearchText": { "alias": "eqpTableSearchText"; "required": false; }; "deleteDialogTitle": { "alias": "deleteDialogTitle"; "required": false; }; "deleteDialogMessage": { "alias": "deleteDialogMessage"; "required": false; }; "noImageSelectedErrorMessage": { "alias": "noImageSelectedErrorMessage"; "required": false; }; "wrongTypeSelectedErrorMessage": { "alias": "wrongTypeSelectedErrorMessage"; "required": false; }; "videoPreviewErrorMessage": { "alias": "videoPreviewErrorMessage"; "required": false; }; "audioPreviewErrorMessage": { "alias": "videoPreviewErrorMessage"; "required": false; }; "flipHorinzontalLabel": { "alias": "flipHorinzontalLabel"; "required": false; }; "flipVerticalLabel": { "alias": "flipVerticalLabel"; "required": false; }; "rotateRightLabel": { "alias": "rotateRightLabel"; "required": false; }; "rotateLeftLabel": { "alias": "rotateLeftLabel"; "required": false; }; }, { "localEditedAttachments": "localEditedAttachments"; "abortAddAttachment": "abortAddAttachment"; "downloadAttachment": "downloadAttachment"; "onDeleteAttachment": "onDeleteAttachment"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EqpAttachmentsComponent, "eqp-attachments", never, { "disableAction": { "alias": "disableAction"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "headerTitle": { "alias": "headerTitle"; "required": false; }; "attachmentsList": { "alias": "attachmentsList"; "required": false; }; "singleAttachment": { "alias": "singleAttachment"; "required": false; }; "showMatCard": { "alias": "showMatCard"; "required": false; }; "multipleAttachment": { "alias": "multipleAttachment"; "required": false; }; "loadMultipleFiles": { "alias": "loadMultipleFiles"; "required": false; }; "emptyTableMessage": { "alias": "emptyTableMessage"; "required": false; }; "allowOnlyImages": { "alias": "allowOnlyImages"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "showInlinePreview": { "alias": "showInlinePreview"; "required": false; }; "getAttachmentEndpoint": { "alias": "getAttachmentEndpoint"; "required": false; }; "productionBaseUrl": { "alias": "productionBaseUrl"; "required": false; }; "compressionOptions": { "alias": "compressionOptions"; "required": false; }; "allowedTypes": { "alias": "allowedTypes"; "required": false; }; "isEqpTableMultiLanguage": { "alias": "isEqpTableMultiLanguage"; "required": false; }; "tablePaginatorVisible": { "alias": "tablePaginatorVisible"; "required": false; }; "isTableSearcheable": { "alias": "isTableSearcheable"; "required": false; }; "tablePaginatorSize": { "alias": "tablePaginatorSize"; "required": false; }; "separatedUploadButtons": { "alias": "separatedUploadButtons"; "required": false; }; "showPreview": { "alias": "showPreview"; "required": false; }; "singleAttachmentDragAndDrop": { "alias": "singleAttachmentDragAndDrop"; "required": false; }; "cropOptions": { "alias": "cropOptions"; "required": false; }; "cropDialogClass": { "alias": "cropDialogClass"; "required": false; }; "maxFileSizeMB": { "alias": "maxFileSizeMB"; "required": false; }; "cardSize": { "alias": "cardSize"; "required": false; }; "customCardWidthPx": { "alias": "customCardWidthPx"; "required": false; }; "customCardHeightPx": { "alias": "customCardHeightPx"; "required": false; }; "openLinkLabel": { "alias": "openLinkLabel"; "required": false; }; "addButtonLabel": { "alias": "addButtonLabel"; "required": false; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; }; "deleteLabel": { "alias": "deleteLabel"; "required": false; }; "fileNameLabel": { "alias": "fileNameLabel"; "required": false; }; "previewLabel": { "alias": "previewLabel"; "required": false; }; "uploadFileLabel": { "alias": "uploadFileLabel"; "required": false; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; }; "abortLabel": { "alias": "abortLabel"; "required": false; }; "saveLabel": { "alias": "saveLabel"; "required": false; }; "exitLabel": { "alias": "exitLabel"; "required": false; }; "uploadWithDropboxLabel": { "alias": "uploadWithDropboxLabel"; "required": false; }; "cropLabel": { "alias": "cropLabel"; "required": false; }; "deleteDialogTitle": { "alias": "deleteDialogTitle"; "required": false; }; "deleteDialogMessage": { "alias": "deleteDialogMessage"; "required": false; }; "noImageSelectedErrorMessage": { "alias": "noImageSelectedErrorMessage"; "required": false; }; "wrongTypeSelectedErrorMessage": { "alias": "wrongTypeSelectedErrorMessage"; "required": false; }; "videoPreviewErrorMessage": { "alias": "videoPreviewErrorMessage"; "required": false; }; "audioPreviewErrorMessage": { "alias": "videoPreviewErrorMessage"; "required": false; }; "flipHorinzontalLabel": { "alias": "flipHorinzontalLabel"; "required": false; }; "flipVerticalLabel": { "alias": "flipVerticalLabel"; "required": false; }; "rotateRightLabel": { "alias": "rotateRightLabel"; "required": false; }; "rotateLeftLabel": { "alias": "rotateLeftLabel"; "required": false; }; "uploadTitle": { "alias": "uploadTitle"; "required": false; }; "uploadSubtitle": { "alias": "uploadSubtitle"; "required": false; }; "dropHereLabel": { "alias": "dropHereLabel"; "required": false; }; "supportedFormatsLabel": { "alias": "supportedFormatsLabel"; "required": false; }; "browseFilesLabel": { "alias": "browseFilesLabel"; "required": false; }; "uploadSummaryLabel": { "alias": "uploadSummaryLabel"; "required": false; }; "filesLabel": { "alias": "filesLabel"; "required": false; }; "totalSizeLabel": { "alias": "totalSizeLabel"; "required": false; }; "emptyStateLabel": { "alias": "emptyStateLabel"; "required": false; }; "addedSuccessfullyLabel": { "alias": "addedSuccessfullyLabel"; "required": false; }; "removedLabel": { "alias": "removedLabel"; "required": false; }; "chooseView": { "alias": "chooseView"; "required": false; }; "showSummary": { "alias": "showSummary"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; }, { "localEditedAttachments": "localEditedAttachments"; "abortAddAttachment": "abortAddAttachment"; "downloadAttachment": "downloadAttachment"; "onDeleteAttachment": "onDeleteAttachment"; }, never, never, false, never>;
 }

package/lib/eqp-attachments.module.d.ts

@@ -4,10 +4,8 @@ import * as i2 from "./modules/material.module";
 import * as i3 from "@angular/forms";
 import * as i4 from "@angular/common";
 import * as i5 from "ngx-image-cropper";
-import * as i6 from "@eqproject/eqp-table";
-import * as i7 from "ngx-file-drop";
 export declare class EqpAttachmentsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EqpAttachmentsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EqpAttachmentsModule, [typeof i1.EqpAttachmentsComponent], [typeof i2.MaterialModule, typeof i3.FormsModule, typeof i4.CommonModule, typeof i3.ReactiveFormsModule, typeof i5.ImageCropperModule, typeof i6.EqpTableModule, typeof i7.NgxFileDropModule], [typeof i1.EqpAttachmentsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EqpAttachmentsModule, [typeof i1.EqpAttachmentsComponent], [typeof i2.MaterialModule, typeof i3.FormsModule, typeof i4.CommonModule, typeof i3.ReactiveFormsModule, typeof i5.ImageCropperComponent], [typeof i1.EqpAttachmentsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EqpAttachmentsModule>;
 }

package/lib/interfaces/IAttachment.d.ts

@@ -9,6 +9,7 @@ export interface IAttachmentDTO {
     IsImage?: boolean;
     FileThumbnailBase64?: string;
     TrustedUrl?: any;
+    isUploading?: boolean;
 }
 export declare enum AttachmentType {
     FILE = 1,
@@ -19,3 +20,4 @@ export declare enum CropOptionEnum {
     ROTATE = 1,
     FLIP = 2
 }
+export type AttachmentCardSize = 'small' | 'medium' | 'large' | 'custom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eqproject/eqp-attachments",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Dynamic attachments component - Angular Material based",
   "author": {
     "name": "EqProject"
@@ -8,14 +8,11 @@
   "peerDependencies": {
     "@angular/cdk": "^17.0.1",
     "@angular/common": "^17.0.4",
-    "@angular/core": "^17.0.4",
-    "@eqproject/eqp-common": "latest"
+    "@angular/core": "^17.0.4"
   },
   "dependencies": {
-    "@eqproject/eqp-table": "latest",
     "browser-image-compression": "^2.0.2",
-    "ngx-file-drop": "^16.0.0",
-    "ngx-image-cropper": "^7.1.2",
+    "ngx-image-cropper": "^9.1.5",
     "sweetalert2": "^11.10.1",
     "tslib": "^2.6.2"
   },