@eqproject/eqp-attachments 0.1.13 → 0.1.16

package/README.md

@@ -84,14 +84,19 @@ export class AppModule {}
 | [wrongTypeSelectedErrorMessage] | `string` | `"Non è possibile caricare il file selezionato."` | no | Sets the error dialog message when user tries to upload a not allowed file . | 
 | [videoPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file video.` | no | Sets the warning dialog merrage when the user tries to open the preview of a video file. |
 | [audioPreviewErrorMessage] | `string` | `Impossibile aprire l'anteprima di un file audio.` | no | Sets the warning dialog merrage when the user tries to open the preview of an audio file. |
+| [isEqpTableMultiLanguage] | `boolean` | `false` | no | It allows you to establish whether the eqp-table containing the list of attachments uses multilanguage or not |
+| [tablePaginatorVisible] | `boolean` | `true` | no | It allows you to establish, in the case of multiple attachments management, whether the table containing the list of attachments must be paged or not (default: true) |
+| [tablePaginatorSize] | `number` | `null` | no | In case of managing multiple attachments, it allows you to establish the default page size for the table containing the list of attachments (default: null) |
  
 
 ### Outputs
 | Output  | Event Arguments | Required | Description |
 | ------------- | ------------- | ------------- | ------------- |
 | (localEditedAttachments) | `EventEmitter<Array<IAttachmentDTO>>` | no | Invoked when an IAttachmentDTO is created and added to `attachmentsList` or is deleted. It always return an Array of IAttachmentDTO, even if `[multipleAttachment]="true"`. |
+| (abortAddAttachment) | `EventEmitter<any>` | no | Event triggered by pressing the EXIT button of the file upload modal. |
 | (downloadAttachment) | EventEmitter<IAttachmentDTO> | no | Invoked when the user tries to download an IAttachmentDTO with at least one of the following properties not defined: `"FileDataBase64", "FileContentType", "FileName"`. It returns the user selected object. |
 | (onDeleteAttachment) | `EventEmitter<IAttachmentDTO>` | no | Invoked when an IAttachmentDTO is deleted from `attachmentsList`. It returns the deleted element. |
+| (onComponentLoaded) | `EventEmitter<EqpAttachmentsComponent>` | no | Invoked when the component is loaded, emits the current instance of the component. |
 
 
 ### Model, Interfaces and Enums used

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

@@ -488,9 +488,20 @@
              */
             this.allowedTypes = [exports.AttachmentType.FILE, exports.AttachmentType.LINK];
             /**
-             * Booleano per impostare la eqp-table nella modalità multilingua
+             * Permette di stabilire se la eqp-table contenente l'elenco degli allegati utilizza
+             * il multilingua oppure no
              */
             this.isEqpTableMultiLanguage = false;
+            /**
+             * Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
+             * degli allegati deve essere paginata oppure no
+             */
+            this.tablePaginatorVisible = true;
+            /**
+             * In caso di gestione allegati multipli, permette di stabilire la dimensione pagina di default
+             * per la tabella contenente l'elenco degli allegati
+             */
+            this.tablePaginatorSize = null;
             /**
              * Input per definire le label da usare nel componente
              */
@@ -519,6 +530,10 @@
              * Restituisce la lista aggiornata degli allegati.
              */
             this.localEditedAttachments = new core.EventEmitter();
+            /**
+             * Evento scatenato alla pressione del pulsante ESCI della modale di caricamento file.
+             */
+            this.abortAddAttachment = new core.EventEmitter();
             /**
              * Evento di output che restituisce l'IAttachmentDTO selezionato per il download nel caso FileDataBase64, FileContentType o FileName non fossero specificati.
              */
@@ -527,6 +542,14 @@
              * Evento di output che restituisce l'elemento eliminato prima che questo venga effettivamente rismosso dalla lista.
              */
             this.onDeleteAttachment = new core.EventEmitter();
+            /**
+             * Evento di output scatenato durante l'AfterViewInit del componente che restituisce l'istanza corrente del componente.
+             * Questo evento avvisa quando il componente è stato renderizzato, utile per esempio quando si vogliono aggiungere delle colonne
+             * alla visualizzazione con allegati multipli lasciando però quelle pre esistenti. Questo si può fare intervenendo sulla
+             * proprietà "attachmentsColumns" di questo componente tramite l'istanza passata come paramentro oppure tramite ViewChild
+             * dal componente che lo ospita.
+             */
+            this.onComponentLoaded = new core.EventEmitter();
             //#endregion
             //#region Proprietà per gestione caricamento nuovo allegato
             this.newAttachment = {};
@@ -565,6 +588,9 @@
                 this.attachmentsList = new Array();
             this.checkAttachmentImage();
         };
