legalesign-document-viewer 0.1.1 → 0.1.3

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

@@ -4,8 +4,10 @@ import "pdfjs-dist/web/pdf_viewer";
 import { addField, moveField } from "./editorCalculator";
 import { defaultRolePalette } from "./defaultPalette";
 import { keyDown } from "./keyHandlers";
-import { mouseClick, mouseDown, mouseMove, mouseUp } from "./mouseHandlers";
-import { getApiType } from "./editorUtils";
+import { mouseClick, mouseDown, mouseDrop, mouseMove, mouseUp } from "./mouseHandlers";
+import { getApiType, matchData } from "./editorUtils";
+import { LsDocumentAdapter } from "./adapter/LsDocumentAdapter";
+import { getTemplate } from "./adapter/templateActions";
 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
@@ -19,6 +21,7 @@ export class LsDocumentViewer {
     pdfDocument;
     pageNumPending = null;
     canvas;
+    adapter = new LsDocumentAdapter();
     ctx;
     pageDimensions; // hardcoded to start at the page 1
     // @ts-ignore
@@ -42,14 +45,26 @@ export class LsDocumentViewer {
      * {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;
+    /**
+     * The id of the template you want to load (if using the internal data adapter).
+     * {string}
+     */
+    templateid;
     zoom = 1.0; // hardcoded to scale the document to full canvas size
     pageNum = 1; // hardcoded to start at the page 1
+    signer = 0; // hardcoded to start at the page 1
     _template;
     selected;
     /**
-   * An ease of use property that will arrange document-viewer appropraitely.
-   * {'preview' | 'editor' | 'custom'}
-   */
+     * An ease of use property that will arrange document-viewer appropraitely.
+     * {'preview' | 'editor' | 'custom'}
+     */
     mode = 'custom';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
@@ -77,14 +92,14 @@ export class LsDocumentViewer {
         this.queueRenderPage(this.pageNum);
     }
     /**
-    * Determines / sets which of the far left 'managers' is active.
-    * {'document' | 'toolbox' | 'participant' }
-    */
+     * 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}
-    */
+     * Shows the table view of fields rather than the preview.
+     * {boolean}
+     */
     displayTable = false;
     /**
      * Whether the left hand toolbox is displayed.
@@ -102,53 +117,42 @@ export class LsDocumentViewer {
      */
     showstatusbar = false;
     /**
-   * Whether the page previewvertical ribbon will be shown
-   * {boolean}
-   */
+     * 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}
-  */
+     * Whether the right panel (which can be default field properties or custom panel) is
+     * displayed.
+     * {boolean}
+     */
     showrightpanel = false;
     /**
-  * Whether the right panel (which can be default field properties or custom panel) is
-  * displayed.
-  * {boolean}
-  */
+     * 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}
-  */
+     * 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}
-   */
+     * If supplied ONLY items in this | ("or") delimited list will be shown. i.e. "signature|intials"
+     * {boolean}
+     */
     toolboxFilter = null;
     /**
-   * Allows you to change the colours used for each role in the template.
-   * {SignerColor[]}
-   */
+     * Allows you to change the colours used for each role in the template.
+     * {SignerColor[]}
+     */
     roleColors = defaultRolePalette;
-    parseTemplate(newValue) {
-        const newTemplate = newValue;
-        const pages = JSON.parse(JSON.parse(newTemplate.pageDimensions));
-        // Convert ax,bx,ay etc. into top, left
-        this.pageDimensions = pages.map(p => { return { height: p[1], width: p[0] }; });
-        const fields = newTemplate.elementConnection.templateElements.map(f => {
-            return {
-                ...f,
-                top: f.ay * pages[0].height,
-                left: f.ax * pages[0].width,
-                height: (f.by - f.ay) * pages[0].height,
-                width: (f.bx - f.ax) * pages[0].width
-            };
-        });
-        this._template = { ...newTemplate, elementConnection: { ...newTemplate.elementConnection, templateElements: fields } };
-    }
     //
     // --- Event Emitters --- //
     //
