@eqproject/eqp-attachments 0.1.17 → 0.1.18

package/README.md

@@ -88,6 +88,9 @@ export class AppModule {}
 | [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) |
 | [allowVideo] | `boolean` | `false` | no | Allow video upload |
+| [allowVideoCompression] | `boolean` | `false` | no | Allow compression in case of video upload |
+| [videoFormatsNotAllowed] | `string[]` | `["mkv", "avi"]` | no | List of video extensions rejected by the component|
+| [allowedMBForFile] | `number` | `100` | no | Maximum file dimension in MB |
  
 
 ### Outputs

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/platform-browser'), require('@eqproject/eqp-table'), require('browser-image-compression'), require('ngx-image-cropper'), require('sweetalert2'), require('@angular/common'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core')) :
-    typeof define === 'function' && define.amd ? define('@eqproject/eqp-attachments', ['exports', '@angular/common/http', '@angular/core', '@angular/forms', '@angular/material/dialog', '@angular/platform-browser', '@eqproject/eqp-table', 'browser-image-compression', 'ngx-image-cropper', 'sweetalert2', '@angular/common', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core'], factory) :
-    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-attachments'] = {}), global.ng.common.http, global.ng.core, global.ng.forms, global.ng.material.dialog, global.ng.platformBrowser, global.eqpTable, global.imageCompression, global.ngxImageCropper, global.Swal, global.ng.common, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core));
-}(this, (function (exports, http, core, forms, dialog, platformBrowser, eqpTable, imageCompression, ngxImageCropper, Swal, common, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, tooltip, snackBar, table, sort, paginator, core$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/platform-browser'), require('@eqproject/eqp-table'), require('browser-image-compression'), require('jszip'), require('ngx-image-cropper'), require('sweetalert2'), require('@angular/common'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core')) :
+    typeof define === 'function' && define.amd ? define('@eqproject/eqp-attachments', ['exports', '@angular/common/http', '@angular/core', '@angular/forms', '@angular/material/dialog', '@angular/platform-browser', '@eqproject/eqp-table', 'browser-image-compression', 'jszip', 'ngx-image-cropper', 'sweetalert2', '@angular/common', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core'], factory) :
+    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-attachments'] = {}), global.ng.common.http, global.ng.core, global.ng.forms, global.ng.material.dialog, global.ng.platformBrowser, global.eqpTable, global.imageCompression, global.JSZip, global.ngxImageCropper, global.Swal, global.ng.common, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core));
+}(this, (function (exports, http, core, forms, dialog, platformBrowser, eqpTable, imageCompression, JSZip, ngxImageCropper, Swal, common, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, tooltip, snackBar, table, sort, paginator, core$1) { 'use strict';
 
     imageCompression = imageCompression && Object.prototype.hasOwnProperty.call(imageCompression, 'default') ? imageCompression['default'] : imageCompression;
     Swal = Swal && Object.prototype.hasOwnProperty.call(Swal, 'default') ? Swal['default'] : Swal;
@@ -513,6 +513,18 @@
              * Abilitare caricamento video
              */
             this.allowVideo = false;
+            /**
+             * Abilitare la compressione al caricamento di un video (allowVideo dev'essere true)
+             */
+            this.allowVideoCompression = false;
+            /**
+             * Lista di formati video non ammessi
+             */
+            this.videoFormatsNotAllowed = ["mkv", "avi"];
+            /**
+             * dimensione massima ammessa per file
+             */
+            this.allowedMBForFile = 100;
             /**
              * Input per definire le label da usare nel componente
              */
@@ -576,6 +588,7 @@
             this.transform = {};
             //#endregion
             this.AttachmentType = exports.AttachmentType;
+            this.showZipSpinner = false;
         }
         EqpAttachmentsComponent.prototype.ngOnInit = function () {
             //Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
@@ -731,6 +744,7 @@
          * Apre la modale per la definizione dei parametri del nuovo file
          */
         EqpAttachmentsComponent.prototype.openModalAddAttachment = function (attachmentType) {
+            this.showZipSpinner = false;
             //Se è stato richiesto il caricamento di un LINK o è impostato il caricamento di FILE SINGOLO allora apre la modale per
             //il caricamento singolo del file altrimenti apre quella per il caricamento multiplo
             // if (attachmentType == AttachmentType.LINK || (attachmentType == AttachmentType.FILE && this.loadMultipleFiles != true)) {
@@ -893,28 +907,32 @@
          * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
          */
         EqpAttachmentsComponent.prototype.onFileInputChange = function (event) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var _a, checkOnlyImage, base64Result, i, newAttachment, checkOnlyImage;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _b, checkOnlyImage, base64Result, _c, i, newAttachment, checkOnlyImage;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             this.showCropImage = false;
-                            if (!(__spread(event.target.files).length == 1 || this.loadMultipleFiles != true)) return [3 /*break*/, 5];
+                            if (!(__spread(event.target.files).length == 1 || this.loadMultipleFiles != true)) return [3 /*break*/, 7];
                             this.selectedFile = event.target.files[0];
                             this.selectedFiles = event.target.files;
                             if (!this.selectedFile)
                                 return [2 /*return*/];
+                            this.showZipSpinner = true;
                             //Memorizza i dati per l'allegato
-                            _a = this;
+                            _b = this;
                             return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFile, false)];
                         case 1:
                             //Memorizza i dati per l'allegato
-                            _a.newAttachment = _b.sent();
+                            _b.newAttachment = _d.sent();
                             this.newMultipleAttachments = new Array();
                             this.newMultipleAttachments.push(this.newAttachment);
                             checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
-                            if (checkOnlyImage == false)
+                            if (checkOnlyImage == false) {
+                                this.showZipSpinner = false;
                                 return [2 /*return*/];
+                            }
                             if (this.loadMultipleFiles == true && __spread(event.target.files).length == 1)
                                 this.createAttachmentForm();
                             if (!(this.newAttachment.IsImage == true)) return [3 /*break*/, 2];
@@ -925,37 +943,91 @@
                             this.newAttachmentForm.controls["customHeight"].enable();
                             this.showCropImage = true;
                             this.imageChangedEvent = event;
-                            return [3 /*break*/, 4];
+                            return [3 /*break*/, 6];
                         case 2:
                             this.showCropImage = false;
                             return [4 /*yield*/, this.getBase64FromFile(this.selectedFile)];
                         case 3:
-                            base64Result = _b.sent();
+                            base64Result = _d.sent();
+                            if (!(this.allowVideo && this.allowVideoCompression && this.selectedFile.type.startsWith("video"))) return [3 /*break*/, 5];
+                            _c = this;
+                            return [4 /*yield*/, this.zipVideo(this.newAttachment, base64Result.Base64File)];
+                        case 4:
+                            _c.newAttachment = _d.sent();
+                            return [3 /*break*/, 6];
+                        case 5:
                             this.newAttachment.FileDataBase64 = base64Result.Base64File;
                             this.newAttachment.FileContentType = base64Result.ContentType;
-                            _b.label = 4;
-                        case 4: return [3 /*break*/, 9];
-                        case 5:
+                            _d.label = 6;
+                        case 6:
+                            this.showZipSpinner = false;
+                            return [3 /*break*/, 14];
+                        case 7:
                             this.selectedFiles = event.target.files;
                             if (!this.selectedFiles || this.selectedFiles.length == 0)
                                 return [2 /*return*/];
                             this.newMultipleAttachments = new Array();
+                            this.showZipSpinner = true;
                             i = 0;
-                            _b.label = 6;
-                        case 6:
-                            if (!(i < this.selectedFiles.length)) return [3 /*break*/, 9];
+                            _d.label = 8;
+                        case 8:
+                            if (!(i < ((_a = this.selectedFiles) === null || _a === void 0 ? void 0 : _a.length))) return [3 /*break*/, 13];
                             return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFiles[i], true)];
-                        case 7:
-                            newAttachment = _b.sent();
+                        case 9:
+                            newAttachment = _d.sent();
+                            if (!(this.allowVideo && this.allowVideoCompression && this.selectedFiles[i].type.startsWith("video"))) return [3 /*break*/, 11];
+                            return [4 /*yield*/, this.zipVideo(newAttachment, newAttachment.FileDataBase64)];
+                        case 10:
+                            newAttachment = _d.sent();
+                            _d.label = 11;
+                        case 11:
                             checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
-                            if (checkOnlyImage == false)
+                            if (checkOnlyImage == false) {
+                                this.showZipSpinner = false;
                                 return [2 /*return*/];
+                            }
                             this.newMultipleAttachments.push(newAttachment);
-                            _b.label = 8;
-                        case 8:
+                            _d.label = 12;
+                        case 12:
                             i++;
-                            return [3 /*break*/, 6];
-                        case 9: return [2 /*return*/];
+                            return [3 /*break*/, 8];
+                        case 13:
+                            this.showZipSpinner = false;
+                            _d.label = 14;
+                        case 14: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        EqpAttachmentsComponent.prototype.zipVideo = function (newAttachment, base64) {
+            return __awaiter(this, void 0, void 0, function () {
+                var zip, videoFolder, content, base64Result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            zip = new JSZip();
+                            videoFolder = zip.folder("videos");
+                            videoFolder.file(newAttachment.FileName, base64, { base64: true });
+                            return [4 /*yield*/, zip.generateAsync({
+                                    type: "blob",
+                                    compression: "DEFLATE",
+                                    compressionOptions: {
+                                        /* compression level ranges from 1 (best speed) to 9 (best compression) */
+                                        level: 9
+                                    }
+                                })];
+                        case 1:
+                            content = _a.sent();
+                            return [4 /*yield*/, this.getBase64FromFile(content)];
+                        case 2:
+                            base64Result = _a.sent();
+                            newAttachment.FileContentType = content.type;
+                            newAttachment.FileName = newAttachment.FileName.replace(/\.[^/.]+$/, "") + ".zip";
+                            newAttachment.FileExtension = newAttachment.FileName.substring(newAttachment.FileName.lastIndexOf(".") + 1);
+                            newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(content.type);
+                            newAttachment.FileDataBase64 = base64Result.Base64File;
+                            newAttachment.FileContentType = base64Result.ContentType;
+                            return [2 /*return*/, newAttachment];
                     }
                 });
             });
@@ -980,7 +1052,7 @@
                             newAttachment.AttachmentType = exports.AttachmentType.FILE;
                             newAttachment.FileContentType = currentFile.type;
                             newAttachment.FileName = currentFile.name;
-                            newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(".") + 1);
+                            newAttachment.FileExtension = currentFile.name.substring(currentFile.name.lastIndexOf(".") + 1);
                             newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
                             if (!(getBase64 == true)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.getBase64FromFile(currentFile)];
