@eqproject/eqp-attachments 0.1.16 → 0.1.18

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('ngx-image-cropper'), require('browser-image-compression'), require('@eqproject/eqp-table'), require('@angular/material/dialog'), require('sweetalert2'), require('@angular/platform-browser'), require('@angular/common/http'), 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/core', '@angular/forms', 'ngx-image-cropper', 'browser-image-compression', '@eqproject/eqp-table', '@angular/material/dialog', 'sweetalert2', '@angular/platform-browser', '@angular/common/http', '@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.core, global.ng.forms, global.ngxImageCropper, global.imageCompression, global.eqpTable, global.ng.material.dialog, global.Swal, global.ng.platformBrowser, global.ng.common.http, 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, core, forms, ngxImageCropper, imageCompression, eqpTable, dialog, Swal, platformBrowser, http, 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;
@@ -226,11 +226,6 @@
         return value;
     }
 
-    (function (AttachmentType) {
-        AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
-        AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
-    })(exports.AttachmentType || (exports.AttachmentType = {}));
-
     var AttachmentHelperService = /** @class */ (function () {
         function AttachmentHelperService() {
         }
@@ -290,6 +285,12 @@
         return AttachmentHelperService;
     }());
 
+
+    (function (AttachmentType) {
+        AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
+        AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
+    })(exports.AttachmentType || (exports.AttachmentType = {}));
+
     var EqpAttachmentDialogService = /** @class */ (function () {
         function EqpAttachmentDialogService() {
         }
@@ -398,12 +399,14 @@
         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) {
@@ -482,7 +485,11 @@
             /**
              * 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
              */
@@ -502,6 +509,22 @@
              * 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
              */
@@ -560,11 +583,12 @@
             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 = 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
@@ -577,7 +601,7 @@
             if (!this.allowedTypes || this.allowedTypes.length == 0)
                 this.allowedTypes = [exports.AttachmentType.FILE, exports.AttachmentType.LINK];
             else if (this.allowedTypes.find(function (t) { return t != exports.AttachmentType.FILE && t != exports.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 = [exports.AttachmentType.FILE, exports.AttachmentType.LINK];
             }
             //Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
@@ -609,27 +633,45 @@
             this.attachmentsColumns = [];
             if (this.disableAction != true) {
                 this.attachmentsColumns.push({
-                    key: "action", display: "",
-                    type: eqpTable.TypeColumn.MenuAction, buttonMenuIcon: "more_vert", styles: { flex: "0 0 6%" },
+                    key: "action",
+                    display: "",
+                    type: eqpTable.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: eqpTable.TypeColumn.SimpleAction, styles: { flex: "0 0 6%" },
+                key: "attachment",
+                display: "",
+                type: eqpTable.TypeColumn.SimpleAction,
+                styles: { flex: "0 0 6%" },
                 actions: [
                     {
-                        name: '', fontawesome: true,
-                        icon: function (element) { return _this.showInlinePreview ? (element.AttachmentType == exports.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 == exports.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 == exports.AttachmentType.FILE ? _this.downloadLabel : _this.openLinkLabel; }, tooltipPosition: this.downloadTooltipPosition }
-                    },
+                        tooltip: {
+                            tooltipText: function (element) {
+                                return element.AttachmentType == exports.AttachmentType.FILE ? _this.downloadLabel : _this.openLinkLabel;
+                            },
+                            tooltipPosition: this.downloadTooltipPosition
+                        }
+                    }
                 ]
             };
             var inlinePreviewColumn = {
-                key: "InlinePreview", display: this.previewLabel,
+                key: "InlinePreview",
+                display: this.previewLabel,
                 type: eqpTable.TypeColumn.ExternalTemplate,
                 externalTemplate: this.inlinePreviewTemplate,
                 styles: { flex: "0 0 10%" }
@@ -672,7 +714,7 @@
          */
         EqpAttachmentsComponent.prototype.viewAttachment = function (attachment) {
             if (attachment.AttachmentType == exports.AttachmentType.LINK) {
-                window.open(attachment.FilePath, '_blank');
+                window.open(attachment.FilePath, "_blank");
                 return;
             }
             if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
@@ -702,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)) {
@@ -716,8 +759,8 @@
             this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
                 disableClose: true,
                 hasBackdrop: true,
-                width: '60%',
-                maxHeight: '80%'
+                width: "60%",
+                maxHeight: "80%"
             });
         };
         EqpAttachmentsComponent.prototype.createAttachmentForm = function () {
@@ -756,7 +799,10 @@
                 }
             }
             else {
-                return this.newMultipleAttachments.filter(function (p) { return (p.AttachmentType == exports.AttachmentType.FILE && !p.FileDataBase64) || (p.AttachmentType == exports.AttachmentType.LINK && !p.FilePath); }).length > 0;
+                return (this.newMultipleAttachments.filter(function (p) {
+                    return (p.AttachmentType == exports.AttachmentType.FILE && !p.FileDataBase64) ||
+                        (p.AttachmentType == exports.AttachmentType.LINK && !p.FilePath);
+                }).length > 0);
             }
         };
         EqpAttachmentsComponent.prototype.confirmAddAttachment = function () {
@@ -803,8 +849,12 @@
                             }
                             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;
@@ -812,7 +862,9 @@
                             if (this.selectedAttachment.AttachmentType == exports.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*/];
                             }