@@ -162,6 +166,15 @@ export class LsDocumentViewer {
     // Send an internal event to be processed
     update;
     // Updates are internal event between LS controls not to be confused with mutate
+    mutateHandler(event) {
+        console.log(event);
+        if (this.token)
+            event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => {
+                if (me.action === 'create')
+                    matchData.bind(this)(result);
+            }));
+    }
+    // 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));
@@ -175,6 +188,10 @@ export class LsDocumentViewer {
         if (propPanel)
             propPanel.dataItem = event.detail;
     }
+    // Send role selection changes to bars and panels
+    roleHandler(event) {
+        this.signer = event.detail;
+    }
     //
     // --- Methods --- //
     //
@@ -203,41 +220,70 @@ export class LsDocumentViewer {
         this.showPageFields(this.pageNum);
     }
     /**
-   * Page and field resize on zoom change
-   *
-   */
+     * Page and field resize on zoom change
+     *
+     */
     async setZoom(z) {
         this.zoom = z;
         this.canvas = this.component.shadowRoot.getElementById('pdf-canvas');
-        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * z + "px";
-        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * z + "px";
+        this.canvas.style.height = this.pageDimensions[this.pageNum - 1].height * z + 'px';
+        this.canvas.style.width = this.pageDimensions[this.pageNum - 1].width * z + '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);
     }
+    /**
+     * 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: f.ay * pages[0].height,
+                left: f.ax * pages[0].width,
+                height: (f.by - f.ay) * pages[0].height,
+                width: (f.bx - f.ax) * pages[0].width,
+                templateId: newTemplate.id,
+            };
+        });
+        const preparedRoles = newTemplate.roles.map((ro) => {
+            return { ...ro, templateId: newTemplate.id };
+        });
+        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) => {
+        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
+                canvasContext: this.ctx,
             };
             // Render page method
             const renderTask = page.render(renderContext);
             // Wait for rendering to finish
-            renderTask.promise
-                .then(() => {
+            renderTask.promise.then(() => {
                 this.isPageRendering = false;
                 this.pageRendered.emit(this.pageNum);
                 if (this.pageNumPending !== null) {
@@ -257,8 +303,7 @@ export class LsDocumentViewer {
         }
     }
     loadAndRender(src) {
-        getDocument(src).promise
-            .then((pdfDocument) => {
+        getDocument(src).promise.then((pdfDocument) => {
             this.pdfDocument = pdfDocument;
             this.renderPage(this.pageNum);
         });
@@ -271,11 +316,13 @@ export class LsDocumentViewer {
             left: Math.floor(newElement.ax * this.pageDimensions[newElement.page - 1].width),
             height: Math.floor((newElement.by - newElement.ay) * this.pageDimensions[newElement.page - 1].height),
             width: Math.floor((newElement.bx - newElement.ax) * this.pageDimensions[newElement.page - 1].width),
-            pageDimensions: this.pageDimensions[newElement.page - 1]
+            pageDimensions: this.pageDimensions[newElement.page - 1],
+            templateId: this._template.id,
         };
     }
     // internal forced change
     syncChange(update) {
+        console.log('sync');
         if (getApiType(update.data) === 'element') {
             if (update.action === 'create') {
                 const newData = { ...update.data, page: this.pageNum };
@@ -291,7 +338,7 @@ export class LsDocumentViewer {
                     const fu = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
                     fu.dataItem = update.data;
                     // Refresh the selected array
-                    this.selected = this.selected.map(s => s.dataItem.id === update.data.id ? fu : s);
+                    this.selected = this.selected.map(s => (s.dataItem.id === update.data.id ? fu : s));
                 }
                 // Reselect the fields - this updates the dataItem value passed to child controls
                 const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
@@ -307,55 +354,29 @@ export class LsDocumentViewer {
             }
         }
     }
-    componentDidLoad() {
+    initViewer() {
+        console.log('Init Viewer  ');
         // 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.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');
-        this.loadAndRender(this._template.link);
+        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));
-        document.addEventListener("keydown", keyDown.bind(this));
-        dropTarget.addEventListener("dragenter", (event) => { event.preventDefault(); });
-        dropTarget.addEventListener("dragover", (event) => { event.preventDefault(); });
-        dropTarget.addEventListener("drop", (event) => {
+        dropTarget.addEventListener('click', mouseClick.bind(this));
+        dropTarget.addEventListener('mousedown', mouseDown.bind(this));
+        dropTarget.addEventListener('mousemove', mouseMove.bind(this));
+        dropTarget.addEventListener('mouseup', mouseUp.bind(this));
+        document.addEventListener('keydown', keyDown.bind(this));
+        dropTarget.addEventListener('dragenter', event => {
             event.preventDefault();
-            try {
-                const data = JSON.parse(event.dataTransfer.getData("application/json"));
-                this.component.shadowRoot.querySelectorAll('ls-editor-field').forEach(f => f.selected = false);
-                var frame = this.component.shadowRoot.getElementById('ls-document-frame');
-                // Make a new API compatible id for a template element (prefix 'ele')
-                const id = btoa('ele' + crypto.randomUUID());
-                // TODO: Put these defaults somewhere sensible
-                const newData = {
-                    action: 'create', data: {
-                        ...data,
-                        id,
-                        value: "",
-                        top: event.offsetY * this.zoom + frame.scrollTop,
-                        left: event.offsetX * this.zoom + frame.scrollLeft,
-                        height: data.defaultHeight,
-                        width: data.defaultWidth,
-                        pageDimensions: this.pageDimensions[this.pageNum - 1],
-                        fontName: "courier",
-                        fontSize: 10,
-                        align: 'left',
-                        signer: 1,
-                        elementType: data.type
-                    }
-                };
-                this.mutate.emit([newData]);
-                this.update.emit([newData]);
-            }
-            catch (e) {
-                console.error(e);
-            }
         });
+        dropTarget.addEventListener('dragover', event => {
+            event.preventDefault();
+        });
+        dropTarget.addEventListener('drop', mouseDrop.bind(this));
         // Generate all the field HTML elements that are required (for every page)
         this._template.elementConnection.templateElements.forEach(te => {
             addField.bind(this)(this.component.shadowRoot.getElementById('ls-document-frame'), this.prepareElement(te));
@@ -367,12 +388,26 @@ export class LsDocumentViewer {
             fx.className = fx.dataItem.page === page ? '' : 'hidden';
         });
     }
+    async load() {
+        try {
+            const result = (await this.adapter.execute(this.token, getTemplate(this.templateid)));
+            this.parseTemplate(JSON.stringify(result.template));
+            console.log(this._template, '_template');
+            this.initViewer();
+        }
+        catch (e) {
+            console.error('Your access token is invalid.', e);
+        }
+    }
     componentWillLoad() {
-        if (this.template)
-            this.parseTemplate(this.template);
+        if (this.token && !this._template)
+            this.load();
     }
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (h(Host, { key: '948f57ca53b6d61bbe1c0d74181f0fdcd4bbb8a8' }, h("form", { key: 'abbe64687f6b258259957bad5e403f9fc4aa0a35', id: "ls-editor-form" }, this.showtoolbox === true ? h("div", { class: "leftBox" }, h("ls-feature-column", { onManage: (manager) => {
+        return (h(Host, { key: '5211ee24231dedce593a1b638daa121267cfbf75' }, h(h.Fragment, null, h("div", { key: '5f0b68c90b8935e4d9a0a37f70b1e36d669d2c02', class: "page-header" }, h("p", { key: 'dcd2efb1551dc8e7082e2fa25a11055125527b83', class: "header-text-1" }, "Template Creation"), h("p", { key: '59c33765a7ec5ff160fe5a058acdc18e017a162c' }, "/"), h("p", { key: '108722e31b9560fea2b42f197f98203e03c07b26', class: "header-text-2" }, "Template Name")), h("form", { key: '2681b25088e5f78e5169e4eccc32d8e7b9651887', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { 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;
@@ -382,9 +417,10 @@ export class LsDocumentViewer {
                     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" }, "Drag to Add..."), h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0 }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0 }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1 }), h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50 }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2 }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25 }), h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000 }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000 }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93 }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90 }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30 }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74 })), 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(h.Fragment, null), h("div", { key: '7fa5fa60db937a5ccfc9c227ab4e1d2281987356', id: "ls-mid-area" }, h("ls-toolbar", { key: 'c763fcc1b993987c6b6b0d64bbb527afec99ad39', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: 'ea8ea9644cba0cc314bf521144ae72c17449fa27', id: "ls-document-frame" }, h("canvas", { key: 'e4032fe6f0a649aba57f06074d12dc3c1a3e0d75', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'b1a23af0c04073903f0fee7d5e8a67ac4a9d35fa', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '4d28a525fa5661972be3d7829e78e00beb25ffed', id: "ls-box-selector" })), h("ls-statusbar", { key: '4f128fe48be56c8ae8845d22cbd05c729e8a8188', editor: this })), this.showrightpanel && !this.displayTable && h("div", { key: 'eb0ded84dedb0af0221d27bfc77df3a2d0f37b7f', class: this.selected && this.selected.length > 0 ? 'rightBox' : 'hidden' }, h("ls-field-properties", { key: '4a141735d0878431db5a20479af8303b2ff6774f', id: "my-field-panel" }), h("slot", { key: '56272ae8e0a3c2b806f8252e48464c62abdc0f45' })))));
+            } }), 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", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), h("div", { class: 'expand-fields-row' }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true, onClick: () => (this.expandfields = !this.expandfields) }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "signature", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(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.showrightpanel && !this.displayTable && (h("div", { class: this.selected && 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();
+            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '31cd692fde3f164d578b7ddc362cb1e663a51b4d', id: "ls-mid-area" }, h("ls-toolbar", { key: 'f696e4f47618440e27d8233aa2d5ac931374afb5', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: '18e06d7f77ad6d31e8fbc98ff2a01c1d3ec47361', class: 'document-frame-wrapper' }, h("div", { key: '67565650c5f50326f944ef09787ee6a72c10d203', class: 'spacer' }), h("div", { key: '7cf6ab23d1553d8dc9910546f8085f7558cbefcd', id: "ls-document-frame" }, h("canvas", { key: 'f8d2d988a2b668224e63982029c55a102b5b7729', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'c33d5c80ef5ae794d85be860524b809d84ea108b', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'd0cef83695bc3e2afceadcea12fb5563788489a9', id: "ls-box-selector" }))), h("ls-statusbar", { key: '5b814c90c929b917b9f8f0bfe1c6476294b4dfb1', editor: this }))))));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -419,6 +455,44 @@ export class LsDocumentViewer {
                 "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
+            },
+            "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
+            },
             "zoom": {
                 "type": "number",
                 "attribute": "zoom",
@@ -459,6 +533,26 @@ export class LsDocumentViewer {
                 "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"
+            },
             "mode": {
                 "type": "string",
                 "attribute": "mode",
@@ -619,6 +713,26 @@ export class LsDocumentViewer {
                 "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",
@@ -684,15 +798,9 @@ export class LsDocumentViewer {
                 "attribute": "role-colors",
                 "mutable": false,
                 "complexType": {
-                    "original": "RoleColor[]",
-                    "resolved": "RoleColor[]",
-                    "references": {
-                        "RoleColor": {
-                            "location": "import",
-                            "path": "../../types/RoleColor",
-                            "id": "src/types/RoleColor.ts::RoleColor"
-                        }
-                    }
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -883,6 +991,12 @@ export class LsDocumentViewer {
     }
     static get listeners() {
         return [{
+                "name": "mutate",
+                "method": "mutateHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "update",
                 "method": "updateHandler",
                 "target": undefined,
@@ -894,6 +1008,12 @@ export class LsDocumentViewer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "roleChange",
+                "method": "roleHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }