@eqproject/eqp-attachments 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +3 -0
  2. package/bundles/eqproject-eqp-attachments.umd.js +132 -32
  3. package/bundles/eqproject-eqp-attachments.umd.js.map +1 -1
  4. package/bundles/eqproject-eqp-attachments.umd.min.js +1 -1
  5. package/bundles/eqproject-eqp-attachments.umd.min.js.map +1 -1
  6. package/eqproject-eqp-attachments.metadata.json +1 -1
  7. package/esm2015/lib/eqp-attachments.component.js +90 -9
  8. package/esm5/lib/eqp-attachments.component.js +130 -29
  9. package/fesm2015/eqproject-eqp-attachments.js +89 -8
  10. package/fesm2015/eqproject-eqp-attachments.js.map +1 -1
  11. package/fesm5/eqproject-eqp-attachments.js +129 -28
  12. package/fesm5/eqproject-eqp-attachments.js.map +1 -1
  13. package/lib/eqp-attachments.component.d.ts +14 -0
  14. package/package.json +2 -1
package/fesm2015/eqproject-eqp-attachments.js CHANGED
@@ -6,6 +6,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
6
6
  import { DomSanitizer } from '@angular/platform-browser';
7
7
  import { TooltipPositionType, TypeColumn, EqpTableModule } from '@eqproject/eqp-table';
8
8
  import imageCompression from 'browser-image-compression';
9
+ import * as JSZip from 'jszip';
9
10
  import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
10
11
  import Swal from 'sweetalert2';
11
12
  import { CommonModule } from '@angular/common';
@@ -315,6 +316,18 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
315
316
  * Abilitare caricamento video
316
317
  */
317
318
  this.allowVideo = false;
319
+ /**
320
+ * Abilitare la compressione al caricamento di un video (allowVideo dev'essere true)
321
+ */
322
+ this.allowVideoCompression = false;
323
+ /**
324
+ * Lista di formati video non ammessi
325
+ */
326
+ this.videoFormatsNotAllowed = ["mkv", "avi"];
327
+ /**
328
+ * dimensione massima ammessa per file
329
+ */
330
+ this.allowedMBForFile = 100;
318
331
  /**
319
332
  * Input per definire le label da usare nel componente
320
333
  */
@@ -378,6 +391,7 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
378
391
  this.transform = {};
379
392
  //#endregion
380
393
  this.AttachmentType = AttachmentType;
394
+ this.showZipSpinner = false;
381
395
  }
382
396
  ngOnInit() {
383
397
  //Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
@@ -531,6 +545,7 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
531
545
  * Apre la modale per la definizione dei parametri del nuovo file
532
546
  */
533
547
  openModalAddAttachment(attachmentType) {
548
+ this.showZipSpinner = false;
534
549
  //Se è stato richiesto il caricamento di un LINK o è impostato il caricamento di FILE SINGOLO allora apre la modale per
535
550
  //il caricamento singolo del file altrimenti apre quella per il caricamento multiplo
536
551
  // if (attachmentType == AttachmentType.LINK || (attachmentType == AttachmentType.FILE && this.loadMultipleFiles != true)) {
@@ -678,6 +693,7 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
678
693
  * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
679
694
  */
680
695
  onFileInputChange(event) {
696
+ var _a;
681
697
  return __awaiter(this, void 0, void 0, function* () {
682
698
  this.showCropImage = false;
683
699
  //Se è stato richiesto il caricamento SINGOLO oppure se il caricamento è MULTIPLO ma è stato selezionato un solo file
@@ -687,14 +703,17 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
687
703
  this.selectedFiles = event.target.files;
688
704
  if (!this.selectedFile)
689
705
  return;
706
+ this.showZipSpinner = true;
690
707
  //Memorizza i dati per l'allegato
691
708
  this.newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFile, false);
692
709
  this.newMultipleAttachments = new Array();
693
710
  this.newMultipleAttachments.push(this.newAttachment);
694
711
  //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
695
712
  let checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
696
- if (checkOnlyImage == false)
713
+ if (checkOnlyImage == false) {
714
+ this.showZipSpinner = false;
697
715
  return;
716
+ }
698
717
  if (this.loadMultipleFiles == true && [...event.target.files].length == 1)
699
718
  this.createAttachmentForm();
700
719
  //Verifica se il file caricato è un'immagine oppure no. Se è un immagine, prima di caricarla mostra il croppie per il resize.
@@ -711,26 +730,62 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
711
730
  else {
712
731
  this.showCropImage = false;
713
732
  let base64Result = yield this.getBase64FromFile(this.selectedFile);
714
- this.newAttachment.FileDataBase64 = base64Result.Base64File;
715
- this.newAttachment.FileContentType = base64Result.ContentType;
733
+ if (this.allowVideo && this.allowVideoCompression && this.selectedFile.type.startsWith("video")) {
734
+ this.newAttachment = yield this.zipVideo(this.newAttachment, base64Result.Base64File);
735
+ }
736
+ else {
737
+ this.newAttachment.FileDataBase64 = base64Result.Base64File;
738
+ this.newAttachment.FileContentType = base64Result.ContentType;
739
+ }
716
740
  }
741
+ this.showZipSpinner = false;
717
742
  }
718
743
  else {
719
744
  this.selectedFiles = event.target.files;
720
745
  if (!this.selectedFiles || this.selectedFiles.length == 0)
721
746
  return;
722
747
  this.newMultipleAttachments = new Array();
723
- for (let i = 0; i < this.selectedFiles.length; i++) {
748
+ this.showZipSpinner = true;
749
+ for (let i = 0; i < ((_a = this.selectedFiles) === null || _a === void 0 ? void 0 : _a.length); i++) {
724
750
  let newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFiles[i], true);
751
+ if (this.allowVideo && this.allowVideoCompression && this.selectedFiles[i].type.startsWith("video")) {
752
+ newAttachment = yield this.zipVideo(newAttachment, newAttachment.FileDataBase64);
753
+ }
725
754
  //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
726
755
  let checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
727
- if (checkOnlyImage == false)
756
+ if (checkOnlyImage == false) {
757
+ this.showZipSpinner = false;
728
758
  return;
759
+ }
729
760
  this.newMultipleAttachments.push(newAttachment);
730
761
  }
762
+ this.showZipSpinner = false;
731
763
  }
732
764
  });
733
765
  }
