infodocviewdoc 1.0.0 → 2.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.
- package/fesm2022/infodocviewdoc.mjs +401 -41
- package/fesm2022/infodocviewdoc.mjs.map +1 -1
- package/lib/document-viewer/pages/pdf-viewer-page/pdf-viewer.component.d.ts +66 -6
- package/lib/document-viewer/services/file.service.d.ts +1 -0
- package/package.json +11 -23
- package/src/lib/document-viewer/assets/PPTXjs/css/nv.d3.min.css +4 -0
- package/src/lib/document-viewer/assets/PPTXjs/css/pptxjs.css +200 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/d3.min.js +5 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/dingbat.js +872 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/divs2slides.js +517 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/divs2slides.min.js +12 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/filereader.js +455 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/jquery-1.11.3.min.js +5 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/jquery.fullscreen-min.js +10 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/jszip.min.js +14 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/nv.d3.min.js +10 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/pptxjs.js +14104 -0
- package/src/lib/document-viewer/assets/PPTXjs/js/pptxjs.min.js +10 -0
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Output, Input, signal } from '@angular/core';
|
|
3
|
-
import * as
|
|
2
|
+
import { Injectable, Component, EventEmitter, Output, Input, signal, ViewChild } from '@angular/core';
|
|
3
|
+
import * as i3 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
6
|
-
import { NgxExtendedPdfViewerModule
|
|
5
|
+
import * as i4 from 'ngx-extended-pdf-viewer';
|
|
6
|
+
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
|
|
7
|
+
import * as i5 from '@handsontable/angular';
|
|
8
|
+
import { HotTableModule } from '@handsontable/angular';
|
|
9
|
+
import 'handsontable/dist/handsontable.full.css';
|
|
7
10
|
import * as i1$1 from '@angular/router';
|
|
8
11
|
import * as i1 from '@angular/common/http';
|
|
9
12
|
import { HttpHeaders } from '@angular/common/http';
|
|
10
13
|
import { throwError } from 'rxjs';
|
|
11
|
-
import { catchError } from 'rxjs/operators';
|
|
14
|
+
import { catchError, switchMap } from 'rxjs/operators';
|
|
12
15
|
|
|
13
16
|
class UiComponentsService {
|
|
14
17
|
constructor() { }
|
|
@@ -95,6 +98,39 @@ class DocumentViewerFileService {
|
|
|
95
98
|
return throwError(() => new Error(message));
|
|
96
99
|
}));
|
|
97
100
|
}
|
|
101
|
+
convertDocumentToPdf(file, token, baseApiUrl) {
|
|
102
|
+
const url = `${baseApiUrl}/api/v1/file/${file.type === '.ppt' || file.type === '.pptx'
|
|
103
|
+
? 'conversion-ppt-to-pdf'
|
|
104
|
+
: 'conversion-word-to-pdf'}`;
|
|
105
|
+
const headers = new HttpHeaders({
|
|
106
|
+
Authorization: `Bearer ${token}`,
|
|
107
|
+
});
|
|
108
|
+
const formData = new FormData();
|
|
109
|
+
formData.append('file', file, 'documento.docx');
|
|
110
|
+
return this.http
|
|
111
|
+
.post(url, formData, { headers })
|
|
112
|
+
.pipe(switchMap((response) => {
|
|
113
|
+
if (!response?.downloadUrl) {
|
|
114
|
+
throw new Error('No se recibió downloadUrl');
|
|
115
|
+
}
|
|
116
|
+
return this.http.get(`${baseApiUrl}${response.downloadUrl}`, {
|
|
117
|
+
headers,
|
|
118
|
+
responseType: 'blob',
|
|
119
|
+
});
|
|
120
|
+
}), catchError((error) => {
|
|
121
|
+
const errorMessages = {
|
|
122
|
+
0: 'No hay conexión con el servidor',
|
|
123
|
+
400: 'Solicitud inválida',
|
|
124
|
+
401: 'No autorizado. Token inválido o expirado',
|
|
125
|
+
403: 'Acceso denegado',
|
|
126
|
+
404: 'Archivo no encontrado',
|
|
127
|
+
500: 'Error interno del servidor',
|
|
128
|
+
};
|
|
129
|
+
const message = errorMessages[error.status] ??
|
|
130
|
+
'Error inesperado al convertir el archivo a PDF';
|
|
131
|
+
return throwError(() => new Error(message));
|
|
132
|
+
}));
|
|
133
|
+
}
|
|
98
134
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DocumentViewerFileService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
99
135
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DocumentViewerFileService, providedIn: 'root' });
|
|
100
136
|
}
|
|
@@ -108,81 +144,399 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
108
144
|
class PdfViewerComponent {
|
|
109
145
|
route;
|
|
110
146
|
fileService;
|
|
111
|
-
|
|
147
|
+
// Entradas directas desde el host (opcionalmente se pueden pasar por @Input)
|
|
112
148
|
nameFile;
|
|
113
149
|
nameBucket;
|
|
114
150
|
nameSpaceBucket;
|
|
115
151
|
url;
|
|
116
152
|
token = '';
|
|
117
153
|
pdfSrc;
|
|
154
|
+
imageSrc;
|
|
155
|
+
textContent;
|
|
156
|
+
officeContent;
|
|
118
157
|
loading = signal(false);
|
|
119
158
|
errorMessage = signal(null);
|
|
120
|
-
|
|
159
|
+
fileType = signal('unknown');
|
|
160
|
+
fileName = signal('');
|
|
161
|
+
extensionToType = {
|
|
162
|
+
pdf: 'pdf',
|
|
163
|
+
docx: 'docx',
|
|
164
|
+
doc: 'doc',
|
|
165
|
+
xlsx: 'xlsx',
|
|
166
|
+
xls: 'xls',
|
|
167
|
+
pptx: 'pptx',
|
|
168
|
+
ppt: 'ppt',
|
|
169
|
+
txt: 'txt',
|
|
170
|
+
md: 'txt',
|
|
171
|
+
csv: 'txt',
|
|
172
|
+
log: 'txt',
|
|
173
|
+
json: 'txt',
|
|
174
|
+
xml: 'txt',
|
|
175
|
+
html: 'txt',
|
|
176
|
+
css: 'txt',
|
|
177
|
+
js: 'txt',
|
|
178
|
+
ts: 'txt',
|
|
179
|
+
java: 'txt',
|
|
180
|
+
py: 'txt',
|
|
181
|
+
cpp: 'txt',
|
|
182
|
+
c: 'txt',
|
|
183
|
+
h: 'txt',
|
|
184
|
+
php: 'txt',
|
|
185
|
+
rb: 'txt',
|
|
186
|
+
go: 'txt',
|
|
187
|
+
rs: 'txt',
|
|
188
|
+
swift: 'txt',
|
|
189
|
+
kt: 'txt',
|
|
190
|
+
sql: 'txt',
|
|
191
|
+
jpg: 'image',
|
|
192
|
+
jpeg: 'image',
|
|
193
|
+
png: 'image',
|
|
194
|
+
gif: 'image',
|
|
195
|
+
tiff: 'image',
|
|
196
|
+
bmp: 'image',
|
|
197
|
+
svg: 'image',
|
|
198
|
+
webp: 'image',
|
|
199
|
+
};
|
|
200
|
+
// Excel
|
|
201
|
+
excelData = [];
|
|
202
|
+
excelColumns = [];
|
|
203
|
+
excelColumnHeaders = [];
|
|
204
|
+
excelSettings = {};
|
|
205
|
+
excelSheetNames = [];
|
|
206
|
+
excelCurrentSheetIndex = signal(0);
|
|
207
|
+
showExcelViewer = false;
|
|
208
|
+
excelWorkbook = null;
|
|
209
|
+
xlsxModule = null;
|
|
210
|
+
// Imagen (zoom, rotación, arrastre)
|
|
211
|
+
zoomLevel = signal(100);
|
|
212
|
+
rotation = signal(0);
|
|
213
|
+
minZoom = 25;
|
|
214
|
+
maxZoom = 400;
|
|
215
|
+
zoomStep = 25;
|
|
216
|
+
isDragging = false;
|
|
217
|
+
dragStart = { x: 0, y: 0 };
|
|
218
|
+
imagePosition = { x: 0, y: 0 };
|
|
219
|
+
imageDimensions = { width: 0, height: 0 };
|
|
220
|
+
imageContainer;
|
|
221
|
+
mainImage;
|
|
222
|
+
librariesPreloaded = {
|
|
223
|
+
pdf: false,
|
|
224
|
+
excel: false,
|
|
225
|
+
xlsx: false,
|
|
226
|
+
jspdf: false,
|
|
227
|
+
};
|
|
228
|
+
constructor(route, fileService) {
|
|
121
229
|
this.route = route;
|
|
122
230
|
this.fileService = fileService;
|
|
123
|
-
this.pdfService = pdfService;
|
|
124
231
|
}
|
|
125
232
|
ngOnInit() {
|
|
126
|
-
// 1) Si el host
|
|
233
|
+
// 1) Si el host pasó valores por @Input, usarlos directamente
|
|
127
234
|
if (this.url ||
|
|
128
235
|
this.nameFile ||
|
|
129
236
|
this.nameBucket ||
|
|
130
237
|
this.nameSpaceBucket ||
|
|
131
238
|
this.token) {
|
|
132
|
-
this.
|
|
239
|
+
if (this.nameFile)
|
|
240
|
+
this.fileName.set(this.nameFile);
|
|
241
|
+
this.detectFileType();
|
|
242
|
+
void this.loadWithPreload();
|
|
133
243
|
return;
|
|
134
244
|
}
|
|
135
|
-
// 2) Si no hay @Input,
|
|
245
|
+
// 2) Si no hay @Input, leer query params (modo microfront)
|
|
136
246
|
this.route.queryParams.subscribe((params) => {
|
|
137
247
|
this.nameFile = this.nameFile ?? params['nameFile'];
|
|
138
248
|
this.nameBucket = this.nameBucket ?? params['nameBucket'];
|
|
139
249
|
this.nameSpaceBucket = this.nameSpaceBucket ?? params['nameSpaceBucket'];
|
|
140
250
|
this.token = this.token || params['token'];
|
|
141
251
|
this.url = this.url ?? params['url'];
|
|
142
|
-
if (this.
|
|
143
|
-
this.nameFile
|
|
144
|
-
this.nameBucket ||
|
|
145
|
-
this.nameSpaceBucket ||
|
|
146
|
-
this.token) {
|
|
147
|
-
this.loadPdf();
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
this.errorMessage.set(`No se han proporcionado los parámetros necesarios {url: ${this.url} nameFile: ${this.nameFile} nameBucket: ${this.nameBucket} nameSpaceBucket: ${this.nameSpaceBucket} token: ${this.token}}`);
|
|
151
|
-
this.loading.set(false);
|
|
152
|
-
this.errorMessage.set(null);
|
|
252
|
+
if (this.nameFile) {
|
|
253
|
+
this.fileName.set(this.nameFile);
|
|
153
254
|
}
|
|
255
|
+
this.detectFileType();
|
|
256
|
+
void this.loadWithPreload();
|
|
154
257
|
});
|
|
155
258
|
}
|
|
156
|
-
|
|
259
|
+
ngOnDestroy() {
|
|
260
|
+
if (this.pdfSrc)
|
|
261
|
+
URL.revokeObjectURL(this.pdfSrc);
|
|
262
|
+
if (this.imageSrc)
|
|
263
|
+
URL.revokeObjectURL(this.imageSrc);
|
|
264
|
+
}
|
|
265
|
+
detectFileType() {
|
|
266
|
+
let extension = '';
|
|
267
|
+
// Prioridad: nameFile (objectName) porque en el host `url` suele ser el API base sin extensión
|
|
268
|
+
if (this.nameFile) {
|
|
269
|
+
extension = this.nameFile.split('.').pop()?.toLowerCase() || '';
|
|
270
|
+
}
|
|
271
|
+
else if (this.url) {
|
|
272
|
+
extension = this.url.split('.').pop()?.toLowerCase() || '';
|
|
273
|
+
}
|
|
274
|
+
this.fileType.set(this.extensionToType[extension] || 'unknown');
|
|
275
|
+
if (this.fileType() !== 'unknown') {
|
|
276
|
+
void this.preloadLibrariesForType(this.fileType());
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
async loadWithPreload() {
|
|
157
280
|
this.loading.set(true);
|
|
158
281
|
this.errorMessage.set(null);
|
|
159
|
-
|
|
160
|
-
.
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
282
|
+
try {
|
|
283
|
+
const preloadPromise = this.preloadLibrariesForType(this.fileType());
|
|
284
|
+
const documentPromise = this.fileService
|
|
285
|
+
.getFileByParams({
|
|
286
|
+
nameFile: this.nameFile,
|
|
287
|
+
nameBucket: this.nameBucket,
|
|
288
|
+
nameSpaceBucket: this.nameSpaceBucket,
|
|
289
|
+
url: this.url,
|
|
290
|
+
token: this.token,
|
|
291
|
+
})
|
|
292
|
+
.toPromise();
|
|
293
|
+
const [blob] = await Promise.all([documentPromise, preloadPromise]);
|
|
294
|
+
this.processFile(blob);
|
|
295
|
+
}
|
|
296
|
+
catch (error) {
|
|
297
|
+
this.errorMessage.set(error.message || 'Error al cargar el documento');
|
|
298
|
+
this.loading.set(false);
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
async preloadLibrariesForType(type) {
|
|
302
|
+
const preloadTasks = [];
|
|
303
|
+
if (!this.librariesPreloaded.pdf) {
|
|
304
|
+
preloadTasks.push(import('ngx-extended-pdf-viewer').then(() => (this.librariesPreloaded.pdf = true)));
|
|
305
|
+
}
|
|
306
|
+
if (type === 'txt' && !this.librariesPreloaded.jspdf) {
|
|
307
|
+
preloadTasks.push(import('jspdf').then(() => (this.librariesPreloaded.jspdf = true)));
|
|
308
|
+
}
|
|
309
|
+
if (type === 'xlsx' || type === 'xls') {
|
|
310
|
+
if (!this.librariesPreloaded.xlsx) {
|
|
311
|
+
preloadTasks.push(import('xlsx').then((module) => {
|
|
312
|
+
this.xlsxModule = module;
|
|
313
|
+
this.librariesPreloaded.xlsx = true;
|
|
314
|
+
}));
|
|
315
|
+
}
|
|
316
|
+
if (!this.librariesPreloaded.excel) {
|
|
317
|
+
preloadTasks.push(import('handsontable').then(() => (this.librariesPreloaded.excel = true)));
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
if (preloadTasks.length > 0) {
|
|
321
|
+
await Promise.allSettled(preloadTasks);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
processFile(blob) {
|
|
325
|
+
const type = this.fileType();
|
|
326
|
+
switch (true) {
|
|
327
|
+
case type === 'pdf':
|
|
328
|
+
this.handlePdfFile(blob);
|
|
329
|
+
break;
|
|
330
|
+
case type === 'image':
|
|
331
|
+
this.handleImageFile(blob);
|
|
332
|
+
break;
|
|
333
|
+
case type === 'txt':
|
|
334
|
+
void this.convertTextToPdf(blob);
|
|
335
|
+
break;
|
|
336
|
+
case ['xlsx', 'xls'].includes(type):
|
|
337
|
+
void this.processExcelFile(blob);
|
|
338
|
+
break;
|
|
339
|
+
case ['docx', 'doc', 'pptx', 'ppt'].includes(type):
|
|
340
|
+
this.convertOfficeToPdf(blob);
|
|
341
|
+
break;
|
|
342
|
+
default:
|
|
343
|
+
this.errorMessage.set('Formato no soportado');
|
|
344
|
+
this.loading.set(false);
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
handlePdfFile(blob) {
|
|
348
|
+
this.pdfSrc = URL.createObjectURL(blob);
|
|
349
|
+
this.loading.set(false);
|
|
350
|
+
}
|
|
351
|
+
handleImageFile(blob) {
|
|
352
|
+
this.imageSrc = URL.createObjectURL(blob);
|
|
353
|
+
this.loading.set(false);
|
|
354
|
+
}
|
|
355
|
+
convertOfficeToPdf(blob) {
|
|
356
|
+
this.fileService.convertDocumentToPdf(blob, this.token, this.url).subscribe({
|
|
357
|
+
next: (pdfBlob) => {
|
|
358
|
+
this.pdfSrc = URL.createObjectURL(pdfBlob);
|
|
359
|
+
this.fileType.set('pdf');
|
|
170
360
|
this.loading.set(false);
|
|
171
|
-
this.errorMessage.set(null);
|
|
172
361
|
},
|
|
173
|
-
error: (
|
|
362
|
+
error: (error) => {
|
|
363
|
+
this.errorMessage.set(error.message || 'Error al convertir el archivo a PDF');
|
|
174
364
|
this.loading.set(false);
|
|
175
|
-
this.errorMessage.set(err.message || 'Error al cargar el documento');
|
|
176
365
|
},
|
|
177
366
|
});
|
|
178
367
|
}
|
|
179
|
-
|
|
180
|
-
|
|
368
|
+
async convertTextToPdf(blob) {
|
|
369
|
+
try {
|
|
370
|
+
const text = await blob.text();
|
|
371
|
+
if (!this.librariesPreloaded.jspdf) {
|
|
372
|
+
await import('jspdf');
|
|
373
|
+
}
|
|
374
|
+
const { default: jsPDF } = await import('jspdf');
|
|
375
|
+
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
|
|
376
|
+
const pageWidth = pdf.internal.pageSize.getWidth();
|
|
377
|
+
const pageHeight = pdf.internal.pageSize.getHeight();
|
|
378
|
+
const margin = 40;
|
|
379
|
+
const maxLineWidth = pageWidth - margin * 2;
|
|
380
|
+
pdf.setFontSize(11);
|
|
381
|
+
pdf.setFont('helvetica');
|
|
382
|
+
let yPosition = margin;
|
|
383
|
+
const lineHeight = 15;
|
|
384
|
+
const paragraphs = text.split('\n');
|
|
385
|
+
for (const paragraph of paragraphs) {
|
|
386
|
+
if (paragraph.trim() === '') {
|
|
387
|
+
yPosition += lineHeight;
|
|
388
|
+
continue;
|
|
389
|
+
}
|
|
390
|
+
const lines = pdf.splitTextToSize(paragraph, maxLineWidth);
|
|
391
|
+
for (const line of lines) {
|
|
392
|
+
if (yPosition > pageHeight - margin) {
|
|
393
|
+
pdf.addPage();
|
|
394
|
+
yPosition = margin;
|
|
395
|
+
}
|
|
396
|
+
pdf.text(line, margin, yPosition);
|
|
397
|
+
yPosition += lineHeight;
|
|
398
|
+
}
|
|
399
|
+
yPosition += lineHeight / 2;
|
|
400
|
+
}
|
|
401
|
+
const pdfBlob = pdf.output('blob');
|
|
402
|
+
this.pdfSrc = URL.createObjectURL(pdfBlob);
|
|
403
|
+
this.fileType.set('pdf');
|
|
404
|
+
this.loading.set(false);
|
|
405
|
+
}
|
|
406
|
+
catch {
|
|
407
|
+
const reader = new FileReader();
|
|
408
|
+
reader.onload = (e) => {
|
|
409
|
+
this.textContent = e.target?.result;
|
|
410
|
+
this.loading.set(false);
|
|
411
|
+
};
|
|
412
|
+
reader.readAsText(blob);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
async processExcelFile(blob) {
|
|
416
|
+
try {
|
|
417
|
+
if (!this.xlsxModule) {
|
|
418
|
+
this.xlsxModule = await import('xlsx');
|
|
419
|
+
}
|
|
420
|
+
const buffer = await blob.arrayBuffer();
|
|
421
|
+
this.excelWorkbook = this.xlsxModule.read(buffer, { type: 'array' });
|
|
422
|
+
this.excelSheetNames = [...this.excelWorkbook.SheetNames];
|
|
423
|
+
await this.loadExcelSheetByIndex(0);
|
|
424
|
+
this.buildExcelSettings();
|
|
425
|
+
this.showExcelViewer = true;
|
|
426
|
+
this.loading.set(false);
|
|
427
|
+
}
|
|
428
|
+
catch {
|
|
429
|
+
this.errorMessage.set('Error procesando Excel');
|
|
430
|
+
this.loading.set(false);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
async loadExcelSheetByIndex(index) {
|
|
434
|
+
if (!this.excelWorkbook || !this.xlsxModule)
|
|
435
|
+
return;
|
|
436
|
+
this.showExcelViewer = false;
|
|
437
|
+
const sheetName = this.excelSheetNames[index];
|
|
438
|
+
const worksheet = this.excelWorkbook.Sheets[sheetName];
|
|
439
|
+
if (!worksheet)
|
|
440
|
+
return;
|
|
441
|
+
let jsonData = this.xlsxModule.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
|
|
442
|
+
if (!Array.isArray(jsonData) || jsonData.length === 0) {
|
|
443
|
+
jsonData = [['(Hoja vacía)']];
|
|
444
|
+
}
|
|
445
|
+
const headers = (jsonData[0] ?? []).map((h) => String(h ?? ''));
|
|
446
|
+
const data = jsonData.slice(1);
|
|
447
|
+
this.excelColumnHeaders = headers.length > 0 ? headers : [''];
|
|
448
|
+
const maxColumns = Math.max(this.excelColumnHeaders.length, ...data.map((row) => row.length));
|
|
449
|
+
this.excelColumnHeaders = Array.from({ length: maxColumns }, (_, i) => this.excelColumnHeaders[i] ?? `Col ${i + 1}`);
|
|
450
|
+
this.excelData = data.map((row) => Array.from({ length: maxColumns }, (_, i) => row[i] ?? ''));
|
|
451
|
+
this.excelColumns = Array.from({ length: maxColumns }, () => ({ type: 'text' }));
|
|
452
|
+
this.excelCurrentSheetIndex.set(index);
|
|
453
|
+
this.showExcelViewer = true;
|
|
454
|
+
}
|
|
455
|
+
selectExcelSheet(index) {
|
|
456
|
+
void this.loadExcelSheetByIndex(index);
|
|
457
|
+
}
|
|
458
|
+
buildExcelSettings() {
|
|
459
|
+
this.excelSettings = {
|
|
460
|
+
licenseKey: 'non-commercial-and-evaluation',
|
|
461
|
+
colHeaders: this.excelColumnHeaders,
|
|
462
|
+
rowHeaders: true,
|
|
463
|
+
stretchH: 'all',
|
|
464
|
+
contextMenu: true,
|
|
465
|
+
filters: true,
|
|
466
|
+
dropdownMenu: true,
|
|
467
|
+
readOnly: true,
|
|
468
|
+
manualColumnResize: true,
|
|
469
|
+
manualRowResize: true,
|
|
470
|
+
columnSorting: true,
|
|
471
|
+
height: '100%',
|
|
472
|
+
width: '100%',
|
|
473
|
+
};
|
|
474
|
+
}
|
|
475
|
+
// Helpers para template
|
|
476
|
+
isExcelType() {
|
|
477
|
+
return ['xlsx', 'xls'].includes(this.fileType());
|
|
478
|
+
}
|
|
479
|
+
isImageType() {
|
|
480
|
+
return this.fileType() === 'image';
|
|
481
|
+
}
|
|
482
|
+
// Imagen: zoom/rotación/arrastre
|
|
483
|
+
zoomIn() {
|
|
484
|
+
this.zoomLevel.set(Math.min(this.zoomLevel() + this.zoomStep, this.maxZoom));
|
|
485
|
+
}
|
|
486
|
+
zoomOut() {
|
|
487
|
+
this.zoomLevel.set(Math.max(this.zoomLevel() - this.zoomStep, this.minZoom));
|
|
488
|
+
}
|
|
489
|
+
rotateLeft() {
|
|
490
|
+
this.rotation.set((this.rotation() - 90) % 360);
|
|
491
|
+
}
|
|
492
|
+
rotateRight() {
|
|
493
|
+
this.rotation.set((this.rotation() + 90) % 360);
|
|
494
|
+
}
|
|
495
|
+
getImageTransform() {
|
|
496
|
+
const scale = this.zoomLevel() / 100;
|
|
497
|
+
const translate = `translate(${this.imagePosition.x}px, ${this.imagePosition.y}px)`;
|
|
498
|
+
const rotate = `rotate(${this.rotation()}deg)`;
|
|
499
|
+
const scaleStr = `scale(${scale})`;
|
|
500
|
+
return `${translate} ${rotate} ${scaleStr}`;
|
|
501
|
+
}
|
|
502
|
+
getCursorStyle() {
|
|
503
|
+
return this.zoomLevel() > 100 ? (this.isDragging ? 'grabbing' : 'grab') : 'default';
|
|
504
|
+
}
|
|
505
|
+
onImageLoad() {
|
|
506
|
+
try {
|
|
507
|
+
const imgEl = this.mainImage?.nativeElement;
|
|
508
|
+
this.imageDimensions = { width: imgEl.naturalWidth, height: imgEl.naturalHeight };
|
|
509
|
+
}
|
|
510
|
+
catch { /* noop */ }
|
|
511
|
+
}
|
|
512
|
+
onMouseWheel(event) {
|
|
513
|
+
event.preventDefault();
|
|
514
|
+
if (event.deltaY < 0)
|
|
515
|
+
this.zoomIn();
|
|
516
|
+
else
|
|
517
|
+
this.zoomOut();
|
|
518
|
+
}
|
|
519
|
+
startDrag(event) {
|
|
520
|
+
if (this.zoomLevel() <= 100)
|
|
521
|
+
return;
|
|
522
|
+
this.isDragging = true;
|
|
523
|
+
this.dragStart = { x: event.clientX - this.imagePosition.x, y: event.clientY - this.imagePosition.y };
|
|
524
|
+
}
|
|
525
|
+
onDrag(event) {
|
|
526
|
+
if (!this.isDragging)
|
|
527
|
+
return;
|
|
528
|
+
this.imagePosition = { x: event.clientX - this.dragStart.x, y: event.clientY - this.dragStart.y };
|
|
529
|
+
}
|
|
530
|
+
stopDrag() {
|
|
531
|
+
this.isDragging = false;
|
|
532
|
+
}
|
|
533
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentViewerFileService }], target: i0.ɵɵFactoryTarget.Component });
|
|
534
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PdfViewerComponent, isStandalone: true, selector: "sgdea-document-viewer", inputs: { nameFile: "nameFile", nameBucket: "nameBucket", nameSpaceBucket: "nameSpaceBucket", url: "url", token: "token" }, viewQueries: [{ propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true }, { propertyName: "mainImage", first: true, predicate: ["mainImage"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"loading()\" class=\"loader\">Cargando documento...</div>\n\n<div *ngIf=\"errorMessage() && !loading()\" class=\"error-message\">\n {{ errorMessage() }}\n</div>\n\n<div *ngIf=\"!loading() && !errorMessage()\" class=\"document-viewer-container\">\n\n <!-- PDF -->\n <ngx-extended-pdf-viewer\n *ngIf=\"fileType() === 'pdf' && pdfSrc\"\n [src]=\"pdfSrc\"\n height=\"auto\"\n useBrowserLocale=\"false\"\n [showDownloadButton]=\"false\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showSecondaryToolbarButton]=\"false\"\n [showFirstAndLastPageButtons]=\"false\"\n [showPagingButtons]=\"false\"\n [showZoomButtons]=\"true\"\n [showDrawEditor]=\"false\"\n [showTextEditor]=\"false\"\n [showStampEditor]=\"false\"\n [showHighlightEditor]=\"false\"\n >\n </ngx-extended-pdf-viewer>\n\n <!-- Imagen -->\n <div *ngIf=\"isImageType() && imageSrc\" class=\"image-viewer\">\n <div class=\"image-toolbar\">\n <button (click)=\"zoomIn()\" title=\"Acercar (Ctrl +)\">\u2795</button>\n <button (click)=\"zoomOut()\" title=\"Alejar (Ctrl -)\">\u2796</button>\n <span class=\"separator\"></span>\n <button (click)=\"rotateLeft()\" title=\"Rotar izquierda (\u21BA)\">\u21BA</button>\n <button (click)=\"rotateRight()\" title=\"Rotar derecha (\u21BB)\">\u21BB</button>\n\n <span class=\"zoom-info\">{{ zoomLevel() }}%</span>\n <span class=\"rotation-info\" *ngIf=\"rotation() !== 0\">\n {{ rotation() }}\u00B0\n </span>\n\n <span class=\"image-dimensions\" *ngIf=\"imageDimensions.width\">\n {{ imageDimensions.width }} x {{ imageDimensions.height }}\n </span>\n </div>\n\n <div class=\"image-container\" #imageContainer (wheel)=\"onMouseWheel($event)\">\n <img\n #mainImage\n [src]=\"imageSrc\"\n [alt]=\"fileName()\"\n [style.transform]=\"getImageTransform()\"\n [style.cursor]=\"getCursorStyle()\"\n (load)=\"onImageLoad()\"\n (mousedown)=\"startDrag($event)\"\n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\"\n (mouseleave)=\"stopDrag()\"\n class=\"zoomable-image\"\n />\n </div>\n\n <div class=\"image-footer\" *ngIf=\"zoomLevel() > 100\">\n <small>Arrastra para mover la imagen</small>\n </div>\n </div>\n\n <!-- Excel -->\n <div *ngIf=\"isExcelType()\" class=\"excel-viewer-container\">\n <div *ngIf=\"excelSheetNames.length > 1\" class=\"excel-sheet-tabs\">\n <button\n *ngFor=\"let sheet of excelSheetNames; let i = index\"\n type=\"button\"\n class=\"excel-sheet-tab\"\n [class.active]=\"excelCurrentSheetIndex() === i\"\n (click)=\"selectExcelSheet(i)\"\n >\n {{ sheet }}\n </button>\n </div>\n\n <hot-table\n *ngIf=\"showExcelViewer\"\n #hotTable\n [settings]=\"excelSettings\"\n [data]=\"excelData\"\n [colHeaders]=\"excelColumnHeaders\"\n [rowHeaders]=\"true\"\n [width]=\"'100%'\"\n [height]=\"'100%'\"\n licenseKey=\"non-commercial-and-evaluation\"\n [columns]=\"excelColumns\"\n >\n </hot-table>\n\n <div *ngIf=\"!showExcelViewer\" class=\"loader\">\n Cargando hoja...\n </div>\n </div>\n</div>\n\n", styles: ["html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.document-viewer-container{height:100vh;width:100%;display:flex;flex-direction:column;padding:20px;box-sizing:border-box;background-color:#f5f5f5;overflow:hidden}.loader,.error-message{text-align:center;padding:40px 20px;font-family:Arial,sans-serif;background-color:#fff;border-radius:4px;margin:20px;box-shadow:0 2px 4px #0000001a}.error-message{color:#d32f2f;background-color:#ffebee;border:1px solid #ffcdd2}::ng-deep ngx-extended-pdf-viewer{flex:1 1 auto;min-height:0;height:auto;width:calc(100% - 20px);margin:10px;border:1px solid #ddd;border-radius:4px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i4.NgxExtendedPdfViewerComponent, selector: "ngx-extended-pdf-viewer", inputs: ["customFindbarInputArea", "customToolbar", "customFindbar", "customFindbarButtons", "customPdfViewer", "customSecondaryToolbar", "customSidebar", "customThumbnail", "customFreeFloatingBar", "showFreeFloatingBar", "enableDragAndDrop", "forceUsingLegacyES5", "formData", "disableForms", "pageViewMode", "scrollMode", "authorization", "httpHeaders", "contextMenuAllowed", "enablePrint", "enablePrintAutoRotate", "forceFullReloadOfJavaScriptCode", "showTextEditor", "showStampEditor", "showCommentEditor", "showDrawEditor", "showHighlightEditor", "showSignatureEditor", "logLevel", "minifiedJSLibraries", "printResolution", "rotation", "src", "base64Src", "minHeight", "height", "backgroundColor", "pdfBackgroundColor", "filenameForDownload", "ignoreKeyboard", "ignoreKeys", "acceptKeys", "imageResourcesPath", "localeFolderPath", "language", "listenToURL", "nameddest", "password", "replaceBrowserPrint", "useInlineScripts", "showUnverifiedSignatures", "startTabindex", "showSidebarButton", "sidebarVisible", "activeSidebarView", "findbarVisible", "propertiesDialogVisible", "showFindButton", "showFindHighlightAll", "showFindMatchCase", "showFindMultiple", "showFindRegexp", "showFindEntireWord", "showFindMatchDiacritics", "showFindResultsCount", "showFindMessages", "showMovePageButton", "showPagingButtons", "showFirstAndLastPageButtons", "showPreviousAndNextPageButtons", "showPageNumber", "showPageLabel", "showZoomButtons", "showZoomDropdown", "showPresentationModeButton", "showOpenFileButton", "showPrintButton", "showDownloadButton", "theme", "showToolbar", "showSecondaryToolbarButton", "showSinglePageModeButton", "showVerticalScrollButton", "showHorizontalScrollButton", "showWrappedScrollButton", "showInfiniteScrollButton", "showBookModeButton", "showRotateButton", "showRotateCwButton", "showRotateCcwButton", "handTool", "showHandToolButton", "showSpreadButton", "showPropertiesButton", "showBorders", "spread", "showScrollingButtons", "page", "pageLabel", "textLayer", "zoom", "zoomLevels", "maxZoom", "minZoom", "mobileFriendlyZoom"], outputs: ["annotationEditorEvent", "formDataChange", "pageViewModeChange", "progress", "srcChange", "scrollModeChange", "afterPrint", "beforePrint", "currentZoomFactor", "rotationChange", "annotationLayerRendered", "annotationEditorLayerRendered", "xfaLayerRendered", "outlineLoaded", "attachmentsloaded", "layersloaded", "sidebarVisibleChange", "activeSidebarViewChange", "findbarVisibleChange", "propertiesDialogVisibleChange", "handToolChange", "spreadChange", "thumbnailDrawn", "pageChange", "pageLabelChange", "pagesLoaded", "pageRender", "pageRendered", "pdfDownloaded", "pdfLoaded", "pdfLoadingStarts", "pdfLoadingFailed", "textLayerRendered", "annotationEditorModeChanged", "updateFindMatchesCount", "updateFindState", "zoomChange"] }, { kind: "ngmodule", type: HotTableModule }, { kind: "component", type: i5.HotTableComponent, selector: "hot-table", inputs: ["settings", "hotId", "activeHeaderClassName", "allowEmpty", "allowHtml", "allowInsertColumn", "allowInsertRow", "allowInvalid", "allowRemoveColumn", "allowRemoveRow", "ariaTags", "autoColumnSize", "autoRowSize", "autoWrapCol", "autoWrapRow", "bindRowsWithHeaders", "cell", "cells", "checkedTemplate", "className", "colHeaders", "collapsibleColumns", "columnHeaderHeight", "columns", "columnSorting", "columnSummary", "colWidths", "commentedCellClassName", "comments", "contextMenu", "copyable", "copyPaste", "correctFormat", "currentColClassName", "currentHeaderClassName", "currentRowClassName", "customBorders", "data", "dataDotNotation", "dataSchema", "dateFormat", "datePickerConfig", "defaultDate", "tabNavigation", "themeName", "disableVisualSelection", "dragToScroll", "dropdownMenu", "editor", "enterBeginsEditing", "enterMoves", "fillHandle", "filter", "filteringCaseSensitive", "filters", "fixedColumnsLeft", "fixedColumnsStart", "fixedRowsBottom", "fixedRowsTop", "formulas", "fragmentSelection", "headerClassName", "height", "hiddenColumns", "hiddenRows", "initialState", "invalidCellClassName", "imeFastEdit", "label", "language", "layoutDirection", "licenseKey", "locale", "manualColumnFreeze", "manualColumnMove", "manualColumnResize", "manualRowMove", "manualRowResize", "maxCols", "maxRows", "mergeCells", "minCols", "minRowHeights", "minRows", "minSpareCols", "minSpareRows", "multiColumnSorting", "navigableHeaders", "nestedHeaders", "nestedRows", "noWordWrapClassName", "numericFormat", "observeDOMVisibility", "outsideClickDeselects", "pagination", "persistentState", "placeholder", "placeholderCellClassName", "preventOverflow", "preventWheel", "readOnly", "readOnlyCellClassName", "renderAllColumns", "renderAllRows", "renderer", "rowHeaders", "rowHeaderWidth", "rowHeights", "search", "selectionMode", "selectOptions", "skipColumnOnPaste", "skipRowOnPaste", "sortByRelevance", "source", "startCols", "startRows", "stretchH", "strict", "tableClassName", "tabMoves", "title", "trimDropdown", "trimRows", "trimWhitespace", "type", "uncheckedTemplate", "undo", "validator", "valueGetter", "valueSetter", "viewportColumnRenderingOffset", "viewportRowRenderingOffset", "visibleRows", "width", "wordWrap", "afterAddChild", "afterAutofill", "afterBeginEditing", "afterCellMetaReset", "afterChange", "afterChangesObserved", "afterColumnCollapse", "afterColumnExpand", "afterColumnFreeze", "afterColumnMove", "afterColumnResize", "afterColumnSequenceCacheUpdate", "afterColumnSequenceChange", "afterColumnSort", "afterColumnUnfreeze", "afterContextMenuDefaultOptions", "afterContextMenuHide", "afterContextMenuShow", "afterCopy", "afterCopyLimit", "afterCreateCol", "afterCreateRow", "afterCut", "afterDeselect", "afterDestroy", "afterDetachChild", "afterDocumentKeyDown", "afterDrawSelection", "afterDropdownMenuDefaultOptions", "afterDropdownMenuHide", "afterDropdownMenuShow", "afterFilter", "afterFormulasValuesUpdate", "afterGetCellMeta", "afterGetColHeader", "afterGetColumnHeaderRenderers", "afterGetRowHeader", "afterGetRowHeaderRenderers", "afterHideColumns", "afterHideRows", "afterInit", "afterLanguageChange", "afterListen", "afterLoadData", "afterMergeCells", "afterModifyTransformEnd", "afterModifyTransformFocus", "afterModifyTransformStart", "afterMomentumScroll", "afterNamedExpressionAdded", "afterNamedExpressionRemoved", "afterOnCellContextMenu", "afterOnCellCornerDblClick", "afterOnCellCornerMouseDown", "afterOnCellMouseDown", "afterOnCellMouseOut", "afterOnCellMouseOver", "afterOnCellMouseUp", "afterPageChange", "afterPageSizeChange", "afterPageSizeVisibilityChange", "afterPageCounterVisibilityChange", "afterPageNavigationVisibilityChange", "afterPaste", "afterPluginsInitialized", "afterRedo", "afterRedoStackChange", "afterRefreshDimensions", "afterRemoveCellMeta", "afterRemoveCol", "afterRemoveRow", "afterRender", "afterRenderer", "afterRowMove", "afterRowResize", "afterRowSequenceCacheUpdate", "afterRowSequenceChange", "afterScrollHorizontally", "afterScrollVertically", "afterScroll", "afterSelectColumns", "afterSelection", "afterSelectionByProp", "afterSelectionEnd", "afterSelectionEndByProp", "afterSelectionFocusSet", "afterSelectRows", "afterSetCellMeta", "afterSetDataAtCell", "afterSetDataAtRowProp", "afterSetSourceDataAtCell", "afterSetTheme", "afterSheetAdded", "afterSheetRenamed", "afterSheetRemoved", "afterTrimRow", "afterUndo", "afterUndoStackChange", "afterUnhideColumns", "afterUnhideRows", "afterUnlisten", "afterUnmergeCells", "afterUntrimRow", "afterUpdateData", "afterUpdateSettings", "afterValidate", "afterViewportColumnCalculatorOverride", "afterViewportRowCalculatorOverride", "afterViewRender", "beforeAddChild", "beforeAutofill", "beforeBeginEditing", "beforeCellAlignment", "beforeChange", "beforeChangeRender", "beforeColumnCollapse", "beforeColumnExpand", "beforeColumnFreeze", "beforeColumnMove", "beforeColumnResize", "beforeColumnSort", "beforeColumnWrap", "beforeColumnUnfreeze", "beforeCompositionStart", "beforeContextMenuSetItems", "beforeContextMenuShow", "beforeCopy", "beforeCreateCol", "beforeCreateRow", "beforeCut", "beforeDetachChild", "beforeDrawBorders", "beforeDropdownMenuSetItems", "beforeDropdownMenuShow", "beforeFilter", "beforeGetCellMeta", "beforeHeightChange", "beforeHideColumns", "beforeHideRows", "beforeHighlightingColumnHeader", "beforeHighlightingRowHeader", "beforeInit", "beforeInitWalkontable", "beforeKeyDown", "beforeLanguageChange", "beforeLoadData", "beforeMergeCells", "beforeOnCellContextMenu", "beforeOnCellMouseDown", "beforeOnCellMouseOut", "beforeOnCellMouseOver", "beforeOnCellMouseUp", "beforePageChange", "beforePageSizeChange", "beforePaste", "beforeRedo", "beforeRedoStackChange", "beforeRefreshDimensions", "beforeRemoveCellClassNames", "beforeRemoveCellMeta", "beforeRemoveCol", "beforeRemoveRow", "beforeRender", "beforeRenderer", "beforeRowMove", "beforeRowResize", "beforeRowWrap", "beforeSelectColumns", "beforeSelectionFocusSet", "beforeSelectionHighlightSet", "beforeSelectRows", "beforeSetCellMeta", "beforeSetRangeEnd", "beforeSetRangeStart", "beforeSetRangeStartOnly", "beforeStretchingColumnWidth", "beforeTouchScroll", "beforeTrimRow", "beforeUndo", "beforeUndoStackChange", "beforeUnhideColumns", "beforeUnhideRows", "beforeUnmergeCells", "beforeUntrimRow", "beforeUpdateData", "beforeValidate", "beforeValueRender", "beforeViewportScroll", "beforeViewportScrollHorizontally", "beforeViewportScrollVertically", "beforeViewRender", "beforeWidthChange", "construct", "init", "modifyAutoColumnSizeSeed", "modifyAutofillRange", "modifyColHeader", "modifyColumnHeaderHeight", "modifyColumnHeaderValue", "modifyColWidth", "modifyCopyableRange", "modifyFiltersMultiSelectValue", "modifyFocusedElement", "modifyData", "modifyFocusOnTabNavigation", "modifyGetCellCoords", "modifyGetCoordsElement", "modifyRowData", "modifyRowHeader", "modifyRowHeaderWidth", "modifyRowHeight", "modifyRowHeightByOverlayName", "modifySourceData", "modifyTransformEnd", "modifyTransformFocus", "modifyTransformStart", "persistentStateLoad", "persistentStateReset", "persistentStateSave"] }] });
|
|
181
535
|
}
|
|
182
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PdfViewerComponent, decorators: [{
|
|
183
537
|
type: Component,
|
|
184
|
-
args: [{ selector: 'sgdea-document-viewer', standalone: true, imports: [CommonModule, NgxExtendedPdfViewerModule
|
|
185
|
-
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentViewerFileService }
|
|
538
|
+
args: [{ selector: 'sgdea-document-viewer', standalone: true, imports: [CommonModule, NgxExtendedPdfViewerModule, HotTableModule], template: "<div *ngIf=\"loading()\" class=\"loader\">Cargando documento...</div>\n\n<div *ngIf=\"errorMessage() && !loading()\" class=\"error-message\">\n {{ errorMessage() }}\n</div>\n\n<div *ngIf=\"!loading() && !errorMessage()\" class=\"document-viewer-container\">\n\n <!-- PDF -->\n <ngx-extended-pdf-viewer\n *ngIf=\"fileType() === 'pdf' && pdfSrc\"\n [src]=\"pdfSrc\"\n height=\"auto\"\n useBrowserLocale=\"false\"\n [showDownloadButton]=\"false\"\n [showPrintButton]=\"false\"\n [showOpenFileButton]=\"false\"\n [showSecondaryToolbarButton]=\"false\"\n [showFirstAndLastPageButtons]=\"false\"\n [showPagingButtons]=\"false\"\n [showZoomButtons]=\"true\"\n [showDrawEditor]=\"false\"\n [showTextEditor]=\"false\"\n [showStampEditor]=\"false\"\n [showHighlightEditor]=\"false\"\n >\n </ngx-extended-pdf-viewer>\n\n <!-- Imagen -->\n <div *ngIf=\"isImageType() && imageSrc\" class=\"image-viewer\">\n <div class=\"image-toolbar\">\n <button (click)=\"zoomIn()\" title=\"Acercar (Ctrl +)\">\u2795</button>\n <button (click)=\"zoomOut()\" title=\"Alejar (Ctrl -)\">\u2796</button>\n <span class=\"separator\"></span>\n <button (click)=\"rotateLeft()\" title=\"Rotar izquierda (\u21BA)\">\u21BA</button>\n <button (click)=\"rotateRight()\" title=\"Rotar derecha (\u21BB)\">\u21BB</button>\n\n <span class=\"zoom-info\">{{ zoomLevel() }}%</span>\n <span class=\"rotation-info\" *ngIf=\"rotation() !== 0\">\n {{ rotation() }}\u00B0\n </span>\n\n <span class=\"image-dimensions\" *ngIf=\"imageDimensions.width\">\n {{ imageDimensions.width }} x {{ imageDimensions.height }}\n </span>\n </div>\n\n <div class=\"image-container\" #imageContainer (wheel)=\"onMouseWheel($event)\">\n <img\n #mainImage\n [src]=\"imageSrc\"\n [alt]=\"fileName()\"\n [style.transform]=\"getImageTransform()\"\n [style.cursor]=\"getCursorStyle()\"\n (load)=\"onImageLoad()\"\n (mousedown)=\"startDrag($event)\"\n (mousemove)=\"onDrag($event)\"\n (mouseup)=\"stopDrag()\"\n (mouseleave)=\"stopDrag()\"\n class=\"zoomable-image\"\n />\n </div>\n\n <div class=\"image-footer\" *ngIf=\"zoomLevel() > 100\">\n <small>Arrastra para mover la imagen</small>\n </div>\n </div>\n\n <!-- Excel -->\n <div *ngIf=\"isExcelType()\" class=\"excel-viewer-container\">\n <div *ngIf=\"excelSheetNames.length > 1\" class=\"excel-sheet-tabs\">\n <button\n *ngFor=\"let sheet of excelSheetNames; let i = index\"\n type=\"button\"\n class=\"excel-sheet-tab\"\n [class.active]=\"excelCurrentSheetIndex() === i\"\n (click)=\"selectExcelSheet(i)\"\n >\n {{ sheet }}\n </button>\n </div>\n\n <hot-table\n *ngIf=\"showExcelViewer\"\n #hotTable\n [settings]=\"excelSettings\"\n [data]=\"excelData\"\n [colHeaders]=\"excelColumnHeaders\"\n [rowHeaders]=\"true\"\n [width]=\"'100%'\"\n [height]=\"'100%'\"\n licenseKey=\"non-commercial-and-evaluation\"\n [columns]=\"excelColumns\"\n >\n </hot-table>\n\n <div *ngIf=\"!showExcelViewer\" class=\"loader\">\n Cargando hoja...\n </div>\n </div>\n</div>\n\n", styles: ["html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.document-viewer-container{height:100vh;width:100%;display:flex;flex-direction:column;padding:20px;box-sizing:border-box;background-color:#f5f5f5;overflow:hidden}.loader,.error-message{text-align:center;padding:40px 20px;font-family:Arial,sans-serif;background-color:#fff;border-radius:4px;margin:20px;box-shadow:0 2px 4px #0000001a}.error-message{color:#d32f2f;background-color:#ffebee;border:1px solid #ffcdd2}::ng-deep ngx-extended-pdf-viewer{flex:1 1 auto;min-height:0;height:auto;width:calc(100% - 20px);margin:10px;border:1px solid #ddd;border-radius:4px;display:block}\n"] }]
|
|
539
|
+
}], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentViewerFileService }], propDecorators: { nameFile: [{
|
|
186
540
|
type: Input
|
|
187
541
|
}], nameBucket: [{
|
|
188
542
|
type: Input
|
|
@@ -192,6 +546,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
|
|
|
192
546
|
type: Input
|
|
193
547
|
}], token: [{
|
|
194
548
|
type: Input
|
|
549
|
+
}], imageContainer: [{
|
|
550
|
+
type: ViewChild,
|
|
551
|
+
args: ['imageContainer']
|
|
552
|
+
}], mainImage: [{
|
|
553
|
+
type: ViewChild,
|
|
554
|
+
args: ['mainImage']
|
|
195
555
|
}] } });
|
|
196
556
|
|
|
197
557
|
/*
|