@eqproject/eqp-attachments 2.10.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +1 -0
  2. package/{esm2020 → esm2022}/eqproject-eqp-attachments.mjs +4 -4
  3. package/esm2022/lib/eqp-attachments.component.mjs +1096 -0
  4. package/{esm2020 → esm2022}/lib/eqp-attachments.module.mjs +43 -43
  5. package/esm2022/lib/helpers/attachment.helper.mjs +66 -0
  6. package/{esm2020 → esm2022}/lib/interfaces/IAttachment.mjs +11 -11
  7. package/{esm2020 → esm2022}/lib/interfaces/IOptions.mjs +1 -1
  8. package/{esm2020 → esm2022}/lib/modules/material.module.mjs +231 -231
  9. package/{esm2020 → esm2022}/lib/services/eqp-attachment-dialog.service.mjs +103 -103
  10. package/{esm2020 → esm2022}/lib/services/eqp-attachment.service.mjs +23 -23
  11. package/{esm2020 → esm2022}/public-api.mjs +9 -9
  12. package/fesm2022/eqproject-eqp-attachments.mjs +1565 -0
  13. package/fesm2022/eqproject-eqp-attachments.mjs.map +1 -0
  14. package/index.d.ts +5 -5
  15. package/lib/eqp-attachments.component.d.ts +319 -314
  16. package/lib/eqp-attachments.module.d.ts +13 -13
  17. package/lib/helpers/attachment.helper.d.ts +20 -20
  18. package/lib/interfaces/IAttachment.d.ts +21 -21
  19. package/lib/interfaces/IOptions.d.ts +11 -11
  20. package/lib/modules/material.module.d.ts +37 -37
  21. package/lib/services/eqp-attachment-dialog.service.d.ts +31 -31
  22. package/lib/services/eqp-attachment.service.d.ts +7 -7
  23. package/package.json +15 -20
  24. package/public-api.d.ts +6 -6
  25. package/esm2020/lib/eqp-attachments.component.mjs +0 -1060
  26. package/esm2020/lib/helpers/attachment.helper.mjs +0 -66
  27. package/fesm2015/eqproject-eqp-attachments.mjs +0 -1531
  28. package/fesm2015/eqproject-eqp-attachments.mjs.map +0 -1
  29. package/fesm2020/eqproject-eqp-attachments.mjs +0 -1528
  30. package/fesm2020/eqproject-eqp-attachments.mjs.map +0 -1
@@ -0,0 +1,1565 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
3
+ import * as i2 from '@angular/forms';
4
+ import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
+ import { TooltipPositionType, TypeColumn } from '@eqproject/eqp-common';
6
+ import imageCompression from 'browser-image-compression';
7
+ import * as i14 from 'ngx-image-cropper';
8
+ import { base64ToFile, ImageCropperComponent, ImageCropperModule } from 'ngx-image-cropper';
9
+ import Swal from 'sweetalert2';
10
+ import { Observable, from, concatMap } from 'rxjs';
11
+ import * as i1 from '@angular/material/dialog';
12
+ import { MatDialogModule } from '@angular/material/dialog';
13
+ import * as i3 from '@angular/platform-browser';
14
+ import * as i4 from '@angular/common/http';
15
+ import * as i6 from '@angular/material/button';
16
+ import { MatButtonModule } from '@angular/material/button';
17
+ import * as i7 from '@angular/material/input';
18
+ import { MatInputModule } from '@angular/material/input';
19
+ import * as i8 from '@angular/material/form-field';
20
+ import { MatFormFieldModule } from '@angular/material/form-field';
21
+ import * as i9 from '@angular/material/menu';
22
+ import { MatMenuModule } from '@angular/material/menu';
23
+ import * as i10 from '@angular/material/card';
24
+ import { MatCardModule } from '@angular/material/card';
25
+ import * as i11 from '@angular/material/icon';
26
+ import { MatIconModule } from '@angular/material/icon';
27
+ import * as i12 from '@angular/material/tooltip';
28
+ import { MatTooltipModule } from '@angular/material/tooltip';
29
+ import * as i13 from '@angular/common';
30
+ import { CommonModule } from '@angular/common';
31
+ import * as i15 from '@eqproject/eqp-table';
32
+ import { EqpTableModule } from '@eqproject/eqp-table';
33
+ import * as i16 from 'ngx-file-drop';
34
+ import { NgxFileDropModule } from 'ngx-file-drop';
35
+ import { MatCheckboxModule } from '@angular/material/checkbox';
36
+ import { MatAutocompleteModule } from '@angular/material/autocomplete';
37
+ import { MatDatepickerModule } from '@angular/material/datepicker';
38
+ import { MatRadioModule } from '@angular/material/radio';
39
+ import { MatSelectModule } from '@angular/material/select';
40
+ import { MatSliderModule } from '@angular/material/slider';
41
+ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
42
+ import { MatSidenavModule } from '@angular/material/sidenav';
43
+ import { MatToolbarModule } from '@angular/material/toolbar';
44
+ import { MatListModule } from '@angular/material/list';
45
+ import { MatGridListModule } from '@angular/material/grid-list';
46
+ import { MatStepperModule } from '@angular/material/stepper';
47
+ import { MatTabsModule } from '@angular/material/tabs';
48
+ import { MatExpansionModule } from '@angular/material/expansion';
49
+ import { MatButtonToggleModule } from '@angular/material/button-toggle';
50
+ import { MatChipsModule } from '@angular/material/chips';
51
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
52
+ import { MatProgressBarModule } from '@angular/material/progress-bar';
53
+ import { MatSnackBarModule } from '@angular/material/snack-bar';
54
+ import { MatTableModule } from '@angular/material/table';
55
+ import { MatSortModule } from '@angular/material/sort';
56
+ import { MatPaginatorModule } from '@angular/material/paginator';
57
+ import { MatNativeDateModule } from '@angular/material/core';
58
+
59
+ class AttachmentHelperService {
60
+ static imageMimeTypes = ["image/bmp", "image/gif", "image/jpeg", "image/tiff", "image/png"];
61
+ static fileExtensionIcon = {
62
+ "txt": "fas fa-file-text",
63
+ "pdf": "fas fa-file-pdf",
64
+ "doc": "fas fa-file-word",
65
+ "docx": "fas fa-file-word",
66
+ "xls": "fas fa-file-excel",
67
+ "xlsx": "fas fa-file-excel",
68
+ "jpg": "fas fa-file-image",
69
+ "jpeg": "fas fa-file-image",
70
+ "png": "fas fa-file-image",
71
+ "bmp": "fas fa-file-image",
72
+ "mkv": "fas fa-file-video",
73
+ "flv": "fas fa-file-video",
74
+ "gif": "fas fa-file-video",
75
+ "gifv": "fas fa-file-video",
76
+ "avi": "fas fa-file-video",
77
+ "wmv": "fas fa-file-video",
78
+ "mp4": "fas fa-file-video",
79
+ "m4p": "fas fa-file-video",
80
+ "m4v": "fas fa-file-video",
81
+ "mpg": "fas fa-file-video",
82
+ "mp2": "fas fa-file-video",
83
+ "mpeg": "fas fa-file-video",
84
+ "mpe": "fas fa-file-video",
85
+ "mpv": "fas fa-file-video",
86
+ "m2v": "fas fa-file-video",
87
+ "3gp": "fas fa-file-video",
88
+ "3g2": "fas fa-file-video",
89
+ "mp3": "fas fa-file-audio",
90
+ };
91
+ static dropboxCredentials = {
92
+ url: 'https://www.dropbox.com/static/api/2/dropins.js',
93
+ apiKey: "aj2xjzms4dl1sch",
94
+ accessToken: "l.BbasuuUFe42u-fXvpmDEteNkGMH-yPTxD79JhRjkBcR94Fm2QLgIjEETvx8TY36HsQQsIe24ofcNjYlg9IhSB7Fguqbi7wH-Jg6bW_3Q8VemsH4pC7Iakat643EzRcw7OMObPSs"
95
+ };
96
+ constructor() { }
97
+ /**
98
+ * Restituisce TRUE se il mime type passato nel parametro corrisponde ad un mime type di un'immagine
99
+ * @param mimeType Mime Type da verificare
100
+ */
101
+ static checkImageFromMimeType(mimeType) {
102
+ return this.imageMimeTypes.find(s => s == mimeType) != null;
103
+ }
104
+ /**
105
+ * In base all'estensione passata come parametro, restituisce la FontAwesome corretta da utilizzare.
106
+ * Se l'estensione non viene trovata nella costante riportata dentro common.model.ts restituisce un icona standard
107
+ * @param extension Estensione del file per cui restituire l'icona corretta
108
+ */
109
+ static getIconFromFileExtensione(extension) {
110
+ let fileIcon = this.fileExtensionIcon[extension];
111
+ return fileIcon ?? "fas fa-file";
112
+ }
113
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
114
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, providedIn: 'root' });
115
+ }
116
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttachmentHelperService, decorators: [{
117
+ type: Injectable,
118
+ args: [{
119
+ providedIn: 'root'
120
+ }]
121
+ }], ctorParameters: () => [] });
122
+
123
+ var AttachmentType;
124
+ (function (AttachmentType) {
125
+ AttachmentType[AttachmentType["FILE"] = 1] = "FILE";
126
+ AttachmentType[AttachmentType["LINK"] = 2] = "LINK";
127
+ AttachmentType[AttachmentType["DROPBOX"] = 3] = "DROPBOX";
128
+ })(AttachmentType || (AttachmentType = {}));
129
+ var CropOptionEnum;
130
+ (function (CropOptionEnum) {
131
+ CropOptionEnum[CropOptionEnum["ROTATE"] = 1] = "ROTATE";
132
+ CropOptionEnum[CropOptionEnum["FLIP"] = 2] = "FLIP";
133
+ })(CropOptionEnum || (CropOptionEnum = {}));
134
+
135
+ class EqpAttachmentDialogService {
136
+ constructor() { }
137
+ /**
138
+ * Mostra uno sweet alert di tipo ERROR con il messaggio passato come parametro.
139
+ * @param message Messaggio d'errore da mostrare nello sweetalert
140
+ * @param title Titolo dello sweetalert (di default mostra 'Errore')
141
+ */
142
+ static Error(message, title = null) {
143
+ let currentTitle = title != null ? title : 'Errore';
144
+ if (Array.isArray(message)) {
145
+ currentTitle = title != null ? title : 'Errore';
146
+ let htmlErrors = message.join("<br>");
147
+ Swal.fire({
148
+ title: currentTitle,
149
+ html: htmlErrors,
150
+ icon: 'error'
151
+ });
152
+ }
153
+ else {
154
+ Swal.fire(currentTitle, message, 'error');
155
+ }
156
+ }
157
+ /**
158
+ * Mostra uno sweetalert di tipo CONFIRM con il messaggio passato come parametro e se viene premuto
159
+ * CONFERMA lancia la funzione di callback passata come parametro
160
+ * @param message Messaggio da mostrare nello sweetalert
161
+ * @param title Titolo dello sweetalert (di default mostra 'Info')
162
+ */
163
+ static Confirm(message, confirmCallback, isWarning = false, title = null, customWidth = null) {
164
+ let currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
165
+ if (Array.isArray(message)) {
166
+ let htmlErrors = message.join("<br>");
167
+ Swal.fire({
168
+ title: currentTitle,
169
+ html: htmlErrors,
170
+ width: customWidth ? customWidth : '32rem',
171
+ icon: !isWarning ? 'question' : 'warning',
172
+ showCancelButton: true,
173
+ allowOutsideClick: false,
174
+ allowEscapeKey: false
175
+ }).then((result) => {
176
+ if (result.value && confirmCallback) {
177
+ confirmCallback();
178
+ }
179
+ });
180
+ }
181
+ else {
182
+ Swal.fire({
183
+ title: currentTitle,
184
+ text: message,
185
+ width: customWidth ? customWidth : '32rem',
186
+ icon: !isWarning ? 'question' : 'warning',
187
+ showCancelButton: true,
188
+ allowOutsideClick: false,
189
+ allowEscapeKey: false
190
+ }).then((result) => {
191
+ if (result.value && confirmCallback) {
192
+ confirmCallback();
193
+ }
194
+ });
195
+ }
196
+ }
197
+ /**
198
+ * Mostra uno sweetalert di tipo INFO con il messaggio passato come parametro
199
+ * @param message Messaggio da mostrare nello sweetalert
200
+ * @param title Titolo dello sweetalert (di default mostra 'Info')
201
+ */
202
+ static Info(message, title = null, isToast = null) {
203
+ let currentTitle = title != null ? title : "Informazione:";
204
+ Swal.fire(currentTitle, message, 'info');
205
+ }
206
+ /**
207
+ * Mostra uno sweetalert di tipo WARNING con il messaggio passato come parametro
208
+ * @param message Messaggio da mostrare nello sweetalert
209
+ * @param title Titolo dello sweetalert (di default mostra 'Attenzione!')
210
+ */
211
+ static Warning(message, title = null, isToast = null) {
212
+ let currentTitle = title != null ? title : "Attenzione!";
213
+ if (Array.isArray(message)) {
214
+ let htmlWarnings = message.join("<br>");
215
+ Swal.fire({
216
+ title: currentTitle,
217
+ html: htmlWarnings,
218
+ icon: 'warning'
219
+ });
220
+ }
221
+ else {
222
+ Swal.fire(currentTitle, message, 'warning');
223
+ }
224
+ }
225
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
226
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, providedIn: 'root' });
227
+ }
228
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentDialogService, decorators: [{
229
+ type: Injectable,
230
+ args: [{
231
+ providedIn: 'root'
232
+ }]
233
+ }], ctorParameters: () => [] });
234
+
235
+ class EqpAttachmentService {
236
+ constructor() { }
237
+ loadDropboxScript() {
238
+ const script = document.createElement("script");
239
+ script.type = "text/javascript";
240
+ script.src = AttachmentHelperService.dropboxCredentials.url;
241
+ script.id = "dropboxjs";
242
+ script.dataset.appKey = AttachmentHelperService.dropboxCredentials.apiKey;
243
+ document.body.appendChild(script);
244
+ }
245
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
246
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, providedIn: "root" });
247
+ }
248
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentService, decorators: [{
249
+ type: Injectable,
250
+ args: [{
251
+ providedIn: "root"
252
+ }]
253
+ }], ctorParameters: () => [] });
254
+
255
+ const toBase64 = (file) => new Promise((resolve, reject) => {
256
+ const reader = new FileReader();
257
+ reader.readAsDataURL(file);
258
+ reader.onload = () => resolve(reader.result.toString());
259
+ reader.onerror = (error) => reject(error);
260
+ });
261
+ class EqpAttachmentsComponent {
262
+ dialog;
263
+ formBuilder;
264
+ sanitizer;
265
+ http;
266
+ cd;
267
+ eqpAttachmentService;
268
+ //#region @Input del componente
269
+ /**
270
+ * Se TRUE allora nasconde la colonna per le azioni sull'allegato (nel caso "multipleAttachment" è TRUE).
271
+ */
272
+ disableAction = false;
273
+ /**
274
+ * Se TRUE mostra il titolo nell'header nel caso in cui "multipleAttachment" è TRUE ("Elenco allegati" di default).
275
+ */
276
+ showHeader = true;
277
+ /**
278
+ * Titolo da visualizzare se il parametro "showHeader" è TRUE. Di devault viene visualizzato "Elenco allegati".
279
+ */
280
+ headerTitle = "Elenco allegati";
281
+ /**
282
+ * Sorgente dati da visualizzare. Nel caso si vuole gestire un singolo allegato va passato in ogni caso come Array.
283
+ */
284
+ attachmentsList = null;
285
+ /**
286
+ * Se TRUE non mostra la MatCard (nel caso in cui "multipleAttachment" è TRUE).
287
+ */
288
+ showMatCard = true;
289
+ /**
290
+ * Se FALSE allora il componente mostra solo il pulsante di caricamento di un singolo file, una volta caricato il file invoca l'evento di output "localEditedAttachments".
291
+ * Se TRUE allora il componente mostra l'elenco di tutti gli allegati ricevuto nel parametro "attachmentsList".
292
+ */
293
+ multipleAttachment = true;
294
+ /**
295
+ * Se assume il valore TRUE allora sarà possibile caricare più file per volta. Questa funzionalità è attiva
296
+ * SOLO se si gestiscono allegati multipli, quindi se l'input 'multipleAttachment' assume il valore TRUE, altrimenti è sempre disabilitata.
297
+ */
298
+ loadMultipleFiles = false;
299
+ /**
300
+ * Configurazione delle colonne della eqp-table per la visualizzazione degli allegati (caso "multipleAttachment" è TRUE).
301
+ */
302
+ attachmentsColumns = null;
303
+ /**
304
+ * Imposta il messaggio da visualizzare nel caso in cui la tabella degli allegati (nel caso in cui "multipleAttachment" è TRUE) è vuota.
305
+ */
306
+ emptyTableMessage = "Nessun dato trovato";
307
+ /**
308
+ * Se TRUE allora permette di selezionare soltanto file di tipo immagine, avente uno dei mimetype
309
+ * specificati dentro AttachmentHelperService.
310
+ * Se FALSE permette di selezionare qualsiasi tipo di file
311
+ */
312
+ allowOnlyImages = false;
313
+ /**
314
+ * Specifica i tipi di file che è possibile caricare
315
+ */
316
+ acceptedFileTypes;
317
+ /**
318
+ * Se TRUE disabilita il pulsante di Aggiunta allegato (a prescindere dal valore del parametro "multipleAttachment").
319
+ */
320
+ isDisabled = false;
321
+ /**
322
+ * Mostra/nasconde la colonna per visualizzare l'anteprima dei file nella tabella (caso multipleAtatchments = true).
323
+ */
324
+ showInlinePreview = false;
325
+ /**
326
+ * Endpoint da chiamare per recueprare l'IAttachmentDTO completo da vedere nell'anteprima. La chiamata sarà in POST e nel body
327
+ * conterrà l'IAttachmentDTO selezionato dall'utente.
328
+ * La chiamata viene eseguita solo per l'anteprima delle immagini essendo necessario il base64 completo dell'immagine a dimensione reale.
329
+ * Per documenti/link basta che sia popolata la proprietà FilePath di IAttachmentDTO.
330
+ */
331
+ getAttachmentEndpoint = null;
332
+ /**
333
+ * Hostname dell'ambiente di produzione dell'applicativo. Necessario per visualizzare l'anteprima dei documenti
334
+ * tramite il viewer di google.
335
+ * NOTA: Per visualizzare l'anteprima è necessario che la prorietà FilePath dell'IAttachmentDTO sia popolata e che
336
+ * sia abilitato l'accesso alla cartella sul server tramite hostname.
337
+ */
338
+ productionBaseUrl = null;
339
+ /**
340
+ * Opzioni per la compressione delle immagini caricate.
341
+ */
342
+ compressionOptions = {
343
+ maxSizeMB: 0.5,
344
+ maxWidthOrHeight: 1920,
345
+ useWebWorker: true
346
+ };
347
+ /**
348
+ * Array di AttachmentType che si possono aggiungere
349
+ */
350
+ allowedTypes = [AttachmentType.FILE, AttachmentType.LINK];
351
+ /**
352
+ * Permette di stabilire se la eqp-table contenente l'elenco degli allegati utilizza
353
+ * il multilingua oppure no
354
+ */
355
+ isEqpTableMultiLanguage = false;
356
+ /**
357
+ * Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
358
+ * degli allegati deve essere paginata oppure no
359
+ */
360
+ tablePaginatorVisible = true;
361
+ /**
362
+ * Permette di stabilire, in caso di gestione allegati multipli, se la tabella contenente l'elenco
363
+ * degli allegati deve contenere il campo di ricerca oppure no
364
+ */
365
+ isTableSearcheable = true;
366
+ /**
367
+ * In caso di gestione allegati multipli, permette di stabilire la dimensione pagina di default
368
+ * per la tabella contenente l'elenco degli allegati
369
+ */
370
+ tablePaginatorSize = null;
371
+ /**
372
+ * Permette di scegliere il modo in cui i file devono essere caricati
373
+ */
374
+ // @Input("uploadType") uploadType: UploadTypeEnum = UploadTypeEnum.FILE_AND_LINK;
375
+ /**
376
+ * Permette di stabilire se i pulsanti per il caricamento dei file sono separati o in un menù a tendina
377
+ */
378
+ separatedUploadButtons = false;
379
+ /**
380
+ * Permette di scegliere se dare la possibilità di vedere o no l'anteprima
381
+ */
382
+ showPreview = true;
383
+ /**
384
+ * In caso di allegato singolo, permette di scegliere se aggiungere file tramite drag and drop
385
+ */
386
+ singleAttachmentDragAndDrop = false;
387
+ /**
388
+ * Array di opzioni che si possono utilizzare per il crop
389
+ */
390
+ cropOptions = [];
391
+ /**
392
+ * Classe custom da assegnare al dialog del crop immagini
393
+ */
394
+ cropDialogClass;
395
+ /**
396
+ * Input per definire le label da usare nel componente
397
+ */
398
+ downloadTooltipPosition = TooltipPositionType.Below;
399
+ openLinkLabel = "Apri link";
400
+ addButtonLabel = "Aggiungi";
401
+ downloadLabel = "Download";
402
+ deleteLabel = "Elimina";
403
+ fileNameLabel = "Nome file";
404
+ previewLabel = "Anteprima";
405
+ uploadFileLabel = "Carica file";
406
+ confirmLabel = "Conferma";
407
+ abortLabel = "Annulla";
408
+ saveLabel = "Salva";
409
+ exitLabel = "Esci";
410
+ uploadWithDropboxLabel = "Carica con Dropbox";
411
+ cropLabel = "Scegli le dimensioni dell'immagine";
412
+ eqpTableSearchText = "Cerca";
413
+ deleteDialogTitle = null;
414
+ deleteDialogMessage = "Sei sicuro di voler cancellare quest'allegato?";
415
+ noImageSelectedErrorMessage = "Non è possibile selezionare un file che non sia un'immagine.";
416
+ wrongTypeSelectedErrorMessage = "Non è possibile caricare il file selezionato.";
417
+ videoPreviewErrorMessage = "Impossibile aprire l'anteprima di un file video.";
418
+ audioPreviewErrorMessage = "Impossibile aprire l'anteprima di un file audio.";
419
+ flipHorinzontalLabel = "Capovolgi orizzontalmente";
420
+ flipVerticalLabel = "Capovolgi verticalmente";
421
+ rotateRightLabel = "Ruota a destra";
422
+ rotateLeftLabel = "Ruota a sinistra";
423
+ //#endregion
424
+ //#region @Output del componente
425
+ /**
426
+ * Restituisce la lista aggiornata degli allegati.
427
+ */
428
+ localEditedAttachments = new EventEmitter();
429
+ /**
430
+ * Evento scatenato alla pressione del pulsante ESCI della modale di caricamento file.
431
+ */
432
+ abortAddAttachment = new EventEmitter();
433
+ /**
434
+ * Evento di output che restituisce l'IAttachmentDTO selezionato per il download nel caso FileDataBase64, FileContentType o FileName non fossero specificati.
435
+ */
436
+ downloadAttachment = new EventEmitter();
437
+ /**
438
+ * Evento di output che restituisce l'elemento eliminato prima che questo venga effettivamente rismosso dalla lista.
439
+ */
440
+ onDeleteAttachment = new EventEmitter();
441
+ //#endregion
442
+ //#region Proprietà per gestione caricamento nuovo allegato
443
+ newAttachment = {};
444
+ newMultipleAttachments = [];
445
+ attachmentType = AttachmentType;
446
+ // uploadTypeEnum = UploadTypeEnum;
447
+ newAttachmentForm;
448
+ selectedFile = null;
449
+ selectedFiles = null;
450
+ showCropImage = false;
451
+ dialogAddAttachment;
452
+ dialogRefAddAttachment;
453
+ dialogAddMultipleAttachment;
454
+ dialogRefCropImage;
455
+ dialogCropImage;
456
+ //#endregion
457
+ //#region Proprietà per gestione ridimensionamento file di tipo image
458
+ imageChangedEvent = "";
459
+ croppedImage = "";
460
+ transform = {};
461
+ canvasRotation = 0;
462
+ imageCropper;
463
+ imageInput;
464
+ //#endregion
465
+ AttachmentType = AttachmentType;
466
+ selectedAttachment;
467
+ originalWidth;
468
+ originalHeight;
469
+ customWidth;
470
+ customHeight;
471
+ attachmentTable;
472
+ inlinePreviewTemplate;
473
+ dialogPreview;
474
+ imageFile;
475
+ addingLinkMode = false;
476
+ constructor(dialog, formBuilder, sanitizer, http, cd, eqpAttachmentService) {
477
+ this.dialog = dialog;
478
+ this.formBuilder = formBuilder;
479
+ this.sanitizer = sanitizer;
480
+ this.http = http;
481
+ this.cd = cd;
482
+ this.eqpAttachmentService = eqpAttachmentService;
483
+ }
484
+ async ngOnInit() {
485
+ //Se è stata richiesta la gestione delle sole immagini allora imposta il filtro per le estensioni possibili da caricare
486
+ if (!this.acceptedFileTypes)
487
+ if (this.allowOnlyImages == true)
488
+ this.acceptedFileTypes = "image/*";
489
+ else
490
+ this.acceptedFileTypes = "*";
491
+ // Se non sono stati specificati i tipi da gestire ma è stato passato null o un array vuoto imposto i tipi di default.
492
+ if (!this.allowedTypes || this.allowedTypes.length == 0)
493
+ this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
494
+ else if (this.allowedTypes.find((t) => t != AttachmentType.FILE && t != AttachmentType.LINK && t != AttachmentType.DROPBOX)) {
495
+ EqpAttachmentDialogService.Warning('Almeno uno degli AttachmentType selezionati nel parametro "allowedTypes" non esiste.');
496
+ this.allowedTypes = [AttachmentType.FILE, AttachmentType.LINK, AttachmentType.DROPBOX];
497
+ }
498
+ //Se è stata richiesta la gestione multipla degli allegati allora configura l'eqp-table
499
+ if (this.multipleAttachment == true && (!this.attachmentsColumns || this.attachmentsColumns.length == 0)) {
500
+ this.configureColumns();
501
+ }
502
+ if (this.attachmentsList == null)
503
+ this.attachmentsList = new Array();
504
+ this.checkAttachmentImage();
505
+ if (this.allowedTypes.includes(3)) {
506
+ this.eqpAttachmentService.loadDropboxScript();
507
+ }
508
+ }
509
+ reloadData() {
510
+ if (this.attachmentTable)
511
+ this.attachmentTable.reloadDatatable();
512
+ }
513
+ checkAttachmentImage() {
514
+ this.attachmentsList.forEach((a) => {
515
+ a.IsImage = AttachmentHelperService.checkImageFromMimeType(a.FileContentType);
516
+ });
517
+ }
518
+ //#region Gestione elenco allegati
519
+ /**
520
+ * Configura le colonne per l'eqp-table nel caso in cui il parametro "multipleAttachments" è TRUE.
521
+ */
522
+ configureColumns() {
523
+ this.attachmentsColumns = [];
524
+ if (this.disableAction != true) {
525
+ this.attachmentsColumns.push({
526
+ key: "action",
527
+ display: "",
528
+ type: TypeColumn.MenuAction,
529
+ buttonMenuIcon: "more_vert",
530
+ styles: { flex: "0 0 6%" },
531
+ actions: [
532
+ { name: this.deleteLabel, icon: "delete", fn: (element, index, col) => this.deleteAttachment(element) }
533
+ ]
534
+ });
535
+ }
536
+ let downloadColumn = {
537
+ key: "attachment",
538
+ display: "",
539
+ type: TypeColumn.SimpleAction,
540
+ styles: { flex: "0 0 6%" },
541
+ actions: [
542
+ {
543
+ name: "",
544
+ fontawesome: true,
545
+ icon: (element) => {
546
+ return this.showInlinePreview
547
+ ? element.AttachmentType == AttachmentType.FILE
548
+ ? "fas fa-cloud-download-alt"
549
+ : "fas fa-external-link-alt"
550
+ : this.getAttachmentIcon(element);
551
+ },
552
+ fn: (element, col, elementIndex) => this.viewAttachment(element),
553
+ tooltip: {
554
+ tooltipText: (element) => {
555
+ return element.AttachmentType == AttachmentType.FILE ? this.downloadLabel : this.openLinkLabel;
556
+ },
557
+ tooltipPosition: this.downloadTooltipPosition
558
+ }
559
+ }
560
+ ]
561
+ };
562
+ let inlinePreviewColumn = {
563
+ key: "InlinePreview",
564
+ display: this.previewLabel,
565
+ type: TypeColumn.ExternalTemplate,
566
+ externalTemplate: this.inlinePreviewTemplate,
567
+ styles: { flex: "0 0 10%" }
568
+ };
569
+ let fileNameColumn = { key: "FileName", display: this.fileNameLabel };
570
+ if (this.showInlinePreview) {
571
+ this.attachmentsColumns.push(inlinePreviewColumn);
572
+ this.attachmentsColumns.push(fileNameColumn);
573
+ this.attachmentsColumns.push(downloadColumn);
574
+ }
575
+ else {
576
+ this.attachmentsColumns.push(downloadColumn);
577
+ this.attachmentsColumns.push(fileNameColumn);
578
+ }
579
+ }
580
+ /**
581
+ * Elimina un allegato eliminando anche il file presente nello storage di archiviazione utilizzato (AWS o cartella progetto)
582
+ * @param element IAttachmentDTO da cancellare
583
+ */
584
+ deleteAttachment(element) {
585
+ EqpAttachmentDialogService.Confirm(this.deleteDialogMessage, () => {
586
+ this.removeAttachmentFromList(this.attachmentsList.indexOf(element));
587
+ }, true, this.deleteDialogTitle);
588
+ }
589
+ /**
590
+ * Rimuove l'allegato selezionato dalla lista "attachmentsList" e invoca l'evento di output che restituisce la lista aggiornata.
591
+ * @param attachmentIndex Indice dell'attachment da rimuovere
592
+ */
593
+ removeAttachmentFromList(attachmentIndex) {
594
+ this.onDeleteAttachment.emit(this.attachmentsList[attachmentIndex]);
595
+ this.attachmentsList.splice(attachmentIndex, 1);
596
+ if (this.attachmentTable)
597
+ this.attachmentTable.reloadDatatable();
598
+ this.localEditedAttachments.emit(this.attachmentsList);
599
+ }
600
+ /**
601
+ * Scarica l'allegato o apre il link
602
+ * @param element Allegato da mostrare
603
+ */
604
+ viewAttachment(attachment) {
605
+ if (attachment.AttachmentType == AttachmentType.LINK) {
606
+ window.open(attachment.FilePath, "_blank");
607
+ return;
608
+ }
609
+ if (attachment.FileDataBase64 && attachment.FileContentType && attachment.FileName) {
610
+ let source = `data:${attachment.FileContentType};base64,${attachment.FileDataBase64}`;
611
+ const link = document.createElement("a");
612
+ link.href = source;
613
+ link.download = `${attachment.FileName}`;
614
+ link.click();
615
+ }
616
+ else {
617
+ this.downloadAttachment.emit(attachment);
618
+ }
619
+ }
620
+ /**
621
+ * Ridefinisce l'icona da mostrare nella colonna dell'eqp-table per ogni file.
622
+ * L'icona varia in base all'estensione del file
623
+ * @param attachment
624
+ */
625
+ getAttachmentIcon(attachment) {
626
+ if (attachment.AttachmentType == AttachmentType.LINK)
627
+ return "fas fa-link";
628
+ else
629
+ return AttachmentHelperService.getIconFromFileExtensione(attachment.FileExtension);
630
+ }
631
+ //#endregion
632
+ /**
633
+ * In caso di allegato singolo, sceglie quale metodo richiamare in base al tipo di allegato
634
+ */
635
+ addFile(attachmentType, imageInput = null) {
636
+ if (attachmentType == AttachmentType.LINK) {
637
+ this.switchToAddingLinkMode();
638
+ }
639
+ else if (attachmentType == AttachmentType.FILE) {
640
+ imageInput.click();
641
+ }
642
+ else {
643
+ this.chooseDropboxFile();
644
+ }
645
+ }
646
+ createAttachmentForm() {
647
+ //Crea la form per la validazione dei campi
648
+ this.newAttachmentForm = this.formBuilder.group({
649
+ type: [this.newAttachment.AttachmentType, Validators.required],
650
+ name: [this.newAttachment.FileName],
651
+ path: [this.newAttachment.FilePath],
652
+ customHeight: [this.customHeight],
653
+ customWidth: [this.customWidth]
654
+ });
655
+ }
656
+ close(emitCloseEvent = true) {
657
+ this.newAttachment = {};
658
+ this.newMultipleAttachments = new Array();
659
+ this.abortFile();
660
+ if (this.newAttachmentForm)
661
+ this.newAttachmentForm.reset();
662
+ this.dialogRefCropImage.close();
663
+ this.restoreOriginalDimensions();
664
+ if (emitCloseEvent == true && this.abortAddAttachment)
665
+ this.abortAddAttachment.emit();
666
+ }
667
+ /**
668
+ * In base al tipo di allegato controlla se disabilitare o meno il pulsante per salvare.
669
+ * Funzione usata nel [disable] del pulsante "Salva" del dialog per l'aggiunta di un allegato.
670
+ * @returns
671
+ */
672
+ disableSave() {
673
+ if (this.loadMultipleFiles != true) {
674
+ if (this.newAttachment.AttachmentType == AttachmentType.FILE) {
675
+ return !this.newAttachment.FileDataBase64;
676
+ }
677
+ else {
678
+ return !this.newAttachment.FilePath;
679
+ }
680
+ }
681
+ else {
682
+ return (this.newMultipleAttachments.filter((p) => (p.AttachmentType == AttachmentType.FILE && !p.FileDataBase64) ||
683
+ (p.AttachmentType == AttachmentType.LINK && !p.FilePath)).length > 0);
684
+ }
685
+ }
686
+ confirmAddAttachment() {
687
+ if (this.newAttachment.IsImage) {
688
+ this.newAttachment.FileDataBase64 = this.imageCropper.crop().base64.split(";base64,")[1];
689
+ }
690
+ if (this.loadMultipleFiles != true) {
691
+ if (this.newAttachment.AttachmentType == AttachmentType.LINK && !this.newAttachment.FileName)
692
+ this.newAttachment.FileName = this.newAttachment.FilePath;
693
+ if (this.attachmentsList == null)
694
+ this.attachmentsList = new Array();
695
+ this.attachmentsList.push(this.newAttachment);
696
+ }
697
+ else {
698
+ if (this.newMultipleAttachments == null || this.newMultipleAttachments.length == 0)
699
+ return;
700
+ if (this.attachmentsList == null)
701
+ this.attachmentsList = new Array();
702
+ this.attachmentsList = this.attachmentsList.concat(this.newMultipleAttachments);
703
+ }
704
+ if (this.attachmentTable)
705
+ this.attachmentTable.reloadDatatable();
706
+ this.localEditedAttachments.emit(this.attachmentsList);
707
+ if (this.newAttachment.IsImage) {
708
+ this.dialogRefCropImage.close();
709
+ this.restoreOriginalDimensions();
710
+ }
711
+ }
712
+ /**
713
+ * Apre il dialog per l'anteprima dell'allegato selezionato.
714
+ * @param row
715
+ * @returns
716
+ */
717
+ async openPreviewDialog(row) {
718
+ this.selectedAttachment = JSON.parse(JSON.stringify(row));
719
+ if (this.selectedAttachment.AttachmentType == AttachmentType.FILE) {
720
+ if (this.selectedAttachment.FileContentType.startsWith("video")) {
721
+ EqpAttachmentDialogService.Warning(this.videoPreviewErrorMessage);
722
+ return;
723
+ }
724
+ else if (this.selectedAttachment.FileContentType.startsWith("audio")) {
725
+ EqpAttachmentDialogService.Warning(this.audioPreviewErrorMessage);
726
+ return;
727
+ }
728
+ }
729
+ if (this.getAttachmentEndpoint && this.selectedAttachment.IsImage && !this.selectedAttachment.FileDataBase64) {
730
+ await this.getAttachmentByID()
731
+ .then((res) => {
732
+ this.selectedAttachment.FileDataBase64 = res.FileDataBase64;
733
+ })
734
+ .catch((err) => {
735
+ EqpAttachmentDialogService.Error(err);
736
+ });
737
+ }
738
+ if (this.selectedAttachment.AttachmentType == AttachmentType.LINK) {
739
+ this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedAttachment.FilePath);
740
+ }
741
+ else if (this.selectedAttachment.IsImage &&
742
+ !this.selectedAttachment.FileDataBase64 &&
743
+ !this.selectedAttachment.FileThumbnailBase64) {
744
+ EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima dell'allegato, file mancante.");
745
+ return;
746
+ }
747
+ else if (!this.selectedAttachment.IsImage) {
748
+ if (this.selectedAttachment.FilePath && this.productionBaseUrl) {
749
+ this.selectedAttachment.TrustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://docs.google.com/gview?url=" +
750
+ this.productionBaseUrl +
751
+ "/" +
752
+ this.selectedAttachment.FilePath +
753
+ "&embedded=true");
754
+ }
755
+ else {
756
+ EqpAttachmentDialogService.Info("Impossibile aprire l'anteprima del documento!");
757
+ return;
758
+ }
759
+ }
760
+ this.dialog.open(this.dialogPreview, {
761
+ disableClose: true,
762
+ hasBackdrop: true
763
+ });
764
+ }
765
+ async getAttachmentByID() {
766
+ return this.http.post(this.getAttachmentEndpoint, this.selectedAttachment).toPromise();
767
+ }
768
+ //#region Gestione caricamento file
769
+ /**
770
+ * Evento scatenato alla selezione del file (o dei file).
771
+ * Se il caricamento è SINGOLO o se comunque è stato selezionato un solo file allora si occupa di controllare se si tratta di un immagine in modo da
772
+ * mostrare le funzionalità del croppie (per ritagliare l'immagine) oppure no.
773
+ * Se il file caricato non è un immagine allora genera direttamente il base64 e lo associa all'allegato da salvare.
774
+ * Se invece il caricamento dei file è MULTIPLO e sono presenti più file allora esegue le stesse operazioni ignorando però il contrllo
775
+ * immagine per il croppie (in caso di caricamento multiplo le funzionalità del croppie sono disabilitate).
776
+ */
777
+ async onFileAdded(event, isFileDropped = false) {
778
+ this.showCropImage = false;
779
+ let filesOnInput = isFileDropped ? event : event.target.files;
780
+ //Se è stato richiesto il caricamento SINGOLO oppure se il caricamento è MULTIPLO ma è stato selezionato un solo file
781
+ //allora verifica se il file è un immagine (per mostrare il CROPPIE)
782
+ if ([...filesOnInput].length == 1 || this.loadMultipleFiles != true) {
783
+ this.selectedFile = filesOnInput[0];
784
+ this.selectedFiles = filesOnInput;
785
+ if (!this.selectedFile)
786
+ return;
787
+ //Memorizza i dati per l'allegato
788
+ this.newAttachment = await this.createAttachmentFromUploadedFile(this.selectedFile, false);
789
+ this.newMultipleAttachments = new Array();
790
+ this.newMultipleAttachments.push(this.newAttachment);
791
+ //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
792
+ let checkOnlyImage = this.checkAllowOnlyImageFile(this.newAttachment);
793
+ if (checkOnlyImage == false)
794
+ return;
795
+ this.createAttachmentForm();
796
+ //Verifica se il file caricato è un'immagine oppure no. Se è un immagine, prima di caricarla mostra il croppie per il resize.
797
+ //Se non è un immagine allora genera il Base64
798
+ if (this.newAttachment.IsImage == true) {
799
+ this.getImageDimensions(filesOnInput[0]);
800
+ //Mostra il croppie e disabilita la form finchè non termina la modifica dell'immagine
801
+ this.newAttachmentForm.disable();
802
+ this.newAttachmentForm.controls["customWidth"].enable();
803
+ this.newAttachmentForm.controls["customHeight"].enable();
804
+ this.showCropImage = true;
805
+ this.imageFile = event;
806
+ this.dialogRefCropImage = this.dialog.open(this.dialogCropImage, {
807
+ disableClose: true,
808
+ hasBackdrop: true,
809
+ width: "60%",
810
+ maxHeight: "80%",
811
+ maxWidth: "70vh"
812
+ });
813
+ }
814
+ else {
815
+ this.showCropImage = false;
816
+ let base64Result = await this.getBase64FromFile(this.selectedFile);
817
+ this.newAttachment.FileDataBase64 = base64Result.Base64File;
818
+ this.newAttachment.FileContentType = base64Result.ContentType;
819
+ this.confirmAddAttachment();
820
+ }
821
+ }
822
+ else {
823
+ this.selectedFiles = filesOnInput;
824
+ if (!this.selectedFiles || this.selectedFiles.length == 0)
825
+ return;
826
+ this.newMultipleAttachments = new Array();
827
+ for (let i = 0; i < this.selectedFiles.length; i++) {
828
+ let newAttachment = await this.createAttachmentFromUploadedFile(this.selectedFiles[i], true, true);
829
+ //Se è stata richiesta la gestione delle sole immagini ma per errore è stato selezionato un file che non è un immagine
830
+ let checkOnlyImage = this.checkAllowOnlyImageFile(newAttachment);
831
+ if (checkOnlyImage == false)
832
+ return;
833
+ this.newMultipleAttachments.push(newAttachment);
834
+ }
835
+ this.confirmAddAttachment();
836
+ }
837
+ //Resetto il valore del file input in modo da scatenare il change anche se si dovesse caricare lo stesso file
838
+ if (!isFileDropped)
839
+ event.target.value = "";
840
+ }
841
+ /**
842
+ * A partire dal FILE ricevuto in input ricostruisce l'oggetto IAttachmentDTO e lo restituisce.
843
+ * Se il parametro getBase64 viene passato a TRUE allora, sempre a partire dal file,genera il base64 e
844
+ * ricava il ContentType da associare all'oggetto IAttachmentDTO da restituire
845
+ * @param currentFile Oggetto FILE da processare
846
+ * @param getBase64 Se TRUE allora calcola base64 e ContentType del file passato in input
847
+ * @returns Restituisce un oggetto di tipo IAttachmentDTO
848
+ */
849
+ async createAttachmentFromUploadedFile(currentFile, getBase64 = true, cropFile = false) {
850
+ let newAttachment = {};
851
+ //Memorizza i dati per l'allegato
852
+ newAttachment.AttachmentType = AttachmentType.FILE;
853
+ newAttachment.FileContentType = currentFile.type;
854
+ newAttachment.FileName = currentFile.name;
855
+ newAttachment.FileExtension = currentFile.name.substr(currentFile.name.lastIndexOf(".") + 1);
856
+ newAttachment.IsImage = AttachmentHelperService.checkImageFromMimeType(currentFile.type);
857
+ if (getBase64 == true) {
858
+ let base64Result = await this.getBase64FromFile(currentFile);
859
+ newAttachment.FileDataBase64 = base64Result.Base64File;
860
+ newAttachment.FileContentType = base64Result.ContentType;
861
+ if (newAttachment.IsImage && newAttachment.FileDataBase64 && cropFile) {
862
+ this.getCroppedAndUpload(`data:${base64Result.ContentType};base64,${base64Result.Base64File}`, newAttachment);
863
+ }
864
+ }
865
+ return newAttachment;
866
+ }
867
+ /**
868
+ * A partire dal file passato in input restituisce un oggetto
869
+ * contenente il base64 del file e il suo contentType
870
+ * @param currentFile Oggetto File da cui estrapolare base64 e contentType
871
+ * @returns Restituisce un oggetto avente le proprietà Base64File e ContentType
872
+ */
873
+ async getBase64FromFile(currentFile) {
874
+ let base64File = await toBase64(currentFile);
875
+ let contentType = null;
876
+ if (base64File) {
877
+ // Loris 20/01/2022: PROBLEMA - Quando eseguo l'upload di un file .sql non viene salvato/scaricato correttamente.
878
+ // Questo succede perchè non viene popolato il FileContentType. Per risolvere il problema
879
+ // faccio un controllo e se non esiste il FileContentType allora lo recupero dal base64 ottenuto.
880
+ contentType = base64File.split(",")[0].split(":")[1].split(";")[0];
881
+ // Un altro metodo per leggere il ccontent type del file è tramite una regular expression:
882
+ base64File = base64File.split(",")[1];
883
+ }
884
+ let result = {
885
+ Base64File: base64File,
886
+ ContentType: contentType
887
+ };
888
+ return result;
889
+ }
890
+ /**
891
+ * Controlla se il file che si sta caricando è supportato dal sistema.
892
+ * @returns
893
+ */
894
+ checkAcceptedFiles() {
895
+ if ((this.loadMultipleFiles != true && this.selectedFile.type.startsWith("video")) ||
896
+ (this.loadMultipleFiles == true && [...this.selectedFiles].filter((p) => p.type.startsWith("video")).length > 0))
897
+ return false;
898
+ if (this.acceptedFileTypes == "*")
899
+ return true;
900
+ //Verifica che i tipi del file (o dei file) caricati siano coerenti con quelli accettati dalla direttiva
901
+ let accepted = true;
902
+ if (this.loadMultipleFiles != true)
903
+ accepted = this.acceptedFileTypes.includes(this.selectedFile.type);
904
+ else {
905
+ let uploadedFileTypes = [...this.selectedFiles].map((p) => p.type);
906
+ uploadedFileTypes.forEach((type) => {
907
+ if (!this.acceptedFileTypes.includes(type))
908
+ accepted = false;
909
+ });
910
+ }
911
+ //Questo controllo permette di gestire le casistiche per cui vengono indicati come tipi validi, ad esempio, 'image/*'
912
+ if (!accepted && this.loadMultipleFiles != true) {
913
+ for (let t of this.acceptedFileTypes.split(",").filter((t) => t.includes("*"))) {
914
+ accepted = this.selectedFile.type.startsWith(t.split("*")[0]);
915
+ if (accepted)
916
+ break;
917
+ }
918
+ }
919
+ return accepted;
920
+ }
921
+ /**
922
+ * Se eqp-attachments è stata configurata per il caricamento delle sole immagini allora verifica che il file passato in
923
+ * input sia effettivamente un immagine o no.
924
+ * Se il controllo va a buon fine restituisce TRUE altrimenti mostra un messaggio d'errore e restituisce FALSE
925
+ */
926
+ checkAllowOnlyImageFile(newAttachment) {
927
+ if (this.allowOnlyImages == true && newAttachment.IsImage != true) {
928
+ EqpAttachmentDialogService.Error(this.noImageSelectedErrorMessage);
929
+ this.abortFile();
930
+ return false;
931
+ }
932
+ else if (!this.checkAcceptedFiles()) {
933
+ EqpAttachmentDialogService.Error(this.wrongTypeSelectedErrorMessage);
934
+ this.abortFile();
935
+ return false;
936
+ }
937
+ return true;
938
+ }
939
+ //#region Gestione crop file
940
+ getImageDimensions(img) {
941
+ const reader = new FileReader();
942
+ reader.onload = (e) => {
943
+ const image = new Image();
944
+ image.src = e.target.result;
945
+ image.onload = (rs) => {
946
+ this.originalHeight = rs.currentTarget["height"];
947
+ this.originalWidth = rs.currentTarget["width"];
948
+ if (this.originalWidth > 1280) {
949
+ this.customWidth = 1280;
950
+ this.customHeight = Math.round((1280 * this.originalHeight) / this.originalWidth);
951
+ }
952
+ else {
953
+ this.customHeight = rs.currentTarget["height"];
954
+ this.customWidth = rs.currentTarget["width"];
955
+ }
956
+ };
957
+ };
958
+ reader.readAsDataURL(img);
959
+ }
960
+ restoreOriginalDimensions() {
961
+ this.customWidth = this.originalWidth;
962
+ this.customHeight = this.originalHeight;
963
+ this.canvasRotation = 0;
964
+ this.transform = {};
965
+ }
966
+ onDimensionsChange(dimension) {
967
+ if (dimension == "H") {
968
+ this.customWidth = Math.round((this.customHeight * this.originalWidth) / this.originalHeight);
969
+ }
970
+ else if (dimension == "W") {
971
+ this.customHeight = Math.round((this.customWidth * this.originalHeight) / this.originalWidth);
972
+ }
973
+ }
974
+ imageCropped(event) {
975
+ this.croppedImage = event.base64;
976
+ this.getCroppedAndUpload(this.croppedImage, this.newAttachment);
977
+ }
978
+ getCroppedAndUpload(file, newAttachment) {
979
+ var self = this;
980
+ var file = base64ToFile(file);
981
+ const options = this.compressionOptions;
982
+ /**
983
+ * Comprime l'immagine passando come parametri le options create nell'oggetto sopra, e il file dal reader principale
984
+ */
985
+ imageCompression(file, options).then((fileCompressed) => {
986
+ let fileReader = new FileReader();
987
+ //Faccio la push di ogni file all'interno dell'array di file dell'item da mandare al server
988
+ fileReader.onload = function () {
989
+ let resultReader = fileReader.result;
990
+ var marker = ";base64,";
991
+ newAttachment.FileDataBase64 = resultReader.substring(resultReader.indexOf(marker) + marker.length);
992
+ self.showCropImage = false;
993
+ if (self.newAttachmentForm) {
994
+ self.newAttachmentForm.enable();
995
+ }
996
+ };
997
+ fileReader.readAsDataURL(fileCompressed);
998
+ });
999
+ }
1000
+ // confirmCrop() {
1001
+ // this.imageCropper.crop();
1002
+ // this.dialogRefCropImage.close();
1003
+ // this.restoreOriginalDimensions();
1004
+ // }
1005
+ rotateLeft() {
1006
+ this.canvasRotation--;
1007
+ this.flipAfterRotate();
1008
+ }
1009
+ rotateRight() {
1010
+ this.canvasRotation++;
1011
+ this.flipAfterRotate();
1012
+ }
1013
+ flipAfterRotate() {
1014
+ const flippedH = this.transform.flipH;
1015
+ const flippedV = this.transform.flipV;
1016
+ this.transform = {
1017
+ ...this.transform,
1018
+ flipH: flippedV,
1019
+ flipV: flippedH
1020
+ };
1021
+ }
1022
+ flipHorizontal() {
1023
+ this.transform = {
1024
+ ...this.transform,
1025
+ flipH: !this.transform.flipH
1026
+ };
1027
+ }
1028
+ flipVertical() {
1029
+ this.transform = {
1030
+ ...this.transform,
1031
+ flipV: !this.transform.flipV
1032
+ };
1033
+ }
1034
+ //#endregion
1035
+ /**
1036
+ * Annulla la selezione del file, svuotando l'input e resettando tutte le proprietà dell'IAttachmentDTO
1037
+ */
1038
+ abortFile() {
1039
+ if (this.imageInput)
1040
+ this.imageInput.nativeElement.value = "";
1041
+ this.selectedFile = null;
1042
+ this.selectedFiles = null;
1043
+ this.showCropImage = false;
1044
+ this.newAttachment.IsImage = false;
1045
+ this.newAttachment.FileDataBase64 = null;
1046
+ this.newAttachment.FileName = null;
1047
+ this.newAttachment.FileExtension = null;
1048
+ this.newAttachment.FileContentType = null;
1049
+ this.newMultipleAttachments = new Array();
1050
+ this.customHeight = null;
1051
+ this.customWidth = null;
1052
+ this.originalHeight = null;
1053
+ this.originalWidth = null;
1054
+ this.dialogRefCropImage.close();
1055
+ this.restoreOriginalDimensions();
1056
+ }
1057
+ //#endregion
1058
+ // Viene creato un'array observables per memorizzare tutti gli observable creati dalle chiamate a fileEntry.file().
1059
+ // Dopo che tutti gli observables sono stati completati, viene utilizzato il metodo subscribe() per eseguire la funzione onFileAdded().
1060
+ fileDropped(files) {
1061
+ let filesDropped = [];
1062
+ const observables = [];
1063
+ for (let i = 0; i < files.length; i++) {
1064
+ if (files[i].fileEntry.isFile) {
1065
+ const fileEntry = files[i].fileEntry;
1066
+ const observable = new Observable((observer) => {
1067
+ fileEntry.file((file) => {
1068
+ filesDropped.push(file);
1069
+ observer.next();
1070
+ observer.complete();
1071
+ });
1072
+ });
1073
+ observables.push(observable);
1074
+ }
1075
+ else {
1076
+ const fileEntry = files[i].fileEntry;
1077
+ console.log(files[i].relativePath, fileEntry);
1078
+ }
1079
+ }
1080
+ from(observables)
1081
+ .pipe(concatMap((observable) => observable))
1082
+ .subscribe({
1083
+ complete: () => {
1084
+ this.onFileAdded(filesDropped, true);
1085
+ }
1086
+ });
1087
+ }
1088
+ // Se il caricamento del file dropbox va a buon fine, la funzione di callback restituisce un array di oggetti.
1089
+ // Viene poi fatta una XMLHttpRequest con responseType 'blob' per convertire il primo elemento della response in un Blob.
1090
+ chooseDropboxFile() {
1091
+ var options = {
1092
+ success: (files) => {
1093
+ const xhr = new XMLHttpRequest();
1094
+ xhr.open("GET", files[0].link);
1095
+ xhr.setRequestHeader("Authorization", `Bearer ${AttachmentHelperService.dropboxCredentials.accessToken}`);
1096
+ xhr.responseType = "blob";
1097
+ xhr.onload = () => {
1098
+ const blob = xhr.response;
1099
+ const file = new File([blob], files[0].name, { type: blob.type });
1100
+ let filesAdded = [file];
1101
+ this.onFileAdded(filesAdded, true);
1102
+ };
1103
+ xhr.send();
1104
+ },
1105
+ linkType: "direct",
1106
+ multiselect: false,
1107
+ extensions: [".jpg", ".png", ".pdf", ".doc", ".docx", ".txt"]
1108
+ };
1109
+ Dropbox.choose(options);
1110
+ }
1111
+ // Workaround dropzone: disabilito il click degli elementi inclusi nella dropzone per evitare di cliccare due volte
1112
+ onSelectFile(event, fileInput) {
1113
+ if (event.target.tagName === "BUTTON" ||
1114
+ event.target.tagName === "INPUT" ||
1115
+ this.addingLinkMode == true) {
1116
+ return;
1117
+ }
1118
+ fileInput.click();
1119
+ }
1120
+ // Metodo per visualizzare la form di aggiunta di un link
1121
+ switchToAddingLinkMode() {
1122
+ this.addingLinkMode = true;
1123
+ this.newAttachment = {};
1124
+ this.newAttachment.IsImage = false;
1125
+ this.newAttachment.AttachmentType = this.attachmentType.LINK;
1126
+ this.newMultipleAttachments = new Array();
1127
+ this.newMultipleAttachments.push(this.newAttachment);
1128
+ this.createAttachmentForm();
1129
+ }
1130
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 });
1131
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", cropDialogClass: "cropDialogClass", 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\" class=\"text-center\">\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\" class=\"text-center\">\r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n <input\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <ngx-file-drop\r\n (onFileDrop)=\"fileDropped($event)\"\r\n (click)=\"onSelectFile($event, fileInput)\"\r\n *ngIf=\"\r\n allowedTypes &&\r\n allowedTypes.includes(1) &&\r\n (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa-solid 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\r\n type=\"button\"\r\n class=\"btn btn-light border-start dropdown-toggle\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"fileInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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 <div class=\"text-center\">\r\n <button\r\n class=\"mb-2 me-2 eqp-attachments-download-btn\"\r\n (click)=\"viewAttachment(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n 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\r\n class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n color=\"primary\"\r\n *ngIf=\"\r\n showPreview &&\r\n attachmentsList &&\r\n attachmentsList.length > 0 &&\r\n attachmentsList[0] &&\r\n (!attachmentsList[0].FileContentType ||\r\n (!attachmentsList[0].FileContentType.startsWith('video') &&\r\n !attachmentsList[0].FileContentType.startsWith('audio'))) &&\r\n attachmentsList[0].IsImage == true\r\n \">\r\n <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n </button>\r\n <button\r\n class=\"mb-2 eqp-attachments-delete-btn\"\r\n (click)=\"deleteAttachment(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n [disabled]=\"isDisabled\">\r\n <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n </button>\r\n </div>\r\n <div\r\n class=\"row\"\r\n style=\"margin-top: 10px\"\r\n *ngIf=\"\r\n attachmentsList.length > 0 &&\r\n attachmentsList[0] &&\r\n attachmentsList[0].FileDataBase64 &&\r\n attachmentsList[0].IsImage == true\r\n \">\r\n <div class=\"col-sm-12 d-flex justify-content-center\">\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\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [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-solid 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\r\n type=\"button\"\r\n class=\"btn btn-light border-start dropdown-toggle\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"fileInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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\r\n #attachmentTable\r\n [createMatCard]=\"false\"\r\n #table\r\n [tableColumnFields]=\"attachmentsColumns\"\r\n [isMultiLanguage]=\"isEqpTableMultiLanguage\"\r\n [data]=\"attachmentsList\"\r\n [paginatorVisible]=\"tablePaginatorVisible\"\r\n [matPaginatorSize]=\"tablePaginatorSize\"\r\n [emptyTableMessage]=\"emptyTableMessage\"\r\n [searchText]=\"eqpTableSearchText\"\r\n [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\" [ngClass]=\"cropDialogClass\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"croppieTemplate\"\r\n [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n *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\r\n class=\"inline-preview-container\"\r\n *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\"\r\n (click)=\"openPreviewDialog(row)\">\r\n <img src=\"data:image/png;base64,{{ row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64 }}\" />\r\n </div>\r\n <div\r\n class=\"inline-preview-container\"\r\n *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\"\r\n (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\r\n type=\"button\"\r\n class=\"btn-close closeButton\"\r\n mat-dialog-close\r\n (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\r\n class=\"image-preview\"\r\n src=\"data:image/png;base64,{{\r\n selectedAttachment.FileDataBase64\r\n ? selectedAttachment.FileDataBase64\r\n : selectedAttachment.FileThumbnailBase64\r\n }}\" />\r\n </div>\r\n\r\n <!-- ANTEPRIMA LINK -->\r\n <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n <iframe\r\n class=\"link-preview\"\r\n [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\r\n mat-mini-fab\r\n color=\"primary\"\r\n matTooltip=\"Download\"\r\n (click)=\"viewAttachment(selectedAttachment)\"\r\n *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<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n *ngIf=\"\r\n allowedTypes &&\r\n allowedTypes.length == 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \"\r\n (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n [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\">\r\n {{\r\n allowedTypes[0] == 1\r\n ? addButtonLabel + \" file\"\r\n : allowedTypes[0] == 2\r\n ? addButtonLabel + \" link\"\r\n : uploadWithDropboxLabel\r\n }}</span\r\n >\r\n </button>\r\n\r\n <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n <button\r\n class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"\r\n [disabled]=\"isDisabled\"\r\n *ngIf=\"\r\n !separatedUploadButtons &&\r\n allowedTypes &&\r\n allowedTypes.length > 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\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\r\n #imageInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"imageInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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\r\n *ngIf=\"\r\n separatedUploadButtons &&\r\n allowedTypes &&\r\n allowedTypes.length > 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\r\n <div class=\"btn-group\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n (click)=\"imageInput.click()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n type=\"button\">\r\n <i class=\"fa-solid fa-cloud-upload\"></i>\r\n <span style=\"margin-left: 10px\">File</span>\r\n </button>\r\n <input\r\n #imageInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n (click)=\"switchToAddingLinkMode()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n (click)=\"chooseDropboxFile()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n 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\r\n [matTooltip]=\"rotateLeftLabel\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"rotateLeft()\">\r\n <mat-icon style=\"vertical-align: middle\">rotate_left</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"rotateRightLabel\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"rotateRight()\">\r\n <mat-icon style=\"vertical-align: middle\">rotate_right</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"flipHorinzontalLabel\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"flipHorizontal()\">\r\n <mat-icon style=\"vertical-align: middle\">flip_horizontal</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"flipVerticalLabel\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (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\r\n [matTooltip]=\"'Reset'\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (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()\"\r\n >rotate_left</mat-icon\r\n >\r\n <mat-icon\r\n class=\"ms-3\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"rotateRight()\"\r\n >rotate_right</mat-icon\r\n >\r\n <mat-icon\r\n class=\"ms-3\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"flipHorizontal()\"\r\n >flip_horizontal</mat-icon\r\n >\r\n <div class=\"ms-3\" style=\"transform: rotate(90deg)\">\r\n <mat-icon\r\n *ngIf=\"cropOptions.includes(2)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"flipVertical()\"\r\n >flip_vertical</mat-icon\r\n >\r\n </div>\r\n <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle\"\r\n >replay</mat-icon\r\n >\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\r\n [imageFile]=\"selectedFile\"\r\n [maintainAspectRatio]=\"false\"\r\n [autoCrop]=\"false\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"4 / 3\"\r\n [cropperMinWidth]=\"128\"\r\n [onlyScaleDown]=\"true\"\r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"0\"\r\n [transform]=\"transform\"\r\n [alignImage]=\"'left'\"\r\n format=\"png\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n [resizeToWidth]=\"customWidth\"\r\n [resizeToHeight]=\"customHeight\"\r\n [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\r\n class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\"\r\n 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\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"{{ fileNameLabel }}\"\r\n formControlName=\"name\"\r\n [(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\r\n required\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Link\"\r\n formControlName=\"path\"\r\n [(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\r\n class=\"btn btn-secondary mat-raised-button\"\r\n (click)=\"selectedAttachment = null; addingLinkMode = false\"\r\n type=\"button\">\r\n {{ exitLabel }}\r\n </button>\r\n </div>\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button\r\n class=\"btn btn-primary mat-raised-button\"\r\n type=\"submit\"\r\n (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>\r\n", styles: ["ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone{min-height:30vh;border-radius:5px!important;background-color:#e4e6ea!important;cursor:pointer;font-size:17px!important;border:dotted!important;padding-top:7vh}ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone .ngx-file-drop__content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#73777a!important;margin:auto}.custom-height .mat-form-field-wrapper{height:20px}.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] ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatMiniFabButton, selector: "button[mat-mini-fab]", 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", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], 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", "cropperFrameAriaLabel", "output", "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]" }] });
1132
+ }
1133
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsComponent, decorators: [{
1134
+ type: Component,
1135
+ 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\" class=\"text-center\">\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\" class=\"text-center\">\r\n <ng-container *ngTemplateOutlet=\"addingLinkTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"singleAttachmentDragAndDrop\">\r\n <input\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <ngx-file-drop\r\n (onFileDrop)=\"fileDropped($event)\"\r\n (click)=\"onSelectFile($event, fileInput)\"\r\n *ngIf=\"\r\n allowedTypes &&\r\n allowedTypes.includes(1) &&\r\n (!attachmentsList || attachmentsList.length == 0 || (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\r\n <ng-template ngx-file-drop-content-tmp *ngIf=\"!addingLinkMode\">\r\n <i class=\"fa-solid 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\r\n type=\"button\"\r\n class=\"btn btn-light border-start dropdown-toggle\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"fileInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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 <div class=\"text-center\">\r\n <button\r\n class=\"mb-2 me-2 eqp-attachments-download-btn\"\r\n (click)=\"viewAttachment(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n 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\r\n class=\"mb-2 me-2 eqp-attachments-preview-btn\"\r\n (click)=\"openPreviewDialog(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n color=\"primary\"\r\n *ngIf=\"\r\n showPreview &&\r\n attachmentsList &&\r\n attachmentsList.length > 0 &&\r\n attachmentsList[0] &&\r\n (!attachmentsList[0].FileContentType ||\r\n (!attachmentsList[0].FileContentType.startsWith('video') &&\r\n !attachmentsList[0].FileContentType.startsWith('audio'))) &&\r\n attachmentsList[0].IsImage == true\r\n \">\r\n <mat-icon>visibility</mat-icon> {{ previewLabel }}\r\n </button>\r\n <button\r\n class=\"mb-2 eqp-attachments-delete-btn\"\r\n (click)=\"deleteAttachment(attachmentsList[0])\"\r\n type=\"button\"\r\n mat-raised-button\r\n *ngIf=\"attachmentsList && attachmentsList.length > 0 && attachmentsList[0]\"\r\n [disabled]=\"isDisabled\">\r\n <mat-icon>delete</mat-icon> {{ deleteLabel }}\r\n </button>\r\n </div>\r\n <div\r\n class=\"row\"\r\n style=\"margin-top: 10px\"\r\n *ngIf=\"\r\n attachmentsList.length > 0 &&\r\n attachmentsList[0] &&\r\n attachmentsList[0].FileDataBase64 &&\r\n attachmentsList[0].IsImage == true\r\n \">\r\n <div class=\"col-sm-12 d-flex justify-content-center\">\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\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [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-solid 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\r\n type=\"button\"\r\n class=\"btn btn-light border-start dropdown-toggle\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"></button>\r\n <mat-menu #attachmentTypeMenu=\"matMenu\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"fileInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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\r\n #attachmentTable\r\n [createMatCard]=\"false\"\r\n #table\r\n [tableColumnFields]=\"attachmentsColumns\"\r\n [isMultiLanguage]=\"isEqpTableMultiLanguage\"\r\n [data]=\"attachmentsList\"\r\n [paginatorVisible]=\"tablePaginatorVisible\"\r\n [matPaginatorSize]=\"tablePaginatorSize\"\r\n [emptyTableMessage]=\"emptyTableMessage\"\r\n [searchText]=\"eqpTableSearchText\"\r\n [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\" [ngClass]=\"cropDialogClass\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"croppieTemplate\"\r\n [ngTemplateOutletContext]=\"{ form: newAttachmentForm }\"\r\n *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\r\n class=\"inline-preview-container\"\r\n *ngIf=\"row.AttachmentType != AttachmentType.LINK && row.IsImage\"\r\n (click)=\"openPreviewDialog(row)\">\r\n <img src=\"data:image/png;base64,{{ row.FileThumbnailBase64 ? row.FileThumbnailBase64 : row.FileDataBase64 }}\" />\r\n </div>\r\n <div\r\n class=\"inline-preview-container\"\r\n *ngIf=\"row.AttachmentType != AttachmentType.LINK && !row.IsImage\"\r\n (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\r\n type=\"button\"\r\n class=\"btn-close closeButton\"\r\n mat-dialog-close\r\n (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\r\n class=\"image-preview\"\r\n src=\"data:image/png;base64,{{\r\n selectedAttachment.FileDataBase64\r\n ? selectedAttachment.FileDataBase64\r\n : selectedAttachment.FileThumbnailBase64\r\n }}\" />\r\n </div>\r\n\r\n <!-- ANTEPRIMA LINK -->\r\n <div class=\"col-12 preview-container\" *ngIf=\"!selectedAttachment.IsImage\">\r\n <iframe\r\n class=\"link-preview\"\r\n [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\r\n mat-mini-fab\r\n color=\"primary\"\r\n matTooltip=\"Download\"\r\n (click)=\"viewAttachment(selectedAttachment)\"\r\n *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<!-- TEMPLATE PER IL PULSANTE DI AGGIUNTA NUOVO ALLEGATO -->\r\n<ng-template #addAttachmentButton>\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\r\n #fileInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n *ngIf=\"\r\n allowedTypes &&\r\n allowedTypes.length == 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \"\r\n (click)=\"addFile(allowedTypes[0], fileInput)\"\r\n [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\">\r\n {{\r\n allowedTypes[0] == 1\r\n ? addButtonLabel + \" file\"\r\n : allowedTypes[0] == 2\r\n ? addButtonLabel + \" link\"\r\n : uploadWithDropboxLabel\r\n }}</span\r\n >\r\n </button>\r\n\r\n <!-- Pulsante per aprire il menu per la scelta del tipo di Attachment da creare -->\r\n <button\r\n class=\"btn btn-primary mb-4 me-5 eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"attachmentTypeMenu\"\r\n [disabled]=\"isDisabled\"\r\n *ngIf=\"\r\n !separatedUploadButtons &&\r\n allowedTypes &&\r\n allowedTypes.length > 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\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\r\n #imageInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n mat-menu-item\r\n (click)=\"imageInput.click()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n mat-menu-item\r\n (click)=\"switchToAddingLinkMode()\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n mat-menu-item\r\n (click)=\"chooseDropboxFile()\"\r\n 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\r\n *ngIf=\"\r\n separatedUploadButtons &&\r\n allowedTypes &&\r\n allowedTypes.length > 1 &&\r\n (multipleAttachment == true ||\r\n !attachmentsList ||\r\n attachmentsList.length == 0 ||\r\n (attachmentsList.length > 0 && !attachmentsList[0]))\r\n \">\r\n <div class=\"btn-group\">\r\n <button\r\n *ngIf=\"allowedTypes.includes(1)\"\r\n (click)=\"imageInput.click()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n type=\"button\">\r\n <i class=\"fa-solid fa-cloud-upload\"></i>\r\n <span style=\"margin-left: 10px\">File</span>\r\n </button>\r\n <input\r\n #imageInput\r\n style=\"display: none\"\r\n id=\"file_attachment\"\r\n name=\"file_attachment\"\r\n type=\"file\"\r\n (change)=\"onFileAdded($event)\"\r\n [accept]=\"acceptedFileTypes\"\r\n [multiple]=\"loadMultipleFiles\" />\r\n <button\r\n *ngIf=\"allowedTypes.includes(2)\"\r\n (click)=\"switchToAddingLinkMode()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n 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\r\n *ngIf=\"allowedTypes.includes(3)\"\r\n (click)=\"chooseDropboxFile()\"\r\n class=\"btn btn-secondary eqp-attachments-add-btn\"\r\n mat-raised-button\r\n color=\"secondary\"\r\n 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\r\n [matTooltip]=\"rotateLeftLabel\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"rotateLeft()\">\r\n <mat-icon style=\"vertical-align: middle\">rotate_left</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"rotateRightLabel\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"rotateRight()\">\r\n <mat-icon style=\"vertical-align: middle\">rotate_right</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"flipHorinzontalLabel\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (click)=\"flipHorizontal()\">\r\n <mat-icon style=\"vertical-align: middle\">flip_horizontal</mat-icon>\r\n </button>\r\n <button\r\n [matTooltip]=\"flipVerticalLabel\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (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\r\n [matTooltip]=\"'Reset'\"\r\n class=\"btn btn-primary mat-raised-button ms-2\"\r\n (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()\"\r\n >rotate_left</mat-icon\r\n >\r\n <mat-icon\r\n class=\"ms-3\"\r\n *ngIf=\"cropOptions.includes(1)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"rotateRight()\"\r\n >rotate_right</mat-icon\r\n >\r\n <mat-icon\r\n class=\"ms-3\"\r\n *ngIf=\"cropOptions.includes(2)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"flipHorizontal()\"\r\n >flip_horizontal</mat-icon\r\n >\r\n <div class=\"ms-3\" style=\"transform: rotate(90deg)\">\r\n <mat-icon\r\n *ngIf=\"cropOptions.includes(2)\"\r\n style=\"font-size: 27px; vertical-align: middle\"\r\n (click)=\"flipVertical()\"\r\n >flip_vertical</mat-icon\r\n >\r\n </div>\r\n <mat-icon class=\"ms-3\" (click)=\"restoreOriginalDimensions()\" style=\"font-size: 27px; vertical-align: middle\"\r\n >replay</mat-icon\r\n >\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\r\n [imageFile]=\"selectedFile\"\r\n [maintainAspectRatio]=\"false\"\r\n [autoCrop]=\"false\"\r\n [containWithinAspectRatio]=\"false\"\r\n [aspectRatio]=\"4 / 3\"\r\n [cropperMinWidth]=\"128\"\r\n [onlyScaleDown]=\"true\"\r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"0\"\r\n [transform]=\"transform\"\r\n [alignImage]=\"'left'\"\r\n format=\"png\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n [resizeToWidth]=\"customWidth\"\r\n [resizeToHeight]=\"customHeight\"\r\n [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\r\n class=\"btn btn-primary mat-raised-button eqp-attachments-confirm-btn me-2\"\r\n 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\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"{{ fileNameLabel }}\"\r\n formControlName=\"name\"\r\n [(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\r\n required\r\n type=\"text\"\r\n class=\"form-control\"\r\n placeholder=\"Link\"\r\n formControlName=\"path\"\r\n [(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\r\n class=\"btn btn-secondary mat-raised-button\"\r\n (click)=\"selectedAttachment = null; addingLinkMode = false\"\r\n type=\"button\">\r\n {{ exitLabel }}\r\n </button>\r\n </div>\r\n <div class=\"col-6 d-grid gap-2\">\r\n <button\r\n class=\"btn btn-primary mat-raised-button\"\r\n type=\"submit\"\r\n (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>\r\n", styles: ["ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone{min-height:30vh;border-radius:5px!important;background-color:#e4e6ea!important;cursor:pointer;font-size:17px!important;border:dotted!important;padding-top:7vh}ngx-file-drop ::ng-deep .ngx-file-drop__drop-zone .ngx-file-drop__content{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#73777a!important;margin:auto}.custom-height .mat-form-field-wrapper{height:20px}.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"] }]
1136
+ }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.FormBuilder }, { type: i3.DomSanitizer }, { type: i4.HttpClient }, { type: i0.ChangeDetectorRef }, { type: EqpAttachmentService }], propDecorators: { disableAction: [{
1137
+ type: Input,
1138
+ args: ["disableAction"]
1139
+ }], showHeader: [{
1140
+ type: Input,
1141
+ args: ["showHeader"]
1142
+ }], headerTitle: [{
1143
+ type: Input,
1144
+ args: ["headerTitle"]
1145
+ }], attachmentsList: [{
1146
+ type: Input,
1147
+ args: ["attachmentsList"]
1148
+ }], showMatCard: [{
1149
+ type: Input,
1150
+ args: ["showMatCard"]
1151
+ }], multipleAttachment: [{
1152
+ type: Input,
1153
+ args: ["multipleAttachment"]
1154
+ }], loadMultipleFiles: [{
1155
+ type: Input,
1156
+ args: ["loadMultipleFiles"]
1157
+ }], attachmentsColumns: [{
1158
+ type: Input,
1159
+ args: ["attachmentsColumns"]
1160
+ }], emptyTableMessage: [{
1161
+ type: Input,
1162
+ args: ["emptyTableMessage"]
1163
+ }], allowOnlyImages: [{
1164
+ type: Input,
1165
+ args: ["allowOnlyImages"]
1166
+ }], acceptedFileTypes: [{
1167
+ type: Input,
1168
+ args: ["acceptedFileTypes"]
1169
+ }], isDisabled: [{
1170
+ type: Input,
1171
+ args: ["isDisabled"]
1172
+ }], showInlinePreview: [{
1173
+ type: Input,
1174
+ args: ["showInlinePreview"]
1175
+ }], getAttachmentEndpoint: [{
1176
+ type: Input,
1177
+ args: ["getAttachmentEndpoint"]
1178
+ }], productionBaseUrl: [{
1179
+ type: Input,
1180
+ args: ["productionBaseUrl"]
1181
+ }], compressionOptions: [{
1182
+ type: Input,
1183
+ args: ["compressionOptions"]
1184
+ }], allowedTypes: [{
1185
+ type: Input,
1186
+ args: ["allowedTypes"]
1187
+ }], isEqpTableMultiLanguage: [{
1188
+ type: Input,
1189
+ args: ["isEqpTableMultiLanguage"]
1190
+ }], tablePaginatorVisible: [{
1191
+ type: Input,
1192
+ args: ["tablePaginatorVisible"]
1193
+ }], isTableSearcheable: [{
1194
+ type: Input,
1195
+ args: ["isTableSearcheable"]
1196
+ }], tablePaginatorSize: [{
1197
+ type: Input,
1198
+ args: ["tablePaginatorSize"]
1199
+ }], separatedUploadButtons: [{
1200
+ type: Input,
1201
+ args: ["separatedUploadButtons"]
1202
+ }], showPreview: [{
1203
+ type: Input,
1204
+ args: ["showPreview"]
1205
+ }], singleAttachmentDragAndDrop: [{
1206
+ type: Input,
1207
+ args: ["singleAttachmentDragAndDrop"]
1208
+ }], cropOptions: [{
1209
+ type: Input,
1210
+ args: ["cropOptions"]
1211
+ }], cropDialogClass: [{
1212
+ type: Input,
1213
+ args: ["cropDialogClass"]
1214
+ }], downloadTooltipPosition: [{
1215
+ type: Input,
1216
+ args: ["downloadTooltipPosition"]
1217
+ }], openLinkLabel: [{
1218
+ type: Input,
1219
+ args: ["openLinkLabel"]
1220
+ }], addButtonLabel: [{
1221
+ type: Input,
1222
+ args: ["addButtonLabel"]
1223
+ }], downloadLabel: [{
1224
+ type: Input,
1225
+ args: ["downloadLabel"]
1226
+ }], deleteLabel: [{
1227
+ type: Input,
1228
+ args: ["deleteLabel"]
1229
+ }], fileNameLabel: [{
1230
+ type: Input,
1231
+ args: ["fileNameLabel"]
1232
+ }], previewLabel: [{
1233
+ type: Input,
1234
+ args: ["previewLabel"]
1235
+ }], uploadFileLabel: [{
1236
+ type: Input,
1237
+ args: ["uploadFileLabel"]
1238
+ }], confirmLabel: [{
1239
+ type: Input,
1240
+ args: ["confirmLabel"]
1241
+ }], abortLabel: [{
1242
+ type: Input,
1243
+ args: ["abortLabel"]
1244
+ }], saveLabel: [{
1245
+ type: Input,
1246
+ args: ["saveLabel"]
1247
+ }], exitLabel: [{
1248
+ type: Input,
1249
+ args: ["exitLabel"]
1250
+ }], uploadWithDropboxLabel: [{
1251
+ type: Input,
1252
+ args: ["uploadWithDropboxLabel"]
1253
+ }], cropLabel: [{
1254
+ type: Input,
1255
+ args: ["cropLabel"]
1256
+ }], eqpTableSearchText: [{
1257
+ type: Input,
1258
+ args: ["eqpTableSearchText"]
1259
+ }], deleteDialogTitle: [{
1260
+ type: Input,
1261
+ args: ["deleteDialogTitle"]
1262
+ }], deleteDialogMessage: [{
1263
+ type: Input,
1264
+ args: ["deleteDialogMessage"]
1265
+ }], noImageSelectedErrorMessage: [{
1266
+ type: Input,
1267
+ args: ["noImageSelectedErrorMessage"]
1268
+ }], wrongTypeSelectedErrorMessage: [{
1269
+ type: Input,
1270
+ args: ["wrongTypeSelectedErrorMessage"]
1271
+ }], videoPreviewErrorMessage: [{
1272
+ type: Input,
1273
+ args: ["videoPreviewErrorMessage"]
1274
+ }], audioPreviewErrorMessage: [{
1275
+ type: Input,
1276
+ args: ["videoPreviewErrorMessage"]
1277
+ }], flipHorinzontalLabel: [{
1278
+ type: Input,
1279
+ args: ["flipHorinzontalLabel"]
1280
+ }], flipVerticalLabel: [{
1281
+ type: Input,
1282
+ args: ["flipVerticalLabel"]
1283
+ }], rotateRightLabel: [{
1284
+ type: Input,
1285
+ args: ["rotateRightLabel"]
1286
+ }], rotateLeftLabel: [{
1287
+ type: Input,
1288
+ args: ["rotateLeftLabel"]
1289
+ }], localEditedAttachments: [{
1290
+ type: Output
1291
+ }], abortAddAttachment: [{
1292
+ type: Output
1293
+ }], downloadAttachment: [{
1294
+ type: Output,
1295
+ args: ["downloadAttachment"]
1296
+ }], onDeleteAttachment: [{
1297
+ type: Output,
1298
+ args: ["onDeleteAttachment"]
1299
+ }], dialogAddAttachment: [{
1300
+ type: ViewChild,
1301
+ args: ["dialogAddAttachment", { static: true }]
1302
+ }], dialogAddMultipleAttachment: [{
1303
+ type: ViewChild,
1304
+ args: ["dialogAddMultipleAttachment", { static: true }]
1305
+ }], dialogCropImage: [{
1306
+ type: ViewChild,
1307
+ args: ["dialogCropImage", { static: true }]
1308
+ }], imageCropper: [{
1309
+ type: ViewChild,
1310
+ args: [ImageCropperComponent]
1311
+ }], imageInput: [{
1312
+ type: ViewChild,
1313
+ args: ["imageInput"]
1314
+ }], attachmentTable: [{
1315
+ type: ViewChild,
1316
+ args: ["attachmentTable", { static: false }]
1317
+ }], inlinePreviewTemplate: [{
1318
+ type: ViewChild,
1319
+ args: ["inlinePreviewTemplate", { static: true }]
1320
+ }], dialogPreview: [{
1321
+ type: ViewChild,
1322
+ args: ["dialogPreview", { static: true }]
1323
+ }] } });
1324
+
1325
+ class MaterialModule {
1326
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1327
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
1328
+ MatButtonModule,
1329
+ MatInputModule,
1330
+ MatAutocompleteModule,
1331
+ MatDatepickerModule,
1332
+ MatFormFieldModule,
1333
+ MatRadioModule,
1334
+ MatSelectModule,
1335
+ MatSliderModule,
1336
+ MatSlideToggleModule,
1337
+ MatMenuModule,
1338
+ MatSidenavModule,
1339
+ MatToolbarModule,
1340
+ MatListModule,
1341
+ MatGridListModule,
1342
+ MatCardModule,
1343
+ MatStepperModule,
1344
+ MatTabsModule,
1345
+ MatExpansionModule,
1346
+ MatButtonToggleModule,
1347
+ MatChipsModule,
1348
+ MatIconModule,
1349
+ MatProgressSpinnerModule,
1350
+ MatProgressBarModule,
1351
+ MatDialogModule,
1352
+ MatTooltipModule,
1353
+ MatSnackBarModule,
1354
+ MatTableModule,
1355
+ MatSortModule,
1356
+ MatPaginatorModule,
1357
+ MatDatepickerModule,
1358
+ MatNativeDateModule], exports: [MatCheckboxModule,
1359
+ MatButtonModule,
1360
+ MatInputModule,
1361
+ MatAutocompleteModule,
1362
+ MatDatepickerModule,
1363
+ MatFormFieldModule,
1364
+ MatRadioModule,
1365
+ MatSelectModule,
1366
+ MatSliderModule,
1367
+ MatSlideToggleModule,
1368
+ MatMenuModule,
1369
+ MatSidenavModule,
1370
+ MatToolbarModule,
1371
+ MatListModule,
1372
+ MatGridListModule,
1373
+ MatCardModule,
1374
+ MatStepperModule,
1375
+ MatTabsModule,
1376
+ MatExpansionModule,
1377
+ MatButtonToggleModule,
1378
+ MatChipsModule,
1379
+ MatIconModule,
1380
+ MatProgressSpinnerModule,
1381
+ MatProgressBarModule,
1382
+ MatDialogModule,
1383
+ MatTooltipModule,
1384
+ MatSnackBarModule,
1385
+ MatTableModule,
1386
+ MatSortModule,
1387
+ MatPaginatorModule] });
1388
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, imports: [MatCheckboxModule,
1389
+ MatButtonModule,
1390
+ MatInputModule,
1391
+ MatAutocompleteModule,
1392
+ MatDatepickerModule,
1393
+ MatFormFieldModule,
1394
+ MatRadioModule,
1395
+ MatSelectModule,
1396
+ MatSliderModule,
1397
+ MatSlideToggleModule,
1398
+ MatMenuModule,
1399
+ MatSidenavModule,
1400
+ MatToolbarModule,
1401
+ MatListModule,
1402
+ MatGridListModule,
1403
+ MatCardModule,
1404
+ MatStepperModule,
1405
+ MatTabsModule,
1406
+ MatExpansionModule,
1407
+ MatButtonToggleModule,
1408
+ MatChipsModule,
1409
+ MatIconModule,
1410
+ MatProgressSpinnerModule,
1411
+ MatProgressBarModule,
1412
+ MatDialogModule,
1413
+ MatTooltipModule,
1414
+ MatSnackBarModule,
1415
+ MatTableModule,
1416
+ MatSortModule,
1417
+ MatPaginatorModule,
1418
+ MatDatepickerModule,
1419
+ MatNativeDateModule, MatCheckboxModule,
1420
+ MatButtonModule,
1421
+ MatInputModule,
1422
+ MatAutocompleteModule,
1423
+ MatDatepickerModule,
1424
+ MatFormFieldModule,
1425
+ MatRadioModule,
1426
+ MatSelectModule,
1427
+ MatSliderModule,
1428
+ MatSlideToggleModule,
1429
+ MatMenuModule,
1430
+ MatSidenavModule,
1431
+ MatToolbarModule,
1432
+ MatListModule,
1433
+ MatGridListModule,
1434
+ MatCardModule,
1435
+ MatStepperModule,
1436
+ MatTabsModule,
1437
+ MatExpansionModule,
1438
+ MatButtonToggleModule,
1439
+ MatChipsModule,
1440
+ MatIconModule,
1441
+ MatProgressSpinnerModule,
1442
+ MatProgressBarModule,
1443
+ MatDialogModule,
1444
+ MatTooltipModule,
1445
+ MatSnackBarModule,
1446
+ MatTableModule,
1447
+ MatSortModule,
1448
+ MatPaginatorModule] });
1449
+ }
1450
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialModule, decorators: [{
1451
+ type: NgModule,
1452
+ args: [{
1453
+ imports: [
1454
+ MatCheckboxModule,
1455
+ MatButtonModule,
1456
+ MatInputModule,
1457
+ MatAutocompleteModule,
1458
+ MatDatepickerModule,
1459
+ MatFormFieldModule,
1460
+ MatRadioModule,
1461
+ MatSelectModule,
1462
+ MatSliderModule,
1463
+ MatSlideToggleModule,
1464
+ MatMenuModule,
1465
+ MatSidenavModule,
1466
+ MatToolbarModule,
1467
+ MatListModule,
1468
+ MatGridListModule,
1469
+ MatCardModule,
1470
+ MatStepperModule,
1471
+ MatTabsModule,
1472
+ MatExpansionModule,
1473
+ MatButtonToggleModule,
1474
+ MatChipsModule,
1475
+ MatIconModule,
1476
+ MatProgressSpinnerModule,
1477
+ MatProgressBarModule,
1478
+ MatDialogModule,
1479
+ MatTooltipModule,
1480
+ MatSnackBarModule,
1481
+ MatTableModule,
1482
+ MatSortModule,
1483
+ MatPaginatorModule,
1484
+ MatDatepickerModule,
1485
+ MatNativeDateModule
1486
+ ],
1487
+ exports: [
1488
+ MatCheckboxModule,
1489
+ MatButtonModule,
1490
+ MatInputModule,
1491
+ MatAutocompleteModule,
1492
+ MatDatepickerModule,
1493
+ MatFormFieldModule,
1494
+ MatRadioModule,
1495
+ MatSelectModule,
1496
+ MatSliderModule,
1497
+ MatSlideToggleModule,
1498
+ MatMenuModule,
1499
+ MatSidenavModule,
1500
+ MatToolbarModule,
1501
+ MatListModule,
1502
+ MatGridListModule,
1503
+ MatCardModule,
1504
+ MatStepperModule,
1505
+ MatTabsModule,
1506
+ MatExpansionModule,
1507
+ MatButtonToggleModule,
1508
+ MatChipsModule,
1509
+ MatIconModule,
1510
+ MatProgressSpinnerModule,
1511
+ MatProgressBarModule,
1512
+ MatDialogModule,
1513
+ MatTooltipModule,
1514
+ MatSnackBarModule,
1515
+ MatTableModule,
1516
+ MatSortModule,
1517
+ MatPaginatorModule
1518
+ ],
1519
+ }]
1520
+ }] });
1521
+
1522
+ class EqpAttachmentsModule {
1523
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1524
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, declarations: [EqpAttachmentsComponent], imports: [MaterialModule,
1525
+ FormsModule,
1526
+ CommonModule,
1527
+ ReactiveFormsModule,
1528
+ ImageCropperModule,
1529
+ EqpTableModule,
1530
+ NgxFileDropModule], exports: [EqpAttachmentsComponent] });
1531
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, imports: [MaterialModule,
1532
+ FormsModule,
1533
+ CommonModule,
1534
+ ReactiveFormsModule,
1535
+ ImageCropperModule,
1536
+ EqpTableModule,
1537
+ NgxFileDropModule] });
1538
+ }
1539
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EqpAttachmentsModule, decorators: [{
1540
+ type: NgModule,
1541
+ args: [{
1542
+ declarations: [EqpAttachmentsComponent],
1543
+ imports: [
1544
+ MaterialModule,
1545
+ FormsModule,
1546
+ CommonModule,
1547
+ ReactiveFormsModule,
1548
+ ImageCropperModule,
1549
+ EqpTableModule,
1550
+ NgxFileDropModule
1551
+ ],
1552
+ exports: [EqpAttachmentsComponent]
1553
+ }]
1554
+ }] });
1555
+
1556
+ /*
1557
+ * Public API Surface of eqp-attachments
1558
+ */
1559
+
1560
+ /**
1561
+ * Generated bundle index. Do not edit.
1562
+ */
1563
+
1564
+ export { AttachmentHelperService, AttachmentType, CropOptionEnum, EqpAttachmentDialogService, EqpAttachmentsComponent, EqpAttachmentsModule };
1565
+ //# sourceMappingURL=eqproject-eqp-attachments.mjs.map