legalesign-document-viewer 0.3.9 → 0.4.1

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

@@ -72,10 +72,11 @@ export class LsDocumentViewer {
      */
     templateid;
     /**
-     * A JSON string containing the signer details. Only used in COMPOSE mode.
+     * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
      */
-    signers;
+    recipients;
+    _recipients;
     zoom = 1.0; // hardcoded to scale the document to full canvas size
     pageNum = 1;
     pageCount = 1;
@@ -101,30 +102,18 @@ export class LsDocumentViewer {
     mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
-            this.showtoolbar = false;
             this.showstatusbar = false;
             this.readonly = true;
         }
         else if (_newMode === 'editor') {
-            this.showtoolbar = true;
             this.showstatusbar = true;
             this.readonly = false;
         }
         else if (_newMode === 'compose') {
-            this.showtoolbar = 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' }
@@ -139,12 +128,7 @@ export class LsDocumentViewer {
      * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
      * {string}
      */
-    filterToolbox = null;
-    /**
-     * Whether the top toolbar is displayed.
-     * {boolean}
-     */
-    showtoolbar = false;
+    filtertoolbox = null;
     /**
      * Whether the bottom statusbar is displayed.
      * {boolean}
@@ -155,11 +139,6 @@ export class LsDocumentViewer {
      * {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.
@@ -219,7 +198,7 @@ export class LsDocumentViewer {
                     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),
+                    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,
@@ -230,6 +209,11 @@ export class LsDocumentViewer {
         this.update.emit(data);
         this.mutate.emit(data);
     }
+    // Updates are internal event between LS controls not to be confused with mutate
+    updateSigner(event) {
+        if (event.detail)
+            this.signer = event.detail;
+    }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
         const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
@@ -365,28 +349,30 @@ export class LsDocumentViewer {
      */
     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;
-                }
+        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 = {
+                    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) {
@@ -464,19 +450,21 @@ export class LsDocumentViewer {
             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));
+        if (this.mode !== 'preview' || this._template?.locked === true) {
+            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)
@@ -505,7 +493,10 @@ export class LsDocumentViewer {
             const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
             this.groupInfo = resultGroup.group;
             this.initViewer();
-            console.log(this._template);
+            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;
@@ -525,10 +516,10 @@ export class LsDocumentViewer {
         attachAllTooltips(this.component.shadowRoot);
     }
     showTool(fieldFormType) {
-        return this.filterToolbox === null || this.filterToolbox.split('|').includes(fieldFormType);
+        return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: 'd8ce0d70a58af99fdd2c409e4054b58b64e3cb03' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'ab5e54ba96698f1013ecb180d238514722a64576' }), h("div", { key: '13ca00d49a5e90ccd87fd3848596b00da38f4de5', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '95f916a6ab5408b5464d041665d070cb03dd2a38', validationErrors: this.validationErrors, showDropDown: this.mode === "editor" })), h("div", { key: '3c4ab91e87f408ed58431b1f61d65598d82b302b', class: "page-header" }, h("p", { key: '9c83746dc708c3ce530530f853f89f7d048dc61c', class: "header-text-1" }, "Template Creation"), h("p", { key: 'bb7db7928e0116665762c8c9f4fa5dfc8490b86f' }, "/"), h("p", { key: 'b6e6c67e9f7078d792ec1fd52b0bb92035e5c30e', class: "header-text-2" }, this._template?.title)), h("form", { key: '5b4a2e3331860f327b4d027a6c4598ad5acf7a06', id: "ls-editor-form" }, this.mode !== "preview" ? (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", { mode: this.mode, onManage: manager => {
+        return (h(Host, { key: '18a633cb175d9c7e76e56bf01e3c8424d32ab585' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '25a75f7af8e901df2fb9437d2919aa57457129cb' }), h("div", { key: '2fdeda62dd2c01754129b6d862aa3c3d5a2a1bdc', class: "page-header" }, h("div", { key: 'e44f3c112b65616bef7ac1cc4d6c5bf52c9b412a', class: 'left-slot-wrapper' }, h("slot", { key: 'eabed050a68f35292d52342623c6a4f2c2b92a9e', name: "left-button" })), h("div", { key: '1d4a9b8686e483864dbd47cc070425cf549bddca', class: 'right-slot-wrapper' }, h("slot", { key: '920bf1ffa9cdd895c1d4e66dd051ce41ad100a45', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'bda295d8ee65a355b25d8eb6679525a2d62e011c' }, h("span", { key: '997ef8d75cb7edafb33a6dcfbd1bbf2f9a0465f4', class: "header-text-1" }, "Template Creation"), h("span", { key: '855cd0855037a719dc9f0611cdb917bfa12db68b' }, "/"), h("span", { key: 'd540dcabca2c39bdb479ae9d5fbaf3a370c88be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '3c564705e5bdc91b1a3c1f490dac2ec2dd9ba20a' }, h("span", { key: 'a65c1bf128737b35c331b949eb184e20488c3e0f', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'bba6eb666e75486141c87addab7060a7f863007a' }, "/"), " ", h("span", { key: '5a754925c20d7114601f363560284acaa30387f4', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: 'f181cf2c95e1ccd0955aad5945b949706319d398', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'f0ee01d4e1aefc4caa16cfc40037c950b18c7ea7', validationErrors: this.validationErrors }))), h("form", { key: '168931f3d1225b9f2ffeecd507cd1b24c2e3978a', 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;
@@ -537,11 +528,17 @@ export class LsDocumentViewer {
                     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');
+                    console.log(validationManager);
+                    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" }, "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" }, this.signer > 0 && this.showTool('signature') && (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 })), this.signer === 0 && this.showTool('auto sign') && (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 })), this.showTool('text') && (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 && this.showTool('signing date') && (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 })), this.showTool('date') && (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 })), this.showTool('email') && (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 })), this.showTool('initials') && (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 })), this.showTool('number') && (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 })), this.showTool('dropdown') && (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 })), this.showTool('checkbox') && (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 && this.showTool('regex') && (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 && this.showTool('image') && (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 && this.showTool('file') && (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 && 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' })), !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 => {
+            } })), 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: 27, defaultWidth: 120, 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: 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 })), this.showTool('text') && (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 && this.showTool('signing date') && (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 })), this.showTool('date') && (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 })), this.showTool('email') && (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 })), this.showTool('initials') && (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 })), this.showTool('number') && (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 })), this.showTool('dropdown') && (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 })), this.showTool('checkbox') && (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 && this.showTool('regex') && (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 && this.showTool('image') && (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 && this.showTool('file') && (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 && 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' ? 'toolbox compose-toolbox' : 'hidden' }, h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), this._recipients &&
+            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors }))))), !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: 'a6d8ef8362453c0b506bf15ef6e81ed28390a035', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '2f087618c9a6459debbf38690f9ce2d936b6e7d3', id: "ls-mid-area" }, h("div", { key: 'a7883f796dcaa17d811ea02b3bf94dedd8460b98', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '44dd3294c9f2fbd37e7237f4fa6cf2177d5fa997', id: "ls-document-frame" }, h("canvas", { key: 'e0c972f5f70a103c6fa7e2a7ae478b75b717d67e', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'f22926e764e4f0c13dff4e95777bf27adf5ced77', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '45a5db8db4fb77eef714516d292a40c884e46910', id: "ls-box-selector" }))), h("ls-statusbar", { key: '7a1ad3aa1c76b5287b43b91798cb3f89289267bd', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: 'c4f1614420969b565b2962c385ff042df8e43e0d', id: "ls-tooltip-master" })));
+            }, "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)), this.selected.length > 0 && h("ls-toolbar", { key: '3e5ba341473bf08a29091ab12c3fee99bbdc2671', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'a929a78238ace37b999bc30a4410c9ec23a8cfbe', id: "ls-mid-area" }, h("div", { key: 'c6da6a55d0d837b301222cbcbbef093475345b51', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'f442db65d13cc0accc891528e0cbd63b78d0dfb1', id: "ls-document-frame" }, h("canvas", { key: '678382556830d4e99a651378e1898cbf2b537bd6', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '6309f63776709b22b169ba539c780795bee2132a', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '0e6b11139b50ab2ee5d9a1162e29f9a4122e1f92', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'e2f14c7674d5ba0ac660ab8e02c9c55195a3b6b6', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6fbd2449f461859b491a6754996ba149256a4857', id: "ls-tooltip-master" })));
     }
     static get is() { return "ls-document-viewer"; }
     static get encapsulation() { return "shadow"; }
