@eqproject/eqp-attachments 2.0.2 → 2.0.4
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 +24 -4
- package/esm2020/lib/eqp-attachments.component.mjs +248 -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 +313 -93
- package/fesm2015/eqproject-eqp-attachments.mjs.map +1 -1
- package/fesm2020/eqproject-eqp-attachments.mjs +305 -77
- package/fesm2020/eqproject-eqp-attachments.mjs.map +1 -1
- package/lib/eqp-attachments.component.d.ts +56 -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,35 @@ 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 i14 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 i15 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 '@angular/material/button';
|
|
17
18
|
import { MatButtonModule } from '@angular/material/button';
|
|
18
|
-
import * as
|
|
19
|
+
import * as i7 from '@angular/material/input';
|
|
19
20
|
import { MatInputModule } from '@angular/material/input';
|
|
20
|
-
import * as
|
|
21
|
+
import * as i8 from '@angular/material/form-field';
|
|
21
22
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
22
|
-
import * as
|
|
23
|
+
import * as i9 from '@angular/material/menu';
|
|
23
24
|
import { MatMenuModule } from '@angular/material/menu';
|
|
24
|
-
import * as
|
|
25
|
+
import * as i10 from '@angular/material/card';
|
|
25
26
|
import { MatCardModule } from '@angular/material/card';
|
|
26
|
-
import * as
|
|
27
|
+
import * as i11 from '@angular/material/icon';
|
|
27
28
|
import { MatIconModule } from '@angular/material/icon';
|
|
28
|
-
import * as
|
|
29
|
+
import * as i12 from '@angular/material/tooltip';
|
|
30
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
31
|
+
import * as i13 from '@angular/common';
|
|
29
32
|
import { CommonModule } from '@angular/common';
|
|
33
|
+
import * as i16 from 'ngx-file-drop';
|
|
34
|
+
import { NgxFileDropModule } from 'ngx-file-drop';
|
|
30
35
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
31
36
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
32
37
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -45,7 +50,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
|
45
50
|
import { MatChipsModule } from '@angular/material/chips';
|
|
46
51
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
47
52
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
48
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
49
53
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
50
54
|
import { MatTableModule } from '@angular/material/table';
|
|
51
55
|
import { MatSortModule } from '@angular/material/sort';
|
|
@@ -56,7 +60,13 @@ var AttachmentType;
|
|
|
56
60
|
(function (AttachmentType) {
|
|
57
61
|
AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
|
|
58
62
|
AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
|
|
59
|
-
|
|
63
|
+
AttachmentType[AttachmentType["DROPBOX"] = 3] = "DROPBOX";
|
|
64
|
+
})(AttachmentType || (AttachmentType = {}));
|
|
65
|
+
var CropOptionEnum;
|
|
66
|
+
(function (CropOptionEnum) {
|
|
67
|
+
CropOptionEnum[CropOptionEnum["ROTATE"] = 1] = "ROTATE";
|
|
68
|
+
CropOptionEnum[CropOptionEnum["FLIP"] = 2] = "FLIP";
|
|
69
|
+
})(CropOptionEnum || (CropOptionEnum = {}));
|
|
60
70
|
|
|
61
71
|
class AttachmentHelperService {
|
|
62
72
|
constructor() { }
|
|
@@ -108,9 +118,14 @@ AttachmentHelperService.fileExtensionIcon = {
|
|
|
108
118
|
"3g2": "fas fa-file-video",
|
|
109
119
|
"mp3": "fas fa-file-audio",
|
|
110
120
|
};
|
|
111
|
-
AttachmentHelperService
|
|
112
|
-
|
|
113
|
-
|
|
121
|
+
AttachmentHelperService.dropboxCredentials = {
|
|
122
|
+
url: 'https://www.dropbox.com/static/api/2/dropins.js',
|
|
123
|
+
apiKey: "aj2xjzms4dl1sch",
|
|
124
|
+
accessToken: "l.BbasuuUFe42u-fXvpmDEteNkGMH-yPTxD79JhRjkBcR94Fm2QLgIjEETvx8TY36HsQQsIe24ofcNjYlg9IhSB7Fguqbi7wH-Jg6bW_3Q8VemsH4pC7Iakat643EzRcw7OMObPSs"
|
|
125
|
+
};
|
|
126
|
+
AttachmentHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
127
|
+
AttachmentHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, providedIn: 'root' });
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: AttachmentHelperService, decorators: [{
|
|
114
129
|
type: Injectable,
|
|
115
130
|
args: [{
|
|
116
131
|
providedIn: 'root'
|
|
@@ -208,9 +223,33 @@ class EqpAttachmentDialogService {
|
|
|
208
223
|
}
|
|
209
224
|
}
|
|
210
225
|
}
|
|
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.
|
|
226
|
+
EqpAttachmentDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
227
|
+
EqpAttachmentDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, providedIn: 'root' });
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentDialogService, decorators: [{
|
|
229
|
+
type: Injectable,
|
|
230
|
+
args: [{
|
|
231
|
+
providedIn: 'root'
|
|
232
|
+
}]
|
|
233
|
+
}], ctorParameters: function () { return []; } });
|
|
234
|
+
|
|
235
|
+
class EqpAttachmentService {
|
|
236
|
+
constructor() {
|
|
237
|
+
}
|
|
238
|
+
loadDropboxScript() {
|
|
239
|
+
const script = document.createElement('script');
|
|
240
|
+
script.type = 'text/javascript';
|
|
241
|
+
script.src = AttachmentHelperService.dropboxCredentials.url;
|
|
242
|
+
script.id = 'dropboxjs';
|
|
243
|
+
script.dataset.appKey = AttachmentHelperService.dropboxCredentials.apiKey;
|
|
244
|
+
script.onload = () => {
|
|
245
|
+
console.log('Dropbox script loaded');
|
|
246
|
+
};
|
|
247
|
+
document.body.appendChild(script);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
EqpAttachmentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
251
|
+
EqpAttachmentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, providedIn: 'root' });
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentService, decorators: [{
|
|
214
253
|
type: Injectable,
|
|
215
254
|
args: [{
|
|
216
255
|
providedIn: 'root'
|
|
@@ -224,12 +263,13 @@ const toBase64 = file => new Promise((resolve, reject) => {
|
|
|
224
263
|
reader.onerror = error => reject(error);
|
|
225
264
|
});
|
|
226
265
|
class EqpAttachmentsComponent {
|
|
227
|
-
constructor(dialog, formBuilder, sanitizer, http, cd) {
|
|
266
|
+
constructor(dialog, formBuilder, sanitizer, http, cd, eqpAttachmentService) {
|
|
228
267
|
this.dialog = dialog;
|
|
229
268
|
this.formBuilder = formBuilder;
|
|
230
269
|
this.sanitizer = sanitizer;
|
|
231
270
|
this.http = http;
|
|
232
271
|
this.cd = cd;
|
|
272
|
+
this.eqpAttachmentService = eqpAttachmentService;
|
|
233
273
|
//#region @Input del componente
|
|
234
274
|
/**
|
|
235
275
|
* Se TRUE allora nasconde la colonna per le azioni sull'allegato (nel caso "multipleAttachment" è TRUE).
|
|
@@ -315,11 +355,36 @@ class EqpAttachmentsComponent {
|
|
|
315
355
|
* degli allegati deve essere paginata oppure no
|
|
316
356
|
*/
|
|
317
357
|
this.tablePaginatorVisible = true;
|
|
358
|
+
/**
|
|
359
|
+
* Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
|
|
360
|
+
* degli allegati deve contenere il campo di ricerca oppure no
|
|
361
|
+
*/
|
|
362
|
+
this.isTableSearcheable = true;
|
|
318
363
|
/**
|
|
319
364
|
* In caso di gestione allegati multipli, permette di stabilire la dimensione pagina di default
|
|
320
365
|
* per la tabella contenente l'elenco degli allegati
|
|
321
366
|
*/
|
|
322
367
|
this.tablePaginatorSize = null;
|
|
368
|
+
/**
|
|
369
|
+
* Permette di scegliere il modo in cui i file devono essere caricati
|
|
370
|
+
*/
|
|
371
|
+
// @Input("uploadType") uploadType: UploadTypeEnum = UploadTypeEnum.FILE_AND_LINK;
|
|
372
|
+
/**
|
|
373
|
+
* Permette di stabilire se i pulsanti per il caricamento dei file sono separati o in un menù a tendina
|
|
374
|
+
*/
|
|
375
|
+
this.separatedUploadButtons = false;
|
|
376
|
+
/**
|
|
377
|
+
* Permette di scegliere se dare la possibilità di vedere o no l'anteprima
|
|
378
|
+
*/
|
|
379
|
+
this.showPreview = true;
|
|
380
|
+
/**
|
|
381
|
+
* In caso di allegato singolo, permette di scegliere se aggiungere file tramite drag and drop
|
|
382
|
+
*/
|
|
383
|
+
this.singleAttachmentDragAndDrop = false;
|
|
384
|
+
/**
|
|
385
|
+
* Array di opzioni che si possono utilizzare per il crop
|
|
386
|
+
*/
|
|
387
|
+
this.cropOptions = [];
|
|
323
388
|
/**
|
|
324
389
|
* Input per definire le label da usare nel componente
|
|
325
390
|
*/
|
|
@@ -335,6 +400,8 @@ class EqpAttachmentsComponent {
|
|
|
335
400
|
this.abortLabel = "Annulla";
|
|
336
401
|
this.saveLabel = "Salva";
|
|
337
402
|
this.exitLabel = "Esci";
|
|
403
|
+
this.uploadWithDropboxLabel = "Carica con Dropbox";
|
|
404
|
+
this.cropLabel = "Scegli le dimensioni dell'immagine";
|
|
338
405
|
this.eqpTableSearchText = "Cerca";
|
|
339
406
|
this.deleteDialogTitle = null;
|
|
340
407
|
this.deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
|
|
@@ -342,6 +409,10 @@ class EqpAttachmentsComponent {
|
|
|
342
409
|
this.wrongTypeSelectedErrorMessage = "Non è possibile caricare il file selezionato.";
|
|
343
410
|
this.videoPreviewErrorMessage = "Impossibile aprire l'anteprima di un file video.";
|
|
344
411
|
this.audioPreviewErrorMessage = "Impossibile aprire l'anteprima di un file audio.";
|
|
412
|
+
this.flipHorinzontalLabel = "Capovolgi orizzontalmente";
|
|
413
|
+
this.flipVerticalLabel = "Capovolgi verticalmente";
|
|
414
|
+
this.rotateRightLabel = "Ruota a destra";
|
|
415
|
+
this.rotateLeftLabel = "Ruota a sinistra";
|
|
345
416
|
//#endregion
|
|
346
417
|
//#region @Output del componente
|
|
347
418
|
/**
|
|
@@ -373,30 +444,37 @@ class EqpAttachmentsComponent {
|
|
|
373
444
|
this.imageChangedEvent = '';
|
|
374
445
|
this.croppedImage = '';
|
|
375
446
|
this.transform = {};
|
|
447
|
+
this.canvasRotation = 0;
|
|
376
448
|
//#endregion
|
|
377
449
|
this.AttachmentType = AttachmentType;
|
|
450
|
+
this.addingLinkMode = false;
|
|
378
451
|
}
|
|
379
452
|
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
|
-
|
|
453
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
454
|
+
//Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
|
|
455
|
+
if (!this.acceptedFileTypes)
|
|
456
|
+
if (this.allowOnlyImages == true)
|
|
457
|
+
this.acceptedFileTypes = "image/*";
|
|
458
|
+
else
|
|
459
|
+
this.acceptedFileTypes = "*";
|
|
460
|
+
// Se non sono stati specificati i tipi da gestire ma è stato passato null o un array vuoto imposto i tipi di default.
|
|
461
|
+
if (!this.allowedTypes || this.allowedTypes.length == 0)
|
|
462
|
+
this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
|
|
463
|
+
else if (this.allowedTypes.find(t => t != AttachmentType.FILE && t != AttachmentType.LINK && t != AttachmentType.DROPBOX)) {
|
|
464
|
+
EqpAttachmentDialogService.Warning("Almeno uno degli AttachmentType selezionati nel parametro \"allowedTypes\" non esiste.");
|
|
465
|
+
this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
|
|
466
|
+
}
|
|
467
|
+
//Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
|
|
468
|
+
if (this.multipleAttachment == true && (!this.attachmentsColumns || this.attachmentsColumns.length == 0)) {
|
|
469
|
+
this.configureColumns();
|
|
470
|
+
}
|
|
471
|
+
if (this.attachmentsList == null)
|
|
472
|
+
this.attachmentsList = new Array();
|
|
473
|
+
this.checkAttachmentImage();
|
|
474
|
+
if (this.allowedTypes.includes(3)) {
|
|
475
|
+
this.eqpAttachmentService.loadDropboxScript();
|
|
476
|
+
}
|
|
477
|
+
});
|
|
400
478
|
}
|
|
401
479
|
reloadData() {
|
|
402
480
|
if (this.attachmentTable)
|
|
@@ -504,26 +582,18 @@ class EqpAttachmentsComponent {
|
|
|
504
582
|
}
|
|
505
583
|
//#endregion
|
|
506
584
|
/**
|
|
507
|
-
*
|
|
585
|
+
* In caso di allegato singolo, sceglie quale metodo richiamare in base al tipo di allegato
|
|
508
586
|
*/
|
|
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
|
-
});
|
|
587
|
+
addFile(attachmentType, imageInput = null) {
|
|
588
|
+
if (attachmentType == AttachmentType.LINK) {
|
|
589
|
+
this.switchToAddingLinkMode();
|
|
590
|
+
}
|
|
591
|
+
else if (attachmentType == AttachmentType.FILE) {
|
|
592
|
+
imageInput.click();
|
|
593
|
+
}
|
|
594
|
+
else {
|
|
595
|
+
this.chooseDropboxFile();
|
|
596
|
+
}
|
|
527
597
|
}
|
|
528
598
|
createAttachmentForm() {
|
|
529
599
|
//Crea la form per la validazione dei campi
|
|
@@ -541,7 +611,7 @@ class EqpAttachmentsComponent {
|
|
|
541
611
|
this.abortFile();
|
|
542
612
|
if (this.newAttachmentForm)
|
|
543
613
|
this.newAttachmentForm.reset();
|
|
544
|
-
this.
|
|
614
|
+
this.dialogRefCropImage.close();
|
|
545
615
|
if (emitCloseEvent == true && this.abortAddAttachment)
|
|
546
616
|
this.abortAddAttachment.emit();
|
|
547
617
|
}
|
|
@@ -563,7 +633,10 @@ class EqpAttachmentsComponent {
|
|
|
563
633
|
return this.newMultipleAttachments.filter(p => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) || (p.AttachmentType == AttachmentType.LINK && !p.FilePath)).length > 0;
|
|
564
634
|
}
|
|
565
635
|
}
|
|
566
|
-
confirmAddAttachment() {
|
|
636
|
+
confirmAddAttachment(multipleAttachments = false) {
|
|
637
|
+
if (this.newAttachment.IsImage && !multipleAttachments) {
|
|
638
|
+
this.imageCropper.crop();
|
|
639
|
+
}
|
|
567
640
|
if (this.loadMultipleFiles != true) {
|
|
568
641
|
if (this.newAttachment.AttachmentType == AttachmentType.LINK && !this.newAttachment.FileName)
|
|
569
642
|
this.newAttachment.FileName = this.newAttachment.FilePath;
|
|
@@ -581,7 +654,9 @@ class EqpAttachmentsComponent {
|
|
|
581
654
|
if (this.attachmentTable)
|
|
582
655
|
this.attachmentTable.reloadDatatable();
|
|
583
656
|
this.localEditedAttachments.emit(this.attachmentsList);
|
|
584
|
-
this.
|
|
657
|
+
if (this.newAttachment.IsImage && !multipleAttachments) {
|
|
658
|
+
this.dialogRefCropImage.close();
|
|
659
|
+
}
|
|
585
660
|
}
|
|
586
661
|
/**
|
|
587
662
|
* Apre il dialog per l'anteprima dell'allegato selezionato.
|
|
@@ -646,14 +721,15 @@ class EqpAttachmentsComponent {
|
|
|
646
721
|
* Se invece il caricamento dei file è MULTIPLO e sono presenti più file allora esegue le stesse operazioni ignorando però il contrllo
|
|
647
722
|
* immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
|
|
648
723
|
*/
|
|
649
|
-
|
|
724
|
+
onFileAdded(event, isFileDropped = false) {
|
|
650
725
|
return __awaiter(this, void 0, void 0, function* () {
|
|
651
726
|
this.showCropImage = false;
|
|
727
|
+
let filesOnInput = isFileDropped ? event : event.target.files;
|
|
652
728
|
//Se è stato richiesto il caricamento SINGOLO oppure se il caricamento è MULTIPLO ma è stato selezionato un solo file
|
|
653
729
|
//allora verifica se il file è un immagine (per mostrare il CROPPIE)
|
|
654
|
-
if ([...
|
|
655
|
-
this.selectedFile =
|
|
656
|
-
this.selectedFiles =
|
|
730
|
+
if ([...filesOnInput].length == 1 || this.loadMultipleFiles != true) {
|
|
731
|
+
this.selectedFile = filesOnInput[0];
|
|
732
|
+
this.selectedFiles = filesOnInput;
|
|
657
733
|
if (!this.selectedFile)
|
|
658
734
|
return;
|
|
659
735
|
//Memorizza i dati per l'allegato
|
|
@@ -664,39 +740,46 @@ class EqpAttachmentsComponent {
|
|
|
664
740
|
let checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
|
|
665
741
|
if (checkOnlyImage == false)
|
|
666
742
|
return;
|
|
667
|
-
|
|
668
|
-
this.createAttachmentForm();
|
|
743
|
+
this.createAttachmentForm();
|
|
669
744
|
//Verifica se il file caricato è un'immagine oppure no. Se è un immagine, prima di caricarla mostra il croppie per il resize.
|
|
670
745
|
//Se non è un immagine allora genera il Base64
|
|
671
746
|
if (this.newAttachment.IsImage == true) {
|
|
672
|
-
this.getImageDimensions(
|
|
747
|
+
this.getImageDimensions(filesOnInput[0]);
|
|
673
748
|
//Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
|
|
674
749
|
this.newAttachmentForm.disable();
|
|
675
750
|
this.newAttachmentForm.controls["customWidth"].enable();
|
|
676
751
|
this.newAttachmentForm.controls["customHeight"].enable();
|
|
677
752
|
this.showCropImage = true;
|
|
678
|
-
this.
|
|
753
|
+
this.imageFile = event;
|
|
754
|
+
this.dialogRefCropImage = this.dialog.open(this.dialogCropImage, {
|
|
755
|
+
disableClose: true,
|
|
756
|
+
hasBackdrop: true,
|
|
757
|
+
width: '60%',
|
|
758
|
+
maxHeight: '80%'
|
|
759
|
+
});
|
|
679
760
|
}
|
|
680
761
|
else {
|
|
681
762
|
this.showCropImage = false;
|
|
682
763
|
let base64Result = yield this.getBase64FromFile(this.selectedFile);
|
|
683
764
|
this.newAttachment.FileDataBase64 = base64Result.Base64File;
|
|
684
765
|
this.newAttachment.FileContentType = base64Result.ContentType;
|
|
766
|
+
this.confirmAddAttachment();
|
|
685
767
|
}
|
|
686
768
|
}
|
|
687
769
|
else {
|
|
688
|
-
this.selectedFiles =
|
|
770
|
+
this.selectedFiles = filesOnInput;
|
|
689
771
|
if (!this.selectedFiles || this.selectedFiles.length == 0)
|
|
690
772
|
return;
|
|
691
773
|
this.newMultipleAttachments = new Array();
|
|
692
774
|
for (let i = 0; i < this.selectedFiles.length; i++) {
|
|
693
|
-
let newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFiles[i], true);
|
|
775
|
+
let newAttachment = yield this.createAttachmentFromUploadedFile(this.selectedFiles[i], true, true);
|
|
694
776
|
//Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
|
|
695
777
|
let checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
|
|
696
778
|
if (checkOnlyImage == false)
|
|
697
779
|
return;
|
|
698
780
|
this.newMultipleAttachments.push(newAttachment);
|
|
699
781
|
}
|
|
782
|
+
this.confirmAddAttachment(true);
|
|
700
783
|
}
|
|
701
784
|
});
|
|
702
785
|
}
|
|
@@ -708,7 +791,7 @@ class EqpAttachmentsComponent {
|
|
|
708
791
|
* @param getBase64 Se TRUE allora calcola base64 e ContentType del file passato in input
|
|
709
792
|
* @returns Restituisce un oggetto di tipo IAttachmentDTO
|
|
710
793
|
*/
|
|
711
|
-
createAttachmentFromUploadedFile(currentFile, getBase64 = true) {
|
|
794
|
+
createAttachmentFromUploadedFile(currentFile, getBase64 = true, cropFile = false) {
|
|
712
795
|
return __awaiter(this, void 0, void 0, function* () {
|
|
713
796
|
let newAttachment = {};
|
|
714
797
|
//Memorizza i dati per l'allegato
|
|
@@ -721,6 +804,9 @@ class EqpAttachmentsComponent {
|
|
|
721
804
|
let base64Result = yield this.getBase64FromFile(currentFile);
|
|
722
805
|
newAttachment.FileDataBase64 = base64Result.Base64File;
|
|
723
806
|
newAttachment.FileContentType = base64Result.ContentType;
|
|
807
|
+
if (newAttachment.IsImage && cropFile) {
|
|
808
|
+
this.getCroppedAndUpload(`data:${base64Result.ContentType};base64,${base64Result.Base64File}`, newAttachment);
|
|
809
|
+
}
|
|
724
810
|
}
|
|
725
811
|
return newAttachment;
|
|
726
812
|
});
|
|
@@ -799,6 +885,7 @@ class EqpAttachmentsComponent {
|
|
|
799
885
|
}
|
|
800
886
|
return true;
|
|
801
887
|
}
|
|
888
|
+
//#region Gestione crop file
|
|
802
889
|
getImageDimensions(img) {
|
|
803
890
|
const reader = new FileReader();
|
|
804
891
|
reader.onload = (e) => {
|
|
@@ -822,6 +909,8 @@ class EqpAttachmentsComponent {
|
|
|
822
909
|
restoreOriginalDimensions() {
|
|
823
910
|
this.customWidth = this.originalWidth;
|
|
824
911
|
this.customHeight = this.originalHeight;
|
|
912
|
+
this.canvasRotation = 0;
|
|
913
|
+
this.transform = {};
|
|
825
914
|
}
|
|
826
915
|
onDimensionsChange(dimension) {
|
|
827
916
|
if (dimension == "H") {
|
|
@@ -833,9 +922,9 @@ class EqpAttachmentsComponent {
|
|
|
833
922
|
}
|
|
834
923
|
imageCropped(event) {
|
|
835
924
|
this.croppedImage = event.base64;
|
|
836
|
-
this.getCroppedAndUpload(this.croppedImage);
|
|
925
|
+
this.getCroppedAndUpload(this.croppedImage, this.newAttachment);
|
|
837
926
|
}
|
|
838
|
-
getCroppedAndUpload(file) {
|
|
927
|
+
getCroppedAndUpload(file, newAttachment) {
|
|
839
928
|
var self = this;
|
|
840
929
|
var file = base64ToFile(file);
|
|
841
930
|
const options = this.compressionOptions;
|
|
@@ -848,21 +937,43 @@ class EqpAttachmentsComponent {
|
|
|
848
937
|
fileReader.onload = function () {
|
|
849
938
|
let resultReader = fileReader.result;
|
|
850
939
|
var marker = ';base64,';
|
|
851
|
-
|
|
940
|
+
newAttachment.FileDataBase64 = resultReader.substring(resultReader.indexOf(marker) + marker.length);
|
|
852
941
|
self.showCropImage = false;
|
|
853
|
-
self.newAttachmentForm
|
|
942
|
+
if (self.newAttachmentForm) {
|
|
943
|
+
self.newAttachmentForm.enable();
|
|
944
|
+
}
|
|
854
945
|
};
|
|
855
946
|
fileReader.readAsDataURL(fileCompressed);
|
|
856
947
|
}));
|
|
857
948
|
}
|
|
858
949
|
confirmCrop() {
|
|
859
950
|
this.imageCropper.crop();
|
|
951
|
+
this.dialogRefCropImage.close();
|
|
952
|
+
}
|
|
953
|
+
rotateLeft() {
|
|
954
|
+
this.canvasRotation--;
|
|
955
|
+
this.flipAfterRotate();
|
|
956
|
+
}
|
|
957
|
+
rotateRight() {
|
|
958
|
+
this.canvasRotation++;
|
|
959
|
+
this.flipAfterRotate();
|
|
960
|
+
}
|
|
961
|
+
flipAfterRotate() {
|
|
962
|
+
const flippedH = this.transform.flipH;
|
|
963
|
+
const flippedV = this.transform.flipV;
|
|
964
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipH: flippedV, flipV: flippedH });
|
|
965
|
+
}
|
|
966
|
+
flipHorizontal() {
|
|
967
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipH: !this.transform.flipH });
|
|
968
|
+
}
|
|
969
|
+
flipVertical() {
|
|
970
|
+
this.transform = Object.assign(Object.assign({}, this.transform), { flipV: !this.transform.flipV });
|
|
860
971
|
}
|
|
972
|
+
//#endregion
|
|
861
973
|
/**
|
|
862
974
|
* Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
|
|
863
975
|
*/
|
|
864
976
|
abortFile() {
|
|
865
|
-
this.imageChangedEvent = '';
|
|
866
977
|
if (this.imageInput)
|
|
867
978
|
this.imageInput.nativeElement.value = '';
|
|
868
979
|
this.selectedFile = null;
|
|
@@ -878,14 +989,84 @@ class EqpAttachmentsComponent {
|
|
|
878
989
|
this.customWidth = null;
|
|
879
990
|
this.originalHeight = null;
|
|
880
991
|
this.originalWidth = null;
|
|
992
|
+
this.dialogRefCropImage.close();
|
|
993
|
+
}
|
|
994
|
+
//#endregion
|
|
995
|
+
// Viene creato un'array observables per memorizzare tutti gli observable creati dalle chiamate a fileEntry.file().
|
|
996
|
+
// Dopo che tutti gli observables sono stati completati, viene utilizzato il metodo subscribe() per eseguire la funzione onFileAdded().
|
|
997
|
+
fileDropped(files) {
|
|
998
|
+
let filesDropped = [];
|
|
999
|
+
const observables = [];
|
|
1000
|
+
for (let i = 0; i < files.length; i++) {
|
|
1001
|
+
if (files[i].fileEntry.isFile) {
|
|
1002
|
+
const fileEntry = files[i].fileEntry;
|
|
1003
|
+
const observable = new Observable((observer) => {
|
|
1004
|
+
fileEntry.file((file) => {
|
|
1005
|
+
filesDropped.push(file);
|
|
1006
|
+
observer.next();
|
|
1007
|
+
observer.complete();
|
|
1008
|
+
});
|
|
1009
|
+
});
|
|
1010
|
+
observables.push(observable);
|
|
1011
|
+
}
|
|
1012
|
+
else {
|
|
1013
|
+
const fileEntry = files[i].fileEntry;
|
|
1014
|
+
console.log(files[i].relativePath, fileEntry);
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
from(observables).pipe(concatMap((observable) => observable)).subscribe({
|
|
1018
|
+
complete: () => {
|
|
1019
|
+
this.onFileAdded(filesDropped, true);
|
|
1020
|
+
}
|
|
1021
|
+
});
|
|
1022
|
+
}
|
|
1023
|
+
// Se il caricamento del file dropbox va a buon fine, la funzione di callback restituisce un array di oggetti.
|
|
1024
|
+
// Viene poi fatta una XMLHttpRequest con responseType 'blob' per convertire il primo elemento della response in un Blob.
|
|
1025
|
+
chooseDropboxFile() {
|
|
1026
|
+
var options = {
|
|
1027
|
+
success: (files) => {
|
|
1028
|
+
const xhr = new XMLHttpRequest();
|
|
1029
|
+
xhr.open('GET', files[0].link);
|
|
1030
|
+
xhr.setRequestHeader('Authorization', `Bearer ${AttachmentHelperService.dropboxCredentials.accessToken}`);
|
|
1031
|
+
xhr.responseType = 'blob';
|
|
1032
|
+
xhr.onload = () => {
|
|
1033
|
+
const blob = xhr.response;
|
|
1034
|
+
const file = new File([blob], files[0].name, { type: blob.type });
|
|
1035
|
+
let filesAdded = [file];
|
|
1036
|
+
this.onFileAdded(filesAdded, true);
|
|
1037
|
+
};
|
|
1038
|
+
xhr.send();
|
|
1039
|
+
},
|
|
1040
|
+
linkType: "direct",
|
|
1041
|
+
multiselect: false,
|
|
1042
|
+
extensions: ['.jpg', '.png', '.pdf', '.doc', '.docx', '.txt']
|
|
1043
|
+
};
|
|
1044
|
+
Dropbox.choose(options);
|
|
1045
|
+
}
|
|
1046
|
+
// Workaround dropzone: disabilito il click degli elementi inclusi nella dropzone per evitare di cliccare due volte
|
|
1047
|
+
onSelectFile(event, fileInput) {
|
|
1048
|
+
if (event.target.tagName === 'BUTTON' || event.target.tagName === 'INPUT' || this.addingLinkMode == true) {
|
|
1049
|
+
return;
|
|
1050
|
+
}
|
|
1051
|
+
fileInput.click();
|
|
1052
|
+
}
|
|
1053
|
+
// Metodo per visualizzare la form di aggiunta di un link
|
|
1054
|
+
switchToAddingLinkMode() {
|
|
1055
|
+
this.addingLinkMode = true;
|
|
1056
|
+
this.newAttachment = {};
|
|
1057
|
+
this.newAttachment.IsImage = false;
|
|
1058
|
+
this.newAttachment.AttachmentType = this.attachmentType.LINK;
|
|
1059
|
+
this.newMultipleAttachments = new Array();
|
|
1060
|
+
this.newMultipleAttachments.push(this.newAttachment);
|
|
1061
|
+
this.createAttachmentForm();
|
|
881
1062
|
}
|
|
882
1063
|
}
|
|
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.
|
|
1064
|
+
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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1065
|
+
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: i6.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: i6.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.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: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.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: i12.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: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i13.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: i14.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: i15.EqpTableComponent, selector: "eqp-table" }, { kind: "component", type: i16.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i16.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }] });
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsComponent, decorators: [{
|
|
886
1067
|
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: [{
|
|
1068
|
+
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"] }]
|
|
1069
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: EqpAttachmentService }]; }, propDecorators: { disableAction: [{
|
|
889
1070
|
type: Input,
|
|
890
1071
|
args: ["disableAction"]
|
|
891
1072
|
}], showHeader: [{
|
|
@@ -942,9 +1123,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
942
1123
|
}], tablePaginatorVisible: [{
|
|
943
1124
|
type: Input,
|
|
944
1125
|
args: ["tablePaginatorVisible"]
|
|
1126
|
+
}], isTableSearcheable: [{
|
|
1127
|
+
type: Input,
|
|
1128
|
+
args: ["isTableSearcheable"]
|
|
945
1129
|
}], tablePaginatorSize: [{
|
|
946
1130
|
type: Input,
|
|
947
1131
|
args: ["tablePaginatorSize"]
|
|
1132
|
+
}], separatedUploadButtons: [{
|
|
1133
|
+
type: Input,
|
|
1134
|
+
args: ["separatedUploadButtons"]
|
|
1135
|
+
}], showPreview: [{
|
|
1136
|
+
type: Input,
|
|
1137
|
+
args: ["showPreview"]
|
|
1138
|
+
}], singleAttachmentDragAndDrop: [{
|
|
1139
|
+
type: Input,
|
|
1140
|
+
args: ["singleAttachmentDragAndDrop"]
|
|
1141
|
+
}], cropOptions: [{
|
|
1142
|
+
type: Input,
|
|
1143
|
+
args: ["cropOptions"]
|
|
948
1144
|
}], downloadTooltipPosition: [{
|
|
949
1145
|
type: Input,
|
|
950
1146
|
args: ["downloadTooltipPosition"]
|
|
@@ -981,6 +1177,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
981
1177
|
}], exitLabel: [{
|
|
982
1178
|
type: Input,
|
|
983
1179
|
args: ["exitLabel"]
|
|
1180
|
+
}], uploadWithDropboxLabel: [{
|
|
1181
|
+
type: Input,
|
|
1182
|
+
args: ["uploadWithDropboxLabel"]
|
|
1183
|
+
}], cropLabel: [{
|
|
1184
|
+
type: Input,
|
|
1185
|
+
args: ["cropLabel"]
|
|
984
1186
|
}], eqpTableSearchText: [{
|
|
985
1187
|
type: Input,
|
|
986
1188
|
args: ["eqpTableSearchText"]
|
|
@@ -1002,6 +1204,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1002
1204
|
}], audioPreviewErrorMessage: [{
|
|
1003
1205
|
type: Input,
|
|
1004
1206
|
args: ["videoPreviewErrorMessage"]
|
|
1207
|
+
}], flipHorinzontalLabel: [{
|
|
1208
|
+
type: Input,
|
|
1209
|
+
args: ["flipHorinzontalLabel"]
|
|
1210
|
+
}], flipVerticalLabel: [{
|
|
1211
|
+
type: Input,
|
|
1212
|
+
args: ["flipVerticalLabel"]
|
|
1213
|
+
}], rotateRightLabel: [{
|
|
1214
|
+
type: Input,
|
|
1215
|
+
args: ["rotateRightLabel"]
|
|
1216
|
+
}], rotateLeftLabel: [{
|
|
1217
|
+
type: Input,
|
|
1218
|
+
args: ["rotateLeftLabel"]
|
|
1005
1219
|
}], localEditedAttachments: [{
|
|
1006
1220
|
type: Output
|
|
1007
1221
|
}], abortAddAttachment: [{
|
|
@@ -1018,6 +1232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1018
1232
|
}], dialogAddMultipleAttachment: [{
|
|
1019
1233
|
type: ViewChild,
|
|
1020
1234
|
args: ['dialogAddMultipleAttachment', { static: true }]
|
|
1235
|
+
}], dialogCropImage: [{
|
|
1236
|
+
type: ViewChild,
|
|
1237
|
+
args: ['dialogCropImage', { static: true }]
|
|
1021
1238
|
}], imageCropper: [{
|
|
1022
1239
|
type: ViewChild,
|
|
1023
1240
|
args: [ImageCropperComponent]
|
|
@@ -1037,8 +1254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1037
1254
|
|
|
1038
1255
|
class MaterialModule {
|
|
1039
1256
|
}
|
|
1040
|
-
MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1041
|
-
MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
1257
|
+
MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1258
|
+
MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
1042
1259
|
MatButtonModule,
|
|
1043
1260
|
MatInputModule,
|
|
1044
1261
|
MatAutocompleteModule,
|
|
@@ -1099,7 +1316,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1099
1316
|
MatTableModule,
|
|
1100
1317
|
MatSortModule,
|
|
1101
1318
|
MatPaginatorModule] });
|
|
1102
|
-
MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.
|
|
1319
|
+
MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
|
|
1103
1320
|
MatButtonModule,
|
|
1104
1321
|
MatInputModule,
|
|
1105
1322
|
MatAutocompleteModule,
|
|
@@ -1160,7 +1377,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
1160
1377
|
MatTableModule,
|
|
1161
1378
|
MatSortModule,
|
|
1162
1379
|
MatPaginatorModule] });
|
|
1163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.
|
|
1380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MaterialModule, decorators: [{
|
|
1164
1381
|
type: NgModule,
|
|
1165
1382
|
args: [{
|
|
1166
1383
|
imports: [
|
|
@@ -1234,20 +1451,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1234
1451
|
|
|
1235
1452
|
class EqpAttachmentsModule {
|
|
1236
1453
|
}
|
|
1237
|
-
EqpAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.
|
|
1238
|
-
EqpAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.
|
|
1454
|
+
EqpAttachmentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1455
|
+
EqpAttachmentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, declarations: [EqpAttachmentsComponent], imports: [MaterialModule,
|
|
1239
1456
|
FormsModule,
|
|
1240
1457
|
CommonModule,
|
|
1241
1458
|
ReactiveFormsModule,
|
|
1242
1459
|
ImageCropperModule,
|
|
1243
|
-
EqpTableModule
|
|
1244
|
-
|
|
1460
|
+
EqpTableModule,
|
|
1461
|
+
NgxFileDropModule], exports: [EqpAttachmentsComponent] });
|
|
1462
|
+
EqpAttachmentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
|
|
1245
1463
|
FormsModule,
|
|
1246
1464
|
CommonModule,
|
|
1247
1465
|
ReactiveFormsModule,
|
|
1248
1466
|
ImageCropperModule,
|
|
1249
|
-
EqpTableModule
|
|
1250
|
-
|
|
1467
|
+
EqpTableModule,
|
|
1468
|
+
NgxFileDropModule] });
|
|
1469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
|
|
1251
1470
|
type: NgModule,
|
|
1252
1471
|
args: [{
|
|
1253
1472
|
declarations: [EqpAttachmentsComponent],
|
|
@@ -1257,7 +1476,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1257
1476
|
CommonModule,
|
|
1258
1477
|
ReactiveFormsModule,
|
|
1259
1478
|
ImageCropperModule,
|
|
1260
|
-
EqpTableModule
|
|
1479
|
+
EqpTableModule,
|
|
1480
|
+
NgxFileDropModule
|
|
1261
1481
|
],
|
|
1262
1482
|
exports: [EqpAttachmentsComponent]
|
|
1263
1483
|
}]
|
|
@@ -1271,5 +1491,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
1271
1491
|
* Generated bundle index. Do not edit.
|
|
1272
1492
|
*/
|
|
1273
1493
|
|
|
1274
|
-
export { AttachmentHelperService, AttachmentType, EqpAttachmentDialogService, EqpAttachmentsComponent, EqpAttachmentsModule };
|
|
1494
|
+
export { AttachmentHelperService, AttachmentType, CropOptionEnum, EqpAttachmentDialogService, EqpAttachmentsComponent, EqpAttachmentsModule };
|
|
1275
1495
|
//# sourceMappingURL=eqproject-eqp-attachments.mjs.map
|