legalesign-document-viewer 0.3.0 → 0.3.1

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

@@ -1,48 +1,43 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BWLt02JN.js';
 import { a as alter, o as oob, u as updateRole, c as createRole, s as swapRoles, d as deleteRole, m as matchData, g as getApiType } from './p-C1qHGnSs.js';
-import { d as defineCustomElement$I } from './p-CXfTLG4X.js';
-import { d as defineCustomElement$H } from './p-BLqzepwP.js';
-import { d as defineCustomElement$G } from './p-BcERGojX.js';
-import { d as defineCustomElement$F } from './p-C2AvJYU2.js';
-import { d as defineCustomElement$E } from './p-DVYZ-l9i.js';
-import { d as defineCustomElement$D } from './p-C19Sk5Pv.js';
-import { d as defineCustomElement$C } from './p-pj0dnyXK.js';
-import { d as defineCustomElement$B } from './p-EXjgBKTQ.js';
-import { d as defineCustomElement$A } from './p-DvrE7Co1.js';
-import { d as defineCustomElement$z } from './p-B_RSAYa_.js';
-import { d as defineCustomElement$y } from './p-CTcGU-0M.js';
-import { d as defineCustomElement$x } from './p-5bipMnyu.js';
-import { d as defineCustomElement$w } from './p-BdHdKShC.js';
-import { d as defineCustomElement$v } from './p-CkFBf2X6.js';
-import { d as defineCustomElement$u } from './p-DPTEeSlE.js';
-import { d as defineCustomElement$t } from './p-CFM4LGyt.js';
-import { d as defineCustomElement$s } from './p-BOES-kpO.js';
-import { d as defineCustomElement$r } from './p-gc1S5qea.js';
-import { d as defineCustomElement$q } from './p-DjBw61k9.js';
-import { d as defineCustomElement$p } from './p-DNYMtQaJ.js';
-import { d as defineCustomElement$o } from './p-BZmc1jRS.js';
-import { d as defineCustomElement$n } from './p-D7fmSEF_.js';
-import { d as defineCustomElement$m } from './p-8U1vQjh6.js';
-import { d as defineCustomElement$l } from './p-BYfxQYIe.js';
-import { d as defineCustomElement$k } from './p-TSI6GwEl.js';
-import { d as defineCustomElement$j } from './p-BClQCPwn.js';
-import { d as defineCustomElement$i } from './p-Dz71sI_1.js';
-import { d as defineCustomElement$h } from './p-CXf5rRrm.js';
-import { d as defineCustomElement$g } from './p-C4yNfeqL.js';
-import { d as defineCustomElement$f } from './p-5D8PsBm3.js';
-import { d as defineCustomElement$e } from './p-BO65LHPL.js';
-import { d as defineCustomElement$d } from './p-Cp5JvKGz.js';
-import { d as defineCustomElement$c } from './p-CIMsSQwZ.js';
-import { d as defineCustomElement$b } from './p-CYXQyrVE.js';
-import { d as defineCustomElement$a } from './p-B3nXZzYN.js';
-import { d as defineCustomElement$9 } from './p-FYWJbZt4.js';
-import { d as defineCustomElement$8 } from './p-EJeMGdQu.js';
-import { d as defineCustomElement$7 } from './p-CKpdUPQa.js';
-import { d as defineCustomElement$6 } from './p-5dvIIDY3.js';
-import { d as defineCustomElement$5 } from './p-DJwEQOhf.js';
-import { d as defineCustomElement$4 } from './p-CATruwEZ.js';
-import { d as defineCustomElement$3 } from './p-CkgCA2si.js';
-import { d as defineCustomElement$2 } from './p-CDXBrRc3.js';
+import { d as defineCustomElement$D } from './p-C7-4wg83.js';
+import { d as defineCustomElement$C } from './p-BzLsSc2B.js';
+import { d as defineCustomElement$B } from './p-C8kySYH4.js';
+import { d as defineCustomElement$A } from './p-7V9_3fXA.js';
+import { d as defineCustomElement$z } from './p-Bsc25fvn.js';
+import { d as defineCustomElement$y } from './p-DjmiTRrw.js';
+import { d as defineCustomElement$x } from './p-Dp-vgKJq.js';
+import { d as defineCustomElement$w } from './p-BvlAOvLS.js';
+import { d as defineCustomElement$v } from './p-Cfl2rRxL.js';
+import { d as defineCustomElement$u } from './p-CcUFZYwZ.js';
+import { d as defineCustomElement$t } from './p-CpiX4Tih.js';
+import { d as defineCustomElement$s } from './p-Pr-VCZIW.js';
+import { d as defineCustomElement$r } from './p-BoIq4Xwe.js';
+import { d as defineCustomElement$q } from './p-D4_aO15f.js';
+import { d as defineCustomElement$p } from './p-DWqgZCMh.js';
+import { d as defineCustomElement$o } from './p-BN0a1PPS.js';
+import { d as defineCustomElement$n } from './p-BaS7GLxH.js';
+import { d as defineCustomElement$m } from './p-Vgt7NA4z.js';
+import { d as defineCustomElement$l } from './p-BvLWarzz.js';
+import { d as defineCustomElement$k } from './p-B6u7yh6L.js';
+import { d as defineCustomElement$j } from './p-D7Tz-MyS.js';
+import { d as defineCustomElement$i } from './p-C_OorhIf.js';
+import { d as defineCustomElement$h } from './p-gToQ2iM9.js';
+import { d as defineCustomElement$g } from './p-BynEbSXW.js';
+import { d as defineCustomElement$f } from './p-D990IL5t.js';
+import { d as defineCustomElement$e } from './p-Crkl9bKZ.js';
+import { d as defineCustomElement$d } from './p-BPayWH9u.js';
+import { d as defineCustomElement$c } from './p-BpXqwLh3.js';
+import { d as defineCustomElement$b } from './p-ChCIuJg0.js';
+import { d as defineCustomElement$a } from './p-CozH0k34.js';
+import { d as defineCustomElement$9 } from './p-C4Go47Ak.js';
+import { d as defineCustomElement$8 } from './p-D0PX7hpQ.js';
+import { d as defineCustomElement$7 } from './p-BaMR8ksy.js';
+import { d as defineCustomElement$6 } from './p-52yHrt6C.js';
+import { d as defineCustomElement$5 } from './p-HaIHVR-P.js';
+import { d as defineCustomElement$4 } from './p-ClYIDEKN.js';
+import { d as defineCustomElement$3 } from './p-D5cswwR_.js';
+import { d as defineCustomElement$2 } from './p-YrxZXlJ1.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19917,12 +19912,6 @@ const recalculateCoordinates = (d) => {
     const ay = d.top / d.pageDimensions.height;
     const bx = (d.left + d.width) / d.pageDimensions.width;
     const by = (d.top + d.height) / d.pageDimensions.height;