@@ -652,9 +649,9 @@ export class LsDocumentViewer {
                 "setter": false,
                 "reflect": false
             },
-            "signers": {
+            "recipients": {
                 "type": "string",
-                "attribute": "signers",
+                "attribute": "recipients",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -665,12 +662,30 @@ export class LsDocumentViewer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A JSON string containing the signer details. Only used in COMPOSE mode.\n{string}"
+                    "text": "A JSON string containing the recipient details. Only used in COMPOSE mode.\n{string}"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
             },
+            "_recipients": {
+                "type": "unknown",
+                "attribute": "_recipients",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "zoom": {
                 "type": "number",
                 "attribute": "zoom",
@@ -795,8 +810,8 @@ export class LsDocumentViewer {
                 "attribute": "manager",
                 "mutable": true,
                 "complexType": {
-                    "original": "'document' | 'toolbox' | 'participant'",
-                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "original": "'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'",
+                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
                     "references": {}
                 },
                 "required": false,
@@ -830,9 +845,9 @@ export class LsDocumentViewer {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "filterToolbox": {
+            "filtertoolbox": {
                 "type": "string",
-                "attribute": "filter-toolbox",
+                "attribute": "filtertoolbox",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -850,26 +865,6 @@ export class LsDocumentViewer {
                 "reflect": false,
                 "defaultValue": "null"
             },
-            "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",
@@ -910,26 +905,6 @@ 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",
@@ -1187,9 +1162,6 @@ export class LsDocumentViewer {
         return [{
                 "propName": "mode",
                 "methodName": "modeHandler"
-            }, {
-                "propName": "displayTable",
-                "methodName": "tableViewHandler"
             }];
     }
     static get listeners() {
@@ -1217,6 +1189,12 @@ export class LsDocumentViewer {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "changeSigner",
+                "method": "updateSigner",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "selectFields",
                 "method": "selectFieldsHandler",