npm - legalesign-document-viewer - Versions diffs - 0.2.18 → 0.3.0 - Mend

legalesign-document-viewer 0.2.18 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/dist/esm/ls-document-options_44.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BwkWPcyG.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CjW5NqdW.js';
 const lsDocumentOptionsCss = ":host{display:block}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.template-details{display:flex;flex-direction:column;gap:0.75rem}.template-detail-section{display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #fff)}.template-detail-section-title{color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.column{display:flex;flex-direction:column;align-items:flex-start}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
@@ -19,13 +19,12 @@ const LsDocumentOptions = class {
     }
     mutate;
     update;
-    alter(template) {
-        console.log(template);
-        this.update.emit([{ action: 'update', data: { ...this.template, ...template } }]);
-        this.mutate.emit([{ action: 'update', data: { ...this.template, ...template } }]);
+    alter(changedDetails) {
+        this.update.emit([{ action: 'update', data: { ...this.template, ...changedDetails } }]);
+        this.mutate.emit([{ action: 'update', data: { ...this.template, ...changedDetails } }]);
     }
     render() {
-        return (h(Host, { key: 'c845ad871ce0a40f4219ace3b33836285abd1440' }, h("div", { key: '8424ddbbb74a9b50855987d4bf694e3157f6929a', class: "ls-editor-infobox" }, h("h2", { key: '123706291690a62db87da60ea21f4bf34a90911c', class: "toolbox-section-title" }, "Template Details"), h("p", { key: '1d537af0ca3750cac39c7f2d30f2e97b9e102e47', class: "toolbox-section-description" }, "Details and insights about the Template.")), h("div", { key: '5eb42e72a76eabef8814cd7a265b2c16e8facfec', class: 'template-details' }, h("div", { key: '0be3ec62a897ee08c1d1073bbe8112b2d0c37a13', class: 'template-detail-section column' }, h("p", { key: '3fe6227807521f18abce08a39894b3e9e17f582b', class: "template-detail-section-title" }, "Name"), h("ls-formfield", { key: 'd667dc6f93e28371e7645ec96ee886a69fa00ba9', as: "text", value: this.template?.title, style: { width: '100%' }, onValueChange: (e) => { this.alter({ title: e.detail }); } })), h("div", { key: '287018de56816012bce2d07ae081f9cfa557933d', class: 'template-detail-section' }, h("p", { key: 'aa657dd08a646224f2b9372448d95cfe05d577a1', class: "template-detail-section-title" }, "Auto Archive"), h("ls-toggle", { key: '0551164fb58ca32c8df18d63984e2ac597c202ac', checked: this.template?.autoArchive, onValueChange: (e) => { this.alter({ autoArchive: e.detail }); } })), h("div", { key: '280c19f9d85b7da9e63248741473eb922f59dac4', class: 'template-detail-section' }, h("p", { key: '9543683a80b4c80df067fa2328119e23dcce594b', class: "template-detail-section-title" }, "Lock"), h("ls-toggle", { key: '8e1e2543b3a38cb30b4e546dc08ab427168e125f', checked: this.template?.locked, onValueChange: (e) => { this.alter({ locked: e.detail }); } })), h("div", { key: '4ef003842549891b54ab7cf4aa5dad44184d558a', class: 'template-detail-section column' }, h("p", { key: '86728f0d8362c2c6ab736c484d5d960b4584a237', class: "template-detail-section-title" }, "Pages"), h("ls-label", { key: '459a79cc8ff8357d952a07440781f83dfff24bac', text: this.template?.pageCount })), h("div", { key: 'c6d46e761f44a44c640d97da659be68fe2021aba', class: 'template-detail-section column' }, h("p", { key: '03a856db2bf5ecdd13a6932b207e59ec80280509', class: "template-detail-section-title" }, "Date Created"), " ", this.template?.created), h("div", { key: '9a375ef44c534eb77c63d5a9f570a2fdab03b5d9', class: 'template-detail-section column' }, h("p", { key: 'c7f09886ca6b1618cf8b6420ed77af2c50475398', class: "template-detail-section-title" }, "Created By"), " ", this.template?.createdBy)), h("slot", { key: '25440f0e78bbdd9e18ec342495371c02661525ed' })));
+        return (h(Host, { key: 'cf73422a524bb4ce9aba485e0107e0c5bdfc111c' }, h("div", { key: '9643e57e98221fc18028b369d311702308006af3', class: "ls-editor-infobox" }, h("h2", { key: '21761608b0f30ea8029d7c34359eb953e09a877c', class: "toolbox-section-title" }, "Template Details"), h("p", { key: '6478a3f2fe582956a07dd94fd678495295b89b16', class: "toolbox-section-description" }, "Details and insights about the Template.")), h("div", { key: 'f178b1b998582d54182b21d371e2f470a51be88a', class: 'template-details' }, h("div", { key: '302fc0d678593e10f3fa35b92fcaa8aa0141ff95', class: 'template-detail-section column' }, h("p", { key: 'ce93dd65dfbd7771e9b99263f6b52b11a1709438', class: "template-detail-section-title" }, "Name"), h("ls-formfield", { key: '2ed97f87424591fa979dbdc6fa44b5c8936aec07', as: "text", value: this.template?.title, style: { width: '100%' }, onValueChange: (e) => { this.alter({ title: e.detail }); } })), h("div", { key: '188f6151fb84d0a38960f39de6573bb100fe22bd', class: 'template-detail-section' }, h("p", { key: '58bfb11ef3eeecd8eb5b3c1dca9ade4f57a6054b', class: "template-detail-section-title" }, "Auto Archive"), h("ls-toggle", { key: 'ea5e98a7e2cf43f44b5f713037bd80d17fcd63d4', checked: this.template?.autoArchive, onValueChange: (e) => { this.alter({ autoArchive: e.detail }); } })), h("div", { key: '983ce91d8979286f4a47282111ff8121eaa231fd', class: 'template-detail-section' }, h("p", { key: 'd8f530b80fe00b0caed7d6808468958a945476fb', class: "template-detail-section-title" }, "Lock"), h("ls-toggle", { key: '9d567f64221707e0a3cd6fa481d10b8b8db960a5', checked: this.template?.locked, onValueChange: (e) => { this.alter({ locked: e.detail }); } })), h("div", { key: '1c232a0030ad9ad08f0d6fe5a1e56bb53d9d5df4', class: 'template-detail-section column' }, h("p", { key: '5ae3d7643e06649decb443675d7c0f2a368119da', class: "template-detail-section-title" }, "Pages"), h("ls-label", { key: 'e96b93c0314b25ef31fb482ea0db5c9c3eab5010', text: this.template?.pageCount })), h("div", { key: '523d4e15f9d89d7a2233b07f82aeb6aad86d6b5c', class: 'template-detail-section column' }, h("p", { key: 'c00eb240243337384d518fb4912ee6da44f03ddd', class: "template-detail-section-title" }, "Date Created"), " ", this.template?.created), h("div", { key: 'aae3a62cfaa6936127607e4a2068042fa53aa021', class: 'template-detail-section column' }, h("p", { key: 'a4b90c564e4989614aef70cd1af07f79b03a4c74', class: "template-detail-section-title" }, "Created By"), " ", this.template?.createdBy)), h("slot", { key: 'ca8666f8d48133b5385ca03f30e78d0c68c9508a' })));
     }
     static get watchers() { return {
         "template": ["selectedHandler"]
@@ -20036,24 +20035,9 @@ function matchData(data) {
             fi.setAttribute('id', 'ls-field-' + id);
             fi.dataItem = { ...data.obj, id };
         }
-        else if (prefix === 'rol') {
-            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
-            // Note this respread ensures that re-renders are triggered
-            this._template = { ...this._template, roles: [...this._template.roles, { ...data.obj, id }] };
-            participantManager.template = this._template;
-        }
     }
-    else if (data.event.action === 'delete') {
-        if (prefix === 'rol') {
-            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
-            this._template = { ...this._template, roles: this._template.roles.filter(r => r.id !== id) };
-            participantManager.template = this._template;
-        }
-    }
-    else if (data.event.action === 'swap') {
-        if (prefix === 'rol') {
-            syncRoles.bind(this)();
-        }
+    if (prefix === 'rol') {
+        syncRoles.bind(this)();
     }
 }
 async function syncRoles() {
@@ -20261,6 +20245,7 @@ function debounce(data, delay) {
 function mouseDown(e) {
     if (e.offsetX < 0 || e.offsetY < 0)
         return;
+    // console.log('mousedown', e);
     // Find if this was
     // - a hit on a field edge RESIZE
     // - a hit on the middle of a field MOVE
@@ -20296,6 +20281,7 @@ function mouseDown(e) {
             this.hitField = f;
         }
     });
+    console.log('hit field', this.hitField);
     if (this.hitField) {
         const { height, width } = this.hitField.getBoundingClientRect();
         const fdims = { left: this.hitField.offsetLeft, top: this.hitField.offsetTop, height, width, x: e.screenX, y: e.screenY };
@@ -20309,10 +20295,11 @@ function mouseDown(e) {
         this.selectionBox = null;
     }
     else {
-        console.log('start mouse down reset');
+        // console.log('start mouse down reset');
         this.startLocations = null;
         this.startMouse = null;
         this.selectionBox = { x: e.clientX, y: e.clientY };
+        // console.log('empty space reset selected', this.selectionBox);
         this.selectFields.emit([]);
         this.selected = [];
         this.component.style.cursor = 'crosshair';
@@ -20364,6 +20351,8 @@ function mouseMove(event) {
     }
     else if (this.startLocations && !this.edgeSide && this.startMouse && event.buttons === 1) {
         this.isMoving = true;
+        var box = this.component.shadowRoot.getElementById('ls-box-selector');
+        box.style.visibility = 'hidden';
         // Move one or more selected items
         const movedX = event.screenX - this.startMouse.x;
         const movedY = event.screenY - this.startMouse.y;
@@ -20379,7 +20368,7 @@ function mouseUp(event) {
     this.edgeSide = null;
     this.startMouse = null;
     this.component.style.cursor = 'auto';
-    console.log('mouse up');
+    // console.log('mouse up');
     // find what was inside the selection box emit the select event and change their style
     if (this.selectionBox) {
         var box = this.component.shadowRoot.getElementById('ls-box-selector');
@@ -20388,7 +20377,6 @@ function mouseUp(event) {
         this.selectionBox = null;
         const found = findIn(fields, box, true, event.shiftKey);
         this.selected = Array.from(found);
-        console.log(found, this.selectionBox);
         this.selectFields.emit(found.map(fx => fx.dataItem));
     }
 }
@@ -20483,7 +20471,6 @@ function mouseDrop(event) {
                 templateId: this._template.id,
             },
         };
-        console.log(newData);
         this.mutate.emit([newData]);
         this.update.emit([newData]);
     }
@@ -24702,7 +24689,7 @@ function validate(t) {
     var errors = [];
     // Check for missing signatures
     t.roles.forEach(tr => {
-        if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex).length === 0) {
+        if (t.elementConnection.templateElements.filter(e => e.formElementType === 'signature' && e.signer === tr.signerIndex && tr.roleType !== 'APPROVER').length === 0) {
             errors.push({
                 id: tr.id,
                 title: 'Missing signature.',
@@ -24725,7 +24712,7 @@ function validate(t) {
     return errors;
 }
-const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;border-radius:16px;border:1px solid var(--gray-30, #edeff2);background:var(--white, #fff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;max-height:100%;z-index:1000;left:0;top:0}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:center;overflow:visible;max-height:100%;width:100vw;overflow:scroll}#ls-document-frame{position:relative;height:98vh}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.hidden{visibility:hidden;display:none;width:0px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.fields-box{display:flex;flex-direction:column;gap:0.75rem}.page-header{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.field-properties-outer{position:relative;height:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsDocumentViewerCss = "*,*::before,*::after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion: no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:host{display:flex;flex-direction:row;width:100vw;height:100vh;margin:0px;padding:0px}.validation-tag-wrapper{position:fixed;top:0.375rem;right:0.375rem;z-index:2000}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{position:relative;border-radius:16px;border:1px solid var(--gray-30, #edeff2);background:var(--white, #fff);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);width:21.25rem;margin:1rem;min-width:21.25rem;max-height:100%;z-index:1000;left:0;top:0}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px;box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.12)}#ls-mid-area{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;width:100vw;height:100%}.document-frame-wrapper{display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:visible;max-height:100%;width:100vw;overflow:scroll;padding:5rem 380px 2rem 380px}#ls-document-frame{position:relative;height:98vh;margin-right:auto;margin-left:auto}.prevButton{position:relative;bottom:30px}.nextButton{position:relative;bottom:30px}.fieldBox{z-index:1000}#ls-box-selector{position:absolute;visibility:hidden;background-color:transparent;border:1px rgba(71, 71, 71, 0.716) dashed}#ls-editor-form{display:flex;width:100vw;height:calc(100vh - 2.25rem);position:relative;background:var(--gray-10, #f7f8fa);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.04) inset, 0 10px 15px 0 rgba(0, 0, 0, 0.04) inset}.hidden{visibility:hidden;display:none;width:0px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.fields-box{display:flex;flex-direction:column;gap:0.75rem}.page-header{display:flex;height:2.25rem;gap:0.5rem;padding:0.25rem 0.75rem;justify-content:center;align-items:center}.header-text-1{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem}.header-text-2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:400;line-height:1.25rem}.properties-header{display:flex;padding:1rem;gap:0.75rem;align-items:center;border-bottom:1px solid var(--gray-20, #edeff2)}.properties-header-title{color:var(--gray-100, #45484d);width:100%;font-size:1.5rem;font-style:normal;font-weight:500;line-height:2rem;}.properties-header-icon{display:flex;padding:0.5rem;border-radius:0.625rem;background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.field-properties-outer{position:relative;height:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
 const LsDocumentViewer = class {
@@ -24772,10 +24759,10 @@ const LsDocumentViewer = class {
      */
     token;
     /**
-   * This will override the default production user pool.
-   * Almost exclusively used for internal development.
-   * {string}
-   */
+     * This will override the default production user pool.
+     * Almost exclusively used for internal development.
+     * {string}
+     */
     userpool;
     /**
      * This will override the default production graphql endpoint.
@@ -24800,7 +24787,7 @@ const LsDocumentViewer = class {
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
      */
-    mode = 'custom';
+    mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
             this.showtoolbar = false;
@@ -24814,6 +24801,12 @@ const LsDocumentViewer = class {
             this.showstatusbar = true;
             this.readonly = false;
         }
+        else if (_newMode === 'compose') {
+            this.showtoolbar = true;
+            this.showtoolbox = true;
+            this.showstatusbar = true;
+            this.readonly = false;
+        }
     }
     tableViewHandler(_newMode, _oldMode) {
         if (_newMode === true) {
@@ -24890,7 +24883,7 @@ const LsDocumentViewer = class {
     adapter;
     // Action an external data action and use the result (if required)
     mutateHandler(event) {
-        if (this.token)
+        if (this.token && this.adapter)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     // Updates are internal event between LS controls not to be confused with mutate
@@ -24902,6 +24895,7 @@ const LsDocumentViewer = class {
     // Updates are internal event between LS controls not to be confused with mutate
     addParticpantHandler(event) {
         const defaultExperience = this.groupInfo.experienceConnection.experiences.find(x => x.defaultExperience === true);
+        const parent = this._template.roles.find(r => r.id === event.detail.parent);
         const data = [
             {
                 action: 'create',
@@ -24909,8 +24903,8 @@ const LsDocumentViewer = class {
                     id: btoa('rol' + crypto.randomUUID()),
                     name: 'Signer ' + (this._template.roles.length + 1),
                     roleType: event.detail.type,
-                    signerIndex: this._template.roles.length + 1,
-                    ordinal: this._template.roles.length,
+                    signerIndex: event.detail.type === 'WITNESS' ? 100 + parent.signerIndex : this._template.roles.length,
+                    ordinal: event.detail.type === 'WITNESS' ? parent.ordinal + 1 : this._template.roles.length,
                     signerParent: event.detail.parent,
                     experience: defaultExperience.id,
                     templateId: this._template.id,
@@ -24923,10 +24917,10 @@ const LsDocumentViewer = class {
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
         const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
-        // update the template with all the latest values in the
+        // update the template with all the latest values in the
         this._template = {
             ...this._template,
-            elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) }
+            elementConnection: { ...this._template.elementConnection, templateElements: fields.map(ef => ef.dataItem) },
         };
         var toolbar = this.component.shadowRoot.getElementById('ls-toolbar');
         if (toolbar)
@@ -24995,6 +24989,13 @@ const LsDocumentViewer = class {
         this.queueRenderPage(this.pageNum);
         this.showPageFields(this.pageNum);
     }
+    /**
+     * Ensure broken or misplaced fields are put onto the page.
+     * {number} position
+     */
+    clip(legacyPosition, failback = 0.0) {
+        return (legacyPosition > 1 ? failback : legacyPosition);
+    }
     /**
      * Decorate the template data object with useful transformations.
      * {string} json of template
@@ -25011,21 +25012,23 @@ const LsDocumentViewer = class {
         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,
+                top: this.clip(f.ay) * this.pageDimensions[0].height,
+                left: this.clip(f.ax) * this.pageDimensions[0].width,
+                height: (this.clip(f.by, 0.1) - this.clip(f.ay)) * this.pageDimensions[0].height,
+                width: (this.clip(f.bx, 0.2) - this.clip(f.ax)) * this.pageDimensions[0].width,
                 templateId: newTemplate.id,
             };
         });
         const preparedRoles = newTemplate.roles.map((ro) => {
             return { ...ro, templateId: newTemplate.id };
         });
+        this.signer = preparedRoles.length > 0 ? 1 : 0;
         this._template = {
             ...newTemplate,
             elementConnection: { ...newTemplate.elementConnection, templateElements: fields },
             roles: preparedRoles,
         };
+        console.log(this._template);
     }
     /**
      * Render the page based on pageNumber
@@ -25074,10 +25077,10 @@ const LsDocumentViewer = class {
     prepareElement(newElement) {
         return {
             ...newElement,
-            top: Math.floor(newElement.ay * this.pageDimensions[newElement.page - 1].height),
-            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),
+            top: Math.floor(this.clip(newElement.ay) * this.pageDimensions[newElement.page - 1].height),
+            left: Math.floor(this.clip(newElement.ax) * this.pageDimensions[newElement.page - 1].width),
+            height: Math.floor((this.clip(newElement.by, 0.05) - this.clip(newElement.ay)) * this.pageDimensions[newElement.page - 1].height),
+            width: Math.floor((this.clip(newElement.bx, 0.2) - this.clip(newElement.ax)) * this.pageDimensions[newElement.page - 1].width),
             pageDimensions: this.pageDimensions[newElement.page - 1],
             templateId: this._template.id,
         };
@@ -25161,6 +25164,7 @@ const LsDocumentViewer = class {
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.selected = [];
+            this.setZoom(1.0);
         }
         catch (e) {
             console.error('Your access token is invalid.', e);
@@ -25171,12 +25175,11 @@ const LsDocumentViewer = class {
             this.load();
     }
     componentDidLoad() {
-        const box = this.component.shadowRoot.querySelector('#document-frame-wrapper');
-        box.scrollTop = (box.scrollHeight - box.clientHeight) / 2;
-        box.scrollLeft = (box.scrollWidth - box.clientWidth) / 2;
+        const box = this.component.shadowRoot.querySelector('.document-frame-wrapper');
+        box.scrollLeft = -380;
     }
     render() {
-        return (h(Host, { key: '079c3dca9d2e77381a5065218ebc5795257b7b5f' }, h(h.Fragment, null, h("div", { key: '344d5e56479caaadc6f82c4de47c52f08f7d5bc1', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '2fef322510e4be2fc6fe2ec6e70664e23ed9413f', validationErrors: this.validationErrors })), h("div", { key: '7b581394dd4536ed8f807a7ce5375723a54b2f8d', class: "page-header" }, h("p", { key: '0aa1f815c4bc989764efe1969c250fc39fff1294', class: "header-text-1" }, "Template Creation"), h("p", { key: 'f6369aff0df03f8ba40f149d4f5d8ca227e15a6c' }, "/"), h("p", { key: '3b93a9acaf60c7023286e069ab8ce4a93acc1c5a', class: "header-text-2" }, this._template?.title)), h("form", { key: '3f3f426a56d4020f609485b85b80851927060a61', 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: '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 => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25189,7 +25192,7 @@ const LsDocumentViewer = class {
             } }), 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 => {
                 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: 'b7cda4e39b0b85515f38ceb2c413b2bd3af5089b', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '19d4e788c2f1ce3d3951854af41211d5598b1dd2', id: "ls-mid-area" }, h("div", { key: '83161a18cdb8e0ce58d7eb571936b2715ffc43e7', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'ecbccb9f5bcd253caaa43a08e80957b31b970825', id: "ls-document-frame" }, h("canvas", { key: '53d262c1bbda820579da7c89ad63fb252a7d152d', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'ed51cfcc623cfa374487ddd0692182e83620ef94', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '55856f133696700638f8fd7bd8a31ef1b5169f4a', id: "ls-box-selector" }))), h("ls-statusbar", { key: '3176526950bed152c446488efd5407717be0d55f', 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: '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 }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],
@@ -26186,7 +26189,7 @@ const LsFieldPropertiesContainer = class {
         }
     }
     render() {
-        return (h(Host, { key: '02eee9d90b4f8abd72f9e193fe04eb5597f3490e' }, this.tabs.length > 1 && (h("div", { key: 'a00dd72171808308d53a8d81ffc89669f1bc65d2', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: 'ced18e5b24011ba7b982c4aaf7125cb1198991ba', class: 'scrolling-container' }, h("slot", { key: 'be78398757fb53cdb987511709f5dd1fc6d5f647', name: this.selectedTab }))));
+        return (h(Host, { key: 'bd5cdce632c977e1fc528c9dc019957d693faf94' }, this.tabs.length > 1 && (h("div", { key: '971328b1f38c3693934665bcefb84133da76d04f', class: 'tabs-container', style: { gridTemplateColumns: `repeat(${this.tabs.length}, 1fr)` } }, this.tabs.map(tab => (h("button", { class: tab === this.selectedTab ? 'ls-tab active' : 'ls-tab', onClick: () => (this.selectedTab = tab) }, tab))))), h("div", { key: '096910732325077d5d22526d4928ad7ce9c9d7d8', class: 'scrolling-container' }, h("slot", { key: '0d5a8ae8dfc46e2e469d46140e2d6b2a5ecd3aad', name: this.selectedTab }))));
     }
 };
 LsFieldPropertiesContainer.style = lsFieldPropertiesContainerCss;
@@ -33575,7 +33578,7 @@ const LsNumberInput = class {
 };
 LsNumberInput.style = lsNumberInputCss;
-const lsParticipantCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;border-radius:1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsParticipantCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch}.top-card{border-radius:1rem 1rem 0 0}.full-card{border-radius:1rem}.bottom-card{border-radius:0 0 1rem 1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0c34b8)}button.destructive{border:1px solid var(--red-60, #f04438);background:transparent;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0);background-color:var(--red-10, #fff1f0)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 const LsParticipantCard = class {
     constructor(hostRef) {
@@ -33583,6 +33586,7 @@ const LsParticipantCard = class {
         this.mutate = createEvent(this, "mutate");
         this.update = createEvent(this, "update");
         this.opened = createEvent(this, "opened");
+        this.addParticipant = createEvent(this, "addParticipant");
     }
     get component() { return getElement(this); }
     signer;
@@ -33623,41 +33627,47 @@ const LsParticipantCard = class {
             this.opened.emit(this.signer);
         }
     }
+    addParticipant;
     render() {
         const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
-        return (h(Host, { key: '26cd1235d566363298804b8554857f4572fcf3ad' }, h("div", { key: '5cb4a93633eaf4fec24648b2207ea8ffb401e950', class: "participant-card", style: {
+        const child = this.template.roles.find(r => r.signerParent === this.signer.id);
+        return (h(Host, { key: '050ce0bf860dfebc0f79d45295b6876a8c714c61' }, h("div", { key: '03a6151b022ee20de49836d55362ca7842d91c2b', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
-                marginTop: this.signer.signerIndex > 100 && '-0.813rem',
+                marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
             }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
                 this.editable = true;
-            } }, h("div", { key: '3ca92742e66d2f9e746fbf0725ea26bbdc4989b9', class: 'participant-card-inner' }, h("div", { key: '456cfae55b1fe15b6b7d4444ed228183ca1f93f1', class: 'participant-card-top-items' }, h("div", { key: '289757cf77b0b57b5cb9d78c1b248a8c469b5268', class: 'role-label', style: {
+            } }, h("div", { key: '4471c63e21cba70ca9c99e08518b58aa27d51ba7', class: 'participant-card-inner' }, h("div", { key: '2880b2ada85743bb5aebb533cf51e837b275329e', class: 'participant-card-top-items' }, h("div", { key: '3d4eb8164d136326349cece0b18f5c53b0f88a49', class: 'role-label', style: {
                 background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, h("ls-icon", { key: '78405243676cf11489fe016dce9bc0bd493d1005', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '07e6126404d7c07004596827847e8c1e618c881b', class: 'button-set hidden' }, this.index > 0 && (h("div", { key: '456bd5bab69b4f2ed5791f04b4509dc2a80889e1', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'dad3b4055bdd45df6f8e5085f459961da09d010f', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), 'Participant ' + (this.signer?.signerIndex || '')), h("div", { key: '07fe8b88998c7121217db858c231dcc1cc1707fe', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: '830f21fbae631a0e8e42af15a91d67c9547c1c01', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index - 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '21d0074f67040d377e43696253d055a61c522a14', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && (h("div", { key: '8d9edb433c6a0ea64abfa86212bfddec5a82219b', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '8b09d4c2d21c0da1d1e2b8d259808f17db459cbb', name: "arrow-up", size: "18" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: '615157461249449a36d2de250682f61476a9f201', class: "innerButton", onClick: () => {
                 this.swapHandler(this.signer, this.template.roles[this.index + 1]);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '5154b792ed0b47da1852be885d1751dc5f090dbd', name: "arrow-down", size: "18" }))), h("div", { key: '625e58c9360e52ad651fac5a81bd6aa05130dabb', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: 'f5272e02633d855779e651e7210f93d345832b88', name: "arrow-down", size: "18" }))), h("div", { key: '83fcb361f4610ca0f08db9d6be84ad3cf3abd5d8', class: "innerButton", onClick: () => {
                 this.editable = !this.editable;
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '75cfef0dcfde68c1a652c0884a910ea4d35deafa', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: 'c90fb747817a8ff3862cd0404e0d2c6507420ea9', class: "innerButton", onClick: () => {
+            } }, h("ls-icon", { key: '9aea4e29845683be3ab72ad4aba8897e2e8f4a2f', name: this.editable ? 'check' : 'pencil-alt', size: "18" })), h("div", { key: '451e0cc218f1f505e64a9783902d8627c4c1a005', class: "innerButton", onClick: () => {
                 this.deleteHandler(this.signer);
             }, style: {
                 '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
                 '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
-            } }, h("ls-icon", { key: '3eebec8b8dc84006ceddcfd8e9a4336c4d862276', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }) }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer"))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+            } }, h("ls-icon", { key: '5678a46062f0ea120d60e070a86f5b1a75d06662', name: "trash", size: "18" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (h("ls-input-wrapper", { leadingIcon: "eye" }, h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
                 if (e.key === 'Enter' || e.keyCode === 13)
                     this.editable = false;
-            } }))) : (h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
+            } }), this.signer?.roleType === 'SIGNER' && !child ? (h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(child);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : this.signer?.roleType === 'WITNESS' ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(this.signer);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : null)) : (h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s100,
             } }, this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`), h("p", { class: "participant-text-type", style: {
                 color: defaultRolePalette[this.signer?.signerIndex % 100].s80,
@@ -33665,7 +33675,7 @@ const LsParticipantCard = class {
             } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (h("div", { class: 'role-label fields', style: {
                 background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
                 color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
-            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: 'ca83751b9647aa1a1b02198dcb02a9c1cc5fa951' })));
+            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "16", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: 'ba159f7a2d34de4926bb44ce1aca658cd470833d' })));
     }
     static get watchers() { return {
         "editable": ["modeHandler"]
@@ -33709,17 +33719,35 @@ const LsParticipantManager = class {
     handleOpened(event) {
         const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
         participants.forEach(element => {
-            if (element.signer.id !== event.detail.id)
-                element.editable = false;
+            const isTarget = element.signer?.id === event.detail.id;
+            element.editable = isTarget;
+            if (isTarget) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
         });
     }
+    handleOpenNewWitness(event) {
+        const { parent } = event.detail;
+        const observer = new MutationObserver(() => {
+            const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+            participants.forEach(element => {
+                const isTarget = element.signer?.signerParent === parent;
+                element.editable = isTarget;
+                if (isTarget) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            });
+            observer.disconnect();
+        });
+        observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
+    }
     render() {
-        return (h(Host, { key: '9217c153c317e197897058a5881a781b16a58004' }, h("div", { key: '2dd289b3bb90e953eb1c9b722c35d3e20ef17b34', class: "ls-editor-infobox" }, h("h2", { key: '67d42783d2b9a8a3161f03c3d517da02eb9ce8b3', class: "toolbox-section-title" }, "Participants"), h("p", { key: '2f9cbd596e502a592cedb990855cda5da352a10a', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '6936cb07b173bff2a653753aa165366590ce1923', class: "participant-list" }, this.template &&
+        return (h(Host, { key: '969b4cc1f4e86d87035c5c84365dea9607c85fff' }, h("div", { key: 'a50e3c6131d31f523a458c0a1729181eea1ce007', class: "ls-editor-infobox" }, h("h2", { key: '5e4b848099eb0d3a79b4fa172111288d7b07e278', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'fa9267c09a4c443832f76bb88f8c74d69c9838e3', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '97aceae65cb31344ad3a724daf7f64c469fd6741', class: "participant-list" }, this.template &&
             this.template?.roles.map((r, index) => {
-                return h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: (event) => {
+                return (h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: event => {
                         this.handleOpened.bind(this)(event);
-                    } });
-            })), h("div", { key: 'c57020f2d560dc9241b8cfc38611564b8bf68eb0', class: 'add-participant-button' }, h("button", { key: 'd9e352162f8b3e2b2278c392137888ef85cc46a1', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: '31db90682efdb8b93fcab8d77d1e62385b9e5f36', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'df6d9f9fd4b8b8330acd2d04c44e36b07fa4aed3' }, "Add Participant"))), h("slot", { key: 'e12c849be729bddd04e79b77c182e26ed5a2563b' })));
+                    }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
+            })), h("div", { key: '1067a4fbd87d7bcbce1a99d4aeb9a04bacfeea36', class: 'add-participant-button' }, h("button", { key: 'f0529ee33de114f8d7b5a222d27440686cf9eb0b', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: 'fab11a0945db10cfde4c537d26e84cfa410cd8a9', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '384ec2ea99caff3321d3d5d70105e6a07c2466fe' }, "Add Participant"))), h("slot", { key: 'd0689801afd208555d353f1472e64968c5934647' })));
     }
 };
 LsParticipantManager.style = lsParticipantManagerCss;
@@ -33732,7 +33760,6 @@ const LsParticipantSelect = class {
         this.roleChange = createEvent(this, "roleChange");
         this.addParticipant = createEvent(this, "addParticipant");
     }
-    dataItem;
     /**
    * The id of the currently selected role.
    * {string}
@@ -33742,7 +33769,23 @@ const LsParticipantSelect = class {
      * The currently selected role.
      * {number}
      */
-    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER' };
+    selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: true };
+    handleRoleLoad() {
+        if (this.selectedRole.default) {
+            if (this.roles.length > 0) {
+                const initialRole = this.roles.find(r => r.signerIndex === 1);
+                if (initialRole) {
+                    this.selectedRole = { ...initialRole, default: false };
+                }
+            }
+        }
+        else {
+            const updatedRole = this.roles.find(r => r.signerIndex === this.selectedRole.signerIndex);
+            if (updatedRole) {
+                this.selectedRole = { ...updatedRole, default: false };
+            }
+        }
+    }
     /**
      * The current template roles.
      * {LSApiRole}
@@ -33755,7 +33798,7 @@ const LsParticipantSelect = class {
     roleChange;
     addParticipant;
     selectRole(role) {
-        this.selectedRole = role;
+        this.selectedRole = { ...role, default: false };
         this.isOpen = false;
         this.roleChange.emit(role.signerIndex);
     }
@@ -33763,27 +33806,27 @@ const LsParticipantSelect = class {
         this.addParticipant.emit({ type: 'SIGNER' });
     }
     render() {
-        return (h(Host, { key: '05ce04a14cfb2ad7b758aedc5b65369a0ab0b193' }, h("div", { key: '01913be9946c4cbd20be9eb0183ccbbfcbd8ca61', class: "dropdown" }, h("div", { key: 'f59100f64738d20ad385de862295edf49a91655a', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c8dca2bf3967cd21445da0d957049a0976cda9a2', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fcfacdc95436203bf4d9234531c7f7fb7a7a764a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'a82eed99f51aa2d161d6b4901c0ee26f582aa895', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: 'f37b804b8ce9c29ee833813b17dbbfd0c7d070d0', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'f3a2b18f7340021728a1cc563eb35d27ac17990a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: 'dc6496244da861eff55d628ed9d240c0f507f22b', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '51c552f5e563479b81c26baf7b41b17c06d0f551', class: 'selected-role-label', style: {
+        return (h(Host, { key: 'f053e6c27cba0319ca92871a534070d753961aac' }, h("div", { key: 'b037b74c477b5f7ad338bc707a1f08bdfb131535', class: "dropdown" }, h("div", { key: 'c97336eab86a36d45b9ddef78a6df0e8babada63', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'fa69fa36ad9b6e6ae4adfca7017a4457068365d1', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '860b63abd43343f27b9fd8d597a152bf7e34dc93', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '7eeff168b2553f4e79be6d4a8d1bad31282ec5ac', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '10216191c461f85e93f97c40d0a9f818cafe6f19', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'c2677a36fe8ffc04141dd8e565916d425b23120f', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '977b8593c1eba8a9cafc93f3c548596df4f14383', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '7a9decad70156db7451571a813d98ac29bb55969', class: 'selected-role-label', style: {
                 background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
                 color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
-            } }, h("ls-icon", { key: 'bd7ad751ebf8f1da889fc43fc65c77b309673c30', size: "18", name: this.selectedRole?.roleType === 'SENDER'
+            } }, h("ls-icon", { key: '1bceddc0d5bdcdc9a4550e6871c6f23b130e13a4', size: "18", name: this.selectedRole?.roleType === 'SENDER'
                 ? 'user'
                 : this.selectedRole?.roleType === 'APPROVER'
                     ? 'check-circle'
                     : this.selectedRole?.roleType === 'WITNESS'
                         ? 'eye'
                         : 'signature' }), this.selectedRole.name ||
-            (this.selectedRole.signerIndex > 100 ? `Participant ${this.selectedRole.signerIndex - 100} Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'fc7751e7aa67036b170dffffa6f1205bb079da4d', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: 'd4a9c60a0a9d309c779d926547beab66dd258ec5', name: "chevron-down" }))), this.isOpen && (h("div", { key: '9afdac4d0239217a9145b87e86ce82fe4baeacfb', class: "dropdown-list" }, h("div", { key: '6e6c690b9b73369da2b920d601bd03ae2d4e2c62', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
+            (this.selectedRole.roleType === 'WITNESS' ? `Witness` : `Participant ${this.selectedRole.signerIndex}`)), h("button", { key: 'deac6e0ce1405949e279df80396664520ea0a446', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '39bb00d902adf511c3122dd8b4a158cfea84dc02', name: "chevron-down" }))), this.isOpen && (h("div", { key: '4e1c77622d07e09ad73e8607f2fb7012ab170599', class: "dropdown-list" }, h("div", { key: '6333a4f6d8a87b41054b0e0bacefe836093cd64f', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[0].s10,
                 '--check-icon-selected': defaultRolePalette[0].s50,
-            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '7eafd31f64a1cc1578f79e46eed06fe3c6f19089', class: 'role-icon', style: {
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender', roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '0172efaa68fd05cc5c8833833f4f44af92d505bc', class: 'role-icon', style: {
                 background: defaultRolePalette[0].s50,
                 color: defaultRolePalette[0].s80,
-            } }, h("ls-icon", { key: '7a6b5e21dd76b8bf75d8932b049bcdb3b86a4e12', name: "user" })), h("div", { key: 'dbc8abbdf4b2ded694637aa54e6124ca5496d3f7', class: 'role-text' }, h("p", { key: 'fd3b749275de606c1807f728de49ea12e5fb4964', class: 'role-name', style: {
+            } }, h("ls-icon", { key: '5dc564e507733c2732ab79c3a8437eb275c6aefe', name: "user" })), h("div", { key: '9d1a26aa3fceb79612afe66929b9b04fa6c46b66', class: 'role-text' }, h("p", { key: 'e89116bb21fb1fa9c00acac2173688629fe2d637', class: 'role-name', style: {
                 '--role-name-selected': defaultRolePalette[0].s80,
-            } }, 'Sender'), h("p", { key: '673247e9d41fc4ba38fd7ca8a49f7cd7d6a037c6', class: 'role-type', style: {
+            } }, 'Sender'), h("p", { key: '00bb513c28a580faab973e74779c77b6e123aa6d', class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[0].s80,
-            } }, "You")), h("ls-icon", { key: 'efab79f4b3d39fe14fd8c91420d0717e4159337a', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
+            } }, "You")), h("ls-icon", { key: '9c375a9cffbc93e6566f496a379f910d7d82ad2e', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', style: {
                 '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
                 '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
             }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
@@ -33795,11 +33838,14 @@ const LsParticipantSelect = class {
                 '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
             } }, r.name || (r.signerIndex > 100 ? `Participant ${r.signerIndex - 100} Witness` : `Participant ${r.signerIndex}`)), h("p", { class: 'role-type', style: {
                 '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
-            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: 'fb09ef1b14adc8f9b4ac2f09cfeadb09158691c7', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
+            } }, r.roleType === 'WITNESS' ? 'Witness' : r.roleType === 'APPROVER' ? 'Approver' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex })))), h("button", { key: '876d0510b3522b4de6c81a04950e0cbe6d56a7ef', onClick: () => this.createHandler(), class: 'add-participant-row', style: {
                 '--background-selected': defaultRolePalette[1].s10,
                 '--check-icon-selected': defaultRolePalette[1].s50,
-            } }, h("div", { key: '33b7d90c55ad488e95a83526e4c501a72ad9c0f6', class: 'add-participant-icon' }, h("ls-icon", { key: '32ae47b14d9c5047dc10478a09a8725be7d08f14', name: "user-add" })), h("div", { key: '2d206c0f2d7e562098dddb4efbb21bcb537fe402', class: 'role-text' }, h("p", { key: 'ae5d9123112652e4af9912b309da2e6eb6705995', class: 'role-name' }, "Add Participant"), h("p", { key: 'dcbd38153b8fc2666790df3af0229438b94f9cf0', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: '65fed105324c1dca3c7b0983e6a81db8eb18e4a5', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'd18f3b14f6ae9b47f186451c2390acb600a7d476' })));
+            } }, h("div", { key: '18e18d420039303a144a9a40ae73307421e6ddf0', class: 'add-participant-icon' }, h("ls-icon", { key: 'f6fa96cc87ee795b827067035b2887dd5af67b71', name: "user-add" })), h("div", { key: 'd17693f290f0aba4d16e3d7c92e9d899e18bfd2b', class: 'role-text' }, h("p", { key: '6cbd301f3414c84d1dc14e4afa764c920d180b66', class: 'role-name' }, "Add Participant"), h("p", { key: '93ff716ae9b2bbdb976f3bb674963c686e8b236d', class: 'role-type' }, "Add a new Signer")), h("ls-icon", { key: 'b6c771b3e0773de88ab729a2e8d09c9051b09d5f', class: 'plus-icon', name: "plus" }))))), h("slot", { key: 'cd90a24546b04b907c6e82980827fb133ea9b37a' })));
     }
+    static get watchers() { return {
+        "roles": ["handleRoleLoad"]
+    }; }
 };
 LsParticipantSelect.style = lsParticipantSelectCss;
@@ -34032,7 +34078,7 @@ const LsToggle = class {
 };
 LsToggle.style = lsToggleCss;
-const lsToolbarCss = ":host{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;width:100%;align-items:center;justify-content:center;padding:0.5rem;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);z-index:1000}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+const lsToolbarCss = ":host{position:absolute;top:1rem;left:50%;transform:translateX(-50%);display:flex;width:100%;align-items:center;justify-content:center;padding:0.375rem;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);z-index:1000;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 const LsToolbar = class {
     constructor(hostRef) {
@@ -34076,7 +34122,7 @@ const LsToolbar = class {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, dataItem: this?.dataItem, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: 'c22f9e9921ca69912896777e704636e323ffdb36' })));
+        return (h(Host, { key: '930227762fac4d6c8ff5053cf6f844d9e4b5366a' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem, style: { visibility: this.dataItem && this.dataItem.length === 1 ? 'visible' : 'hidden' } }), h("ls-participant-select", { id: "ls-participant-select", roles: this.template?.roles, style: { display: this.dataItem && this.dataItem.length === 1 ? 'none' : 'block' } }))), h("slot", { key: '4d23f1bc7e9abe32194bd1628084ab47624ad7c5' })));
     }
 };
 LsToolbar.style = lsToolbarCss;
@@ -34145,8 +34191,9 @@ const LsValidationTag = class {
     validationErrors = [];
     isExpanded = false;
     render() {
-        return (h(Host, { key: '19a7fa173b5753ee1323adf935c9b76aab197a1b' }, h("div", { key: '5c0b59aa90ee1bf2c39f341e167437ae0cfb700b', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '209d7861899401458d8a5fa7a64665d7e7991a51', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: '0a528826d3b7d67382a934259c1fd515a931a108', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && (h("div", { key: 'b1628cd4fcfa5b92d88b492504865a2d91c5713a', class: 'field-dropdown' }, h("div", { key: '5cf6c73e2bf98fa41ae6016e1d1e75a150b334cb', class: 'dropdown-header' }, h("h2", { key: '389ba3f91d3195671965ee25a5e85764ade84449' }, "Signature Fields Required"), h("p", { key: '6bb94ffb2b9063a9f033e939af816bbb0eebda55' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
-            const pallette = defaultRolePalette[field?.role?.signerIndex || field?.element?.signer || 0];
+        return (h(Host, { key: '19a7fa173b5753ee1323adf935c9b76aab197a1b' }, h("div", { key: '5c0b59aa90ee1bf2c39f341e167437ae0cfb700b', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '209d7861899401458d8a5fa7a64665d7e7991a51', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: '0a528826d3b7d67382a934259c1fd515a931a108', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: 'b02370495b444d5fdffce3b6424ebdada55da955', class: 'field-dropdown' }, h("div", { key: 'aa939c4bf56a8e5ba53ec3f09d76a897a3c279a9', class: 'dropdown-header' }, h("h2", { key: 'cf3d5932c59a742bdefd9a05007d1d6b657789cc' }, "Signature Fields Required"), h("p", { key: '2c231dc8f4fd0d0f14f173aae3251078551ab056' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
+            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { key: idx, class: 'required-field', style: {
                     '--field-background': pallette.s10,
                     '--field-border-color': pallette.s10,