@eqproject/eqp-attachments 0.1.16 → 0.1.18

package/fesm5/eqproject-eqp-attachments.js

@@ -1,13 +1,14 @@
 import { __decorate, __awaiter, __generator, __spread, __values } from 'tslib';
+import { HttpClient } from '@angular/common/http';
 import { ɵɵdefineInjectable, Injectable, EventEmitter, ChangeDetectorRef, Input, Output, ViewChild, Component, NgModule } from '@angular/core';
 import { Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
-import imageCompression from 'browser-image-compression';
-import { TooltipPositionType, TypeColumn, EqpTableModule } from '@eqproject/eqp-table';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import Swal from 'sweetalert2';
 import { DomSanitizer } from '@angular/platform-browser';
-import { HttpClient } from '@angular/common/http';
+import { TooltipPositionType, TypeColumn, EqpTableModule } from '@eqproject/eqp-table';
+import imageCompression from 'browser-image-compression';
+import * as JSZip from 'jszip';
+import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
+import Swal from 'sweetalert2';
 import { CommonModule } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -40,12 +41,6 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatNativeDateModule } from '@angular/material/core';
 
-var AttachmentType;
-(function (AttachmentType) {
-    AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
-    AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
-})(AttachmentType || (AttachmentType = {}));
-
 var AttachmentHelperService = /** @class */ (function () {
     function AttachmentHelperService() {
     }
@@ -105,6 +100,12 @@ var AttachmentHelperService = /** @class */ (function () {
     return AttachmentHelperService;
 }());
 
+var AttachmentType;
+(function (AttachmentType) {
+    AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
+    AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
+})(AttachmentType || (AttachmentType = {}));
+
 var EqpAttachmentDialogService = /** @class */ (function () {
     function EqpAttachmentDialogService() {
     }
@@ -213,12 +214,14 @@ var EqpAttachmentDialogService = /** @class */ (function () {
     return EqpAttachmentDialogService;
 }());
 
-var toBase64 = function (file) { return new Promise(function (resolve, reject) {
-    var reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = function () { return resolve(reader.result.toString()); };
-    reader.onerror = function (error) { return reject(error); };
-}); };
+var toBase64 = function (file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () { return resolve(reader.result.toString()); };
+        reader.onerror = function (error) { return reject(error); };
+    });
+};
 var ɵ0 = toBase64;
 var EqpAttachmentsComponent = /** @class */ (function () {
     function EqpAttachmentsComponent(dialog, formBuilder, sanitizer, http, cd) {
@@ -297,7 +300,11 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         /**
          * Opzioni per la compressione delle immagini caricate.
          */
-        this.compressionOptions = { maxSizeMB: 0.5, maxWidthOrHeight: 1920, useWebWorker: true };
+        this.compressionOptions = {
+            maxSizeMB: 0.5,
+            maxWidthOrHeight: 1920,
+            useWebWorker: true
+        };
         /**
          * Array di AttachmentType che si possono aggiungere
          */
@@ -317,6 +324,22 @@ var EqpAttachmentsComponent = /** @class */ (function () {
          * per la tabella contenente l'elenco degli allegati
          */
         this.tablePaginatorSize = null;
+        /**
+         * 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
          */
@@ -375,11 +398,12 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         this.showCropImage = false;
         //#endregion
         //#region Proprietà per gestione ridimensionamento file di tipo image
-        this.imageChangedEvent = '';
-        this.croppedImage = '';
+        this.imageChangedEvent = "";
+        this.croppedImage = "";
         this.transform = {};
         //#endregion
         this.AttachmentType = 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
@@ -392,7 +416,7 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         if (!this.allowedTypes || this.allowedTypes.length == 0)
             this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK];
         else if (this.allowedTypes.find(function (t) { return t != AttachmentType.FILE && t != AttachmentType.LINK; })) {
-            EqpAttachmentDialogService.Warning("Almeno uno degli AttachmentType selezionati nel parametro \"allowedTypes\" non esiste.");
+            EqpAttachmentDialogService.Warning('Almeno uno degli AttachmentType selezionati nel parametro "allowedTypes" non esiste.');
             this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK];
         }
         //Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
@@ -424,27 +448,45 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         this.attachmentsColumns = [];
         if (this.disableAction != true) {
             this.attachmentsColumns.push({
-                key: "action", display: "",
-                type: TypeColumn.MenuAction, buttonMenuIcon: "more_vert", styles: { flex: "0 0 6%" },
+                key: "action",
+                display: "",
+                type: TypeColumn.MenuAction,
+                buttonMenuIcon: "more_vert",
+                styles: { flex: "0 0 6%" },
                 actions: [
-                    { name: this.deleteLabel, icon: "delete", fn: function (element, index, col) { return _this.deleteAttachment(element); } },
-                ],
+                    { name: this.deleteLabel, icon: "delete", fn: function (element, index, col) { return _this.deleteAttachment(element); } }
+                ]
             });
         }
         var downloadColumn = {
-            key: "attachment", display: "",
-            type: TypeColumn.SimpleAction, styles: { flex: "0 0 6%" },
+            key: "attachment",
+            display: "",
+            type: TypeColumn.SimpleAction,
+            styles: { flex: "0 0 6%" },
             actions: [
                 {
-                    name: '', fontawesome: true,
-                    icon: function (element) { return _this.showInlinePreview ? (element.AttachmentType == AttachmentType.FILE ? "fas fa-cloud-download-alt" : "fas fa-external-link-alt") : _this.getAttachmentIcon(element); },
+                    name: "",
+                    fontawesome: true,
+                    icon: function (element) {
+                        return _this.showInlinePreview
+                            ? element.AttachmentType == AttachmentType.FILE
+                                ? "fas fa-cloud-download-alt"
+                                : "fas fa-external-link-alt"
+                            : _this.getAttachmentIcon(element);
+                    },
                     fn: function (element, col, elementIndex) { return _this.viewAttachment(element); },
-                    tooltip: { tooltipText: function (element) { return element.AttachmentType == AttachmentType.FILE ? _this.downloadLabel : _this.openLinkLabel; }, tooltipPosition: this.downloadTooltipPosition }
-                },
+                    tooltip: {
+                        tooltipText: function (element) {
+                            return element.AttachmentType == AttachmentType.FILE ? _this.downloadLabel : _this.openLinkLabel;
+                        },
+                        tooltipPosition: this.downloadTooltipPosition
+                    }
+                }
             ]
         };
         var inlinePreviewColumn = {
-            key: "InlinePreview", display: this.previewLabel,
+            key: "InlinePreview",
+            display: this.previewLabel,
             type: TypeColumn.ExternalTemplate,
             externalTemplate: this.inlinePreviewTemplate,
             styles: { flex: "0 0 10%" }
@@ -487,7 +529,7 @@ var EqpAttachmentsComponent = /** @class */ (function () {
      */
     EqpAttachmentsComponent.prototype.viewAttachment = function (attachment) {
         if (attachment.AttachmentType == AttachmentType.LINK) {
-            window.open(attachment.FilePath, '_blank');
+            window.open(attachment.FilePath, "_blank");
             return;
         }
         if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
@@ -517,6 +559,7 @@ var EqpAttachmentsComponent = /** @class */ (function () {
      * 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)) {
@@ -531,8 +574,8 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
             disableClose: true,
             hasBackdrop: true,
-            width: '60%',
-            maxHeight: '80%'
+            width: "60%",
+            maxHeight: "80%"
         });
     };
     EqpAttachmentsComponent.prototype.createAttachmentForm = function () {
@@ -571,7 +614,10 @@ var EqpAttachmentsComponent = /** @class */ (function () {
             }
         }
         else {
-            return this.newMultipleAttachments.filter(function (p) { return (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) || (p.AttachmentType == AttachmentType.LINK && !p.FilePath); }).length > 0;
+            return (this.newMultipleAttachments.filter(function (p) {
+                return (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) ||
+                    (p.AttachmentType == AttachmentType.LINK && !p.FilePath);
+            }).length > 0);
         }
     };
     EqpAttachmentsComponent.prototype.confirmAddAttachment = function () {
@@ -618,8 +664,12 @@ var EqpAttachmentsComponent = /** @class */ (function () {
                         }
                         if (!(this.getAttachmentEndpoint && this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.getAttachmentByID()
-                                .then(function (res) { _this.selectedAttachment.FileDataBase64 = res.FileDataBase64; })
-                                .catch(function (err) { EqpAttachmentDialogService.Error(err); })];
+                                .then(function (res) {
+                                _this.selectedAttachment.FileDataBase64 = res.FileDataBase64;
+                            })
+                                .catch(function (err) {
+                                EqpAttachmentDialogService.Error(err);
+                            })];
                     case 1:
                         _a.sent();
                         _a.label = 2;
@@ -627,7 +677,9 @@ var EqpAttachmentsComponent = /** @class */ (function () {
                         if (this.selectedAttachment.AttachmentType == AttachmentType.LINK) {
                             this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedAttachment.FilePath);
                         }
-                        else if (this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64 && !this.selectedAttachment.FileThumbnailBase64) {
+                        else if (this.selectedAttachment.IsImage &&
+                            !this.selectedAttachment.FileDataBase64 &&
+                            !this.selectedAttachment.FileThumbnailBase64) {
                             EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima dell'allegato, file mancante.");
                             return [2 /*return*/];
                         }
@@ -646,7 +698,7 @@ var EqpAttachmentsComponent = /** @class */ (function () {
                         }
                         this.dialog.open(this.dialogPreview, {
                             disableClose: true,
-                            hasBackdrop: true,
+                            hasBackdrop: true
                         });
                         return [2 /*return*/];
                 }
@@ -670,28 +722,32 @@ var EqpAttachmentsComponent = /** @class */ (function () {
      * 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*/];
-                        //Memorizza i dati per l'allegato        
-                        _a = this;
+                        this.showZipSpinner = true;
+                        //Memorizza i dati per l'allegato
+                        _b = this;
                         return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFile, false)];
                     case 1:
-                        //Memorizza i dati per l'allegato        
-                        _a.newAttachment = _b.sent();
+                        //Memorizza i dati per l'allegato
+                        _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];
@@ -702,37 +758,91 @@ var EqpAttachmentsComponent = /** @class */ (function () {
                         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];
                 }
             });
         });
@@ -753,11 +863,11 @@ var EqpAttachmentsComponent = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         newAttachment = {};
-                        //Memorizza i dati per l'allegato        
+                        //Memorizza i dati per l'allegato
                         newAttachment.AttachmentType = 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)];
@@ -810,9 +920,30 @@ var EqpAttachmentsComponent = /** @class */ (function () {
     EqpAttachmentsComponent.prototype.checkAcceptedFiles = function () {
         var e_1, _a;
         var _this = this;
-        if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video"))
-            || (this.loadMultipleFiles == true && __spread(this.selectedFiles).filter(function (p) { return p.type.startsWith("video"); }).length > 0))
+        var _b, _c;
+        if (!this.allowVideo) {
+            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
@@ -829,8 +960,8 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         //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;
@@ -839,7 +970,7 @@ var EqpAttachmentsComponent = /** @class */ (function () {
             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; }
             }
@@ -871,15 +1002,15 @@ var EqpAttachmentsComponent = /** @class */ (function () {
             var image = new Image();
             image.src = e.target.result;
             image.onload = function (rs) {
-                _this.originalHeight = rs.currentTarget['height'];
-                _this.originalWidth = rs.currentTarget['width'];
+                _this.originalHeight = rs.currentTarget["height"];
+                _this.originalWidth = rs.currentTarget["width"];
                 if (_this.originalWidth > 1280) {
                     _this.customWidth = 1280;
                     _this.customHeight = Math.round((1280 * _this.originalHeight) / _this.originalWidth);
                 }
                 else {
-                    _this.customHeight = rs.currentTarget['height'];
-                    _this.customWidth = rs.currentTarget['width'];
+                    _this.customHeight = rs.currentTarget["height"];
+                    _this.customWidth = rs.currentTarget["width"];
                 }
             };
         };
@@ -908,18 +1039,18 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         /**
          * Comprime l'immagine passando come parametri le options create nell'oggetto sopra, e il file dal reader principale
          */
-        imageCompression(file, options).then((function (fileCompressed) {
+        imageCompression(file, options).then(function (fileCompressed) {
             var fileReader = new FileReader();
             //Faccio la push di ogni file all'interno dell'array di file dell'item da mandare al server
             fileReader.onload = function () {
                 var resultReader = fileReader.result;
-                var marker = ';base64,';
+                var marker = ";base64,";
                 self.newAttachment.FileDataBase64 = resultReader.substring(resultReader.indexOf(marker) + marker.length);
                 self.showCropImage = false;
                 self.newAttachmentForm.enable();
             };
             fileReader.readAsDataURL(fileCompressed);
-        }));
+        });
     };
     EqpAttachmentsComponent.prototype.confirmCrop = function () {
         this.imageCropper.crop();
@@ -928,9 +1059,9 @@ var EqpAttachmentsComponent = /** @class */ (function () {
      * Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
      */
     EqpAttachmentsComponent.prototype.abortFile = function () {
-        this.imageChangedEvent = '';
+        this.imageChangedEvent = "";
         if (this.imageInput)
-            this.imageInput.nativeElement.value = '';
+            this.imageInput.nativeElement.value = "";
         this.selectedFile = null;
         this.selectedFiles = null;
         this.showCropImage = false;
@@ -1012,6 +1143,18 @@ var EqpAttachmentsComponent = /** @class */ (function () {
     __decorate([
         Input("tablePaginatorSize")
     ], EqpAttachmentsComponent.prototype, "tablePaginatorSize", void 0);
+    __decorate([
+        Input("allowVideo")
+    ], EqpAttachmentsComponent.prototype, "allowVideo", void 0);
+    __decorate([
+        Input("allowVideoCompression")
+    ], EqpAttachmentsComponent.prototype, "allowVideoCompression", void 0);
+    __decorate([
+        Input("videoFormatsNotAllowed")
+    ], EqpAttachmentsComponent.prototype, "videoFormatsNotAllowed", void 0);
+    __decorate([
+        Input("allowedMBForFile")
+    ], EqpAttachmentsComponent.prototype, "allowedMBForFile", void 0);
     __decorate([
         Input("downloadTooltipPosition")
     ], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
@@ -1085,30 +1228,30 @@ var EqpAttachmentsComponent = /** @class */ (function () {
         Output("onComponentLoaded")
     ], EqpAttachmentsComponent.prototype, "onComponentLoaded", void 0);
     __decorate([
-        ViewChild('dialogAddAttachment', { static: true })
+        ViewChild("dialogAddAttachment", { static: true })
     ], EqpAttachmentsComponent.prototype, "dialogAddAttachment", void 0);
     __decorate([
-        ViewChild('dialogAddMultipleAttachment', { static: true })
+        ViewChild("dialogAddMultipleAttachment", { static: true })
     ], EqpAttachmentsComponent.prototype, "dialogAddMultipleAttachment", void 0);
     __decorate([
         ViewChild(ImageCropperComponent)
     ], EqpAttachmentsComponent.prototype, "imageCropper", void 0);
     __decorate([
-        ViewChild('imageInput')
+        ViewChild("imageInput")
     ], EqpAttachmentsComponent.prototype, "imageInput", void 0);
     __decorate([
-        ViewChild('attachmentTable', { static: false })
+        ViewChild("attachmentTable", { static: false })
     ], EqpAttachmentsComponent.prototype, "attachmentTable", void 0);
     __decorate([
-        ViewChild('inlinePreviewTemplate', { static: true })
+        ViewChild("inlinePreviewTemplate", { static: true })
     ], EqpAttachmentsComponent.prototype, "inlinePreviewTemplate", void 0);
     __decorate([
-        ViewChild('dialogPreview', { static: true })
+        ViewChild("dialogPreview", { static: true })
     ], EqpAttachmentsComponent.prototype, "dialogPreview", void 0);
     EqpAttachmentsComponent = __decorate([
         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>",
+            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 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);