+        EqpAttachmentsComponent.prototype.ngAfterViewInit = function () {
+            this.onComponentLoaded.emit(this);
+        };
         EqpAttachmentsComponent.prototype.reloadData = function () {
             if (this.attachmentTable)
                 this.attachmentTable.reloadDatatable();
@@ -704,13 +730,16 @@
                 customWidth: [this.customWidth]
             });
         };
-        EqpAttachmentsComponent.prototype.close = function () {
+        EqpAttachmentsComponent.prototype.close = function (emitCloseEvent) {
+            if (emitCloseEvent === void 0) { emitCloseEvent = true; }
             this.newAttachment = {};
             this.newMultipleAttachments = new Array();
             this.abortFile();
             if (this.newAttachmentForm)
                 this.newAttachmentForm.reset();
             this.dialofRefAddAttachment.close();
+            if (emitCloseEvent == true && this.abortAddAttachment)
+                this.abortAddAttachment.emit();
         };
         /**
          * In base al tipo di allegato controlla se disabilitare o meno il pulsante per salvare.
@@ -748,7 +777,7 @@
             if (this.attachmentTable)
                 this.attachmentTable.reloadDatatable();
             this.localEditedAttachments.emit(this.attachmentsList);
-            this.close();
+            this.close(false);
         };
         /**
          * Apre il dialog per l'anteprima dell'allegato selezionato.
@@ -1162,6 +1191,12 @@
         __decorate([
             core.Input("isEqpTableMultiLanguage")
         ], EqpAttachmentsComponent.prototype, "isEqpTableMultiLanguage", void 0);
+        __decorate([
+            core.Input("tablePaginatorVisible")
+        ], EqpAttachmentsComponent.prototype, "tablePaginatorVisible", void 0);
+        __decorate([
+            core.Input("tablePaginatorSize")
+        ], EqpAttachmentsComponent.prototype, "tablePaginatorSize", void 0);
         __decorate([
             core.Input("downloadTooltipPosition")
         ], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
@@ -1222,12 +1257,18 @@
         __decorate([
             core.Output()
         ], EqpAttachmentsComponent.prototype, "localEditedAttachments", void 0);
+        __decorate([
+            core.Output()
+        ], EqpAttachmentsComponent.prototype, "abortAddAttachment", void 0);
         __decorate([
             core.Output("downloadAttachment")
         ], EqpAttachmentsComponent.prototype, "downloadAttachment", void 0);
         __decorate([
             core.Output("onDeleteAttachment")
         ], EqpAttachmentsComponent.prototype, "onDeleteAttachment", void 0);
+        __decorate([
+            core.Output("onComponentLoaded")
+        ], EqpAttachmentsComponent.prototype, "onComponentLoaded", void 0);
         __decorate([
             core.ViewChild('dialogAddAttachment', { static: true })
         ], EqpAttachmentsComponent.prototype, "dialogAddAttachment", void 0);
@@ -1252,7 +1293,7 @@
         EqpAttachmentsComponent = __decorate([
             core.Component({
                 selector: 'eqp-attachments',
-                template: "<!-- Se richiesta la gestione multipla mostra il pulsante di aggiunta e la tabella con l'elenco allegati -->\r\n<div *ngIf=\"multipleAttachment == true\">\r\n    <mat-card [ngStyle]=\"{ 'box-shadow': showMatCard == false ? 'none' : null }\">\r\n        <mat-card-header>\r\n            <div class=\"col-md-6\">\r\n                <div class=\"text-nowrap eqp-attachments-header-title\" *ngIf=\"showHeader == true\">\r\n                    {{headerTitle}}\r\n                </div>\r\n            </div>\r\n            <div class=\"col-md-6 text-right\">\r\n                <div class=\"row justify-content-end\">\r\n                    <!-- Template del button per l'aggiunta di un allegato -->\r\n                    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n            <eqp-table #attachmentTable [createMatCard]=\"false\" #table [columns]=\"attachmentsColumns\"\r\n                [isMultiLanguage]=\"isEqpTableMultiLanguage\" [data]=\"attachmentsList\"\r\n                [emptyTableMessage]=\"emptyTableMessage\" [searchText]=\"eqpTableSearchText\">\r\n            </eqp-table>\r\n        </mat-card-content>\r\n    </mat-card>\r\n</div>\r\n\r\n<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n\r\n    <button class=\"mb-2 mr-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType == AttachmentType.FILE\">download</mat-icon>\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType != AttachmentType.FILE\">open_in_new</mat-icon>\r\n        {{attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel}}\r\n    </button>\r\n    <button class=\"mb-2 mr-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button color=\"primary\"\r\n        *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio')))\">\r\n        <mat-icon>visibility</mat-icon> {{previewLabel}}\r\n    </button>\r\n    <button class=\"mb-2 eqp-attachments-delete-btn\" (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n        [disabled]=\"isDisabled\">\r\n        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n    </button>\r\n\r\n    <div class=\"row\" style=\"margin-top: 10px;\"\r\n        *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].FileDataBase64 && attachmentsList[0].IsImage == true\">\r\n        <div class=\"col-sm-12\">\r\n            <div class=\"single-attachment-inline-preview-container\">\r\n                <img src=\"data:image/png;base64,{{attachmentsList[0].FileDataBase64}}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].IsImage != true\">\r\n        <div class=\"col-sm-12\">\r\n            <mat-form-field>\r\n                <mat-label>{{fileNameLabel}}</mat-label>\r\n                <input readonly matInput [(ngModel)]=\"attachmentsList[0].FileName\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #dialogAddAttachment>\r\n    <div class=\"container-fluid eqp-attachments-dialog-add-container\"\r\n        style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n        <form [formGroup]=\"newAttachmentForm\" (ngSubmit)=\"confirmAddAttachment()\" *ngIf=\"newAttachmentForm\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\"> {{addButtonLabel}} {{ newAttachment.AttachmentType ==\r\n                    attachmentType.FILE ?\r\n                    'File' : 'Link'}} </div>\r\n            </div>\r\n            <div class=\"row\" style=\"margin-top: 20px;\">\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == attachmentType.FILE\">\r\n                    <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n                        name=\"file_attachment\" type=\"file\" (change)=\"onFileInputChange($event)\"\r\n                        [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n                    <button (click)=\"imageInput.click()\" type=\"button\" style=\"margin-left: 10px;\" id=\"file_attachment\"\r\n                        mat-raised-button color=\"primary\" [disabled]=\"showCropImage == true\"\r\n                        class=\"mb-2 btn btn-primary eqp-attachments-upload-btn\" *ngIf=\"(loadMultipleFiles != true && !newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length == 0)\">\r\n                        <mat-icon>cloud_upload</mat-icon>\r\n                        {{uploadFileLabel}}\r\n                    </button>\r\n                    <button (click)=\"abortFile()\" type=\"button\" style=\"margin-left: 10px;\" mat-raised-button\r\n                        *ngIf=\"(loadMultipleFiles != true && newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0)\" class=\"mb-2 eqp-attachments-delete-btn\">\r\n                        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2 || (selectedFile && loadMultipleFiles != true)\">\r\n                    <mat-form-field style=\"width: 100%;\">\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input formControlName=\"name\" matInput [(ngModel)]=\"newAttachment.FileName\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2\">\r\n                    <mat-form-field style=\"width: 100%;\">\r\n                        <mat-label> Link </mat-label>\r\n                        <input formControlName=\"path\" required matInput [(ngModel)]=\"newAttachment.FilePath\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta l'elenco dei nomi dei file caricati contemporaneamente (visibile solo se loadMultipleFiles = TRUE e se ci sono realmente pi\u00F9 file senza link) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0 && newMultipleAttachments[0].AttachmentType != attachmentType.LINK\">\r\n                <div class=\"col-12\" *ngFor=\"let attach of newMultipleAttachments\">\r\n                    <mat-form-field style=\"width: 100%\">\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input disabled matInput [(ngModel)]=\"attach.FileName\" [ngModelOptions]=\"{standalone: true}\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento MULTIPLO ma \u00E8 stata selezionata una sola immagine (quindi \u00E8 entrato in gioco anche il croppie) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && showCropImage != true && newMultipleAttachments && newMultipleAttachments.length == 1 && newMultipleAttachments[0].IsImage == true\" style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newMultipleAttachments[0].FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento SINGOLO ed \u00E8 stata selezionata un'immagine -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles != true && showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\" style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newAttachment.FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n            <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\r\n\r\n            <div class=\"row mt-2\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                        [disabled]=\"showCropImage == true || (loadMultipleFiles != true && newAttachmentForm?.disabled == true) || disableSave()\">\r\n                        {{saveLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" (click)=\"close()\"\r\n                        [disabled]=\"showCropImage == true\" type=\"button\">\r\n                        {{exitLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <img src=\"data:image/png;base64,{{row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64}}\">\r\n    </div>\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\" *ngIf=\"selectedAttachment\">\r\n        <div class=\"row\">\r\n            <div class=\"header-title-standard\">\r\n                {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-2\">\r\n            <!-- ANTEPRIMA IMMAGINE -->\r\n            <div class=\"col-12 text-center preview-container\" *ngIf=\"selectedAttachment.IsImage\">\r\n                <img class=\"image-preview\"\r\n                    src=\"data:image/png;base64,{{selectedAttachment.FileDataBase64 ? selectedAttachment.FileDataBase64 : selectedAttachment.FileThumbnailBase64}}\">\r\n            </div>\r\n\r\n            <!-- ANTEPRIMA LINK -->\r\n            <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n                <iframe class=\"link-preview\" [src]=\"selectedAttachment.TrustedUrl\"\r\n                    [title]=\"selectedAttachment.FileName\"></iframe>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-3\">\r\n            <div class=\"col-sm-12 text-right\">\r\n                <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                    (click)=\"viewAttachment(selectedAttachment)\"\r\n                    *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n                    {{downloadLabel}}\r\n                </button>\r\n                <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" mat-dialog-close type=\"button\"\r\n                    (click)=\"selectedAttachment = null\">\r\n                    {{exitLabel}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n\r\n    <!-- \r\n        Pulsanti per l'aggiunta di un file o un link. Ne viene visualizzato uno se:\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di pi\u00F9 allegati (multipleAttachment == true)\r\n        OPPURE\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di un singolo allegato (multipleAttachment == true) e non ne \u00E8 ancora stato selezionato uno (ovvero attachmentsList non esiste o non ha elementi)\r\n    -->\r\n    <button class=\"btn btn-primary  mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\"\r\n        (click)=\"openModalAddAttachment(allowedTypes[0])\" [disabled]=\"isDisabled\">\r\n        <!-- Per l'aggiunta dei file mostro un'icona diversa dall'aggiunta dei link -->\r\n        <mat-icon *ngIf=\"allowedTypes[0] == 1\">cloud_upload</mat-icon>\r\n        <i class=\"fas fa-link\" *ngIf=\"allowedTypes[0] == 2\"></i>\r\n        <span style=\"margin-left: 10px;\">{{addButtonLabel}} {{allowedTypes[0] == 1 ? \"file\" : \"link\"}}</span>\r\n    </button>\r\n\r\n\r\n    <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n        <mat-icon *ngIf=\"multipleAttachment != true\">cloud_upload</mat-icon>\r\n        <mat-icon *ngIf=\"multipleAttachment == true\">add</mat-icon>\r\n        <span style=\"margin-left: 0px;\"> {{addButtonLabel}} </span>\r\n    </button>\r\n    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n            <i class=\"fas fa-file\"></i>\r\n            <span style=\"margin-left: 10px;\">File</span>\r\n        </button>\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n            <i class=\"fas fa-link\"></i>\r\n            <span style=\"margin-left: 10px;\">Link</span>\r\n        </button>\r\n    </mat-menu>\r\n</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate let-form=\"form\">\r\n    <div class=\"row mt-2 mb-2\" [formGroup]=\"form\">\r\n        <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n            <span class=\"mr-1\">Max H(px):</span>\r\n            <mat-form-field>\r\n                <input formControlName=\"customHeight\" type=\"number\" matInput [(ngModel)]=\"customHeight\"\r\n                    (change)=\"onDimensionsChange('H')\">\r\n            </mat-form-field>\r\n\r\n            <span class=\"ml-2 mr-1\">Max W(px):</span>\r\n            <mat-form-field>\r\n                <input formControlName=\"customWidth\" type=\"number\" matInput [(ngModel)]=\"customWidth\"\r\n                    (change)=\"onDimensionsChange('W')\">\r\n            </mat-form-field>\r\n\r\n            <button class=\"btn btn-primary mat-raised-button ml-2\" (click)=\"restoreOriginalDimensions()\"\r\n                [disabled]=\"customWidth == originalWidth && customHeight == originalHeight\">\r\n                <mat-icon style=\"vertical-align: middle;\">replay</mat-icon>\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"row justify-content-center\">\r\n        <div style=\"max-height: 450px; max-width: 450px;\">\r\n            <image-cropper [imageChangedEvent]=\"imageChangedEvent\" [maintainAspectRatio]=\"false\"\r\n                [autoCrop]=\"false\" [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4/3\"\r\n                [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\" [roundCropper]=\"false\" [canvasRotation]=\"0\"\r\n                [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\" (imageCropped)=\"imageCropped($event)\"\r\n                [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\">\r\n            </image-cropper>\r\n        </div>\r\n    </div>\r\n    <div class=\"row justify-content-center mt-2\">\r\n        <div style=\"max-height: 450px; max-width: 450px;\">\r\n            <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn mr-2\" type=\"button\"\r\n                (click)=\"confirmCrop()\">\r\n                {{confirmLabel}}\r\n            </button>\r\n            <button class=\"btn mat-raised-button eqp-attachments-abort-btn\" type=\"button\" (click)=\"abortFile()\">\r\n                {{abortLabel}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>",
+                template: "<!-- Se richiesta la gestione multipla mostra il pulsante di aggiunta e la tabella con l'elenco allegati -->\r\n<div *ngIf=\"multipleAttachment == true\">\r\n    <mat-card [ngStyle]=\"{ 'box-shadow': showMatCard == false ? 'none' : null }\">\r\n        <mat-card-header>\r\n            <div class=\"col-md-6\">\r\n                <div class=\"text-nowrap eqp-attachments-header-title\" *ngIf=\"showHeader == true\">\r\n                    {{headerTitle}}\r\n                </div>\r\n            </div>\r\n            <div class=\"col-md-6 text-right\">\r\n                <div class=\"row justify-content-end\">\r\n                    <!-- Template del button per l'aggiunta di un allegato -->\r\n                    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n            <eqp-table #attachmentTable [createMatCard]=\"false\" #table [columns]=\"attachmentsColumns\"\r\n                [isMultiLanguage]=\"isEqpTableMultiLanguage\" [data]=\"attachmentsList\"\r\n                [paginatorVisible]=\"tablePaginatorVisible\" [matPaginatorSize]=\"tablePaginatorSize\"\r\n                [emptyTableMessage]=\"emptyTableMessage\" [searchText]=\"eqpTableSearchText\">\r\n            </eqp-table>\r\n        </mat-card-content>\r\n    </mat-card>\r\n</div>\r\n\r\n<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n    <!-- Template del button per l'aggiunta di un allegato -->\r\n    <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n\r\n    <button class=\"mb-2 mr-2 eqp-attachments-download-btn\" (click)=\"viewAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\" color=\"primary\">\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType == AttachmentType.FILE\">download</mat-icon>\r\n        <mat-icon *ngIf=\"attachmentsList[0].AttachmentType != AttachmentType.FILE\">open_in_new</mat-icon>\r\n        {{attachmentsList[0].AttachmentType == AttachmentType.FILE ? downloadLabel : openLinkLabel}}\r\n    </button>\r\n    <button class=\"mb-2 mr-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button color=\"primary\"\r\n        *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio')))\">\r\n        <mat-icon>visibility</mat-icon> {{previewLabel}}\r\n    </button>\r\n    <button class=\"mb-2 eqp-attachments-delete-btn\" (click)=\"deleteAttachment(attachmentsList[0])\" type=\"button\"\r\n        mat-raised-button *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n        [disabled]=\"isDisabled\">\r\n        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n    </button>\r\n\r\n    <div class=\"row\" style=\"margin-top: 10px;\"\r\n        *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].FileDataBase64 && attachmentsList[0].IsImage == true\">\r\n        <div class=\"col-sm-12\">\r\n            <div class=\"single-attachment-inline-preview-container\">\r\n                <img src=\"data:image/png;base64,{{attachmentsList[0].FileDataBase64}}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"row\" *ngIf=\"attachmentsList.length > 0 && attachmentsList[0] && attachmentsList[0].IsImage != true\">\r\n        <div class=\"col-sm-12\">\r\n            <mat-form-field>\r\n                <mat-label>{{fileNameLabel}}</mat-label>\r\n                <input readonly matInput [(ngModel)]=\"attachmentsList[0].FileName\">\r\n            </mat-form-field>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n<ng-template #dialogAddAttachment>\r\n    <div class=\"container-fluid eqp-attachments-dialog-add-container\"\r\n        style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n        <form [formGroup]=\"newAttachmentForm\" (ngSubmit)=\"confirmAddAttachment()\" *ngIf=\"newAttachmentForm\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\"> {{addButtonLabel}} {{ newAttachment.AttachmentType ==\r\n                    attachmentType.FILE ?\r\n                    'File' : 'Link'}} </div>\r\n            </div>\r\n            <div class=\"row\" style=\"margin-top: 20px;\">\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == attachmentType.FILE\">\r\n                    <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n                        name=\"file_attachment\" type=\"file\" (change)=\"onFileInputChange($event)\"\r\n                        [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n                    <button (click)=\"imageInput.click()\" type=\"button\" style=\"margin-left: 10px;\" id=\"file_attachment\"\r\n                        mat-raised-button color=\"primary\" [disabled]=\"showCropImage == true\"\r\n                        class=\"mb-2 btn btn-primary eqp-attachments-upload-btn\" *ngIf=\"(loadMultipleFiles != true && !newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length == 0)\">\r\n                        <mat-icon>cloud_upload</mat-icon>\r\n                        {{uploadFileLabel}}\r\n                    </button>\r\n                    <button (click)=\"abortFile()\" type=\"button\" style=\"margin-left: 10px;\" mat-raised-button\r\n                        *ngIf=\"(loadMultipleFiles != true && newAttachment.FileDataBase64) || (loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0)\" class=\"mb-2 eqp-attachments-delete-btn\">\r\n                        <mat-icon>delete</mat-icon> {{deleteLabel}}\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2 || (selectedFile && loadMultipleFiles != true)\">\r\n                    <mat-form-field style=\"width: 100%;\">\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input formControlName=\"name\" matInput [(ngModel)]=\"newAttachment.FileName\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-sm-12\" *ngIf=\"newAttachment.AttachmentType == 2\">\r\n                    <mat-form-field style=\"width: 100%;\">\r\n                        <mat-label> Link </mat-label>\r\n                        <input formControlName=\"path\" required matInput [(ngModel)]=\"newAttachment.FilePath\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta l'elenco dei nomi dei file caricati contemporaneamente (visibile solo se loadMultipleFiles = TRUE e se ci sono realmente pi\u00F9 file senza link) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && newMultipleAttachments && newMultipleAttachments.length > 0 && newMultipleAttachments[0].AttachmentType != attachmentType.LINK\">\r\n                <div class=\"col-12\" *ngFor=\"let attach of newMultipleAttachments\">\r\n                    <mat-form-field style=\"width: 100%\">\r\n                        <mat-label> {{fileNameLabel}} </mat-label>\r\n                        <input disabled matInput [(ngModel)]=\"attach.FileName\" [ngModelOptions]=\"{standalone: true}\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento MULTIPLO ma \u00E8 stata selezionata una sola immagine (quindi \u00E8 entrato in gioco anche il croppie) -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles == true && showCropImage != true && newMultipleAttachments && newMultipleAttachments.length == 1 && newMultipleAttachments[0].IsImage == true\" style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newMultipleAttachments[0].FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Riporta la preview dell'immagine quando \u00E8 richiesto il caricamento SINGOLO ed \u00E8 stata selezionata un'immagine -->\r\n            <div class=\"row\" *ngIf=\"loadMultipleFiles != true && showCropImage != true && newAttachment.FileDataBase64 && newAttachment.IsImage == true\" style=\"margin-top: 10px;\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"single-attachment-inline-preview-container\">\r\n                        <img src=\"data:image/png;base64,{{newAttachment.FileDataBase64}}\">\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n            <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\r\n\r\n            <div class=\"row mt-2\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                        [disabled]=\"showCropImage == true || (loadMultipleFiles != true && newAttachmentForm?.disabled == true) || disableSave()\">\r\n                        {{saveLabel}}\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" (click)=\"close()\"\r\n                        [disabled]=\"showCropImage == true\" type=\"button\">\r\n                        {{exitLabel}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #inlinePreviewTemplate let-row=\"row\">\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <img src=\"data:image/png;base64,{{row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64}}\">\r\n    </div>\r\n    <div class=\"inline-preview-container\" *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\" (click)=\"openPreviewDialog(row)\">\r\n        <i [ngClass]=\"getAttachmentIcon(row)\"></i>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #dialogPreview>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important;\" *ngIf=\"selectedAttachment\">\r\n        <div class=\"row\">\r\n            <div class=\"header-title-standard\">\r\n                {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-2\">\r\n            <!-- ANTEPRIMA IMMAGINE -->\r\n            <div class=\"col-12 text-center preview-container\" *ngIf=\"selectedAttachment.IsImage\">\r\n                <img class=\"image-preview\"\r\n                    src=\"data:image/png;base64,{{selectedAttachment.FileDataBase64 ? selectedAttachment.FileDataBase64 : selectedAttachment.FileThumbnailBase64}}\">\r\n            </div>\r\n\r\n            <!-- ANTEPRIMA LINK -->\r\n            <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n                <iframe class=\"link-preview\" [src]=\"selectedAttachment.TrustedUrl\"\r\n                    [title]=\"selectedAttachment.FileName\"></iframe>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row mt-3\">\r\n            <div class=\"col-sm-12 text-right\">\r\n                <button class=\"btn btn-primary mat-raised-button eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                    (click)=\"viewAttachment(selectedAttachment)\"\r\n                    *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n                    {{downloadLabel}}\r\n                </button>\r\n                <button class=\"btn mat-raised-button eqp-attachments-exit-btn\" mat-dialog-close type=\"button\"\r\n                    (click)=\"selectedAttachment = null\">\r\n                    {{exitLabel}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\r\n\r\n    <!-- \r\n        Pulsanti per l'aggiunta di un file o un link. Ne viene visualizzato uno se:\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di pi\u00F9 allegati (multipleAttachment == true)\r\n        OPPURE\r\n        - gli allowedTypes sono stati specificati, nell'array ne \u00E8 presente uno solo, quello inserito \u00E8 AttachmentType.FILE (o AttachmentType.LINK) \r\n        e sono nella gestione di un singolo allegato (multipleAttachment == true) e non ne \u00E8 ancora stato selezionato uno (ovvero attachmentsList non esiste o non ha elementi)\r\n    -->\r\n    <button class=\"btn btn-primary  mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length == 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\"\r\n        (click)=\"openModalAddAttachment(allowedTypes[0])\" [disabled]=\"isDisabled\">\r\n        <!-- Per l'aggiunta dei file mostro un'icona diversa dall'aggiunta dei link -->\r\n        <mat-icon *ngIf=\"allowedTypes[0] == 1\">cloud_upload</mat-icon>\r\n        <i class=\"fas fa-link\" *ngIf=\"allowedTypes[0] == 2\"></i>\r\n        <span style=\"margin-left: 10px;\">{{addButtonLabel}} {{allowedTypes[0] == 1 ? \"file\" : \"link\"}}</span>\r\n    </button>\r\n\r\n\r\n    <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n    <button class=\"btn btn-primary mb-4 mr-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n        [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n        *ngIf=\"allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n        <mat-icon *ngIf=\"multipleAttachment != true\">cloud_upload</mat-icon>\r\n        <mat-icon *ngIf=\"multipleAttachment == true\">add</mat-icon>\r\n        <span style=\"margin-left: 0px;\"> {{addButtonLabel}} </span>\r\n    </button>\r\n    <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(1)\" class=\"eqp-attachments-file-btn\">\r\n            <i class=\"fas fa-file\"></i>\r\n            <span style=\"margin-left: 10px;\">File</span>\r\n        </button>\r\n        <button mat-menu-item (click)=\"openModalAddAttachment(2)\" class=\"eqp-attachments-link-btn\">\r\n            <i class=\"fas fa-link\"></i>\r\n            <span style=\"margin-left: 10px;\">Link</span>\r\n        </button>\r\n    </mat-menu>\r\n</ng-template>\r\n\r\n\r\n<ng-template #croppieTemplate let-form=\"form\">\r\n    <div class=\"row mt-2 mb-2\" [formGroup]=\"form\">\r\n        <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n            <span class=\"mr-1\">Max H(px):</span>\r\n            <mat-form-field>\r\n                <input formControlName=\"customHeight\" type=\"number\" matInput [(ngModel)]=\"customHeight\"\r\n                    (change)=\"onDimensionsChange('H')\">\r\n            </mat-form-field>\r\n\r\n            <span class=\"ml-2 mr-1\">Max W(px):</span>\r\n            <mat-form-field>\r\n                <input formControlName=\"customWidth\" type=\"number\" matInput [(ngModel)]=\"customWidth\"\r\n                    (change)=\"onDimensionsChange('W')\">\r\n            </mat-form-field>\r\n\r\n            <button class=\"btn btn-primary mat-raised-button ml-2\" (click)=\"restoreOriginalDimensions()\"\r\n                [disabled]=\"customWidth == originalWidth && customHeight == originalHeight\">\r\n                <mat-icon style=\"vertical-align: middle;\">replay</mat-icon>\r\n            </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"row justify-content-center\">\r\n        <div style=\"max-height: 450px; max-width: 450px;\">\r\n            <image-cropper [imageChangedEvent]=\"imageChangedEvent\" [maintainAspectRatio]=\"false\"\r\n                [autoCrop]=\"false\" [containWithinAspectRatio]=\"false\" [aspectRatio]=\"4/3\"\r\n                [cropperMinWidth]=\"128\" [onlyScaleDown]=\"true\" [roundCropper]=\"false\" [canvasRotation]=\"0\"\r\n                [transform]=\"transform\" [alignImage]=\"'left'\" format=\"png\" (imageCropped)=\"imageCropped($event)\"\r\n                [resizeToWidth]=\"customWidth\" [resizeToHeight]=\"customHeight\">\r\n            </image-cropper>\r\n        </div>\r\n    </div>\r\n    <div class=\"row justify-content-center mt-2\">\r\n        <div style=\"max-height: 450px; max-width: 450px;\">\r\n            <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn mr-2\" type=\"button\"\r\n                (click)=\"confirmCrop()\">\r\n                {{confirmLabel}}\r\n            </button>\r\n            <button class=\"btn mat-raised-button eqp-attachments-abort-btn\" type=\"button\" (click)=\"abortFile()\">\r\n                {{abortLabel}}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>",
                 styles: [".eqp-attachments-header-title{font-weight:700;font-size:19px;line-height:24px;margin-bottom:auto}.single-attachment-inline-preview-container{max-height:400px;max-width:400px;display:flex;align-items:center}.single-attachment-inline-preview-container img{max-width:100%;max-height:120px}.inline-preview-container{max-height:100px;max-width:100px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer}.inline-preview-container img{max-width:100%;max-height:100px}.inline-preview-container i{font-size:25px;margin:auto}.preview-container{max-height:60vh;max-width:100%}.preview-container .image-preview{max-width:100%;max-height:100%}.preview-container .link-preview{width:70vw;height:55vh}"]
             })
         ], EqpAttachmentsComponent);