@eqproject/eqp-attachments 0.1.15 → 0.1.17

package/README.md

@@ -87,6 +87,7 @@ export class AppModule {}
 | [isEqpTableMultiLanguage] | `boolean` | `false` | no | It allows you to establish whether the eqp-table containing the list of attachments uses multilanguage or not |
 | [tablePaginatorVisible] | `boolean` | `true` | no | It allows you to establish, in the case of multiple attachments management, whether the table containing the list of attachments must be paged or not (default: true) |
 | [tablePaginatorSize] | `number` | `null` | no | In case of managing multiple attachments, it allows you to establish the default page size for the table containing the list of attachments (default: null) |
+| [allowVideo] | `boolean` | `false` | no | Allow video upload |
  
 
 ### Outputs
@@ -96,6 +97,7 @@ export class AppModule {}
 | (abortAddAttachment) | `EventEmitter<any>` | no | Event triggered by pressing the EXIT button of the file upload modal. |
 | (downloadAttachment) | EventEmitter<IAttachmentDTO> | no | Invoked when the user tries to download an IAttachmentDTO with at least one of the following properties not defined: `"FileDataBase64", "FileContentType", "FileName"`. It returns the user selected object. |
 | (onDeleteAttachment) | `EventEmitter<IAttachmentDTO>` | no | Invoked when an IAttachmentDTO is deleted from `attachmentsList`. It returns the deleted element. |
+| (onComponentLoaded) | `EventEmitter<EqpAttachmentsComponent>` | no | Invoked when the component is loaded, emits the current instance of the component. |
 
 
 ### Model, Interfaces and Enums used

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

@@ -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('ngx-image-cropper'), require('sweetalert2'), require('@angular/common'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core')) :
+    typeof define === 'function' && define.amd ? define('@eqproject/eqp-attachments', ['exports', '@angular/common/http', '@angular/core', '@angular/forms', '@angular/material/dialog', '@angular/platform-browser', '@eqproject/eqp-table', 'browser-image-compression', 'ngx-image-cropper', 'sweetalert2', '@angular/common', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core'], factory) :
+    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-attachments'] = {}), global.ng.common.http, global.ng.core, global.ng.forms, global.ng.material.dialog, global.ng.platformBrowser, global.eqpTable, global.imageCompression, global.ngxImageCropper, global.Swal, global.ng.common, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core));
+}(this, (function (exports, http, core, forms, dialog, platformBrowser, eqpTable, imageCompression, ngxImageCropper, Swal, common, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, tooltip, snackBar, table, sort, paginator, core$1) { 'use strict';
 
     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,10 @@
              * per la tabella contenente l'elenco degli allegati
              */
             this.tablePaginatorSize = null;
+            /**
+             * Abilitare caricamento video
+             */
+            this.allowVideo = false;
             /**
              * Input per definire le label da usare nel componente
              */
@@ -542,6 +553,14 @@
              * Evento di output che restituisce l'elemento eliminato prima che questo venga effettivamente rismosso dalla lista.
              */
             this.onDeleteAttachment = new core.EventEmitter();
+            /**
+             * Evento di output scatenato durante l'AfterViewInit del componente che restituisce l'istanza corrente del componente.
+             * Questo evento avvisa quando il componente è stato renderizzato, utile per esempio quando si vogliono aggiungere delle colonne
+             * alla visualizzazione con allegati multipli lasciando però quelle pre esistenti. Questo si può fare intervenendo sulla
+             * proprietà "attachmentsColumns" di questo componente tramite l'istanza passata come paramentro oppure tramite ViewChild
+             * dal componente che lo ospita.
+             */
+            this.onComponentLoaded = new core.EventEmitter();
             //#endregion
             //#region Proprietà per gestione caricamento nuovo allegato
             this.newAttachment = {};
@@ -552,8 +571,8 @@
             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;
@@ -569,7 +588,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
@@ -580,6 +599,9 @@
                 this.attachmentsList = new Array();
             this.checkAttachmentImage();
         };
+        EqpAttachmentsComponent.prototype.ngAfterViewInit = function () {
+            this.onComponentLoaded.emit(this);
+        };
         EqpAttachmentsComponent.prototype.reloadData = function () {
             if (this.attachmentTable)
                 this.attachmentTable.reloadDatatable();
@@ -598,27 +620,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%" }
@@ -661,7 +701,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) {
@@ -705,8 +745,8 @@
             this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
                 disableClose: true,
                 hasBackdrop: true,
-                width: '60%',
-                maxHeight: '80%'
+                width: "60%",
+                maxHeight: "80%"
             });
         };
         EqpAttachmentsComponent.prototype.createAttachmentForm = function () {
@@ -745,7 +785,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 () {
@@ -792,8 +835,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;
@@ -801,7 +848,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*/];
                             }
@@ -820,7 +869,7 @@
                             }
                             this.dialog.open(this.dialogPreview, {
                                 disableClose: true,
-                                hasBackdrop: true,
+                                hasBackdrop: true
                             });
                             return [2 /*return*/];
                     }
@@ -855,11 +904,11 @@
                             this.selectedFiles = event.target.files;
                             if (!this.selectedFile)
                                 return [2 /*return*/];
-                            //Memorizza i dati per l'allegato        
+                            //Memorizza i dati per l'allegato
                             _a = this;
                             return [4 /*yield*/, this.createAttachmentFromUploadedFile(this.selectedFile, false)];
                         case 1:
-                            //Memorizza i dati per l'allegato        
+                            //Memorizza i dati per l'allegato
                             _a.newAttachment = _b.sent();
                             this.newMultipleAttachments = new Array();
                             this.newMultipleAttachments.push(this.newAttachment);
@@ -927,11 +976,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.substr(currentFile.name.lastIndexOf(".") + 1);
                             newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
                             if (!(getBase64 == true)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.getBase64FromFile(currentFile)];
@@ -984,9 +1033,11 @@
         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))
-                return false;
+            if (!this.allowVideo) {
+                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))
+                    return false;
+            }
             if (this.acceptedFileTypes == "*")
                 return true;
             //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
@@ -1045,15 +1096,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"];
                     }
                 };
             };
@@ -1082,18 +1133,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();
@@ -1102,9 +1153,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;
@@ -1186,6 +1237,9 @@
         __decorate([
             core.Input("tablePaginatorSize")
         ], EqpAttachmentsComponent.prototype, "tablePaginatorSize", void 0);
+        __decorate([
+            core.Input("allowVideo")
+        ], EqpAttachmentsComponent.prototype, "allowVideo", void 0);
         __decorate([
             core.Input("downloadTooltipPosition")
         ], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
@@ -1256,29 +1310,32 @@
             core.Output("onDeleteAttachment")
         ], EqpAttachmentsComponent.prototype, "onDeleteAttachment", void 0);
         __decorate([
-            core.ViewChild('dialogAddAttachment', { static: true })
+            core.Output("onComponentLoaded")
+        ], EqpAttachmentsComponent.prototype, "onComponentLoaded", void 0);
+        __decorate([
+            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',
+                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>",
                 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}"]
             })