mss-doc-viewer/fesm2015/mss-doc-viewer.mjs

A simple typehead library developed by MSS development team to be used for document viewer

import * as i1 from '@angular/common/http';
import { HttpHeaders, HttpClientModule } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Injectable, Component, Input, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import * as i2$1 from 'ngx-doc-viewer';
import { NgxDocViewerModule } from 'ngx-doc-viewer';
import * as i1$1 from 'ng2-pdf-viewer';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { BrowserModule } from '@angular/platform-browser';

class MssDocViewerService {
    constructor(_http) {
        this._http = _http;
    }
    getDocument(document) {
        let headers = {};
        if (document.authorization) {
            headers = {
                authorization: document.authorization
            };
        }
        return this._http.get(document.url, { responseType: 'blob', headers: headers });
    }
    getXMLDoc(uri) {
        const headers = new HttpHeaders({
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Origin': '*'
        });
        headers.set('Content-Type', 'text/xml');
        return this._http.get(uri, { headers, responseType: 'text' });
    }
    downloadDoc(url) {
        return this._http.get(url, {
            responseType: 'blob'
        });
    }
}
MssDocViewerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
MssDocViewerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });

class DocViewerComponent {
    constructor() {
        this.isLoading = true;
    }
    ngOnChanges(changes) {
        console.log({ changes });
    }
    ngOnInit() {
    }
    loaded(event) {
        console.log({ event });
        this.isLoading = false;
    }
}
DocViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DocViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocViewerComponent, selector: "lib-doc-viewer", inputs: { document: "document" }, usesOnChanges: true, ngImport: i0, template: "<ngx-doc-viewer\n  [url]=\"document?.url\"\n  style=\"width:100%;height:50vh;\"\n  [overrideLocalhost]=\"document.overrideLocalhost\"\n  (loaded)=\"loaded($event)\"\n></ngx-doc-viewer>\n<div *ngIf=\"isLoading\" class=\"w-100 text-center\">\n  <div class=\"spinner-border text-secondary\"></div>\n</div>", styles: [":host{display:block}.container{width:100%;height:100%;position:relative}.overlay-popout-google{width:40px;height:40px;right:26px;top:11.5px;position:absolute;z-index:1000}.overlay-popout-office{width:100px;height:20px;right:0;bottom:0;position:absolute;z-index:1000}.overlay-full{width:100%;height:100%;right:0;top:0;position:absolute;z-index:1000}iframe{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-doc-viewer', template: "<ngx-doc-viewer\n  [url]=\"document?.url\"\n  style=\"width:100%;height:50vh;\"\n  [overrideLocalhost]=\"document.overrideLocalhost\"\n  (loaded)=\"loaded($event)\"\n></ngx-doc-viewer>\n<div *ngIf=\"isLoading\" class=\"w-100 text-center\">\n  <div class=\"spinner-border text-secondary\"></div>\n</div>", styles: [":host{display:block}.container{width:100%;height:100%;position:relative}.overlay-popout-google{width:40px;height:40px;right:26px;top:11.5px;position:absolute;z-index:1000}.overlay-popout-office{width:100px;height:20px;right:0;bottom:0;position:absolute;z-index:1000}.overlay-full{width:100%;height:100%;right:0;top:0;position:absolute;z-index:1000}iframe{width:100%;height:100%}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { document: [{
                type: Input
            }] } });

class ImgViewerComponent {
    constructor() { }
    ngOnChanges(changes) {
        // this.blobToBase64(this.document)
        //   .then((res) => {
        //     this.imageUri = res
        //   })
    }
    ngOnInit() {
    }
    blobToBase64(blob) {
        return new Promise((resolve, _) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.readAsDataURL(blob);
        });
    }
}
ImgViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImgViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ImgViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ImgViewerComponent, selector: "lib-img-viewer", inputs: { document: "document" }, usesOnChanges: true, ngImport: i0, template: "<img [src]=\"document?.url\" alt=\"document\">", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ImgViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-img-viewer', template: "<img [src]=\"document?.url\" alt=\"document\">" }]
        }], ctorParameters: function () { return []; }, propDecorators: { document: [{
                type: Input
            }] } });

class PdfViewerComponent {
    constructor() { }
    ngOnInit() {
    }
    ngOnChanges() {
    }
}
PdfViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PdfViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PdfViewerComponent, selector: "lib-pdf-viewer", inputs: { document: "document" }, usesOnChanges: true, ngImport: i0, template: "<pdf-viewer style=\"width:100%;height:600px\" [src]=\"document?.url\" [render-text]=\"false\"\r\n[original-size]=\"true\"></pdf-viewer>", styles: [""], dependencies: [{ kind: "component", type: i1$1.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PdfViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-pdf-viewer', template: "<pdf-viewer style=\"width:100%;height:600px\" [src]=\"document?.url\" [render-text]=\"false\"\r\n[original-size]=\"true\"></pdf-viewer>" }]
        }], ctorParameters: function () { return []; }, propDecorators: { document: [{
                type: Input
            }] } });