@@ -1033,11 +1105,30 @@
         EqpAttachmentsComponent.prototype.checkAcceptedFiles = function () {
             var e_1, _a;
             var _this = this;
+            var _b, _c;
             if (!this.allowVideo) {
-                if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
+                if ((!this.loadMultipleFiles && this.selectedFile.type.startsWith("video")) ||
                     (this.loadMultipleFiles == true && __spread(this.selectedFiles).filter(function (p) { return p.type.startsWith("video"); }).length > 0))
                     return false;
             }
+            else {
+                if ((!this.loadMultipleFiles &&
+                    this.videoFormatsNotAllowed.includes((_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.name.substring(this.selectedFile.name.lastIndexOf(".") + 1))) ||
+                    (this.loadMultipleFiles &&
+                        this.selectedFiles &&
+                        __spread(this.selectedFiles).filter(function (p) {
+                            return _this.videoFormatsNotAllowed.includes(p.name.substring(p.name.lastIndexOf(".") + 1));
+                        }).length > 0))
+                    return false;
+            }
+            if (!this.loadMultipleFiles && ((_c = this.selectedFile) === null || _c === void 0 ? void 0 : _c.size) / (1024 * 1024) > this.allowedMBForFile) {
+                return false;
+            }
+            if (this.loadMultipleFiles &&
+                this.selectedFiles &&
+                __spread(this.selectedFiles).filter(function (p) { var _a; return ((_a = p) === null || _a === void 0 ? void 0 : _a.size) / (1024 * 1024) > _this.allowedMBForFile; }).length > 0) {
+                return false;
+            }
             if (this.acceptedFileTypes == "*")
                 return true;
             //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
@@ -1054,8 +1145,8 @@
             //Questo controllo permette di gestire le casistiche per cui vengono indicati come tipi validi, ad esempio, 'image/*'
             if (!accepted && this.loadMultipleFiles != true) {
                 try {
-                    for (var _b = __values(this.acceptedFileTypes.split(",").filter(function (t) { return t.includes("*"); })), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var t = _c.value;
+                    for (var _d = __values(this.acceptedFileTypes.split(",").filter(function (t) { return t.includes("*"); })), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var t = _e.value;
                         accepted = this.selectedFile.type.startsWith(t.split("*")[0]);
                         if (accepted)
                             break;
@@ -1064,7 +1155,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -1240,6 +1331,15 @@
         __decorate([
             core.Input("allowVideo")
         ], EqpAttachmentsComponent.prototype, "allowVideo", void 0);
+        __decorate([
+            core.Input("allowVideoCompression")
+        ], EqpAttachmentsComponent.prototype, "allowVideoCompression", void 0);
+        __decorate([
+            core.Input("videoFormatsNotAllowed")
+        ], EqpAttachmentsComponent.prototype, "videoFormatsNotAllowed", void 0);
+        __decorate([
+            core.Input("allowedMBForFile")
+        ], EqpAttachmentsComponent.prototype, "allowedMBForFile", void 0);
         __decorate([
             core.Input("downloadTooltipPosition")
         ], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
@@ -1336,7 +1436,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                [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>",
+                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 eqp-attachments-save-btn mr-2\" type=\"submit\"\r\n                        [disabled]=\"showCropImage == true || (loadMultipleFiles != true && newAttachmentForm?.disabled == true) || disableSave()\">\r\n                        <span *ngIf=\"showZipSpinner\" class=\"spinner-border spinner-border-sm eqp-attachments-save-spinner\" role=\"status\" aria-hidden=\"true\"></span>\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);