legalesign-document-viewer 0.3.5 → 0.3.7

package/dist/collection/components/ls-document-viewer/ls-document-viewer.js

@@ -0,0 +1,1235 @@
+import { Host, h } from "@stencil/core";
+import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
+import "pdfjs-dist/web/pdf_viewer";
+import { addField, moveField } from "./editorCalculator";
+import { keyDown } from "./keyHandlers";
+import { mouseClick, mouseDoubleClick, mouseDown, mouseDrop, mouseMove, mouseUp } from "./mouseHandlers";
+import { getApiType, matchData } from "./editorUtils";
+import { LsDocumentAdapter } from "./adapter/LsDocumentAdapter";
+import { getTemplate } from "./adapter/templateActions";
+import { getGroupData } from "./adapter/groupActions";
+import { validate } from "./validator";
+import { attachAllTooltips } from "../../utils/tooltip";
+GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
+/**
+ * The Legalesign page viewer converted to stencil. To use pass the standard
+ * Template information from GraphQL (see Readme).
+ *
+ * Alex Weinle
+ */
+export class LsDocumentViewer {
+    component;
+    isPageRendering;
+    pdfDocument;
+    pageNumPending = null;
+    canvas;
+    ctx;
+    pageDimensions; // hardcoded to start at the page 1
+    // @ts-ignore
+    isMoving = false;
+    // @ts-ignore
+    isBoxing = false;
+    // @ts-ignore
+    selectionBox = null;
+    // @ts-ignore
+    hitField;
+    // @ts-ignore
+    edgeSide;
+    // @ts-ignore
+    startLocations;
+    // @ts-ignore
+    startMouse;
+    //
+    // --- Properties / Inputs --- //
+    //
+    /**
+     * The initial template data, including the link for background PDF. See README and
+     * example for correct GraphQL query and data structure.
+     * {LSApiTemplate}
+     */
+    template;
+    /**
+     * The access token of the account your want the widget to use, you should normally
+     * acquire this with a server side call using that accounts login credentials.
+     * {string}
+     */
+    token;
+    /**
+     * This will override the default production user pool.
+     * Almost exclusively used for internal development.
+     * {string}
+     */
+    userpool;
+    /**
+     * This will override the default production graphql endpoint.
+     * Almost exclusively used for internal development.
+     * {string}
+     */
+    endpoint;
+    /**
+     * The id of the template you want to load (if using the internal data adapter).
+     * {string}
+     */
+    templateid;
+    /**
+     * A JSON string containing the signer details. Only used in COMPOSE mode.
+     * {string}
+     */
+    signers;
+    zoom = 1.0; // hardcoded to scale the document to full canvas size
+    pageNum = 1;
+    pageCount = 1;
+    signer = 0;
+    _template;
+    validationErrors = [];
+    status;
+    groupInfo;
+    selected = [];
+    isLoading = true;
+    fieldTypeSelected = {
+        label: 'Signature',
+        formElementType: 'signature',
+        elementType: 'signature',
+        validation: 0,
+        defaultHeight: 27,
+        defaultWidth: 120,
+    };
+    /**
+     * An ease of use property that will arrange document-viewer appropraitely.
+     * {'preview' | 'editor' | 'custom'}
+     */
+    mode = 'editor';
+    modeHandler(_newMode, _oldMode) {
+        if (_newMode === 'preview') {
+            this.showtoolbar = false;
+            this.showtoolbox = false;
+            this.showstatusbar = false;
+            this.readonly = true;
+        }
+        else if (_newMode === 'editor') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
+        else if (_newMode === 'compose') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
+    }
+    tableViewHandler(_newMode, _oldMode) {
+        if (_newMode === true) {
+            this.showPageFields(-1);
+        }
+        else if (_newMode === 'editor') {
+            this.showPageFields(this.pageNum);
+        }
+        this.queueRenderPage(this.pageNum);
+    }
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    /**
+     * Shows the table view of fields rather than the preview.
+     * {boolean}
+     */
+    displayTable = false;
+    /**
+     * Whether the left hand toolbox is displayed.
+     * {boolean}
+     */
+    showtoolbox = false;
+    /**
+     * Whether the top toolbar is displayed.
+     * {boolean}
+     */
+    showtoolbar = false;
+    /**
+     * Whether the bottom statusbar is displayed.
+     * {boolean}
+     */
+    showstatusbar = false;
+    /**
+     * Whether the page previewvertical ribbon will be shown
+     * {boolean}
+     */
+    showpagepreview = false;
+    /**
+     * Whether or not the fields list is expanded.
+     * {boolean}
+     */
+    expandfields = false;
+    /**
+     * Whether the right panel (which can be default field properties or custom panel) is
+     * displayed.
+     * {boolean}
+     */
+    readonly = false;
+    /**
+     * Whether the table view of the fields on this template is available to the user.
+     * {boolean}
+     */
+    showtableview = false;
+    /**
+     * If supplied ONLY items in this | ("or") delimited list will be shown. i.e. "signature|intials"
+     * {boolean}
+     */
+    toolboxFilter = null;
+    //
+    // --- Event Emitters --- //
+    //
+    pageRendered;
+    // @Event() error: EventEmitter<any>;
+    pageChange;
+    // Multiple or single select
+    selectFields;
+    // Send an external event to be processed
+    mutate;
+    // Send an internal event to be processed
+    update;
+    adapter;
+    // Action an external data action and use the result (if required)
+    mutateHandler(event) {
+        if (this.token && this.adapter)
+            event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
+    }
+    handleFieldTypeSelected(event) {
+        console.log(event);
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        fields.forEach(element => {
+            element.isSelected = element.formElementType === event.detail.formElementType;
+        });
+        this.fieldTypeSelected = event.detail;
+    }
+    // Updates are internal event between LS controls not to be confused with mutate
+    updateHandler(event) {
+        if (event.detail)
+            event.detail.forEach(fx => this.syncChange(fx));
+    }
+    // Updates are internal event between LS controls not to be confused with mutate
+    addParticpantHandler(event) {
+        const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
+        const parent = this._template.roles.find(r => r.id === event.detail.parent);
+        const newSignerIndex = Math.max(...this._template.roles.filter(r => r.roleType !== 'WITNESS').map(r => r.signerIndex)) + 1;
+        const data = [
+            {
+                action: 'create',
+                data: {
+                    id: btoa('rol' + crypto.randomUUID()),
+                    name: 'Signer ' + (this._template.roles.length + 1),
+                    roleType: event.detail.type,
+                    signerIndex: event.detail.type === 'WITNESS' ? 100 + parent.signerIndex : (this._template.roles.length === 0 ? 1 : newSignerIndex),
+                    ordinal: event.detail.type === 'WITNESS' ? parent.ordinal + 1 : this._template.roles.length + 1,
+                    signerParent: event.detail.parent,
+                    experience: defaultExperience.id,
+                    templateId: this._template.id,
+                },
+            },
+        ];
+        this.update.emit(data);
+        this.mutate.emit(data);
+    }
+    // Send selection changes to bars and panels if in use.
+    selectFieldsHandler(event) {
+        const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
+        // update the template with all the latest values in the
+        this._template = {
+            ...this._template,
+            elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) },
+        };
+        var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
+        if (toolbar) {
+            toolbar.dataItem = event.detail;
+        }
+        var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
+        if (event.detail.length === 0) {
+            this.selected = [];
+        }
+        else {
+            propPanel.dataItem = event.detail;
+        }
+        // change style of selected fields
+        event.detail.forEach(fc => {
+            const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
+            fu.selected = true;
+        });
+        // this.selected = fields.filter(fx => fx.selected) as HTMLLsEditorFieldElement[];
+        this.selected.forEach(s => (s.selected = event.detail.map(d => d.id).includes(s.dataItem.id)));
+        this.validationErrors = validate.bind(this)(this._template);
+    }
+    // Send role selection changes to bars and panels
+    roleHandler(event) {
+        this.signer = event.detail;
+    }
+    //
+    // --- Methods --- //
+    //
+    /**
+     * Page forward
+     * {MouseEvent} e
+     */
+    async pageNext() {
+        if (this.pageNum >= this.pdfDocument.numPages) {
+            return;
+        }
+        this.pageNum += 1;
+        this.queueRenderPage(this.pageNum);
+        this.showPageFields(this.pageNum);
+    }
+    /**
+     * Page backward
+     * e
+     */
+    async pagePrev() {
+        if (this.pageNum <= 1) {
+            return;
+        }
+        this.pageNum -= 1;
+        this.queueRenderPage(this.pageNum);
+        this.showPageFields(this.pageNum);
+    }
+    /**
+     * Unselect all fields
+     */
+    async unselect() {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(fu => {
+            fu.selected = false;
+        });
+        this.selected = [];
+    }
+    /**
+     * Page and field resize on zoom change
+     *
+     */
+    async setZoom(z) {
+        this.zoom = z;
+        this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
+        const frame = this.component.shadowRoot.getElementById('ls-document-frame');
+        // const wrapper = this.component.shadowRoot.getElementById('document-frame-wrapper') as HTMLDivElement;
+        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * z + 'px';
+        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * z + 'px';
+        frame.style.height = this.pageDimensions[this.pageNum - 1].height * z + 'px';
+        frame.style.width = this.pageDimensions[this.pageNum - 1].width * z + 'px';
+        // wrapper.style.height = this.pageDimensions[this.pageNum - 1].height * z + 200 + 'px';
+        // wrapper.style.width = this.pageDimensions[this.pageNum - 1].width * z + 600 + 'px';
+        // place all fields at new zoom level
+        this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(fx => moveField.bind(this)(fx, fx.dataItem));
+        this.queueRenderPage(this.pageNum);
+        this.showPageFields(this.pageNum);
+    }
+    /**
+     * Ensure broken or misplaced fields are put onto the page.
+     * {number} position
+     */
+    clip(legacyPosition, failback = 0.0) {
+        return legacyPosition > 1 ? failback : legacyPosition;
+    }
+    /**
+     * Decorate the template data object with useful transformations.
+     * {string} json of template
+     */
+    parseTemplate(newValue) {
+        const newTemplate = JSON.parse(newValue);
+        const pages = JSON.parse(JSON.parse(newTemplate.pageDimensions));
+        // Convert ax,bx,ay etc. into top, left
+        // We also add the templateId into every object so that all the information
+        // required to mutate is in each object.
+        this.pageDimensions = pages.map(p => {
+            return { height: p[1], width: p[0] };
+        });
+        const fields = newTemplate.elementConnection.templateElements.map(f => {
+            return {
+                ...f,
+                top: this.clip(f.ay) * this.pageDimensions[0].height,
+                left: this.clip(f.ax) * this.pageDimensions[0].width,
+                height: (this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height,
+                width: (this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width,
+                templateId: newTemplate.id,
+            };
+        });
+        const preparedRoles = newTemplate.roles.map((ro) => {
+            return { ...ro, templateId: newTemplate.id };
+        });
+        this.signer = preparedRoles.length > 0 ? 1 : 0;
+        this._template = {
+            ...newTemplate,
+            elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
+            roles: preparedRoles,
+        };
+    }
+    /**
+     * Render the page based on pageNumber
+     * {number} pageNumber
+     */
+    renderPage(pageNumber) {
+        this.isPageRendering = true;
+        this.pdfDocument.getPage(pageNumber).then((page) => {
+            const viewport = page.getViewport({ scale: this.zoom });
+            this.canvas.height = Math.floor(viewport.height);
+            this.canvas.width = Math.floor(viewport.width);
+            // Render PDF page into canvas context
+            const renderContext = {
+                viewport,
+                canvasContext: this.ctx,
+            };
+            // Render page method
+            const renderTask = page.render(renderContext);
+            // Wait for rendering to finish
+            renderTask.promise.then(() => {
+                this.isPageRendering = false;
+                this.pageRendered.emit(this.pageNum);
+                if (this.pageNumPending !== null) {
+                    this.renderPage(this.pageNumPending); // New page rendering is pending
+                    this.pageChange.emit(this.pageNumPending); // emit
+                    this.pageNumPending = null;
+                }
+            });
+        });
+    }
+    queueRenderPage(pageNumber) {
+        if (this.isPageRendering) {
+            this.pageNumPending = pageNumber;
+        }
+        else {
+            this.renderPage(pageNumber);
+        }
+    }
+    loadAndRender(src) {
+        getDocument(src).promise.then((pdfDocument) => {
+            this.pdfDocument = pdfDocument;
+            this.renderPage(this.pageNum);
+        });
+    }
+    // Fills in and converts all utility and placement fields
+    prepareElement(newElement) {
+        return {
+            ...newElement,
+            top: Math.floor(this.clip(newElement.ay) * this.pageDimensions[newElement.page - 1].height),
+            left: Math.floor(this.clip(newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            height: Math.floor((this.clip(newElement.by, 0.05) - this.clip(newElement.ay)) * this.pageDimensions[newElement.page - 1].height),
+            width: Math.floor((this.clip(newElement.bx, 0.2) - this.clip(newElement.ax)) * this.pageDimensions[newElement.page - 1].width),
+            pageDimensions: this.pageDimensions[newElement.page - 1],
+            templateId: this._template.id,
+        };
+    }
+    // internal forced change
+    syncChange(update) {
+        if (update?.select === 'clear') {
+            this.unselect();
+        }
+        if (getApiType(update.data) === 'element') {
+            if (update.action === 'create') {
+                //      const newData = { ...update.data, page: this.pageNum };
+                //        addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), newData);
+                //const newField = this.component.shadowRoot.getElementById('ls-field-' + update.data.id) as HTMLLsEditorFieldElement;
+                //this.selected = [newField];
+                //this.selectFields.emit([newData as LSApiElement]);
+            }
+            else if (update.action === 'update') {
+                const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
+                if (fi) {
+                    moveField.bind(this)(fi, update.data);
+                    // const fu = this.component.shadowRoot.getElementById('ls-field-' + update.data.id) as HTMLLsEditorFieldElement;
+                    // fu.dataItem = update.data as LSApiElement;
+                    // Refresh the selected array
+                    this.selectFields.emit(this.selected.map(sf => sf.dataItem));
+                    this.selected = this.selected.map(s => (s.dataItem.id === update.data.id ? fi : s));
+                }
+                // Reselect the fields - this updates the dataItem value passed to child controls
+                const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+                this.selected = Array.from(fields).filter(fx => fx.selected);
+            }
+            else if (update.action === 'delete') {
+                const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
+                const fields = this._template.elementConnection.templateElements;
+                this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: fields.filter(f => f.id !== update.data.id) } };
+                this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi);
+                this.selectFields.emit([]);
+            }
+            else {
+                console.warn('Unrecognised action, check Legalesign documentation. `create`, `update` and `delete` allowed.');
+            }
+        }
+        this.validationErrors = validate.bind(this)(this._template);
+    }
+    initViewer() {
+        // Generate a canvas to draw the background PDF on.
+        this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
+        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * this.zoom + 'px';
+        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * this.zoom + 'px';
+        this.ctx = this.canvas.getContext('2d');
+        if (this._template?.link)
+            this.loadAndRender(this._template?.link);
+        var dropTarget = this.component.shadowRoot.getElementById('ls-document-frame');
+        // Used for single field selection
+        dropTarget.addEventListener('click', mouseClick.bind(this));
+        dropTarget.addEventListener('mousedown', mouseDown.bind(this));
+        dropTarget.addEventListener('mousemove', mouseMove.bind(this));
+        dropTarget.addEventListener('mouseup', mouseUp.bind(this));
+        dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
+        document.addEventListener('keydown', keyDown.bind(this));
+        dropTarget.addEventListener('dragenter', event => {
+            event.preventDefault();
+        });
+        dropTarget.addEventListener('dragover', event => {
+            event.preventDefault();
+        });
+        dropTarget.addEventListener('drop', mouseDrop.bind(this));
+        this.generateFields();
+    }
+    // Generate all the field HTML elements that are required (for every page)
+    generateFields(clearExisting = true) {
+        if (clearExisting) {
+            const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+            fields.forEach(fi => this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi));
+        }
+        this._template.elementConnection.templateElements.forEach(te => {
+            addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), this.prepareElement(te));
+        });
+    }
+    showPageFields(page) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        Array.from(fields).forEach(fx => {
+            fx.className = fx.dataItem.page === page ? '' : 'hidden';
+        });
+    }
+    async load() {
+        this.isLoading = true;
+        // Get all template and group listing data.
+        try {
+            this.adapter = new LsDocumentAdapter(this.endpoint);
+            const result = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
+            this.parseTemplate(JSON.stringify(result.template));
+            const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
+            this.groupInfo = resultGroup.group;
+            this.initViewer();
+            console.log(this._template);
+            //Revalidate
+            this.validationErrors = validate.bind(this)(this._template);
+            this.pageCount = this._template.pageCount;
+            this.selected = [];
+            this.setZoom(1.0);
+            this.isLoading = false;
+        }
+        catch (e) {
+            console.error('Your access token is invalid.', e);
+        }
+    }
+    componentWillLoad() {
+        if (this.token && !this._template)
+            this.load();
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '39b2a1bd5d0d4db7c87040861ce1931f2b7483dc' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'b7a6849536df3c66fa9e93d8fccbe80712aac1e5' }), h("div", { key: 'd494495a6ca72e9e4f404845b2d5a821f8a204ec', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'b6c3c64e6692dc5dd4a876419fbd5ae8f4ccda37', validationErrors: this.validationErrors })), h("div", { key: 'f098651e16f3140342942729b3b6ca03b8caba2a', class: "page-header" }, h("p", { key: '392fe33aa0231d216191b2be88205a072392d4c3', class: "header-text-1" }, "Template Creation"), h("p", { key: '58925f464288b8f106caf2f272b3596a101267b0' }, "/"), h("p", { key: '62e8869f014241be74443f4559a7069d0ab04ac5', class: "header-text-2" }, this._template?.title)), h("form", { key: '0958428ddd28950578106aac940404640817bb17', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { id: "ls-left-box", class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
+                if (manager.detail === 'document') {
+                    var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
+                    documentManager.template = this._template;
+                }
+                else if (manager.detail === 'participant') {
+                    var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+                    participantManager.template = this._template;
+                }
+                this.manager = manager.detail;
+            } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer, style: this.signer > 0 ? { display: 'block' } : { display: 'none' } }), h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer, style: this.signer === 0 ? { display: 'block' } : { display: 'none' } }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer }), this.signer > 0 && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer }), h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer }), h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer }), this.signer > 0 && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
+                this.selected = [];
+                e.preventDefault();
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: '7d13b89481e924a7f6523986528dcf27895add92', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'fe45c06a7d1e08b3ccb3b74a6935e70fedaeb34f', id: "ls-mid-area" }, h("div", { key: '5fbc5d27772a3843605c40ffbdd0c170931593c6', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'ccefa397f24b39c7a8aaf591fc946ebe4a29e917', id: "ls-document-frame" }, h("canvas", { key: '22143fcbb6f25c2380b96239f02596e08ce698a7', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '44583076450e41e25f93444c3be95686ebf7cfd6', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '53033fd56beea01dc1666b05ba957f1a43f2f419', id: "ls-box-selector" }))), h("ls-statusbar", { key: '0458d3dc9740703c93f34ac095e1cee566bc561f', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '61ac52fbee6e14d82fa705fb5f565488e86feae8', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-document-viewer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-document-viewer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-document-viewer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "template": {
+                "type": "string",
+                "attribute": "template",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial template data, including the link for background PDF. See README and\nexample for correct GraphQL query and data structure.\n{LSApiTemplate}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "token": {
+                "type": "string",
+                "attribute": "token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The access token of the account your want the widget to use, you should normally\nacquire this with a server side call using that accounts login credentials.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "userpool": {
+                "type": "string",
+                "attribute": "userpool",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This will override the default production user pool.\nAlmost exclusively used for internal development.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "endpoint": {
+                "type": "string",
+                "attribute": "endpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This will override the default production graphql endpoint.\nAlmost exclusively used for internal development.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "templateid": {
+                "type": "string",
+                "attribute": "templateid",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the template you want to load (if using the internal data adapter).\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "signers": {
+                "type": "string",
+                "attribute": "signers",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A JSON string containing the signer details. Only used in COMPOSE mode.\n{string}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "zoom": {
+                "type": "number",
+                "attribute": "zoom",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1.0"
+            },
+            "pageNum": {
+                "type": "number",
+                "attribute": "page-num",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "pageCount": {
+                "type": "number",
+                "attribute": "page-count",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "signer": {
+                "type": "number",
+                "attribute": "signer",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "groupInfo": {
+                "type": "any",
+                "attribute": "group-info",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "attribute": "mode",
+                "mutable": false,
+                "complexType": {
+                    "original": "'preview' | 'editor' | 'compose'",
+                    "resolved": "\"compose\" | \"editor\" | \"preview\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An ease of use property that will arrange document-viewer appropraitely.\n{'preview' | 'editor' | 'custom'}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'editor'"
+            },
+            "manager": {
+                "type": "string",
+                "attribute": "manager",
+                "mutable": true,
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'",
+                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines / sets which of the far left 'managers' is active.\n{'document' | 'toolbox' | 'participant' }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'toolbox'"
+            },
+            "displayTable": {
+                "type": "boolean",
+                "attribute": "display-table",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the table view of fields rather than the preview.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showtoolbox": {
+                "type": "boolean",
+                "attribute": "showtoolbox",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the left hand toolbox is displayed.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showtoolbar": {
+                "type": "boolean",
+                "attribute": "showtoolbar",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the top toolbar is displayed.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showstatusbar": {
+                "type": "boolean",
+                "attribute": "showstatusbar",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the bottom statusbar is displayed.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showpagepreview": {
+                "type": "boolean",
+                "attribute": "showpagepreview",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the page previewvertical ribbon will be shown\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expandfields": {
+                "type": "boolean",
+                "attribute": "expandfields",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the fields list is expanded.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the right panel (which can be default field properties or custom panel) is\ndisplayed.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showtableview": {
+                "type": "boolean",
+                "attribute": "showtableview",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the table view of the fields on this template is available to the user.\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "toolboxFilter": {
+                "type": "string",
+                "attribute": "toolbox-filter",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If supplied ONLY items in this | (\"or\") delimited list will be shown. i.e. \"signature|intials\"\n{boolean}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_template": {},
+            "validationErrors": {},
+            "status": {},
+            "selected": {},
+            "isLoading": {},
+            "fieldTypeSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageRendered",
+                "name": "pageRendered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "selectFields",
+                "name": "selectFields",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSApiElement[]",
+                    "resolved": "LSApiElement[]",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../types/LSApiElement",
+                            "id": "src/types/LSApiElement.ts::LSApiElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "pageNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Page forward\n{MouseEvent} e",
+                    "tags": []
+                }
+            },
+            "pagePrev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Page backward\ne",
+                    "tags": []
+                }
+            },
+            "unselect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Unselect all fields",
+                    "tags": []
+                }
+            },
+            "setZoom": {
+                "complexType": {
+                    "signature": "(z: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "z",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLCanvasElement": {
+                            "location": "global",
+                            "id": "global::HTMLCanvasElement"
+                        },
+                        "HTMLDivElement": {
+                            "location": "global",
+                            "id": "global::HTMLDivElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Page and field resize on zoom change",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "component"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "modeHandler"
+            }, {
+                "propName": "displayTable",
+                "methodName": "tableViewHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mutate",
+                "method": "mutateHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "fieldTypeSelected",
+                "method": "handleFieldTypeSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "update",
+                "method": "updateHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "addParticipant",
+                "method": "addParticpantHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "selectFields",
+                "method": "selectFieldsHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "roleChange",
+                "method": "roleHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ls-document-viewer.js.map