class XmlViewerComponent {
    constructor(_mss_doc) {
        this._mss_doc = _mss_doc;
    }
    ngOnInit() {
    }
    ngOnChanges() {
        if (this.document)
            this.getXMLData();
    }
    getXMLData() {
        var _a;
        this._mss_doc.getXMLDoc((_a = this.document) === null || _a === void 0 ? void 0 : _a.url).subscribe((xmlData) => {
            console.log({ xmlData });
            this.XmlPreview = xmlData;
            // xml2js.Parser.
            // xml2js.parseString(xmlData, (err, result) => {
            //   if (err) {
            //     console.error({ err });
            //     // return err
            //   } else {
            //     console.log({ result });
            //     this.XmlJSONPreview = result
            //     // return result
            //   }
            // });
        });
    }
}
XmlViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: XmlViewerComponent, deps: [{ token: MssDocViewerService }], target: i0.ɵɵFactoryTarget.Component });
XmlViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: XmlViewerComponent, selector: "lib-xml-viewer", inputs: { document: "document" }, usesOnChanges: true, ngImport: i0, template: "<!-- <pre>\r\n    {{ XmlPreview | json}}\r\n  </pre> -->\r\n  <pre >{{XmlPreview}}</pre>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: XmlViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-xml-viewer', template: "<!-- <pre>\r\n    {{ XmlPreview | json}}\r\n  </pre> -->\r\n  <pre >{{XmlPreview}}</pre>" }]
        }], ctorParameters: function () { return [{ type: MssDocViewerService }]; }, propDecorators: { document: [{
                type: Input
            }] } });

var SupportedDocumentsTypes;
(function (SupportedDocumentsTypes) {
    SupportedDocumentsTypes["DOC"] = "application/msword";
    SupportedDocumentsTypes["DOCX"] = "docx";
    SupportedDocumentsTypes["EXCEL"] = "application/vnd.ms-excel";
    SupportedDocumentsTypes["PPT"] = "application/vnd.ms-powerpoint";
    SupportedDocumentsTypes["PDF"] = "application/pdf";
    SupportedDocumentsTypes["PNG"] = "image/png";
    SupportedDocumentsTypes["JPG"] = "image/jpeg";
    SupportedDocumentsTypes["SVG"] = "image/svg+xml";
    SupportedDocumentsTypes["XML"] = "application/xml";
    SupportedDocumentsTypes["TXT"] = "txt";
})(SupportedDocumentsTypes || (SupportedDocumentsTypes = {}));

const SupportedDocuments = [
    {
        type: SupportedDocumentsTypes.DOC,
        component: DocViewerComponent
    },
    {
        type: SupportedDocumentsTypes.DOCX,
        component: DocViewerComponent
    },
    {
        type: SupportedDocumentsTypes.XML,
        component: XmlViewerComponent
    },
    {
        type: SupportedDocumentsTypes.PNG,
        component: ImgViewerComponent
    },
    {
        type: SupportedDocumentsTypes.JPG,
        component: ImgViewerComponent
    },
    {
        type: SupportedDocumentsTypes.SVG,
        component: ImgViewerComponent
    },
    {
        type: SupportedDocumentsTypes.PDF,
        component: PdfViewerComponent
    },
];

class MssDocViewerComponent {
    constructor(cd, _doc_viewer) {
        this.cd = cd;
        this._doc_viewer = _doc_viewer;
        this.document = { url: "" };
        this.documents = [];
        this.apiDoc = null;
        this.activeDoc = { url: '' };
    }
    ngOnChanges(changes) {
        if (changes && this.dynamicViewerContainer) {
            this.getDocument(this.documents[0]);
        }
    }
    ngAfterViewInit() {
        this.getDocument(this.documents[0]);
    }
    ngOnInit() {
    }
    getDocument(doc) {
        this.activeDoc = doc;
        this._doc_viewer.getDocument(doc)
            .subscribe({
            next: (res) => {
                this.apiDoc = res;
                this.registerDynamicViewer(res);
            },
            error: (err) => {
                console.error({ err });
                this.registerDynamicViewer({ type: this.get_url_extension(doc.url) });
            }
        });
    }
    get_url_extension(url) {
        return url.split('.').pop();
    }
    get_filename(url) {
        return url.substring(url.lastIndexOf('/') + 1);
    }
    registerDynamicViewer(doc) {
        console.log({ registerDynamicViewer: doc });
        this.dynamicViewerContainer.clear();
        const componentInstance = this.getComponentByType(doc === null || doc === void 0 ? void 0 : doc.type);
        const dynamicComponent = this.dynamicViewerContainer.createComponent(componentInstance);
        dynamicComponent.setInput('document', this.activeDoc);
        this.cd.detectChanges();
    }
    getComponentByType(type) {
        console.log({ type });
        let componentDynamic = SupportedDocuments.find(c => { var _a; return (_a = c.type) === null || _a === void 0 ? void 0 : _a.includes(type); });
        console.log({ componentDynamic });
        return (componentDynamic === null || componentDynamic === void 0 ? void 0 : componentDynamic.component) || DocViewerComponent;
    }
    download(uri) {
        this._doc_viewer
            .downloadDoc(uri)
            .subscribe(blob => {
            const a = document.createElement('a');
            const objectUrl = URL.createObjectURL(blob);
            a.href = objectUrl;
            a.download = this.get_filename(uri) || 'doc';
            a.click();
            URL.revokeObjectURL(objectUrl);
        });
    }
    print(url) {
        const printWindow = window.open(url, '_blank', 'height=400,width=600');
        console.log({ printWindow });
        setTimeout(() => {
            console.log({ printWindow });
            if (printWindow)
                printWindow.onload = function () {
                    printWindow === null || printWindow === void 0 ? void 0 : printWindow.print();
                    printWindow === null || printWindow === void 0 ? void 0 : printWindow.close();
                };
        }, 500);
    }
}
MssDocViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MssDocViewerService }], target: i0.ɵɵFactoryTarget.Component });
MssDocViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MssDocViewerComponent, selector: "lib-mss-doc-viewer", inputs: { document: "document", documents: "documents" }, viewQueries: [{ propertyName: "dynamicViewerContainer", first: true, predicate: ["dynamicViewerContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mss-doc-container\">\r\n    <div class=\"actions-container\">\r\n        <a *ngIf=\"activeDoc?.download\" (click)=\"download(activeDoc.url)\">\r\n            Download\r\n        </a>\r\n        <a *ngIf=\"activeDoc?.print\" (click)=\"print(activeDoc.url)\">\r\n            Print\r\n        </a>\r\n    </div>\r\n    <div *ngIf=\"documents.length>1\" class=\"documents-list-container\">\r\n        <div *ngFor=\"let doc of documents\" (click)=\"getDocument(doc)\" class=\"document-item\">\r\n            {{doc.url}}\r\n        </div>\r\n    </div>\r\n    <ng-container #dynamicViewerContainer>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-mss-doc-viewer', template: "<div class=\"mss-doc-container\">\r\n    <div class=\"actions-container\">\r\n        <a *ngIf=\"activeDoc?.download\" (click)=\"download(activeDoc.url)\">\r\n            Download\r\n        </a>\r\n        <a *ngIf=\"activeDoc?.print\" (click)=\"print(activeDoc.url)\">\r\n            Print\r\n        </a>\r\n    </div>\r\n    <div *ngIf=\"documents.length>1\" class=\"documents-list-container\">\r\n        <div *ngFor=\"let doc of documents\" (click)=\"getDocument(doc)\" class=\"document-item\">\r\n            {{doc.url}}\r\n        </div>\r\n    </div>\r\n    <ng-container #dynamicViewerContainer>\r\n    </ng-container>\r\n</div>" }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: MssDocViewerService }]; }, propDecorators: { dynamicViewerContainer: [{
                type: ViewChild,
                args: ['dynamicViewerContainer', { read: ViewContainerRef }]
            }], document: [{
                type: Input
            }], documents: [{
                type: Input
            }] } });

class MssDocViewerModule {
}
MssDocViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MssDocViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerModule, declarations: [MssDocViewerComponent,
        DocViewerComponent,
        ImgViewerComponent,
        XmlViewerComponent,
        PdfViewerComponent], imports: [BrowserModule,
        HttpClientModule,
        NgxDocViewerModule,
        PdfViewerModule], exports: [MssDocViewerComponent] });
MssDocViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerModule, imports: [BrowserModule,
        HttpClientModule,
        NgxDocViewerModule,
        PdfViewerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MssDocViewerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        MssDocViewerComponent,
                        DocViewerComponent,
                        ImgViewerComponent,
                        XmlViewerComponent,
                        PdfViewerComponent
                    ],
                    imports: [
                        BrowserModule,
                        HttpClientModule,
                        NgxDocViewerModule,
                        PdfViewerModule
                    ],
                    exports: [
                        MssDocViewerComponent
                    ]
                }]
        }] });

class Document {
    constructor() {
        this.url = "";
        this.disableContent = 'none';
        this.googleCheckContentLoaded = true;
        this.overrideLocalhost = '';
        this.googleCheckInterval = 3000;
        this.googleMaxChecks = 5;
    }
}

/*
 * Public API Surface of mss-doc-viewer
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Document, MssDocViewerComponent, MssDocViewerModule, MssDocViewerService };
//# sourceMappingURL=mss-doc-viewer.mjs.map