legalesign-document-viewer 0.7.2 → 0.7.3

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

@@ -1,1292 +0,0 @@
-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://unpkg.com/pdfjs-dist@5.4.449/build/pdf.worker.min.mjs`;
-/**
- * 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 recipient details. Only used in COMPOSE mode.
-     * {string}
-     */
-    recipients;
-    _recipients;
-    zoom = 1.0; // hardcoded to scale the document to full canvas size
-    pageNum = 1;
-    pageCount = 1;
-    signer = 0;
-    groupInfo;
-    _template;
-    validationErrors = [];
-    status;
-    /**
-   * The following state properties define the defaults for field
-   * creation. They should be overridden by the users most used
-   * values from localStorage or profile settings.
-   */
-    fontSize = 10;
-    fontFamily = 'arial';
-    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.showstatusbar = false;
-            this.readonly = true;
-        }
-        else if (_newMode === 'editor') {
-            this.showstatusbar = true;
-            this.readonly = false;
-        }
-        else if (_newMode === 'compose') {
-            this.showstatusbar = true;
-            this.readonly = false;
-        }
-    }
-    zoomChanged(newZoom) {
-        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
-        fields.forEach(f => f.setAttribute('zoom', String(newZoom)));
-    }
-    /**
-     * 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;
-    /**
-     * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
-     * {string}
-     */
-    filtertoolbox = null;
-    /**
-     * Whether the bottom statusbar is displayed.
-     * {boolean}
-     */
-    showstatusbar = false;
-    /**
-     * Whether the page previewvertical ribbon will be shown
-     * {boolean}
-     */
-    showpagepreview = 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 internal event to be processed
-    mutate;
-    // Send an external event to be mmonitored by an external developer
-    update;
-    // Send an external validation event to be monitored by an external developer
-    validate;
-    addParticipant;
-    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))
-                .then(() => this.syncChange(me)));
-    }
-    handleFieldTypeSelected(event) {
-        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
-        fields.forEach(element => {
-            element.isSelected = element.formElementType === event.detail.formElementType;
-        });
-        this.fieldTypeSelected = event.detail;
-    }
-    // generate a new role on the template
-    addParticpantHandler(event) {
-        const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
-        const parent = event.detail.signerIndex > 99 ? this._template.roles.find(r => r.signerIndex === event.detail.signerIndex % 100) : null;
-        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: event.detail.name ? event.detail.name : 'Signer ' + (this._template.roles.length + 1),
-                    roleType: event.detail.type,
-                    signerIndex: event.detail.signerIndex ? event.detail.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.mutate.emit(data);
-    }
-    // change the signer selected
-    updateSigner(event) {
-        if (event.detail) {
-            this.signer = event.detail;
-            try {
-                const leftBox = this.component.shadowRoot?.getElementById('ls-recipient-manager');
-                if (leftBox) {
-                    const recipientsBox = leftBox.querySelector('.recipients-box');
-                    const card = recipientsBox?.querySelector(`ls-recipient-card[data-signer-index="${event.detail}"]`);
-                    if (card && recipientsBox) {
-                        recipientsBox.scrollTo({
-                            top: 0,
-                            behavior: 'smooth',
-                        });
-                    }
-                }
-            }
-            catch (e) {
-                // fail silently
-            }
-        }
-    }
-    // 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: Math.floor(this.clip(f.ay) * this.pageDimensions[0].height),
-                left: Math.floor(this.clip(f.ax) * this.pageDimensions[0].width),
-                height: Math.floor((this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height),
-                width: Math.floor((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;
-        if (this.pdfDocument !== undefined && this.pdfDocument !== null) {
-            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 = {
-                    canvasContext: this.ctx,
-                    viewport,
-                };
-                // 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);
-                if (!fi)
-                    return;
-                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);
-        this.validate.emit({ valid: this.validationErrors.length === 0 });
-    }
-    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
-        if (this.mode !== 'preview' || this._template?.locked === true) {
-            dropTarget.addEventListener('click', mouseClick.bind(this));
-            document.addEventListener('mousedown', mouseDown.bind(this));
-            document.addEventListener('mousemove', mouseMove.bind(this));
-            document.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();
-            if (this.mode === 'compose') {
-                this.manager = 'recipient';
-                this._recipients = JSON.parse(this.recipients.replace('\u0022', '"'));
-            }
-            //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);
-        const leftBox = this.component.shadowRoot.getElementById('ls-left-box');
-        if (leftBox) {
-            leftBox.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-            });
-            leftBox.addEventListener('mouseup', (e) => {
-                e.stopPropagation();
-            });
-            leftBox.addEventListener('mousemove', (e) => {
-                e.stopPropagation();
-            });
-        }
-    }
-    showTool(fieldFormType) {
-        return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
-    }
-    render() {
-        return (h(Host, { key: '1c2056f695e2524d4528d48d275569f86ada5dde' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '604a97119f77b1a467dac7d0fa19225d5323a158' }), h("div", { key: 'a29bfd38955a3bf60370a5a3f96f5dd9288437b2', class: "page-header" }, h("div", { key: 'aea8ff00971dbef53b97130acb5bf3c90bf628ed', class: 'left-slot-wrapper' }, h("slot", { key: 'e9e381f10a9d63e50a95c7e1082ea216d8381550', name: "left-button" })), h("div", { key: '67e835295874fbb28d32a4314988552ff2c45ca4', class: 'right-slot-wrapper' }, h("slot", { key: '75b2ff60984537335aa2e182e1e226d81d80f442', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '2361287fa8d93d6f10491e733cc73aa49dc3a583' }, h("span", { key: '4247dcce8529f094cd476152b1ffb434fe3421c4', class: "header-text-1" }, "Template Creation"), h("span", { key: '99940da3e2a59b65abf762925ac90ef05146dce7' }, "/"), h("span", { key: 'fcb3cd83693fa978699a0e548bfef0816c67f734', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '365595a842926021a4a04122b89e0422796e2d7b', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: 'c23263e87e2cf30119eb2e995eae9cdb827be6b8', class: "header-text-1" }, "Compose")))), this.mode === 'editor' && (h("div", { key: '4c2db6783aef2b9856643a1e07fbf14308e1e556', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '2876ba1dec573b8ae5e31db11359a68e63f59ebf', validationErrors: this.validationErrors }))), h("form", { key: 'af9ffc26ade5a1b310c431996e931e5cfa4f5123', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, 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;
-                }
-                else if (manager.detail === 'validation') {
-                    var validationManager = this.component.shadowRoot.getElementById('ls-validation-manager');
-                    validationManager.validationErrors = this.validationErrors;
-                }
-                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" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 25, defaultWidth: 97, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 25, defaultWidth: 97, 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 })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 16, defaultWidth: 150, 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 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 16, defaultWidth: 100, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 16, defaultWidth: 100, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 16, defaultWidth: 150, 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 })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 25, defaultWidth: 70, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 16, defaultWidth: 150, 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 })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 16, defaultWidth: 100, 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 })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 16, defaultWidth: 16, 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 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 16, defaultWidth: 150, 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 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 16, defaultWidth: 100, 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 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 16, defaultWidth: 100, 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 && this.showTool('drawn') && (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' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '1.125rem', right: '1rem' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
-            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex }))), h("slot", { name: 'recipient-panel' })))), !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: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: 'ca15ea5f5993d15aed4914001e1101876cc48ff7', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo, mode: this.mode }), h("div", { key: '9fa2020d20f3c6458e3a35ecdfb39968478f3418', id: "ls-mid-area" }, h("div", { key: '3210f5fe54621a53029f12967beed5a05dd9542f', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '762ce80ecd562548ae072ce204a0914bb384d6d3', id: "ls-document-frame" }, h("canvas", { key: '269b6ad74b91a525c4bfd8801c12e1bb67a847b6', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '4925af7fdb05e8a2b6610ba26e817a0342d0f88c', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '208592b96a91e7c6de17c9797d5d64a38385801b', id: "ls-box-selector" }))), h("ls-statusbar", { key: '03b7a93c26576b9a9ef8e7446f1c39f7ef3ea6c0', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6bb3c0e2bdf005cb491ab71e7f0497a41a9ebc9f', 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",
-                "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,
-                "attribute": "template"
-            },
-            "token": {
-                "type": "string",
-                "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,
-                "attribute": "token"
-            },
-            "userpool": {
-                "type": "string",
-                "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,
-                "attribute": "userpool"
-            },
-            "endpoint": {
-                "type": "string",
-                "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,
-                "attribute": "endpoint"
-            },
-            "templateid": {
-                "type": "string",
-                "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,
-                "attribute": "templateid"
-            },
-            "recipients": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A JSON string containing the recipient details. Only used in COMPOSE mode.\n{string}"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "recipients"
-            },
-            "_recipients": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "zoom": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "zoom",
-                "defaultValue": "1.0"
-            },
-            "pageNum": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "page-num",
-                "defaultValue": "1"
-            },
-            "pageCount": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "page-count",
-                "defaultValue": "1"
-            },
-            "signer": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "signer",
-                "defaultValue": "0"
-            },
-            "groupInfo": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "group-info"
-            },
-            "mode": {
-                "type": "string",
-                "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,
-                "attribute": "mode",
-                "defaultValue": "'editor'"
-            },
-            "manager": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'",
-                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
-                    "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,
-                "attribute": "manager",
-                "defaultValue": "'toolbox'"
-            },
-            "displayTable": {
-                "type": "boolean",
-                "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,
-                "attribute": "display-table",
-                "defaultValue": "false"
-            },
-            "filtertoolbox": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n{string}"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "filtertoolbox",
-                "defaultValue": "null"
-            },
-            "showstatusbar": {
-                "type": "boolean",
-                "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,
-                "attribute": "showstatusbar",
-                "defaultValue": "false"
-            },
-            "showpagepreview": {
-                "type": "boolean",
-                "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,
-                "attribute": "showpagepreview",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "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,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "showtableview": {
-                "type": "boolean",
-                "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,
-                "attribute": "showtableview",
-                "defaultValue": "false"
-            },
-            "toolboxFilter": {
-                "type": "string",
-                "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,
-                "attribute": "toolbox-filter",
-                "defaultValue": "null"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "_template": {},
-            "validationErrors": {},
-            "status": {},
-            "fontSize": {},
-            "fontFamily": {},
-            "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": "{event:LSMutateEvent, template: LSApiTemplate}",
-                    "resolved": "{ event: LSMutateEvent; template: LSApiTemplate; }",
-                    "references": {
-                        "LSMutateEvent": {
-                            "location": "import",
-                            "path": "../../types/LSMutateEvent",
-                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
-                        },
-                        "LSApiTemplate": {
-                            "location": "import",
-                            "path": "../../types/LSApiTemplate",
-                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
-                        }
-                    }
-                }
-            }, {
-                "method": "validate",
-                "name": "validate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{valid: boolean}",
-                    "resolved": "{ valid: boolean; }",
-                    "references": {}
-                }
-            }, {
-                "method": "addParticipant",
-                "name": "addParticipant",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{type: LSApiRoleType, parent?: string | null}",
-                    "resolved": "{ type: LSApiRoleType; parent?: string; }",
-                    "references": {
-                        "LSApiRoleType": {
-                            "location": "import",
-                            "path": "../../types/LSApiRole",
-                            "id": "src/types/LSApiRole.ts::LSApiRoleType"
-                        }
-                    }
-                }
-            }];
-    }
-    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": "zoom",
-                "methodName": "zoomChanged"
-            }];
-    }
-    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": "addParticipant",
-                "method": "addParticpantHandler",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "changeSigner",
-                "method": "updateSigner",
-                "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