766
+ zipVideo(newAttachment, base64) {
767
+ return __awaiter(this, void 0, void 0, function* () {
768
+ const zip = new JSZip();
769
+ const videoFolder = zip.folder("videos");
770
+ videoFolder.file(newAttachment.FileName, base64, { base64: true });
771
+ let content = yield zip.generateAsync({
772
+ type: "blob",
773
+ compression: "DEFLATE",
774
+ compressionOptions: {
775
+ /* compression level ranges from 1 (best speed) to 9 (best compression) */
776
+ level: 9
777
+ }
778
+ });
779
+ let base64Result = yield this.getBase64FromFile(content);
780
+ newAttachment.FileContentType = content.type;
781
+ newAttachment.FileName = newAttachment.FileName.replace(/\.[^/.]+$/, "") + ".zip";
782
+ newAttachment.FileExtension = newAttachment.FileName.substring(newAttachment.FileName.lastIndexOf(".") + 1);
783
+ newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(content.type);
784
+ newAttachment.FileDataBase64 = base64Result.Base64File;
785
+ newAttachment.FileContentType = base64Result.ContentType;
786
+ return newAttachment;
787
+ });
788
+ }
734
789
  /**
735
790
  * A partire dal FILE ricevuto in input ricostruisce l'oggetto IAttachmentDTO e lo restituisce.
736
791
  * Se il parametro getBase64 viene passato a TRUE allora, sempre a partire dal file,genera il base64 e
@@ -746,7 +801,7 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
746
801
  newAttachment.AttachmentType = AttachmentType.FILE;
747
802
  newAttachment.FileContentType = currentFile.type;
748
803
  newAttachment.FileName = currentFile.name;
749
- newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(".") + 1);
804
+ newAttachment.FileExtension = currentFile.name.substring(currentFile.name.lastIndexOf(".") + 1);
750
805
  newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
751
806
  if (getBase64 == true) {
752
807
  let base64Result = yield this.getBase64FromFile(currentFile);
@@ -786,11 +841,28 @@ let EqpAttachmentsComponent = class EqpAttachmentsComponent {
786
841
  * @returns
787
842
  */
788
843
  checkAcceptedFiles() {
844
+ var _a, _b;
789
845
  if (!this.allowVideo) {
790
- if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
846
+ if ((!this.loadMultipleFiles && this.selectedFile.type.startsWith("video")) ||
791
847
  (this.loadMultipleFiles == true && [...this.selectedFiles].filter((p) => p.type.startsWith("video")).length > 0))
792
848
  return false;
793
849
  }
850
+ else {
851
+ if ((!this.loadMultipleFiles &&
852
+ this.videoFormatsNotAllowed.includes((_a = this.selectedFile) === null || _a === void 0 ? void 0 : _a.name.substring(this.selectedFile.name.lastIndexOf(".") + 1))) ||
853
+ (this.loadMultipleFiles &&
854
+ this.selectedFiles &&
855
+ [...this.selectedFiles].filter((p) => this.videoFormatsNotAllowed.includes(p.name.substring(p.name.lastIndexOf(".") + 1))).length > 0))
856
+ return false;
857
+ }
858
+ if (!this.loadMultipleFiles && ((_b = this.selectedFile) === null || _b === void 0 ? void 0 : _b.size) / (1024 * 1024) > this.allowedMBForFile) {
859
+ return false;
860
+ }
861
+ if (this.loadMultipleFiles &&
862
+ this.selectedFiles &&
863
+ [...this.selectedFiles].filter((p) => { var _a; return ((_a = p) === null || _a === void 0 ? void 0 : _a.size) / (1024 * 1024) > this.allowedMBForFile; }).length > 0) {
864
+ return false;
865
+ }
794
866
  if (this.acceptedFileTypes == "*")
795
867
  return true;
796
868
  //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
@@ -983,6 +1055,15 @@ __decorate([
983
1055
  __decorate([
984
1056
  Input("allowVideo")
985
1057
  ], EqpAttachmentsComponent.prototype, "allowVideo", void 0);
1058
+ __decorate([
1059
+ Input("allowVideoCompression")
1060
+ ], EqpAttachmentsComponent.prototype, "allowVideoCompression", void 0);
1061
+ __decorate([
1062
+ Input("videoFormatsNotAllowed")
1063
+ ], EqpAttachmentsComponent.prototype, "videoFormatsNotAllowed", void 0);
1064
+ __decorate([
1065
+ Input("allowedMBForFile")
1066
+ ], EqpAttachmentsComponent.prototype, "allowedMBForFile", void 0);
986
1067
  __decorate([
987
1068
  Input("downloadTooltipPosition")
988
1069
  ], EqpAttachmentsComponent.prototype, "downloadTooltipPosition", void 0);
@@ -1079,7 +1160,7 @@ __decorate([
1079
1160
  EqpAttachmentsComponent = __decorate([
1080
1161
  Component({
1081
1162
  selector: "eqp-attachments",
1082
- 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>",
1163
+ 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>",
1083
1164
  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}"]
1084
1165
  })
1085
1166
  ], EqpAttachmentsComponent);