-    console.log({
-        ax,
-        ay,
-        bx,
-        by,
-    }, 'recalc');
     // Return with calculated styles that try to place it as it would appear on legacy signing page
     return {
         ...d,
@@ -19981,7 +19970,7 @@ function keyDown(ev) {
                 return oob(alterElement) ? original : alterElement;
             });
         }
-        else if (ev.key === 'Delete') {
+        else if (ev.key === 'Delete' || ev.key === 'Backspace') {
             const arr = Array.from(this.selected);
             this.mutate.emit(arr.map(s => {
                 return { action: 'delete', data: s.dataItem };
@@ -20040,13 +20029,44 @@ function mouseDown(e) {
             this.hitField = f;
         }
     });
-    console.log('hit field', this.hitField);
-    if (this.hitField) {
+    if (this.hitField && e.shiftKey === false) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [this.hitField];
+            this.selectFields.emit([this.hitField.dataItem]);
+        }
+        const { height, width } = this.hitField.getBoundingClientRect();
+        const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
+        this.startMouse = fdims;
+        this.startLocations = this.selected.map(f => {
+            const { height, width } = f.getBoundingClientRect();
+            const beHtml = f;
+            return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
+        });
+        this.selectionBox = null;
+    }
+    else if (this.hitField && e.shiftKey === true) {
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
+        // mouse down on a field, select it and note the start location
+        if (this.hitField.selected === false) {
+            // unselect all other fields
+            fields.forEach(fu => {
+                fu.selected = false;
+            });
+            this.selected = [...this.selected, this.hitField];
+            this.selectFields.emit([...this.selected.map(si => si.dataItem), this.hitField.dataItem]);
+        }
         const { height, width } = this.hitField.getBoundingClientRect();
         const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
         this.startMouse = fdims;
-        const target = this.selected ? this.selected : [this.hitField];
-        this.startLocations = target.map(f => {
+        this.startLocations = this.selected.map(f => {
             const { height, width } = f.getBoundingClientRect();
             const beHtml = f;
             return { top: beHtml.offsetTop, left: beHtml.offsetLeft, height, width };
@@ -20054,11 +20074,12 @@ function mouseDown(e) {
         this.selectionBox = null;
     }
     else {
-        // console.log('start mouse down reset');
+        // move down on empty space, start a selection box
         this.startLocations = null;
         this.startMouse = null;
         this.selectionBox = { x: e.clientX, y: e.clientY };
         // console.log('empty space reset selected', this.selectionBox);
+        this.unselect();
         this.selectFields.emit([]);
         this.selected = [];
         this.component.style.cursor = 'crosshair';
@@ -20093,7 +20114,7 @@ function mouseMove(event) {
         debounce.bind(this)({ action: 'update', data: recalculateCoordinates(this.hitField.dataItem) }, 700);
     }
     else if (this.selectionBox && event.buttons === 1) {
-        console.log('drawing box');
+        this.isBoxing = true;
         // draw the multiple selection box
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var frame = this.component.shadowRoot.getElementById('ls-document-frame');
@@ -20107,6 +20128,7 @@ function mouseMove(event) {
         box.style.top = (this.selectionBox.y > event.clientY ? event.clientY : this.selectionBox.y) - topOffset + frame.scrollTop + 'px';
         box.style.width = Math.abs(movedX) + 'px';
         box.style.height = Math.abs(movedY) + 'px';
+        // Move one or more selected items
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
@@ -20129,7 +20151,8 @@ function mouseUp(event) {
     this.component.style.cursor = 'auto';
     // console.log('mouse up');
     // find what was inside the selection box emit the select event and change their style
-    if (this.selectionBox) {
+    if (this.selectionBox && this.isBoxing) {
+        this.isBoxing = false;
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
         var fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
         box.style.visibility = 'hidden';
@@ -24284,7 +24307,7 @@ class LsDocumentAdapter {
                         query = createElement(obj);
                         break;
                     case 'update':
-                        query = updateElement(obj);
+                        query = updateElement(recalculateCoordinates(obj));
                         break;
                     case 'delete':
                         query = deleteElement(obj);
@@ -24495,6 +24518,8 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     // @ts-ignore
     isMoving = false;
     // @ts-ignore
+    isBoxing = false;
+    // @ts-ignore
     selectionBox = null;
     // @ts-ignore
     hitField;
@@ -24544,6 +24569,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     status;
     groupInfo;
     selected = [];
+    isLoading = true;
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
@@ -24684,8 +24710,9 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) },
         };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
-        if (toolbar)
+        if (toolbar) {
             toolbar.dataItem = event.detail;
+        }
         var propPanel = this.component.shadowRoot.getElementById('my-field-panel');
         if (propPanel) {
             propPanel.dataItem = event.detail;
@@ -24695,7 +24722,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             const fu = this.component.shadowRoot.getElementById('ls-field-' + fc.id);
             fu.selected = true;
         });
-        this.selected = fields.filter(fx => fx.selected);
+        // 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);
     }
@@ -24730,6 +24757,14 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         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
      *
@@ -24755,7 +24790,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      * {number} position
      */
     clip(legacyPosition, failback = 0.0) {
-        return (legacyPosition > 1 ? failback : legacyPosition);
+        return legacyPosition > 1 ? failback : legacyPosition;
     }
     /**
      * Decorate the template data object with useful transformations.
@@ -24848,13 +24883,16 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     }
     // 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);
-                this.selected = [newField];
-                this.selectFields.emit([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);
@@ -24914,6 +24952,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         });
     }
     async load() {
+        this.isLoading = true;
         // Get all template and group listing data.
         try {
             this.adapter = new LsDocumentAdapter(this.endpoint);
@@ -24926,6 +24965,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             this.validationErrors = validate.bind(this)(this._template);
             this.selected = [];
             this.setZoom(1.0);
+            this.isLoading = false;
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -24935,12 +24975,15 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         if (this.token && !this._template)
             this.load();
     }
-    componentDidLoad() {
-        const box = this.component.shadowRoot.querySelector('.document-frame-wrapper');
-        box.scrollLeft = -380;
+    handleSelectedField(event) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
+        fields.forEach(element => {
+            const isSelected = element.formElementType === event.detail;
+            element.isSelected = isSelected;
+        });
     }
     render() {
-        return (h(Host, { key: '408a483345bfc50d897ea5f814196cde773dc81b' }, h(h.Fragment, null, h("div", { key: '1b178aecaad7714a41b9324a1a6b14768265ea99', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'd6c6dd18b133b691b80da2755dcd151826fce4e4', validationErrors: this.validationErrors })), h("div", { key: '5c91872e3076e524dc5fe034e82f48df5f283a92', class: "page-header" }, h("p", { key: '6d3246932f4f0f11a62cdd5bc5f9984e1625bdbc', class: "header-text-1" }, "Template Creation"), h("p", { key: 'c5b4f16c27bf7cbe0dcdcd9b8202bc682ea300d0' }, "/"), h("p", { key: '5341750c8f49593b05d7c60a83eb5450c0bb16aa', class: "header-text-2" }, this._template?.title)), h("form", { key: 'a064dfdbb7c856647265213149361b4c253b6166', 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 => {
+        return (h(Host, { key: 'ba98f503028b8060b6d7de59ebec65543bf5d34f' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'da33facea5a874f2c372e6929c792223cd1d774f' }), h("div", { key: 'ed01cec72df4e2343b2fba0fd0e11078c09db240', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'dec9e222a7235a55b0b7d6742ed942bf3af15e31', validationErrors: this.validationErrors })), h("div", { key: '7d6b631c38281c856824897813d1b627d5af17bc', class: "page-header" }, h("p", { key: '1137422244e4fa7f62e6ddf3447a6948198f4f77', class: "header-text-1" }, "Template Creation"), h("p", { key: '9202737314df5c2238f74bd897a23c892facd100' }, "/"), h("p", { key: '8572833ade9d180ad8f39ca7e4bfb3352f3cecc0', class: "header-text-2" }, this._template?.title)), h("form", { key: '84a6e0219e003051bbf200527ed275d05a9b1a40', 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;
@@ -24950,10 +24993,36 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     participantManager.template = this._template;
                 }
                 this.manager = manager.detail;
-            } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer })) : (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer }), h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), 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", signer: this.signer }), h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", 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" }, "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 ? (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } })) : (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } })), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("div", { class: 'expand-fields-row', onClick: () => (this.expandfields = !this.expandfields) }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true }), 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", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "hashtag", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", signer: this.signer, onSelected: event => {
+                this.handleSelectedField.bind(this)(event);
+            } }))))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, 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: '32dfd4516a22e63b86504c8f5ae67b506081114c', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'f67d0998fd3c66fa96829d37cfbc3f47ce8bff68', id: "ls-mid-area" }, h("div", { key: 'b58b889de53bd50c721c4c07022b0c9ce5a5ad2e', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '0fad41bb168bba9fe80c8a0b54b239f270b13b0c', id: "ls-document-frame" }, h("canvas", { key: 'c5ee491b1788b3245b3d5689590a0537a508a660', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'ecbde00fc2c892249fa89998216de43dd1670cd3', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'bd987f10feae01ef7ec0ce35e990bf5b1a4199f3', id: "ls-box-selector" }))), h("ls-statusbar", { key: '69a5f957ae656a2812b5401e270c20e25c974808', editor: this }))))));
+            } }, 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: '300a112fbe7e1b6acfd6ce0ec54cb3a752f55815', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '92700d27b2be0e8c74952dd1dd4225cd6449f550', id: "ls-mid-area" }, h("div", { key: 'a52bf847bd9eb219a0b470ce4e36fc97e315c6c8', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '9edf12e09ccea929e531ee52a4354c389d055629', id: "ls-document-frame" }, h("canvas", { key: '167c02485f5484e32576749c9ffd90ea478ecfcb', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'ed899a22082224f5f7cc294b68e4c6b56d60d0d3', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'ccf62d6787987a90426cc79139e517c7ac27502c', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'afe98039104214aaecf7b5b77497becbe04b830c', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -24985,8 +25054,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "validationErrors": [32],
         "status": [32],
         "selected": [32],
+        "isLoading": [32],
         "pageNext": [64],
         "pagePrev": [64],
+        "unselect": [64],
         "setZoom": [64]
     }, [[0, "mutate", "mutateHandler"], [0, "update", "updateHandler"], [0, "addParticipant", "addParticpantHandler"], [0, "selectFields", "selectFieldsHandler"], [0, "roleChange", "roleHandler"]], {
         "mode": ["modeHandler"],
@@ -24996,7 +25067,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-formfield", "ls-icon", "ls-input-wrapper", "ls-number-input", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-radio-input", "ls-select-input", "ls-statusbar", "ls-text-input", "ls-textarea-input", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-validation-tag"];
+    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-page-loader", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-validation-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-document-viewer":
             if (!customElements.get(tagName)) {
@@ -25004,196 +25075,171 @@ function defineCustomElement$1() {
             }
             break;
         case "ls-document-options":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$I();
-            }
-            break;
-        case "ls-editor-field":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$H();
-            }
-            break;
-        case "ls-editor-table":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$G();
-            }
-            break;
-        case "ls-feature-column":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$F();
-            }
-            break;
-        case "ls-field-alignment":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$E();
-            }
-            break;
-        case "ls-field-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$D();
             }
             break;
-        case "ls-field-dimensions":
+        case "ls-editor-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$C();
             }
             break;
-        case "ls-field-distribute":
+        case "ls-editor-table":
             if (!customElements.get(tagName)) {
                 defineCustomElement$B();
             }
             break;
-        case "ls-field-footer":
+        case "ls-feature-column":
             if (!customElements.get(tagName)) {
                 defineCustomElement$A();
             }
             break;
-        case "ls-field-format":
+        case "ls-field-alignment":
             if (!customElements.get(tagName)) {
                 defineCustomElement$z();
             }
             break;
-        case "ls-field-placement":
+        case "ls-field-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$y();
             }
             break;
-        case "ls-field-properties":
+        case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
                 defineCustomElement$x();
             }
             break;
-        case "ls-field-properties-advanced":
+        case "ls-field-distribute":
             if (!customElements.get(tagName)) {
                 defineCustomElement$w();
             }
             break;
-        case "ls-field-properties-autosign":
+        case "ls-field-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$v();
             }
             break;
-        case "ls-field-properties-container":
+        case "ls-field-format":
             if (!customElements.get(tagName)) {
                 defineCustomElement$u();
             }
             break;
-        case "ls-field-properties-date":
+        case "ls-field-placement":
             if (!customElements.get(tagName)) {
                 defineCustomElement$t();
             }
             break;
-        case "ls-field-properties-email":
+        case "ls-field-properties":
             if (!customElements.get(tagName)) {
                 defineCustomElement$s();
             }
             break;
-        case "ls-field-properties-file":
+        case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
                 defineCustomElement$r();
             }
             break;
-        case "ls-field-properties-general":
+        case "ls-field-properties-autosign":
             if (!customElements.get(tagName)) {
                 defineCustomElement$q();
             }
             break;
-        case "ls-field-properties-image":
+        case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$p();
             }
             break;
-        case "ls-field-properties-multiple":
+        case "ls-field-properties-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$o();
             }
             break;
-        case "ls-field-properties-number":
+        case "ls-field-properties-email":
             if (!customElements.get(tagName)) {
                 defineCustomElement$n();
             }
             break;
-        case "ls-field-properties-signature":
+        case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "ls-field-properties-text":
+        case "ls-field-properties-general":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "ls-field-size":
+        case "ls-field-properties-image":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "ls-field-type-display":
+        case "ls-field-properties-multiple":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "ls-formfield":
+        case "ls-field-properties-number":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "ls-icon":
+        case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "ls-input-wrapper":
+        case "ls-field-properties-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "ls-number-input":
+        case "ls-field-size":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "ls-participant-card":
+        case "ls-field-type-display":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "ls-participant-manager":
+        case "ls-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "ls-participant-select":
+        case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "ls-props-section":
+        case "ls-page-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "ls-radio-input":
+        case "ls-participant-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "ls-select-input":
+        case "ls-participant-manager":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ls-statusbar":
+        case "ls-participant-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ls-text-input":
+        case "ls-props-section":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ls-textarea-input":
+        case "ls-statusbar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }