infodocviewdoc 1.0.0 → 2.0.0

package/fesm2022/infodocviewdoc.mjs

@@ -1,14 +1,17 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, Input, signal } from '@angular/core';
-import * as i4 from '@angular/common';
+import { Injectable, Component, EventEmitter, Output, Input, signal, ViewChild } from '@angular/core';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'ngx-extended-pdf-viewer';
-import { NgxExtendedPdfViewerModule, NgxExtendedPdfViewerService } from 'ngx-extended-pdf-viewer';
+import * as i4 from 'ngx-extended-pdf-viewer';
+import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
+import * as i5 from '@handsontable/angular';
+import { HotTableModule } from '@handsontable/angular';
+import 'handsontable/dist/handsontable.full.css';
 import * as i1$1 from '@angular/router';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { catchError, switchMap } from 'rxjs/operators';
 
 class UiComponentsService {
     constructor() { }
@@ -95,6 +98,39 @@ class DocumentViewerFileService {
             return throwError(() => new Error(message));
         }));
     }
+    convertDocumentToPdf(file, token, baseApiUrl) {
+        const url = `${baseApiUrl}/api/v1/file/${file.type === '.ppt' || file.type === '.pptx'
+            ? 'conversion-ppt-to-pdf'
+            : 'conversion-word-to-pdf'}`;
+        const headers = new HttpHeaders({
+            Authorization: `Bearer ${token}`,
+        });
+        const formData = new FormData();
+        formData.append('file', file, 'documento.docx');
+        return this.http
+            .post(url, formData, { headers })
+            .pipe(switchMap((response) => {
+            if (!response?.downloadUrl) {
+                throw new Error('No se recibió downloadUrl');
+            }
+            return this.http.get(`${baseApiUrl}${response.downloadUrl}`, {
+                headers,
+                responseType: 'blob',
+            });
+        }), catchError((error) => {
+            const errorMessages = {
+                0: 'No hay conexión con el servidor',
+                400: 'Solicitud inválida',
+                401: 'No autorizado. Token inválido o expirado',
+                403: 'Acceso denegado',
+                404: 'Archivo no encontrado',
+                500: 'Error interno del servidor',
+            };
+            const message = errorMessages[error.status] ??
+                'Error inesperado al convertir el archivo a PDF';
+            return throwError(() => new Error(message));
+        }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DocumentViewerFileService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DocumentViewerFileService, providedIn: 'root' });
 }
@@ -108,81 +144,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class PdfViewerComponent {
     route;
     fileService;
-    pdfService;
+    // Entradas directas desde el host (opcionalmente se pueden pasar por @Input)
     nameFile;
     nameBucket;
     nameSpaceBucket;
     url;
     token = '';
     pdfSrc;
+    imageSrc;
+    textContent;
+    officeContent;
     loading = signal(false);
     errorMessage = signal(null);
-    constructor(route, fileService, pdfService) {
+    fileType = signal('unknown');
+    fileName = signal('');
+    extensionToType = {
+        pdf: 'pdf',
+        docx: 'docx',
+        doc: 'doc',
+        xlsx: 'xlsx',
+        xls: 'xls',
+        pptx: 'pptx',
+        ppt: 'ppt',
+        txt: 'txt',
+        md: 'txt',
+        csv: 'txt',
+        log: 'txt',
+        json: 'txt',
+        xml: 'txt',
+        html: 'txt',
+        css: 'txt',
+        js: 'txt',
+        ts: 'txt',
+        java: 'txt',
+        py: 'txt',
+        cpp: 'txt',
+        c: 'txt',
+        h: 'txt',
+        php: 'txt',
+        rb: 'txt',
+        go: 'txt',
+        rs: 'txt',
+        swift: 'txt',
+        kt: 'txt',
+        sql: 'txt',
+        jpg: 'image',
+        jpeg: 'image',
+        png: 'image',
+        gif: 'image',
+        tiff: 'image',
+        bmp: 'image',
+        svg: 'image',
+        webp: 'image',
+    };
+    // Excel
+    excelData = [];
+    excelColumns = [];
+    excelColumnHeaders = [];
+    excelSettings = {};
+    excelSheetNames = [];
+    excelCurrentSheetIndex = signal(0);
+    showExcelViewer = false;
+    excelWorkbook = null;
+    xlsxModule = null;
+    // Imagen (zoom, rotación, arrastre)
+    zoomLevel = signal(100);
+    rotation = signal(0);
+    minZoom = 25;
+    maxZoom = 400;
+    zoomStep = 25;
+    isDragging = false;
+    dragStart = { x: 0, y: 0 };
+    imagePosition = { x: 0, y: 0 };
+    imageDimensions = { width: 0, height: 0 };
+    imageContainer;
+    mainImage;
+    librariesPreloaded = {
+        pdf: false,
+        excel: false,
+        xlsx: false,
+        jspdf: false,
+    };
+    constructor(route, fileService) {
         this.route = route;
         this.fileService = fileService;
-        this.pdfService = pdfService;
     }
     ngOnInit() {
-        // 1) Si el host ya pasó valores por @Input, usarlos directamente
+        // 1) Si el host pasó valores por @Input, usarlos directamente
         if (this.url ||
             this.nameFile ||
             this.nameBucket ||
             this.nameSpaceBucket ||
             this.token) {
-            this.loadPdf();
+            if (this.nameFile)
+                this.fileName.set(this.nameFile);
+            this.detectFileType();
+            void this.loadWithPreload();
             return;
         }
-        // 2) Si no hay @Input, intentar leer desde query params (modo microfront original)
+        // 2) Si no hay @Input, leer query params (modo microfront)
         this.route.queryParams.subscribe((params) => {
             this.nameFile = this.nameFile ?? params['nameFile'];
             this.nameBucket = this.nameBucket ?? params['nameBucket'];
             this.nameSpaceBucket = this.nameSpaceBucket ?? params['nameSpaceBucket'];
             this.token = this.token || params['token'];
             this.url = this.url ?? params['url'];
-            if (this.url ||
-                this.nameFile ||
-                this.nameBucket ||
-                this.nameSpaceBucket ||
-                this.token) {
-                this.loadPdf();
-            }
-            else {
-                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}}`);
-                this.loading.set(false);
-                this.errorMessage.set(null);
+            if (this.nameFile) {
+                this.fileName.set(this.nameFile);
             }
+            this.detectFileType();
+            void this.loadWithPreload();
         });
     }
-    loadPdf() {
+    ngOnDestroy() {
+        if (this.pdfSrc)
+            URL.revokeObjectURL(this.pdfSrc);
+        if (this.imageSrc)
+            URL.revokeObjectURL(this.imageSrc);
+    }
+    detectFileType() {
+        let extension = '';
+        if (this.url) {
+            extension = this.url.split('.').pop()?.toLowerCase() || '';
+        }
+        else if (this.nameFile) {
+            extension = this.nameFile.split('.').pop()?.toLowerCase() || '';
+        }
+        this.fileType.set(this.extensionToType[extension] || 'unknown');
+        if (this.fileType() !== 'unknown') {
+            void this.preloadLibrariesForType(this.fileType());
+        }
+    }
+    async loadWithPreload() {
         this.loading.set(true);
         this.errorMessage.set(null);
-        this.fileService
-            .getFileByParams({
-            nameFile: this.nameFile,
-            nameBucket: this.nameBucket,
-            nameSpaceBucket: this.nameSpaceBucket,
-            url: this.url,
-            token: this.token,
-        })
-            .subscribe({
-            next: (blob) => {
-                this.pdfSrc = URL.createObjectURL(blob);
+        try {
+            const preloadPromise = this.preloadLibrariesForType(this.fileType());
+            const documentPromise = this.fileService
+                .getFileByParams({
+                nameFile: this.nameFile,
+                nameBucket: this.nameBucket,
+                nameSpaceBucket: this.nameSpaceBucket,
+                url: this.url,
+                token: this.token,
+            })
+                .toPromise();
+            const [blob] = await Promise.all([documentPromise, preloadPromise]);
+            this.processFile(blob);
+        }
+        catch (error) {
+            this.errorMessage.set(error.message || 'Error al cargar el documento');
+            this.loading.set(false);
+        }
+    }
+    async preloadLibrariesForType(type) {
+        const preloadTasks = [];
+        if (!this.librariesPreloaded.pdf) {
+            preloadTasks.push(import('ngx-extended-pdf-viewer').then(() => (this.librariesPreloaded.pdf = true)));
+        }
+        if (type === 'txt' && !this.librariesPreloaded.jspdf) {
+            preloadTasks.push(import('jspdf').then(() => (this.librariesPreloaded.jspdf = true)));
+        }
+        if (type === 'xlsx' || type === 'xls') {
+            if (!this.librariesPreloaded.xlsx) {
+                preloadTasks.push(import('xlsx').then((module) => {
+                    this.xlsxModule = module;
+                    this.librariesPreloaded.xlsx = true;
+                }));
+            }
+            if (!this.librariesPreloaded.excel) {
+                preloadTasks.push(import('handsontable').then(() => (this.librariesPreloaded.excel = true)));
+            }
+        }
+        if (preloadTasks.length > 0) {
+            await Promise.allSettled(preloadTasks);
+        }
+    }
+    processFile(blob) {
+        const type = this.fileType();
+        switch (true) {
+            case type === 'pdf':
+                this.handlePdfFile(blob);
+                break;
+            case type === 'image':
+                this.handleImageFile(blob);
+                break;
+            case type === 'txt':
+                void this.convertTextToPdf(blob);
+                break;
+            case ['xlsx', 'xls'].includes(type):
+                void this.processExcelFile(blob);
+                break;
+            case ['docx', 'doc', 'pptx', 'ppt'].includes(type):
+                this.convertOfficeToPdf(blob);
+                break;
+            default:
+                this.errorMessage.set('Formato no soportado');
+                this.loading.set(false);
+        }
+    }
+    handlePdfFile(blob) {
+        this.pdfSrc = URL.createObjectURL(blob);
+        this.loading.set(false);
+    }
+    handleImageFile(blob) {
+        this.imageSrc = URL.createObjectURL(blob);
+        this.loading.set(false);
+    }
+    convertOfficeToPdf(blob) {
+        this.fileService.convertDocumentToPdf(blob, this.token, this.url).subscribe({
+            next: (pdfBlob) => {
+                this.pdfSrc = URL.createObjectURL(pdfBlob);
+                this.fileType.set('pdf');
                 this.loading.set(false);
-                this.errorMessage.set(null);
             },
-            error: (err) => {
+            error: (error) => {
+                this.errorMessage.set(error.message || 'Error al convertir el archivo a PDF');
                 this.loading.set(false);
-                this.errorMessage.set(err.message || 'Error al cargar el documento');
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentViewerFileService }, { token: i3.NgxExtendedPdfViewerService }], target: i0.ɵɵFactoryTarget.Component });
-    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" }, providers: [NgxExtendedPdfViewerService], ngImport: i0, template: "<div *ngIf=\"loading()\" class=\"loader\">\r\n  Cargando documento...\r\n</div>\r\n\r\n<div *ngIf=\"errorMessage() && !loading()\" class=\"error-message\">\r\n  {{ errorMessage() }}\r\n</div>\r\n\r\n<div class=\"pdf-viewer-container\">\r\n  <ngx-extended-pdf-viewer\r\n    *ngIf=\"pdfSrc && !loading()\"\r\n    [src]=\"pdfSrc\"\r\n    height=\"auto\"\r\n    useBrowserLocale=\"false\"\r\n    [showDownloadButton]=\"false\"\r\n    [showPrintButton]=\"false\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showSecondaryToolbarButton]=\"false\"\r\n    [showFirstAndLastPageButtons]=\"false\"\r\n    [showPagingButtons]=\"false\"\r\n    [showZoomButtons]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n  >\r\n  </ngx-extended-pdf-viewer>\r\n</div>\r\n\r\n", styles: [".loader,.error-message{padding:1rem;text-align:center}.error-message{color:#b71c1c;background-color:#ffebee;border:1px solid #ef5350;border-radius:4px;margin:1rem 0}.pdf-viewer-container{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}.pdf-viewer-container ngx-extended-pdf-viewer{flex:1;min-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxExtendedPdfViewerModule }, { kind: "component", type: i3.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"] }] });
+    async convertTextToPdf(blob) {
+        try {
+            const text = await blob.text();
+            if (!this.librariesPreloaded.jspdf) {
+                await import('jspdf');
+            }
+            const { default: jsPDF } = await import('jspdf');
+            const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
+            const pageWidth = pdf.internal.pageSize.getWidth();
+            const pageHeight = pdf.internal.pageSize.getHeight();
+            const margin = 40;
+            const maxLineWidth = pageWidth - margin * 2;
+            pdf.setFontSize(11);
+            pdf.setFont('helvetica');
+            let yPosition = margin;
+            const lineHeight = 15;
+            const paragraphs = text.split('\n');
+            for (const paragraph of paragraphs) {
+                if (paragraph.trim() === '') {
+                    yPosition += lineHeight;
+                    continue;
+                }
+                const lines = pdf.splitTextToSize(paragraph, maxLineWidth);
+                for (const line of lines) {
+                    if (yPosition > pageHeight - margin) {
+                        pdf.addPage();
+                        yPosition = margin;
+                    }
+                    pdf.text(line, margin, yPosition);
+                    yPosition += lineHeight;
+                }
+                yPosition += lineHeight / 2;
+            }
+            const pdfBlob = pdf.output('blob');
+            this.pdfSrc = URL.createObjectURL(pdfBlob);
+            this.fileType.set('pdf');
+            this.loading.set(false);
+        }
+        catch {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.textContent = e.target?.result;
+                this.loading.set(false);
+            };
+            reader.readAsText(blob);
+        }
+    }
+    async processExcelFile(blob) {
+        try {
+            if (!this.xlsxModule) {
+                this.xlsxModule = await import('xlsx');
+            }
+            const buffer = await blob.arrayBuffer();
+            this.excelWorkbook = this.xlsxModule.read(buffer, { type: 'array' });
+            this.excelSheetNames = [...this.excelWorkbook.SheetNames];
+            await this.loadExcelSheetByIndex(0);
+            this.buildExcelSettings();
+            this.showExcelViewer = true;
+            this.loading.set(false);
+        }
+        catch {
+            this.errorMessage.set('Error procesando Excel');
+            this.loading.set(false);
+        }
+    }
+    async loadExcelSheetByIndex(index) {
+        if (!this.excelWorkbook || !this.xlsxModule)
+            return;
+        this.showExcelViewer = false;
+        const sheetName = this.excelSheetNames[index];
+        const worksheet = this.excelWorkbook.Sheets[sheetName];
+        if (!worksheet)
+            return;
+        let jsonData = this.xlsxModule.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
+        if (!Array.isArray(jsonData) || jsonData.length === 0) {
+            jsonData = [['(Hoja vacía)']];
+        }
+        const headers = (jsonData[0] ?? []).map((h) => String(h ?? ''));
+        const data = jsonData.slice(1);
+        this.excelColumnHeaders = headers.length > 0 ? headers : [''];
+        const maxColumns = Math.max(this.excelColumnHeaders.length, ...data.map((row) => row.length));
+        this.excelColumnHeaders = Array.from({ length: maxColumns }, (_, i) => this.excelColumnHeaders[i] ?? `Col ${i + 1}`);
+        this.excelData = data.map((row) => Array.from({ length: maxColumns }, (_, i) => row[i] ?? ''));
+        this.excelColumns = Array.from({ length: maxColumns }, () => ({ type: 'text' }));
+        this.excelCurrentSheetIndex.set(index);
+        this.showExcelViewer = true;
+    }
+    selectExcelSheet(index) {
+        void this.loadExcelSheetByIndex(index);
+    }
+    buildExcelSettings() {
+        this.excelSettings = {
+            licenseKey: 'non-commercial-and-evaluation',
+            colHeaders: this.excelColumnHeaders,
+            rowHeaders: true,
+            stretchH: 'all',
+            contextMenu: true,
+            filters: true,
+            dropdownMenu: true,
+            readOnly: true,
+            manualColumnResize: true,
+            manualRowResize: true,
+            columnSorting: true,
+            height: '100%',
+            width: '100%',
+        };
+    }
+    // Helpers para template
+    isExcelType() {
+        return ['xlsx', 'xls'].includes(this.fileType());
+    }
+    isImageType() {
+        return this.fileType() === 'image';
+    }
+    // Imagen: zoom/rotación/arrastre
+    zoomIn() {
+        this.zoomLevel.set(Math.min(this.zoomLevel() + this.zoomStep, this.maxZoom));
+    }
+    zoomOut() {
+        this.zoomLevel.set(Math.max(this.zoomLevel() - this.zoomStep, this.minZoom));
+    }
+    rotateLeft() {
+        this.rotation.set((this.rotation() - 90) % 360);
+    }
+    rotateRight() {
+        this.rotation.set((this.rotation() + 90) % 360);
+    }
+    getImageTransform() {
+        const scale = this.zoomLevel() / 100;
+        const translate = `translate(${this.imagePosition.x}px, ${this.imagePosition.y}px)`;
+        const rotate = `rotate(${this.rotation()}deg)`;
+        const scaleStr = `scale(${scale})`;
+        return `${translate} ${rotate} ${scaleStr}`;
+    }
+    getCursorStyle() {
+        return this.zoomLevel() > 100 ? (this.isDragging ? 'grabbing' : 'grab') : 'default';
+    }
+    onImageLoad() {
+        try {
+            const imgEl = this.mainImage?.nativeElement;
+            this.imageDimensions = { width: imgEl.naturalWidth, height: imgEl.naturalHeight };
+        }
+        catch { /* noop */ }
+    }
+    onMouseWheel(event) {
+        event.preventDefault();
+        if (event.deltaY < 0)
+            this.zoomIn();
+        else
+            this.zoomOut();
+    }
+    startDrag(event) {
+        if (this.zoomLevel() <= 100)
+            return;
+        this.isDragging = true;
+        this.dragStart = { x: event.clientX - this.imagePosition.x, y: event.clientY - this.imagePosition.y };
+    }
+    onDrag(event) {
+        if (!this.isDragging)
+            return;
+        this.imagePosition = { x: event.clientX - this.dragStart.x, y: event.clientY - this.dragStart.y };
+    }
+    stopDrag() {
+        this.isDragging = false;
+    }
+    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 });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sgdea-document-viewer', standalone: true, imports: [CommonModule, NgxExtendedPdfViewerModule], providers: [NgxExtendedPdfViewerService], template: "<div *ngIf=\"loading()\" class=\"loader\">\r\n  Cargando documento...\r\n</div>\r\n\r\n<div *ngIf=\"errorMessage() && !loading()\" class=\"error-message\">\r\n  {{ errorMessage() }}\r\n</div>\r\n\r\n<div class=\"pdf-viewer-container\">\r\n  <ngx-extended-pdf-viewer\r\n    *ngIf=\"pdfSrc && !loading()\"\r\n    [src]=\"pdfSrc\"\r\n    height=\"auto\"\r\n    useBrowserLocale=\"false\"\r\n    [showDownloadButton]=\"false\"\r\n    [showPrintButton]=\"false\"\r\n    [showOpenFileButton]=\"false\"\r\n    [showSecondaryToolbarButton]=\"false\"\r\n    [showFirstAndLastPageButtons]=\"false\"\r\n    [showPagingButtons]=\"false\"\r\n    [showZoomButtons]=\"false\"\r\n    [showDrawEditor]=\"false\"\r\n    [showTextEditor]=\"false\"\r\n    [showStampEditor]=\"false\"\r\n    [showHighlightEditor]=\"false\"\r\n  >\r\n  </ngx-extended-pdf-viewer>\r\n</div>\r\n\r\n", styles: [".loader,.error-message{padding:1rem;text-align:center}.error-message{color:#b71c1c;background-color:#ffebee;border:1px solid #ef5350;border-radius:4px;margin:1rem 0}.pdf-viewer-container{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}.pdf-viewer-container ngx-extended-pdf-viewer{flex:1;min-height:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentViewerFileService }, { type: i3.NgxExtendedPdfViewerService }], propDecorators: { nameFile: [{
+            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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentViewerFileService }], propDecorators: { nameFile: [{
                 type: Input
             }], nameBucket: [{
                 type: Input
@@ -192,6 +545,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }], token: [{
                 type: Input
+            }], imageContainer: [{
+                type: ViewChild,
+                args: ['imageContainer']
+            }], mainImage: [{
+                type: ViewChild,
+                args: ['mainImage']
             }] } });
 
 /*