@eqproject/eqp-attachments 2.0.2 → 2.0.3
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.
- package/README.md +21 -4
- package/esm2020/lib/eqp-attachments.component.mjs +250 -58
- package/esm2020/lib/eqp-attachments.module.mjs +12 -8
- package/esm2020/lib/helpers/attachment.helper.mjs +9 -4
- package/esm2020/lib/interfaces/IAttachment.mjs +7 -1
- package/esm2020/lib/modules/material.module.mjs +4 -4
- package/esm2020/lib/services/eqp-attachment-dialog.service.mjs +3 -3
- package/esm2020/lib/services/eqp-attachment.service.mjs +27 -0
- package/fesm2015/eqproject-eqp-attachments.mjs +315 -93
- package/fesm2015/eqproject-eqp-attachments.mjs.map +1 -1
- package/fesm2020/eqproject-eqp-attachments.mjs +307 -77
- package/fesm2020/eqproject-eqp-attachments.mjs.map +1 -1
- package/lib/eqp-attachments.component.d.ts +58 -10
- package/lib/eqp-attachments.module.d.ts +2 -1
- package/lib/helpers/attachment.helper.d.ts +1 -0
- package/lib/interfaces/IAttachment.d.ts +6 -1
- package/lib/services/eqp-attachment.service.d.ts +7 -0
- package/package.json +4 -3
|
@@ -3,30 +3,36 @@ import * as i0 from '@angular/core';
|
|
|
3
3
|
import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
4
4
|
import * as i2 from '@angular/forms';
|
|
5
5
|
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i15 from 'ngx-image-cropper';
|
|
7
7
|
import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
|
|
8
8
|
import imageCompression from 'browser-image-compression';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i16 from '@eqproject/eqp-table';
|
|
10
10
|
import { TooltipPositionType, TypeColumn, EqpTableModule } from '@eqproject/eqp-table';
|
|
11
11
|
import Swal from 'sweetalert2';
|
|
12
|
+
import { Observable, from, concatMap } from 'rxjs';
|
|
12
13
|
import * as i1 from '@angular/material/dialog';
|
|
13
14
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
14
15
|
import * as i3 from '@angular/platform-browser';
|
|
15
16
|
import * as i4 from '@angular/common/http';
|
|
16
|
-
import * as
|
|
17
|
+
import * as i6 from 'ngx-script-loader';
|
|
18
|
+
import * as i7 from '@angular/material/button';
|
|
17
19
|
import { MatButtonModule } from '@angular/material/button';
|
|
18
|
-
import * as
|
|
20
|
+
import * as i8 from '@angular/material/input';
|
|
19
21
|
import { MatInputModule } from '@angular/material/input';
|
|
20
|
-
import * as
|
|
22
|
+
import * as i9 from '@angular/material/form-field';
|
|
21
23
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
22
|
-
import * as
|
|
24
|
+
import * as i10 from '@angular/material/menu';
|
|
23
25
|
import { MatMenuModule } from '@angular/material/menu';
|
|
24
|
-
import * as
|
|
26
|
+
import * as i11 from '@angular/material/card';
|
|
25
27
|
import { MatCardModule } from '@angular/material/card';
|
|
26
|
-
import * as
|
|
28
|
+
import * as i12 from '@angular/material/icon';
|
|
27
29
|
import { MatIconModule } from '@angular/material/icon';
|
|
28
|
-
import * as
|
|
30
|
+
import * as i13 from '@angular/material/tooltip';
|
|
31
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
32
|
+
import * as i14 from '@angular/common';
|
|
29
33
|
import { CommonModule } from '@angular/common';
|
|
34
|
+
import * as i17 from 'ngx-file-drop';
|
|
35
|
+
import { NgxFileDropModule } from 'ngx-file-drop';
|
|
30
36
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
31
37
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
32
38
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -45,7 +51,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
|
45
51
|
import { MatChipsModule } from '@angular/material/chips';
|
|
46
52
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
47
53
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
48
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
49
54
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
50
55
|
import { MatTableModule } from '@angular/material/table';
|
|
51
56
|
import { MatSortModule } from '@angular/material/sort';
|
|
@@ -56,7 +61,13 @@ var AttachmentType;
|
|
|
56
61
|
(function (AttachmentType) {
|
|
57
62
|
AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
|
|
58
63
|
AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
|
|
59
|
-
|
|
64
|
+
AttachmentType[AttachmentType["DROPBOX"] = 3] = "DROPBOX";
|
|
65
|
+
})(AttachmentType || (AttachmentType = {}));
|
|
66
|
+
var CropOptionEnum;
|
|
67
|
+
(function (CropOptionEnum) {
|
|
68
|
+
CropOptionEnum[CropOptionEnum["ROTATE"] = 1] = "ROTATE";
|
|
69
|
+
CropOptionEnum[CropOptionEnum["FLIP"] = 2] = "FLIP";
|
|
70
|
+
})(CropOptionEnum || (CropOptionEnum = {}));
|
|
60
71
|
|
|
61
72
|
class AttachmentHelperService {
|
|
62
73
|
constructor() { }
|
|
@@ -108,9 +119,14 @@ AttachmentHelperService.fileExtensionIcon = {
|
|
|
108
119
|
"3g2": "fas fa-file-video",
|
|
109
120
|
"mp3": "fas fa-file-audio",
|
|
110
121
|
};
|
|
111
|
-
AttachmentHelperService
|
|
112
|
-
|
|
113
|
-
|
|
122
|
+
AttachmentHelperService.dropboxCredentials = {
|
|
123
|
+
url: 'https://www.dropbox.com/static/api/2/dropins.js',
|
|
124
|
+
apiKey: "aj2xjzms4dl1sch",
|
|
125
|
+
accessToken: "l.BbasuuUFe42u-fXvpmDEteNkGMH-yPTxD79JhRjkBcR94Fm2QLgIjEETvx8TY36HsQQsIe24ofcNjYlg9IhSB7Fguqbi7wH-Jg6bW_3Q8VemsH4pC7Iakat643EzRcw7OMObPSs"
|
|
126
|
+
};
|
|
127
|
+
AttachmentHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
128
|
+
AttachmentHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, providedIn: 'root' });
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, decorators: [{
|
|
114
130
|
type: Injectable,
|
|
115
131
|
args: [{
|
|
116
132
|
providedIn: 'root'
|
|
@@ -208,9 +224,33 @@ class EqpAttachmentDialogService {
|
|
|
208
224
|
}
|
|
209
225
|
}
|
|
210
226
|
}
|
|
211
|
-
EqpAttachmentDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
212
|
-
EqpAttachmentDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
227
|
+
EqpAttachmentDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
228
|
+
EqpAttachmentDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, providedIn: 'root' });
|
|
229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, decorators: [{
|
|
230
|
+
type: Injectable,
|
|
231
|
+
args: [{
|
|
232
|
+
providedIn: 'root'
|
|
233
|
+
}]
|
|
234
|
+
}], ctorParameters: function () { return []; } });
|
|
235
|
+
|
|
236
|
+
class EqpAttachmentService {
|
|
237
|
+
constructor() {
|
|
238
|
+
}
|
|
239
|
+
loadDropboxScript() {
|
|
240
|
+
const script = document.createElement('script');
|
|
241
|
+
script.type = 'text/javascript';
|
|
242
|
+
script.src = AttachmentHelperService.dropboxCredentials.url;
|
|
243
|
+
script.id = 'dropboxjs';
|
|
244
|
+
script.dataset.appKey = AttachmentHelperService.dropboxCredentials.apiKey;
|
|
245
|
+
script.onload = () => {
|
|
246
|
+
console.log('Dropbox script loaded');
|
|
247
|
+
};
|
|
248
|
+
document.body.appendChild(script);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
EqpAttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
252
|
+
EqpAttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, providedIn: 'root' });
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, decorators: [{
|
|
214
254
|
type: Injectable,
|
|
215
255
|
args: [{
|
|
216
256
|
providedIn: 'root'
|
|
@@ -224,12 +264,14 @@ const toBase64 = file => new Promise((resolve, reject) => {
|
|
|
224
264
|
reader.onerror = error => reject(error);
|
|
225
265
|
});
|
|
226
266
|
class EqpAttachmentsComponent {
|
|
227
|
-
constructor(dialog, formBuilder, sanitizer, http, cd) {
|
|
267
|
+
constructor(dialog, formBuilder, sanitizer, http, cd, eqpAttachmentService, scriptLoaderService) {
|
|
228
268
|
this.dialog = dialog;
|
|
229
269
|
this.formBuilder = formBuilder;
|
|
230
270
|
this.sanitizer = sanitizer;
|
|
231
271
|
this.http = http;
|
|
232
272
|
this.cd = cd;
|
|
273
|
+
this.eqpAttachmentService = eqpAttachmentService;
|
|
274
|
+
this.scriptLoaderService = scriptLoaderService;
|
|
233
275
|
//#region @Input del componente
|
|
234
276
|
/**
|
|
235
277
|
* Se TRUE allora nasconde la colonna per le azioni sull'allegato (nel caso "multipleAttachment" è TRUE).
|
|
@@ -315,11 +357,36 @@ class EqpAttachmentsComponent {
|
|
|
315
357
|
* degli allegati deve essere paginata oppure no
|
|
316
358
|
*/
|
|
317
359
|
this.tablePaginatorVisible = true;
|
|
360
|
+
/**
|
|
361
|
+
* Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
|
|
362
|
+
* degli allegati deve contenere il campo di ricerca oppure no
|
|
363
|
+
*/
|
|
364
|
+
this.isTableSearcheable = true;
|
|
318
365
|
/**
|
|
319
366
|
* In caso di gestione allegati multipli, permette di stabilire la dimensione pagina di default
|
|
320
367
|
* per la tabella contenente l'elenco degli allegati
|
|
321
368
|
*/
|
|
322
369
|
this.tablePaginatorSize = null;
|
|
370
|
+
/**
|
|
371
|
+
* Permette di scegliere il modo in cui i file devono essere caricati
|
|
372
|
+
*/
|
|
373
|
+
// @Input("uploadType") uploadType: UploadTypeEnum = UploadTypeEnum.FILE_AND_LINK;
|
|
374
|
+
/**
|
|
375
|
+
* Permette di stabilire se i pulsanti per il caricamento dei file sono separati o in un menù a tendina
|
|
376
|
+
*/
|
|
377
|
+
this.separatedUploadButtons = false;
|
|
378
|
+
/**
|
|
379
|
+
* Permette di scegliere se dare la possibilità di vedere o no l'anteprima
|
|
380
|
+
*/
|
|
381
|
+
this.showPreview = true;
|
|
382
|
+
/**
|
|
383
|
+
* In caso di allegato singolo, permette di scegliere se aggiungere file tramite drag and drop
|
|
384
|
+
*/
|
|
385
|
+
this.singleAttachmentDragAndDrop = false;
|
|
386
|
+
/**
|
|
387
|
+
* Array di opzioni che si possono utilizzare per il crop
|
|
388
|
+
*/
|
|
389
|
+
this.cropOptions = [];
|
|
323
390
|
/**
|
|
324
391
|
* Input per definire le label da usare nel componente
|
|
325
392
|
*/
|
|
@@ -335,6 +402,8 @@ class EqpAttachmentsComponent {
|
|
|
335
402
|
this.abortLabel = "Annulla";
|
|
336
403
|
this.saveLabel = "Salva";
|
|
337
404
|
this.exitLabel = "Esci";
|
|
405
|
+
this.uploadWithDropboxLabel = "Carica con Dropbox";
|
|
406
|
+
this.cropLabel = "Scegli le dimensioni dell'immagine";
|
|
338
407
|
this.eqpTableSearchText = "Cerca";
|
|
339
408
|
this.deleteDialogTitle = null;
|
|
340
409
|
this.deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
|
|
@@ -342,6 +411,10 @@ class EqpAttachmentsComponent {
|
|
|
342
411
|
this.wrongTypeSelectedErrorMessage = "Non è possibile caricare il file selezionato.";
|
|
343
412
|
this.videoPreviewErrorMessage = "Impossibile aprire l'anteprima di un file video.";
|
|
344
413
|
this.audioPreviewErrorMessage = "Impossibile aprire l'anteprima di un file audio.";
|
|
414
|
+
this.flipHorinzontalLabel = "Capovolgi orizzontalmente";
|
|
415
|
+
this.flipVerticalLabel = "Capovolgi verticalmente";
|
|
416
|
+
this.rotateRightLabel = "Ruota a destra";
|
|
417
|
+
this.rotateLeftLabel = "Ruota a sinistra";
|
|
345
418
|
//#endregion
|
|
346
419
|
//#region @Output del componente
|
|
347
420
|
/**
|
|
@@ -373,30 +446,37 @@ class EqpAttachmentsComponent {
|
|
|
373
446
|
this.imageChangedEvent = '';
|
|
374
447
|
this.croppedImage = '';
|
|
375
448
|
this.transform = {};
|
|
449
|
+
this.canvasRotation = 0;
|
|
376
450
|
//#endregion
|
|
377
451
|
this.AttachmentType = AttachmentType;
|
|
452
|
+
this.addingLinkMode = false;
|
|
378
453
|
}
|
|
379
454
|
ngOnInit() {
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
if (this.
|
|
383
|
-
this.
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
this.allowedTypes
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
this.
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
this.attachmentsList
|
|
399
|
-
|
|
455
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
456
|
+
//Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
|
|
457
|
+
if (!this.acceptedFileTypes)
|
|
458
|
+
if (this.allowOnlyImages == true)
|
|
459
|
+
this.acceptedFileTypes = "image/*";
|
|
460
|
+
else
|
|
461
|
+
this.acceptedFileTypes = "*";
|
|
462
|
+
// Se non sono stati specificati i tipi da gestire ma è stato passato null o un array vuoto imposto i tipi di default.
|
|
463
|
+
if (!this.allowedTypes || this.allowedTypes.length == 0)
|
|
464
|
+
this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
|
|
465
|
+
else if (this.allowedTypes.find(t => t != AttachmentType.FILE && t != AttachmentType.LINK && t != AttachmentType.DROPBOX)) {
|
|
466
|
+
EqpAttachmentDialogService.Warning("Almeno uno degli AttachmentType selezionati nel parametro \"allowedTypes\" non esiste.");
|
|
467
|
+
this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
|
|
468
|
+
}
|
|
469
|
+
//Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
|
|
470
|
+
if (this.multipleAttachment == true && (!this.attachmentsColumns || this.attachmentsColumns.length == 0)) {
|
|
471
|
+
this.configureColumns();
|
|
472
|
+
}
|
|
473
|
+
if (this.attachmentsList == null)
|
|
474
|
+
this.attachmentsList = new Array();
|
|
475
|
+
this.checkAttachmentImage();
|
|
476
|
+
if (this.allowedTypes.includes(3)) {
|
|
477
|
+
this.eqpAttachmentService.loadDropboxScript();
|
|
478
|
+
}
|
|
479
|
+
});
|
|
400
480
|
}
|
|
401
481
|
reloadData() {
|
|
402
482
|
if (this.attachmentTable)
|
|
@@ -504,26 +584,18 @@ class EqpAttachmentsComponent {
|
|
|
504
584
|
}
|
|
505
585
|
//#endregion
|
|
506
586
|
/**
|
|
507
|
-
*
|
|
587
|
+
* In caso di allegato singolo, sceglie quale metodo richiamare in base al tipo di allegato
|
|
508
588
|
*/
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
this.createAttachmentForm();
|
|
520
|
-
//Apre la modale
|
|
521
|
-
this.dialofRefAddAttachment = this.dialog.open(this.dialogAddAttachment, {
|
|
522
|
-
disableClose: true,
|
|
523
|
-
hasBackdrop: true,
|
|
524
|
-
width: '60%',
|
|
525
|
-
maxHeight: '80%'
|
|
526
|
-
});
|
|
589
|
+
addFile(attachmentType, imageInput = null) {
|
|
590
|
+
if (attachmentType == AttachmentType.LINK) {
|
|
591
|
+
this.switchToAddingLinkMode();
|
|
592
|
+
}
|
|
593
|
+
else if (attachmentType == AttachmentType.FILE) {
|
|
594
|
+
imageInput.click();
|
|
595
|
+
}
|
|
596
|
+
else {
|
|
597
|
+
this.chooseDropboxFile();
|
|
598
|
+
}
|
|
527
599
|
}
|
|
528
600
|
createAttachmentForm() {
|
|
529
601
|
//Crea la form per la validazione dei campi
|
|
@@ -541,7 +613,7 @@ class EqpAttachmentsComponent {
|
|
|
541
613
|
this.abortFile();
|
|
542
614
|
if (this.newAttachmentForm)
|
|
543
615
|
this.newAttachmentForm.reset();
|
|
544
|
-
this.
|
|
616
|
+
this.dialogRefCropImage.close();
|
|
545
617
|
if (emitCloseEvent == true && this.abortAddAttachment)
|
|
546
618
|
this.abortAddAttachment.emit();
|
|
547
619
|
}
|
|
@@ -563,7 +635,10 @@ class EqpAttachmentsComponent {
|
|
|
563
635
|
return this.newMultipleAttachments.filter(p => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) || (p.AttachmentType == AttachmentType.LINK && !p.FilePath)).length > 0;
|
|
564
636
|
}
|
|
565
637
|
}
|
|
566
|
-
confirmAddAttachment() {
|
|
638
|
+
confirmAddAttachment(multipleAttachments = false) {
|
|
639
|
+
if (this.newAttachment.IsImage && !multipleAttachments) {
|
|
640
|
+
this.imageCropper.crop();
|
|
641
|
+
}
|
|
567
642
|
if (this.loadMultipleFiles != true) {
|
|
568
643
|
if (this.newAttachment.AttachmentType == AttachmentType.LINK && !this.newAttachment.FileName)
|
|
569
644
|
this.newAttachment.FileName = this.newAttachment.FilePath;
|
|
@@ -581,7 +656,9 @@ class EqpAttachmentsComponent {
|
|
|
581
656
|
if (this.attachmentTable)
|
|
582
657
|
this.attachmentTable.reloadDatatable();
|
|
583
658
|
this.localEditedAttachments.emit(this.attachmentsList);
|
|
584
|
-
this.
|
|
659
|
+
if (this.newAttachment.IsImage && !multipleAttachments) {
|
|
660
|
+
this.dialogRefCropImage.close();
|
|
661
|
+
}
|
|
585
662
|
}
|
|
586
663
|
/**
|
|
587
664
|
* Apre il dialog per l'anteprima dell'allegato selezionato.
|
|
@@ -646,14 +723,15 @@ class EqpAttachmentsComponent {
|
|
|
646
723
|
* Se invece il caricamento dei file è MULTIPLO e sono presenti più file allora esegue le stesse operazioni ignorando però il contrllo
|
|
647
724
|
* immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
|
|
648
725
|
*/
|
|
649
|
-
|
|
726
|
+
onFileAdded(event, isFileDropped = false) {
|
|
650
727
|
return __awaiter(this, void 0, void 0, function* () {
|
|
651
728
|
this.showCropImage = false;
|
|
729
|
+
let filesOnInput = isFileDropped ? event : event.target.files;
|
|
652
730
|
//Se è stato richiesto il caricamento SINGOLO oppure se il caricamento è MULTIPLO ma è stato selezionato un solo file
|
|
653
731
|
//allora verifica se il file è un immagine (per mostrare il CROPPIE)
|
|
654
|
-
if ([...
|
|
655
|
-
this.selectedFile =
|
|
656
|
-
this.selectedFiles =
|
|
732
|
+
if ([...filesOnInput].length == 1 || this.loadMultipleFiles != true) {
|
|
733
|
+
this.selectedFile = filesOnInput[0];
|
|
734
|
+
this.selectedFiles = filesOnInput;
|
|
657
735
|
if (!this.selectedFile)
|
|
658
736
|
return;
|
|
659
737
|
//Memorizza i dati per l'allegato
|
|
@@ -664,39 +742,46 @@ class EqpAttachmentsComponent {
|
|
|
664
742
|
let checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
|
|
665
743
|
if (checkOnlyImage == false)
|
|
666
744
|
return;
|
|
667
|
-
|
|
668
|
-
this.createAttachmentForm();
|
|
745
|
+
this.createAttachmentForm();
|
|
669
746
|
//Verifica se il file caricato è un'immagine oppure no. Se è un immagine, prima di caricarla mostra il croppie per il resize.
|
|
670
747
|
//Se non è un immagine allora genera il Base64
|
|
671
748
|
if (this.newAttachment.IsImage == true) {
|
|
672
|
-
this.getImageDimensions(
|
|
749
|
+
this.getImageDimensions(filesOnInput[0]);
|
|
673
750
|
//Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
|
|
674
751
|
this.newAttachmentForm.disable();
|
|
675
752
|
this.newAttachmentForm.controls["customWidth"].enable();
|
|
676
753
|
this.newAttachmentForm.controls["customHeight"].enable();
|
|
677
754
|
this.showCropImage = true;
|
|
678
|
-
this.
|
|
755
|
+
this.imageFile = event;
|
|
756
|
+
this.dialogRefCropImage = this.dialog.open(this.dialogCropImage, {
|
|
757
|
+
disableClose: true,
|
|
758
|
+
hasBackdrop: true,
|
|
759
|
+
width: '60%',
|
|
760
|
+
maxHeight: '80%'
|
|
761
|
+
});
|
|
679
762
|
}
|
|
680
763
|
else {
|
|
681
764
|
this.showCropImage = false;
|
|
682
765
|
let base64Result = yield this.getBase64FromFile(this.selectedFile);
|
|
683
766
|
this.newAttachment.FileDataBase64 = base64Result.Base64File;
|
|
684
767
|
this.newAttachment.FileContentType = base64Result.ContentType;
|
|
768
|
+
this.confirmAddAttachment();
|
|
685
769
|
}
|
|
686
770
|
}
|
|
687
771
|
else {
|
|
688
|
-
this.selectedFiles =
|
|
772
|
+
this.selectedFiles = filesOnInput;
|
|
689
773
|
if (!this.selectedFiles || this.selectedFiles.length == 0)
|
|
690
774
|
return;
|
|
691
775
|
this.newMultipleAttachments = new Array();
|
|
692
776
|
for (let i = 0; i < this.selectedFiles.length; i++) {
|
|
693
|
-
let newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFiles[i], true);
|
|
777
|
+
let newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFiles[i], true, true);
|
|
694
778
|
//Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
|
|
695
779
|
let checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
|
|
696
780
|
if (checkOnlyImage == false)
|
|
697
781
|
return;
|
|
698
782
|
this.newMultipleAttachments.push(newAttachment);
|
|
699
783
|
}
|
|
784
|
+
this.confirmAddAttachment(true);
|
|
700
785
|
}
|
|
701
786
|
});
|
|
702
787
|
}
|
|
@@ -708,7 +793,7 @@ class EqpAttachmentsComponent {
|
|
|
708
793
|
* @param getBase64 Se TRUE allora calcola base64 e ContentType del file passato in input
|
|
709
794
|
* @returns Restituisce un oggetto di tipo IAttachmentDTO
|
|
710
795
|
*/
|
|
711
|
-
createAttachmentFromUploadedFile(currentFile, getBase64 = true) {
|
|
796
|
+
createAttachmentFromUploadedFile(currentFile, getBase64 = true, cropFile = false) {
|
|
712
797
|
return __awaiter(this, void 0, void 0, function* () {
|
|
713
798
|
let newAttachment = {};
|
|
714
799
|
//Memorizza i dati per l'allegato
|
|
@@ -721,6 +806,9 @@ class EqpAttachmentsComponent {
|
|
|
721
806
|
let base64Result = yield this.getBase64FromFile(currentFile);
|
|
722
807
|
newAttachment.FileDataBase64 = base64Result.Base64File;
|
|
723
808
|
newAttachment.FileContentType = base64Result.ContentType;
|
|
809
|
+
if (newAttachment.IsImage && cropFile) {
|
|
810
|
+
this.getCroppedAndUpload(`data:${base64Result.ContentType};base64,${base64Result.Base64File}`, newAttachment);
|
|
811
|
+
}
|
|
724
812
|
}
|
|
725
813
|
return newAttachment;
|
|
726
814
|
});
|
|
@@ -799,6 +887,7 @@ class EqpAttachmentsComponent {
|
|
|
799
887
|
}
|
|
800
888
|
return true;
|
|
801
889
|
}
|
|
890
|
+
//#region Gestione crop file
|
|
802
891
|
getImageDimensions(img) {
|
|
803
892
|
const reader = new FileReader();
|
|
804
893
|
reader.onload = (e) => {
|
|
@@ -822,6 +911,8 @@ class EqpAttachmentsComponent {
|
|
|
822
911
|
restoreOriginalDimensions() {
|
|
823
912
|
this.customWidth = this.originalWidth;
|
|
824
913
|
this.customHeight = this.originalHeight;
|
|
914
|
+
this.canvasRotation = 0;
|
|
915
|
+
this.transform = {};
|
|
825
916
|
}
|
|
826
917
|
onDimensionsChange(dimension) {
|
|
827
918
|
if (dimension == "H") {
|
|
@@ -833,9 +924,9 @@ class EqpAttachmentsComponent {
|
|
|
833
924
|
}
|
|
834
925
|
imageCropped(event) {
|
|
835
926
|
this.croppedImage = event.base64;
|
|
836
|
-
this.getCroppedAndUpload(this.croppedImage);
|
|
927
|
+
this.getCroppedAndUpload(this.croppedImage, this.newAttachment);
|
|
837
928
|
}
|
|
838
|
-
getCroppedAndUpload(file) {
|
|
929
|
+
getCroppedAndUpload(file, newAttachment) {
|
|
839
930
|
var self = this;
|
|
840
931
|
var file = base64ToFile(file);
|
|
841
932
|
const options = this.compressionOptions;
|
|
@@ -848,21 +939,43 @@ class EqpAttachmentsComponent {
|
|
|
848
939
|
fileReader.onload = function () {
|
|
849
940
|
let resultReader = fileReader.result;
|
|
850
941
|
var marker = ';base64,';
|
|
851
|
-
|
|
942
|
+
newAttachment.FileDataBase64 = resultReader.substring(resultReader.indexOf(marker) + marker.length);
|
|
852
943
|
self.showCropImage = false;
|
|
853
|
-
self.newAttachmentForm
|
|
944
|
+
if (self.newAttachmentForm) {
|
|
945
|
+
self.newAttachmentForm.enable();
|
|
946
|
+
}
|
|
854
947
|
};
|
|
855
948
|
fileReader.readAsDataURL(fileCompressed);
|
|
856
949
|
}));
|
|
857
950
|
}
|
|
858
951
|
confirmCrop() {
|
|
859
952
|
this.imageCropper.crop();
|
|
953
|
+
this.dialogRefCropImage.close();
|
|
954
|
+
}
|
|
955
|
+
rotateLeft() {
|
|
956
|
+
this.canvasRotation--;
|
|
957
|
+
this.flipAfterRotate();
|
|
958
|
+
}
|
|
959
|
+
rotateRight() {
|
|
960
|
+
this.canvasRotation++;
|
|
961
|
+
this.flipAfterRotate();
|
|
962
|
+
}
|
|
963
|
+
flipAfterRotate() {
|
|
964
|
+
const flippedH = this.transform.flipH;
|
|
965
|
+
const flippedV = this.transform.flipV;
|
|
966
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipH: flippedV, flipV: flippedH });
|
|
967
|
+
}
|
|
968
|
+
flipHorizontal() {
|
|
969
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipH: !this.transform.flipH });
|
|
970
|
+
}
|
|
971
|
+
flipVertical() {
|
|
972
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipV: !this.transform.flipV });
|
|
860
973
|
}
|
|
974
|
+
//#endregion
|
|
861
975
|
/**
|
|
862
976
|
* Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
|
|
863
977
|
*/
|
|
864
978
|
abortFile() {
|
|
865
|
-
this.imageChangedEvent = '';
|
|
866
979
|
if (this.imageInput)
|
|
867
980
|
this.imageInput.nativeElement.value = '';
|
|
868
981
|
this.selectedFile = null;
|
|
@@ -878,14 +991,84 @@ class EqpAttachmentsComponent {
|
|
|
878
991
|
this.customWidth = null;
|
|
879
992
|
this.originalHeight = null;
|
|
880
993
|
this.originalWidth = null;
|
|
994
|
+
this.dialogRefCropImage.close();
|
|
995
|
+
}
|
|
996
|
+
//#endregion
|
|
997
|
+
// Viene creato un'array observables per memorizzare tutti gli observable creati dalle chiamate a fileEntry.file().
|
|
998
|
+
// Dopo che tutti gli observables sono stati completati, viene utilizzato il metodo subscribe() per eseguire la funzione onFileAdded().
|
|
999
|
+
fileDropped(files) {
|
|
1000
|
+
let filesDropped = [];
|
|
1001
|
+
const observables = [];
|
|
1002
|
+
for (let i = 0; i < files.length; i++) {
|
|
1003
|
+
if (files[i].fileEntry.isFile) {
|
|
1004
|
+
const fileEntry = files[i].fileEntry;
|
|
1005
|
+
const observable = new Observable((observer) => {
|
|
1006
|
+
fileEntry.file((file) => {
|
|
1007
|
+
filesDropped.push(file);
|
|
1008
|
+
observer.next();
|
|
1009
|
+
observer.complete();
|
|
1010
|
+
});
|
|
1011
|
+
});
|
|
1012
|
+
observables.push(observable);
|
|
1013
|
+
}
|
|
1014
|
+
else {
|
|
1015
|
+
const fileEntry = files[i].fileEntry;
|
|
1016
|
+
console.log(files[i].relativePath, fileEntry);
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
1019
|
+
from(observables).pipe(concatMap((observable) => observable)).subscribe({
|
|
1020
|
+
complete: () => {
|
|
1021
|
+
this.onFileAdded(filesDropped, true);
|
|
1022
|
+
}
|
|
1023
|
+
});
|
|
1024
|
+
}
|
|
1025
|
+
// Se il caricamento del file dropbox va a buon fine, la funzione di callback restituisce un array di oggetti.
|
|
1026
|
+
// Viene poi fatta una XMLHttpRequest con responseType 'blob' per convertire il primo elemento della response in un Blob.
|
|
1027
|
+
chooseDropboxFile() {
|
|
1028
|
+
var options = {
|
|
1029
|
+
success: (files) => {
|
|
1030
|
+
const xhr = new XMLHttpRequest();
|
|
1031
|
+
xhr.open('GET', files[0].link);
|
|
1032
|
+
xhr.setRequestHeader('Authorization', `Bearer ${AttachmentHelperService.dropboxCredentials.accessToken}`);
|
|
1033
|
+
xhr.responseType = 'blob';
|
|
1034
|
+
xhr.onload = () => {
|
|
1035
|
+
const blob = xhr.response;
|
|
1036
|
+
const file = new File([blob], files[0].name, { type: blob.type });
|
|
1037
|
+
let filesAdded = [file];
|
|
1038
|
+
this.onFileAdded(filesAdded, true);
|
|
1039
|
+
};
|
|
1040
|
+
xhr.send();
|
|
1041
|
+
},
|
|
1042
|
+
linkType: "direct",
|
|
1043
|
+
multiselect: false,
|
|
1044
|
+
extensions: ['.jpg', '.png', '.pdf', '.doc', '.docx', '.txt']
|
|
1045
|
+
};
|
|
1046
|
+
Dropbox.choose(options);
|
|
1047
|
+
}
|
|
1048
|
+
// Workaround dropzone: disabilito il click degli elementi inclusi nella dropzone per evitare di cliccare due volte
|
|
1049
|
+
onSelectFile(event, fileInput) {
|
|
1050
|
+
if (event.target.tagName === 'BUTTON' || event.target.tagName === 'INPUT' || this.addingLinkMode == true) {
|
|
1051
|
+
return;
|
|
1052
|
+
}
|
|
1053
|
+
fileInput.click();
|
|
1054
|
+
}
|
|
1055
|
+
// Metodo per visualizzare la form di aggiunta di un link
|
|
1056
|
+
switchToAddingLinkMode() {
|
|
1057
|
+
this.addingLinkMode = true;
|
|
1058
|
+
this.newAttachment = {};
|
|
1059
|
+
this.newAttachment.IsImage = false;
|
|
1060
|
+
this.newAttachment.AttachmentType = this.attachmentType.LINK;
|
|
1061
|
+
this.newMultipleAttachments = new Array();
|
|
1062
|
+
this.newMultipleAttachments.push(this.newAttachment);
|
|
1063
|
+
this.createAttachmentForm();
|
|
881
1064
|
}
|
|
882
1065
|
}
|
|
883
|
-
EqpAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
884
|
-
EqpAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", headerTitle: "headerTitle", attachmentsList: "attachmentsList", showMatCard: "showMatCard", multipleAttachment: "multipleAttachment", loadMultipleFiles: "loadMultipleFiles", attachmentsColumns: "attachmentsColumns", emptyTableMessage: "emptyTableMessage", allowOnlyImages: "allowOnlyImages", acceptedFileTypes: "acceptedFileTypes", isDisabled: "isDisabled", showInlinePreview: "showInlinePreview", getAttachmentEndpoint: "getAttachmentEndpoint", productionBaseUrl: "productionBaseUrl", compressionOptions: "compressionOptions", allowedTypes: "allowedTypes", isEqpTableMultiLanguage: "isEqpTableMultiLanguage", tablePaginatorVisible: "tablePaginatorVisible", tablePaginatorSize: "tablePaginatorSize", downloadTooltipPosition: "downloadTooltipPosition", openLinkLabel: "openLinkLabel", addButtonLabel: "addButtonLabel", downloadLabel: "downloadLabel", deleteLabel: "deleteLabel", fileNameLabel: "fileNameLabel", previewLabel: "previewLabel", uploadFileLabel: "uploadFileLabel", confirmLabel: "confirmLabel", abortLabel: "abortLabel", saveLabel: "saveLabel", exitLabel: "exitLabel", eqpTableSearchText: "eqpTableSearchText", deleteDialogTitle: "deleteDialogTitle", deleteDialogMessage: "deleteDialogMessage", noImageSelectedErrorMessage: "noImageSelectedErrorMessage", wrongTypeSelectedErrorMessage: "wrongTypeSelectedErrorMessage", videoPreviewErrorMessage: "videoPreviewErrorMessage", audioPreviewErrorMessage: ["videoPreviewErrorMessage", "audioPreviewErrorMessage"] }, outputs: { localEditedAttachments: "localEditedAttachments", abortAddAttachment: "abortAddAttachment", downloadAttachment: "downloadAttachment", onDeleteAttachment: "onDeleteAttachment" }, viewQueries: [{ propertyName: "dialogAddAttachment", first: true, predicate: ["dialogAddAttachment"], descendants: true, static: true }, { propertyName: "dialogAddMultipleAttachment", first: true, predicate: ["dialogAddMultipleAttachment"], descendants: true, static: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "attachmentTable", first: true, predicate: ["attachmentTable"], descendants: true }, { propertyName: "inlinePreviewTemplate", first: true, predicate: ["inlinePreviewTemplate"], descendants: true, static: true }, { propertyName: "dialogPreview", first: true, predicate: ["dialogPreview"], descendants: true, static: true }], ngImport: i0, 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}\n"], dependencies: [{ kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i13.EqpTableComponent, selector: "eqp-table" }] });
|
|
885
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1066
|
+
EqpAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsComponent, deps: [{ token: i1.MatDialog }, { token: i2.FormBuilder }, { token: i3.DomSanitizer }, { token: i4.HttpClient }, { token: i0.ChangeDetectorRef }, { token: EqpAttachmentService }, { token: i6.ScriptService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1067
|
+
EqpAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: EqpAttachmentsComponent, selector: "eqp-attachments", inputs: { disableAction: "disableAction", showHeader: "showHeader", headerTitle: "headerTitle", attachmentsList: "attachmentsList", showMatCard: "showMatCard", multipleAttachment: "multipleAttachment", loadMultipleFiles: "loadMultipleFiles", attachmentsColumns: "attachmentsColumns", emptyTableMessage: "emptyTableMessage", allowOnlyImages: "allowOnlyImages", acceptedFileTypes: "acceptedFileTypes", isDisabled: "isDisabled", showInlinePreview: "showInlinePreview", getAttachmentEndpoint: "getAttachmentEndpoint", productionBaseUrl: "productionBaseUrl", compressionOptions: "compressionOptions", allowedTypes: "allowedTypes", isEqpTableMultiLanguage: "isEqpTableMultiLanguage", tablePaginatorVisible: "tablePaginatorVisible", isTableSearcheable: "isTableSearcheable", tablePaginatorSize: "tablePaginatorSize", separatedUploadButtons: "separatedUploadButtons", showPreview: "showPreview", singleAttachmentDragAndDrop: "singleAttachmentDragAndDrop", cropOptions: "cropOptions", downloadTooltipPosition: "downloadTooltipPosition", openLinkLabel: "openLinkLabel", addButtonLabel: "addButtonLabel", downloadLabel: "downloadLabel", deleteLabel: "deleteLabel", fileNameLabel: "fileNameLabel", previewLabel: "previewLabel", uploadFileLabel: "uploadFileLabel", confirmLabel: "confirmLabel", abortLabel: "abortLabel", saveLabel: "saveLabel", exitLabel: "exitLabel", uploadWithDropboxLabel: "uploadWithDropboxLabel", cropLabel: "cropLabel", eqpTableSearchText: "eqpTableSearchText", deleteDialogTitle: "deleteDialogTitle", deleteDialogMessage: "deleteDialogMessage", noImageSelectedErrorMessage: "noImageSelectedErrorMessage", wrongTypeSelectedErrorMessage: "wrongTypeSelectedErrorMessage", videoPreviewErrorMessage: "videoPreviewErrorMessage", audioPreviewErrorMessage: ["videoPreviewErrorMessage", "audioPreviewErrorMessage"], flipHorinzontalLabel: "flipHorinzontalLabel", flipVerticalLabel: "flipVerticalLabel", rotateRightLabel: "rotateRightLabel", rotateLeftLabel: "rotateLeftLabel" }, outputs: { localEditedAttachments: "localEditedAttachments", abortAddAttachment: "abortAddAttachment", downloadAttachment: "downloadAttachment", onDeleteAttachment: "onDeleteAttachment" }, viewQueries: [{ propertyName: "dialogAddAttachment", first: true, predicate: ["dialogAddAttachment"], descendants: true, static: true }, { propertyName: "dialogAddMultipleAttachment", first: true, predicate: ["dialogAddMultipleAttachment"], descendants: true, static: true }, { propertyName: "dialogCropImage", first: true, predicate: ["dialogCropImage"], descendants: true, static: true }, { propertyName: "imageCropper", first: true, predicate: ImageCropperComponent, descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "attachmentTable", first: true, predicate: ["attachmentTable"], descendants: true }, { propertyName: "inlinePreviewTemplate", first: true, predicate: ["inlinePreviewTemplate"], descendants: true, static: true }, { propertyName: "dialogPreview", first: true, predicate: ["dialogPreview"], descendants: true, static: true }], ngImport: i0, template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n <div *ngIf=\"!singleAttachmentDragAndDrop\">\r\n <!-- Template del button per l'aggiunta di un allegato -->\r\n <div *ngIf=\"!addingLinkMode\">\r\n <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n </div>\r\n <!-- Template della form per l'aggiunta di un link -->\r\n <div *ngIf=\"addingLinkMode\">\r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\"\r\n *ngIf=\"allowedTypes && allowedTypes.length == 1 && (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n Trascina i file qui\r\n <div class=\"btn-group mt-1\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button> \r\n <div class=\"btn-group\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-start dropdown-toggle\" [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"fileInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\"> \r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </ng-template>\r\n </ngx-file-drop>\r\n </div>\r\n\r\n <button class=\"mb-2 me-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 me-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n mat-raised-button color=\"primary\"\r\n *ngIf=\"showPreview && attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio'))) && attachmentsList[0].IsImage == true\">\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<div *ngIf=\"multipleAttachment == true\">\r\n <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n Trascina i file qui\r\n <div class=\"btn-group mt-1\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button> \r\n <div class=\"btn-group\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-start dropdown-toggle\" [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"fileInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\"> \r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </ng-template>\r\n </ngx-file-drop>\r\n <div class=\"mt-2\">\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\" [isTableSearcheable]=\"isTableSearcheable\">\r\n </eqp-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #dialogCropImage>\r\n <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n <div style=\"overflow-x: hidden;\">\r\n <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\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<ng-template #dialogPreview>\r\n <mat-card class=\"example-card\" *ngIf=\"selectedAttachment\">\r\n <mat-card-content>\r\n <div class=\"row\">\r\n <div class=\"header-title-standard\">\r\n {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n <button type=\"button\" class=\"btn-close closeButton\" mat-dialog-close (click)=\"selectedAttachment = null\"></button>\r\n </div>\r\n </div>\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 <div class=\"row mt-3\">\r\n <div class=\"col-sm-12 text-center\">\r\n <button mat-mini-fab color=\"primary\" matTooltip=\"Download\" (click)=\"viewAttachment(selectedAttachment)\" *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\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 <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button class=\"btn btn-primary mb-4 me-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)=\"addFile(allowedTypes[0], fileInput)\" [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 <i class=\"fa-brands fa-dropbox\" *ngIf=\"allowedTypes[0] == 3\"></i>\r\n <span style=\"margin-left: 10px;\"> {{allowedTypes[0] == 1 ? addButtonLabel + \" file\" : (allowedTypes[0] == 2 ? addButtonLabel + \" link\" : uploadWithDropboxLabel)}}</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 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n *ngIf=\"!separatedUploadButtons && 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 <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"imageInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n\r\n <div *ngIf=\"separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n <div class=\"btn-group\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" (click)=\"imageInput.click()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fas fa-cloud-upload\"></i>\r\n <span style=\"margin-left: 10px;\">File</span>\r\n </button>\r\n <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button *ngIf=\"allowedTypes.includes(2)\" (click)=\"switchToAddingLinkMode()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fas fa-link\"></i>\r\n <span style=\"margin-left: 10px;\">Link</span>\r\n </button>\r\n <button *ngIf=\"allowedTypes.includes(3)\" (click)=\"chooseDropboxFile()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #croppieTemplate>\r\n <div class=\"row m-3\">\r\n <h4>{{cropLabel}}</h4>\r\n </div>\r\n <div class=\"row m-2 crop-large\">\r\n <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n <button [matTooltip]=\"rotateLeftLabel\" *ngIf=\"cropOptions.includes(1)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"rotateLeft()\">\r\n <mat-icon style=\"vertical-align: middle;\">rotate_left</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"rotateRightLabel\" *ngIf=\"cropOptions.includes(1)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"rotateRight()\">\r\n <mat-icon style=\"vertical-align: middle;\">rotate_right</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"flipHorinzontalLabel\" *ngIf=\"cropOptions.includes(2)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"flipHorizontal()\">\r\n <mat-icon style=\"vertical-align: middle;\">flip_horizontal</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"flipVerticalLabel\" *ngIf=\"cropOptions.includes(2)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"flipVertical()\">\r\n <div style=\"transform: rotate(90deg);\"><mat-icon style=\"vertical-align: middle;\">flip_vertical</mat-icon></div>\r\n </button>\r\n <button [matTooltip]=\"'Reset'\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"restoreOriginalDimensions()\">\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 m-2 crop-small\">\r\n <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n <mat-icon *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"rotateLeft()\">rotate_left</mat-icon>\r\n <mat-icon class=\"ms-3\" *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"rotateRight()\">rotate_right</mat-icon>\r\n <mat-icon class=\"ms-3\" *ngIf=\"cropOptions.includes(2)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"flipHorizontal()\">flip_horizontal</mat-icon>\r\n <div class=\"ms-3\" style=\"transform: rotate(90deg);\"><mat-icon *ngIf=\"cropOptions.includes(2)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"flipVertical()\">flip_vertical</mat-icon></div>\r\n <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle;\">replay</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center\">\r\n <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n <div class=\"crop-container\">\r\n <image-cropper [imageFile]=\"selectedFile\" [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\" [canvasRotation]=\"canvasRotation\">\r\n </image-cropper>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center mt-2 mb-2 crop-large\">\r\n <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\" type=\"button\"\r\n (click)=\"confirmAddAttachment()\">\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 <div class=\"row justify-content-center mt-2 mb-2 crop-small\">\r\n <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n <i class=\"fa fa-times\" (click)=\"abortFile()\"></i>\r\n </div>\r\n <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n <i class=\"fa fa-check\" (click)=\"confirmAddAttachment()\"></i>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n <span class=\"mb-1\" style=\"font-size: 20px;\"><i class=\"fa fa-link\"></i>Inserisci l'URL</span>\r\n <form [formGroup]=\"newAttachmentForm\" *ngIf=\"newAttachmentForm\">\r\n <div class=\"row mb-2\" style=\"height: 80px\"> \r\n <div class=\"col-6 d-grid gap-2 mx-auto\">\r\n <div class=\"input-group mb-1\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"{{fileNameLabel}}\" formControlName=\"name\" [(ngModel)]=\"newAttachment.FileName\">\r\n </div>\r\n </div> \r\n <div class=\"col-12 d-grid gap-2\">\r\n <div class=\"input-group\">\r\n <input required type=\"text\" class=\"form-control\" placeholder=\"Link\" formControlName=\"path\" [(ngModel)]=\"newAttachment.FilePath\">\r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button class=\"btn btn-secondary mat-raised-button\" (click)=\"selectedAttachment = null; addingLinkMode = false\" type=\"button\">\r\n {{exitLabel}}\r\n </button>\r\n </div>\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button class=\"btn btn-primary mat-raised-button\" type=\"submit\" (click)=\"confirmAddAttachment(); selectedAttachment = null; addingLinkMode = false\">\r\n {{saveLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\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}.closeButton{float:right}@media (max-width: 768px){.crop-large{display:none}}@media (min-width: 768px){.crop-small{display:none}}@media (max-width: 768px){.crop-container{max-width:55%}}@media (min-width: 768px){.crop-container{max-width:35%}}\n"], dependencies: [{ kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i11.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i12.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i15.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: i16.EqpTableComponent, selector: "eqp-table" }, { kind: "component", type: i17.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i17.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }] });
|
|
1068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsComponent, decorators: [{
|
|
886
1069
|
type: Component,
|
|
887
|
-
args: [{ 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}\n"] }]
|
|
888
|
-
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disableAction: [{
|
|
1070
|
+
args: [{ selector: 'eqp-attachments', template: "<!-- Se richiesta la gestione singola mostra il pulsante di caricamento di un singolo file -->\r\n<div *ngIf=\"multipleAttachment != true\">\r\n <div *ngIf=\"!singleAttachmentDragAndDrop\">\r\n <!-- Template del button per l'aggiunta di un allegato -->\r\n <div *ngIf=\"!addingLinkMode\">\r\n <ng-container *ngTemplateOutlet=\"addAttachmentButton\"></ng-container>\r\n </div>\r\n <!-- Template della form per l'aggiunta di un link -->\r\n <div *ngIf=\"addingLinkMode\">\r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\"\r\n *ngIf=\"allowedTypes && allowedTypes.length == 1 && (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n Trascina i file qui\r\n <div class=\"btn-group mt-1\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button> \r\n <div class=\"btn-group\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-start dropdown-toggle\" [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"fileInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\"> \r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </ng-template>\r\n </ngx-file-drop>\r\n </div>\r\n\r\n <button class=\"mb-2 me-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 me-2 eqp-attachments-preview-btn\" (click)=\"openPreviewDialog(attachmentsList[0])\" type=\"button\"\r\n mat-raised-button color=\"primary\"\r\n *ngIf=\"showPreview && attachmentsList && attachmentsList.length > 0 && attachmentsList[0] && (!attachmentsList[0].FileContentType || (!attachmentsList[0].FileContentType.startsWith('video') && !attachmentsList[0].FileContentType.startsWith('audio'))) && attachmentsList[0].IsImage == true\">\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<div *ngIf=\"multipleAttachment == true\">\r\n <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <ngx-file-drop (onFileDrop)=\"fileDropped($event)\" (click)=\"onSelectFile($event, fileInput)\">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa fa-cloud-upload-alt fa-3x mt-3\"></i>\r\n Trascina i file qui\r\n <div class=\"btn-group mt-1\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-end\" (click)=\"fileInput.click()\">Scegli un file</button> \r\n <div class=\"btn-group\" role=\"group\">\r\n <button type=\"button\" class=\"btn btn-light border-start dropdown-toggle\" [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"fileInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"addingLinkMode\"> \r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </ng-template>\r\n </ngx-file-drop>\r\n <div class=\"mt-2\">\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\" [isTableSearcheable]=\"isTableSearcheable\">\r\n </eqp-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #dialogCropImage>\r\n <!-- Richiama il template per le funzionalit\u00E0 del CROPPIE -->\r\n <div style=\"overflow-x: hidden;\">\r\n <ng-container [ngTemplateOutlet]=\"croppieTemplate\" [ngTemplateOutletContext]=\"{form: newAttachmentForm}\" *ngIf=\"showCropImage == true\"></ng-container>\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<ng-template #dialogPreview>\r\n <mat-card class=\"example-card\" *ngIf=\"selectedAttachment\">\r\n <mat-card-content>\r\n <div class=\"row\">\r\n <div class=\"header-title-standard\">\r\n {{previewLabel}} {{ selectedAttachment?.AttachmentType == attachmentType.FILE ? 'File' : 'Link'}}\r\n <button type=\"button\" class=\"btn-close closeButton\" mat-dialog-close (click)=\"selectedAttachment = null\"></button>\r\n </div>\r\n </div>\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 <div class=\"row mt-3\">\r\n <div class=\"col-sm-12 text-center\">\r\n <button mat-mini-fab color=\"primary\" matTooltip=\"Download\" (click)=\"viewAttachment(selectedAttachment)\" *ngIf=\"selectedAttachment.AttachmentType != AttachmentType.LINK\">\r\n <mat-icon>download</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\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 <input #fileInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button class=\"btn btn-primary mb-4 me-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)=\"addFile(allowedTypes[0], fileInput)\" [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 <i class=\"fa-brands fa-dropbox\" *ngIf=\"allowedTypes[0] == 3\"></i>\r\n <span style=\"margin-left: 10px;\"> {{allowedTypes[0] == 1 ? addButtonLabel + \" file\" : (allowedTypes[0] == 2 ? addButtonLabel + \" link\" : uploadWithDropboxLabel)}}</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 me-5 eqp-attachments-add-btn\" mat-raised-button color=\"primary\" type=\"button\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\" [disabled]=\"isDisabled\"\r\n *ngIf=\"!separatedUploadButtons && 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 <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button *ngIf=\"allowedTypes.includes(1)\" mat-menu-item (click)=\"imageInput.click()\" 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 *ngIf=\"allowedTypes.includes(2)\" mat-menu-item (click)=\"switchToAddingLinkMode()\" 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 <button *ngIf=\"allowedTypes.includes(3)\" mat-menu-item (click)=\"chooseDropboxFile()\" class=\"eqp-attachments-link-btn\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </mat-menu>\r\n\r\n <div *ngIf=\"separatedUploadButtons && allowedTypes && allowedTypes.length > 1 && (multipleAttachment == true || (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0])))\">\r\n <div class=\"btn-group\">\r\n <button *ngIf=\"allowedTypes.includes(1)\" (click)=\"imageInput.click()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fas fa-cloud-upload\"></i>\r\n <span style=\"margin-left: 10px;\">File</span>\r\n </button>\r\n <input #imageInput style=\"display:none;\" id=\"file_attachment\"\r\n name=\"file_attachment\" type=\"file\" (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\" [multiple]=\"loadMultipleFiles\"/>\r\n <button *ngIf=\"allowedTypes.includes(2)\" (click)=\"switchToAddingLinkMode()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fas fa-link\"></i>\r\n <span style=\"margin-left: 10px;\">Link</span>\r\n </button>\r\n <button *ngIf=\"allowedTypes.includes(3)\" (click)=\"chooseDropboxFile()\" class=\"btn btn-secondary eqp-attachments-add-btn\" mat-raised-button color=\"secondary\" type=\"button\">\r\n <i class=\"fa-brands fa-dropbox\"></i>\r\n <span style=\"margin-left: 10px;\">Dropbox</span>\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #croppieTemplate>\r\n <div class=\"row m-3\">\r\n <h4>{{cropLabel}}</h4>\r\n </div>\r\n <div class=\"row m-2 crop-large\">\r\n <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n <button [matTooltip]=\"rotateLeftLabel\" *ngIf=\"cropOptions.includes(1)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"rotateLeft()\">\r\n <mat-icon style=\"vertical-align: middle;\">rotate_left</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"rotateRightLabel\" *ngIf=\"cropOptions.includes(1)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"rotateRight()\">\r\n <mat-icon style=\"vertical-align: middle;\">rotate_right</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"flipHorinzontalLabel\" *ngIf=\"cropOptions.includes(2)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"flipHorizontal()\">\r\n <mat-icon style=\"vertical-align: middle;\">flip_horizontal</mat-icon>\r\n </button>\r\n <button [matTooltip]=\"flipVerticalLabel\" *ngIf=\"cropOptions.includes(2)\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"flipVertical()\">\r\n <div style=\"transform: rotate(90deg);\"><mat-icon style=\"vertical-align: middle;\">flip_vertical</mat-icon></div>\r\n </button>\r\n <button [matTooltip]=\"'Reset'\" class=\"btn btn-primary mat-raised-button ms-2\" (click)=\"restoreOriginalDimensions()\">\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 m-2 crop-small\">\r\n <div class=\"col-md-12 d-flex align-items-center justify-content-center\">\r\n <mat-icon *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"rotateLeft()\">rotate_left</mat-icon>\r\n <mat-icon class=\"ms-3\" *ngIf=\"cropOptions.includes(1)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"rotateRight()\">rotate_right</mat-icon>\r\n <mat-icon class=\"ms-3\" *ngIf=\"cropOptions.includes(2)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"flipHorizontal()\">flip_horizontal</mat-icon>\r\n <div class=\"ms-3\" style=\"transform: rotate(90deg);\"><mat-icon *ngIf=\"cropOptions.includes(2)\" style=\"font-size: 27px; vertical-align: middle;\" (click)=\"flipVertical()\">flip_vertical</mat-icon></div>\r\n <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle;\">replay</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center\">\r\n <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n <div class=\"crop-container\">\r\n <image-cropper [imageFile]=\"selectedFile\" [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\" [canvasRotation]=\"canvasRotation\">\r\n </image-cropper>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row justify-content-center mt-2 mb-2 crop-large\">\r\n <div class=\"col-12 d-flex align-items-center justify-content-center\">\r\n <button class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\" type=\"button\"\r\n (click)=\"confirmAddAttachment()\">\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 <div class=\"row justify-content-center mt-2 mb-2 crop-small\">\r\n <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n <i class=\"fa fa-times\" (click)=\"abortFile()\"></i>\r\n </div>\r\n <div class=\"col-6 d-flex align-items-center justify-content-center\" style=\"font-size: 20px\">\r\n <i class=\"fa fa-check\" (click)=\"confirmAddAttachment()\"></i>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER FORM DI AGGIUNTA DI UN LINK -->\r\n<ng-template #addingLinkTemplate>\r\n <span class=\"mb-1\" style=\"font-size: 20px;\"><i class=\"fa fa-link\"></i>Inserisci l'URL</span>\r\n <form [formGroup]=\"newAttachmentForm\" *ngIf=\"newAttachmentForm\">\r\n <div class=\"row mb-2\" style=\"height: 80px\"> \r\n <div class=\"col-6 d-grid gap-2 mx-auto\">\r\n <div class=\"input-group mb-1\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"{{fileNameLabel}}\" formControlName=\"name\" [(ngModel)]=\"newAttachment.FileName\">\r\n </div>\r\n </div> \r\n <div class=\"col-12 d-grid gap-2\">\r\n <div class=\"input-group\">\r\n <input required type=\"text\" class=\"form-control\" placeholder=\"Link\" formControlName=\"path\" [(ngModel)]=\"newAttachment.FilePath\">\r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button class=\"btn btn-secondary mat-raised-button\" (click)=\"selectedAttachment = null; addingLinkMode = false\" type=\"button\">\r\n {{exitLabel}}\r\n </button>\r\n </div>\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button class=\"btn btn-primary mat-raised-button\" type=\"submit\" (click)=\"confirmAddAttachment(); selectedAttachment = null; addingLinkMode = false\">\r\n {{saveLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\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}.closeButton{float:right}@media (max-width: 768px){.crop-large{display:none}}@media (min-width: 768px){.crop-small{display:none}}@media (max-width: 768px){.crop-container{max-width:55%}}@media (min-width: 768px){.crop-container{max-width:35%}}\n"] }]
|
|
1071
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: EqpAttachmentService }, { type: i6.ScriptService }]; }, propDecorators: { disableAction: [{
|
|
889
1072
|
type: Input,
|
|
890
1073
|
args: ["disableAction"]
|
|
891
1074
|
}], showHeader: [{
|
|
@@ -942,9 +1125,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
942
1125
|
}], tablePaginatorVisible: [{
|
|
943
1126
|
type: Input,
|
|
944
1127
|
args: ["tablePaginatorVisible"]
|
|
1128
|
+
}], isTableSearcheable: [{
|
|
1129
|
+
type: Input,
|
|
1130
|
+
args: ["isTableSearcheable"]
|
|
945
1131
|
}], tablePaginatorSize: [{
|
|
946
1132
|
type: Input,
|
|
947
1133
|
args: ["tablePaginatorSize"]
|
|
1134
|
+
}], separatedUploadButtons: [{
|
|
1135
|
+
type: Input,
|
|
1136
|
+
args: ["separatedUploadButtons"]
|
|
1137
|
+
}], showPreview: [{
|
|
1138
|
+
type: Input,
|
|
1139
|
+
args: ["showPreview"]
|
|
1140
|
+
}], singleAttachmentDragAndDrop: [{
|
|
1141
|
+
type: Input,
|
|
1142
|
+
args: ["singleAttachmentDragAndDrop"]
|
|
1143
|
+
}], cropOptions: [{
|
|
1144
|
+
type: Input,
|
|
1145
|
+
args: ["cropOptions"]
|
|
948
1146
|
}], downloadTooltipPosition: [{
|
|
949
1147
|
type: Input,
|
|
950
1148
|
args: ["downloadTooltipPosition"]
|
|
@@ -981,6 +1179,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
981
1179
|
}], exitLabel: [{
|
|
982
1180
|
type: Input,
|
|
983
1181
|
args: ["exitLabel"]
|
|
1182
|
+
}], uploadWithDropboxLabel: [{
|
|
1183
|
+
type: Input,
|
|
1184
|
+
args: ["uploadWithDropboxLabel"]
|
|
1185
|
+
}], cropLabel: [{
|
|
1186
|
+
type: Input,
|
|
1187
|
+
args: ["cropLabel"]
|
|
984
1188
|
}], eqpTableSearchText: [{
|
|
985
1189
|
type: Input,
|
|
986
1190
|
args: ["eqpTableSearchText"]
|
|
@@ -1002,6 +1206,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1002
1206
|
}], audioPreviewErrorMessage: [{
|
|
1003
1207
|
type: Input,
|
|
1004
1208
|
args: ["videoPreviewErrorMessage"]
|
|
1209
|
+
}], flipHorinzontalLabel: [{
|
|
1210
|
+
type: Input,
|
|
1211
|
+
args: ["flipHorinzontalLabel"]
|
|
1212
|
+
}], flipVerticalLabel: [{
|
|
1213
|
+
type: Input,
|
|
1214
|
+
args: ["flipVerticalLabel"]
|
|
1215
|
+
}], rotateRightLabel: [{
|
|
1216
|
+
type: Input,
|
|
1217
|
+
args: ["rotateRightLabel"]
|
|
1218
|
+
}], rotateLeftLabel: [{
|
|
1219
|
+
type: Input,
|
|
1220
|
+
args: ["rotateLeftLabel"]
|
|
1005
1221
|
}], localEditedAttachments: [{
|
|
1006
1222
|
type: Output
|
|
1007
1223
|
}], abortAddAttachment: [{
|
|
@@ -1018,6 +1234,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1018
1234
|
}], dialogAddMultipleAttachment: [{
|
|
1019
1235
|
type: ViewChild,
|
|
1020
1236
|
args: ['dialogAddMultipleAttachment', { static: true }]
|
|
1237
|
+
}], dialogCropImage: [{
|
|
1238
|
+
type: ViewChild,
|
|
1239
|
+
args: ['dialogCropImage', { static: true }]
|
|
1021
1240
|
}], imageCropper: [{
|
|
1022
1241
|
type: ViewChild,
|
|
1023
1242
|
args: [ImageCropperComponent]
|
|
@@ -1037,8 +1256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1037
1256
|
|
|
1038
1257
|
class MaterialModule {
|
|
1039
1258
|
}
|
|
1040
|
-
MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1041
|
-
MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
1259
|
+
MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1260
|
+
MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
1042
1261
|
MatButtonModule,
|
|
1043
1262
|
MatInputModule,
|
|
1044
1263
|
MatAutocompleteModule,
|
|
@@ -1099,7 +1318,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1099
1318
|
MatTableModule,
|
|
1100
1319
|
MatSortModule,
|
|
1101
1320
|
MatPaginatorModule] });
|
|
1102
|
-
MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
1321
|
+
MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
1103
1322
|
MatButtonModule,
|
|
1104
1323
|
MatInputModule,
|
|
1105
1324
|
MatAutocompleteModule,
|
|
@@ -1160,7 +1379,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
1160
1379
|
MatTableModule,
|
|
1161
1380
|
MatSortModule,
|
|
1162
1381
|
MatPaginatorModule] });
|
|
1163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, decorators: [{
|
|
1164
1383
|
type: NgModule,
|
|
1165
1384
|
args: [{
|
|
1166
1385
|
imports: [
|
|
@@ -1234,20 +1453,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1234
1453
|
|
|
1235
1454
|
class EqpAttachmentsModule {
|
|
1236
1455
|
}
|
|
1237
|
-
EqpAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1238
|
-
EqpAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
1456
|
+
EqpAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1457
|
+
EqpAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, declarations: [EqpAttachmentsComponent], imports: [MaterialModule,
|
|
1239
1458
|
FormsModule,
|
|
1240
1459
|
CommonModule,
|
|
1241
1460
|
ReactiveFormsModule,
|
|
1242
1461
|
ImageCropperModule,
|
|
1243
|
-
EqpTableModule
|
|
1244
|
-
|
|
1462
|
+
EqpTableModule,
|
|
1463
|
+
NgxFileDropModule], exports: [EqpAttachmentsComponent] });
|
|
1464
|
+
EqpAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
|
|
1245
1465
|
FormsModule,
|
|
1246
1466
|
CommonModule,
|
|
1247
1467
|
ReactiveFormsModule,
|
|
1248
1468
|
ImageCropperModule,
|
|
1249
|
-
EqpTableModule
|
|
1250
|
-
|
|
1469
|
+
EqpTableModule,
|
|
1470
|
+
NgxFileDropModule] });
|
|
1471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
|
|
1251
1472
|
type: NgModule,
|
|
1252
1473
|
args: [{
|
|
1253
1474
|
declarations: [EqpAttachmentsComponent],
|
|
@@ -1257,7 +1478,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1257
1478
|
CommonModule,
|
|
1258
1479
|
ReactiveFormsModule,
|
|
1259
1480
|
ImageCropperModule,
|
|
1260
|
-
EqpTableModule
|
|
1481
|
+
EqpTableModule,
|
|
1482
|
+
NgxFileDropModule
|
|
1261
1483
|
],
|
|
1262
1484
|
exports: [EqpAttachmentsComponent]
|
|
1263
1485
|
}]
|
|
@@ -1271,5 +1493,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1271
1493
|
* Generated bundle index. Do not edit.
|
|
1272
1494
|
*/
|
|
1273
1495
|
|
|
1274
|
-
export { AttachmentHelperService, AttachmentType, EqpAttachmentDialogService, EqpAttachmentsComponent, EqpAttachmentsModule };
|
|
1496
|
+
export { AttachmentHelperService, AttachmentType, CropOptionEnum, EqpAttachmentDialogService, EqpAttachmentsComponent, EqpAttachmentsModule };
|
|
1275
1497
|
//# sourceMappingURL=eqproject-eqp-attachments.mjs.map
|