@@ -831,7 +883,7 @@
                             }
                             this.dialog.open(this.dialogPreview, {
                                 disableClose: true,
-                                hasBackdrop: true,
+                                hasBackdrop: true
                             });
                             return [2 /*return*/];
                     }
@@ -855,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*/];
-                            //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];
@@ -887,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];
                     }
                 });
             });
@@ -938,11 +1048,11 @@
                     switch (_a.label) {
                         case 0:
                             newAttachment = {};
-                            //Memorizza i dati per l'allegato        
+                            //Memorizza i dati per l'allegato
                             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)];
@@ -995,9 +1105,30 @@
         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
@@ -1014,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;
@@ -1024,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; }
                 }
@@ -1056,15 +1187,15 @@
                 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"];
                     }
                 };
             };
@@ -1093,18 +1224,18 @@
             /**
              * 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();
@@ -1113,9 +1244,9 @@
          * 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;
@@ -1197,6 +1328,18 @@
         __decorate([
             core.Input("tablePaginatorSize")
         ], EqpAttachmentsComponent.prototype, "tablePaginatorSize", void 0);
+        __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);
@@ -1270,30 +1413,30 @@
             core.Output("onComponentLoaded")
         ], EqpAttachmentsComponent.prototype, "onComponentLoaded", void 0);
         __decorate([
-            core.ViewChild('dialogAddAttachment', { static: true })
+            core.ViewChild("dialogAddAttachment", { static: true })
         ], EqpAttachmentsComponent.prototype, "dialogAddAttachment", void 0);
         __decorate([
-            core.ViewChild('dialogAddMultipleAttachment', { static: true })
+            core.ViewChild("dialogAddMultipleAttachment", { static: true })
         ], EqpAttachmentsComponent.prototype, "dialogAddMultipleAttachment", void 0);
         __decorate([
             core.ViewChild(ngxImageCropper.ImageCropperComponent)
         ], EqpAttachmentsComponent.prototype, "imageCropper", void 0);
         __decorate([
-            core.ViewChild('imageInput')
+            core.ViewChild("imageInput")
         ], EqpAttachmentsComponent.prototype, "imageInput", void 0);
         __decorate([
-            core.ViewChild('attachmentTable', { static: false })
+            core.ViewChild("attachmentTable", { static: false })
         ], EqpAttachmentsComponent.prototype, "attachmentTable", void 0);
         __decorate([
-            core.ViewChild('inlinePreviewTemplate', { static: true })
+            core.ViewChild("inlinePreviewTemplate", { static: true })
         ], EqpAttachmentsComponent.prototype, "inlinePreviewTemplate", void 0);
         __decorate([
-            core.ViewChild('dialogPreview', { static: true })
+            core.ViewChild("dialogPreview", { static: true })
         ], EqpAttachmentsComponent.prototype, "dialogPreview", void 0);
         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>",
+                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);