legalesign-document-viewer 0.3.9 → 0.4.0

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

@@ -1,46 +1,49 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
-import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$F, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-BXwz1IB9.js';
+import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$I, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-CIoxINZp.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$G } from './p-Dq55j0vn.js';
-import { d as defineCustomElement$E } from './p-BKPLevlT.js';
-import { d as defineCustomElement$D } from './p-IlkS4czy.js';
-import { d as defineCustomElement$C } from './p-Djqb_4PL.js';
-import { d as defineCustomElement$B } from './p-C_ajTjBp.js';
-import { d as defineCustomElement$A } from './p-CWMW0nzH.js';
-import { d as defineCustomElement$z } from './p-sPfD2vzy.js';
-import { d as defineCustomElement$y } from './p-CNX4llIr.js';
-import { d as defineCustomElement$x } from './p-CciiwtyT.js';
-import { d as defineCustomElement$w } from './p-yu8Gmj9y.js';
-import { d as defineCustomElement$v } from './p-DzKH0pD-.js';
-import { d as defineCustomElement$u } from './p-BvIKgXkH.js';
-import { d as defineCustomElement$t } from './p-DkCVXmg3.js';
-import { d as defineCustomElement$s } from './p-DfYmuFSx.js';
-import { d as defineCustomElement$r } from './p-CVPhyCct.js';
-import { d as defineCustomElement$q } from './p-Ci_0K9c7.js';
-import { d as defineCustomElement$p } from './p-CfRbrh3V.js';
-import { d as defineCustomElement$o } from './p-DTIdDV9R.js';
-import { d as defineCustomElement$n } from './p-BsPqJYcs.js';
-import { d as defineCustomElement$m } from './p-BwSi2pdQ.js';
-import { d as defineCustomElement$l } from './p-BeVxOHJR.js';
-import { d as defineCustomElement$k } from './p-4H4163T0.js';
-import { d as defineCustomElement$j } from './p-B52ZaCFy.js';
-import { d as defineCustomElement$i } from './p-C7ohAVHE.js';
-import { d as defineCustomElement$h } from './p-BCoqHTq9.js';
-import { d as defineCustomElement$g } from './p-CdEPt9fv.js';
-import { d as defineCustomElement$f } from './p-CWfyjOto.js';
-import { d as defineCustomElement$e } from './p-gE1FA92I.js';
-import { d as defineCustomElement$d } from './p-sqcHMrnp.js';
-import { d as defineCustomElement$c } from './p-DKbeIqEX.js';
-import { d as defineCustomElement$b } from './p-BNC69LYf.js';
-import { d as defineCustomElement$a } from './p-C4YY0EyH.js';
-import { d as defineCustomElement$9 } from './p-Wuj0cujc.js';
-import { d as defineCustomElement$8 } from './p-Dk00ccBn.js';
-import { d as defineCustomElement$7 } from './p-Bv1FixGj.js';
-import { d as defineCustomElement$6 } from './p-DZPnGx2N.js';
-import { d as defineCustomElement$5 } from './p-IpGJwBtp.js';
-import { d as defineCustomElement$4 } from './p-ss92nJ6D.js';
-import { d as defineCustomElement$3 } from './p-XkANRt3Q.js';
-import { d as defineCustomElement$2 } from './p-BmEXSmLf.js';
+import { d as defineCustomElement$J } from './p-R3_FOlEq.js';
+import { d as defineCustomElement$H } from './p-D-yItxA4.js';
+import { d as defineCustomElement$G } from './p-CuyjSEEv.js';
+import { d as defineCustomElement$F } from './p-BUfnTaTZ.js';
+import { d as defineCustomElement$E } from './p-CUXWZqch.js';
+import { d as defineCustomElement$D } from './p-DCZnqvsu.js';
+import { d as defineCustomElement$C } from './p-BHQ0WY5x.js';
+import { d as defineCustomElement$B } from './p-B3axAGVs.js';
+import { d as defineCustomElement$A } from './p-cwpKMDgH.js';
+import { d as defineCustomElement$z } from './p-BzY8ubZE.js';
+import { d as defineCustomElement$y } from './p-BiG71xua.js';
+import { d as defineCustomElement$x } from './p-DGuG1Bmj.js';
+import { d as defineCustomElement$w } from './p-CNc1l7mG.js';
+import { d as defineCustomElement$v } from './p-CaBVuofO.js';
+import { d as defineCustomElement$u } from './p-DrfpABSq.js';
+import { d as defineCustomElement$t } from './p-DYB1QfP2.js';
+import { d as defineCustomElement$s } from './p-CXoPln5K.js';
+import { d as defineCustomElement$r } from './p-qC7H9a3g.js';
+import { d as defineCustomElement$q } from './p-AZOh1kUH.js';
+import { d as defineCustomElement$p } from './p-jBcf1cHz.js';
+import { d as defineCustomElement$o } from './p-BvGLH5NQ.js';
+import { d as defineCustomElement$n } from './p-BmIVpWDh.js';
+import { d as defineCustomElement$m } from './p-U9xqUgfL.js';
+import { d as defineCustomElement$l } from './p-HB8K0xP0.js';
+import { d as defineCustomElement$k } from './p-Cqxe6wZe.js';
+import { d as defineCustomElement$j } from './p-DZ_KhOns.js';
+import { d as defineCustomElement$i } from './p-CtV1B-_5.js';
+import { d as defineCustomElement$h } from './p-NoKw4xu7.js';
+import { d as defineCustomElement$g } from './p-DPVPaPb1.js';
+import { d as defineCustomElement$f } from './p-raaSYxtA.js';
+import { d as defineCustomElement$e } from './p-CdFJ_FQz.js';
+import { d as defineCustomElement$d } from './p-D-U9fbV-.js';
+import { d as defineCustomElement$c } from './p-DMgdq7Zj.js';
+import { d as defineCustomElement$b } from './p-DKcMRnoh.js';
+import { d as defineCustomElement$a } from './p-CTP4wFFE.js';
+import { d as defineCustomElement$9 } from './p-DVtr8lsT.js';
+import { d as defineCustomElement$8 } from './p-BooZeojy.js';
+import { d as defineCustomElement$7 } from './p-CrVSg3t4.js';
+import { d as defineCustomElement$6 } from './p-DUBoFEsx.js';
+import { d as defineCustomElement$5 } from './p-CrXwf_vC.js';
+import { d as defineCustomElement$4 } from './p-DC0HL60H.js';
+import { d as defineCustomElement$3 } from './p-C8TAonIH.js';
+import { d as defineCustomElement$2 } from './p-G8kF15oY.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19908,6 +19911,11 @@ function keyDown(ev) {
             this.update.emit(createdItems);
             this.mutate.emit(createdItems.map(item => ({ action: 'create', data: item.data })));
         }
+        else if (ev.key === 'Escape') {
+            console.log('Clearing selection');
+            this.selected = [];
+            this.selectFields.emit([]);
+        }
     }
 }
 
@@ -20181,7 +20189,7 @@ function mouseDrop(event) {
                 width: data.defaultWidth,
                 pageDimensions: this.pageDimensions[this.pageNum - 1],
                 fontName: 'arial',
-                fontSize: 10,
+                fontSize: 8,
                 align: 'left',
                 signer: this.signer,
                 page: this.pageNum,
@@ -24426,7 +24434,7 @@ const getGroupData = (id) => {
       `;
 };
 
-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)}";
+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}.left-slot-wrapper{position:fixed;top:0.375rem;left:0.675rem;z-index:2000}slot{justify-content:center;align-items:center;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content;background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.right-slot-wrapper{position:fixed;top:0.375rem;right:0.675rem;z-index:2000}.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}.compose-toolbox{border-radius:0;border:none;background:white;padding:0.25rem;gap:0.75rem}.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$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentViewer extends H {
@@ -24494,10 +24502,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      */
     templateid;
     /**
-     * A JSON string containing the signer details. Only used in COMPOSE mode.
+     * A JSON string containing the recipient details. Only used in COMPOSE mode.
      * {string}
      */
-    signers;
+    recipients;
+    _recipients;
     zoom = 1.0; // hardcoded to scale the document to full canvas size
     pageNum = 1;
     pageCount = 1;
@@ -24523,30 +24532,18 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     mode = 'editor';
     modeHandler(_newMode, _oldMode) {
         if (_newMode === 'preview') {
-            this.showtoolbar = false;
             this.showstatusbar = false;
             this.readonly = true;
         }
         else if (_newMode === 'editor') {
-            this.showtoolbar = true;
             this.showstatusbar = true;
             this.readonly = false;
         }
         else if (_newMode === 'compose') {
-            this.showtoolbar = true;
             this.showstatusbar = true;
             this.readonly = false;
         }
     }
-    tableViewHandler(_newMode, _oldMode) {
-        if (_newMode === true) {
-            this.showPageFields(-1);
-        }
-        else if (_newMode === 'editor') {
-            this.showPageFields(this.pageNum);
-        }
-        this.queueRenderPage(this.pageNum);
-    }
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
@@ -24561,12 +24558,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.
      * {string}
      */
-    filterToolbox = null;
-    /**
-     * Whether the top toolbar is displayed.
-     * {boolean}
-     */
-    showtoolbar = false;
+    filtertoolbox = null;
     /**
      * Whether the bottom statusbar is displayed.
      * {boolean}
@@ -24577,11 +24569,6 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      * {boolean}
      */
     showpagepreview = false;
-    /**
-     * Whether or not the fields list is expanded.
-     * {boolean}
-     */
-    expandfields = false;
     /**
      * Whether the right panel (which can be default field properties or custom panel) is
      * displayed.
@@ -24641,7 +24628,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     id: btoa('rol' + crypto.randomUUID()),
                     name: 'Signer ' + (this._template.roles.length + 1),
                     roleType: event.detail.type,
-                    signerIndex: event.detail.type === 'WITNESS' ? 100 + parent.signerIndex : (this._template.roles.length === 0 ? 1 : newSignerIndex),
+                    signerIndex: event.detail.type === 'WITNESS' ? 100 + parent.signerIndex : this._template.roles.length === 0 ? 1 : newSignerIndex,
                     ordinal: event.detail.type === 'WITNESS' ? parent.ordinal + 1 : this._template.roles.length + 1,
                     signerParent: event.detail.parent,
                     experience: defaultExperience.id,
@@ -24652,6 +24639,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         this.update.emit(data);
         this.mutate.emit(data);
     }
+    // Updates are internal event between LS controls not to be confused with mutate
+    updateSigner(event) {
+        if (event.detail)
+            this.signer = event.detail;
+    }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
         const fields = Array.from(this.component.shadowRoot.querySelectorAll('ls-editor-field'));
@@ -24787,28 +24779,30 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
      */
     renderPage(pageNumber) {
         this.isPageRendering = true;
-        this.pdfDocument.getPage(pageNumber).then((page) => {
-            const viewport = page.getViewport({ scale: this.zoom });
-            this.canvas.height = Math.floor(viewport.height);
-            this.canvas.width = Math.floor(viewport.width);
-            // Render PDF page into canvas context
-            const renderContext = {
-                viewport,
-                canvasContext: this.ctx,
-            };
-            // Render page method
-            const renderTask = page.render(renderContext);
-            // Wait for rendering to finish
-            renderTask.promise.then(() => {
-                this.isPageRendering = false;
-                this.pageRendered.emit(this.pageNum);
-                if (this.pageNumPending !== null) {
-                    this.renderPage(this.pageNumPending); // New page rendering is pending
-                    this.pageChange.emit(this.pageNumPending); // emit
-                    this.pageNumPending = null;
-                }
+        if (this.pdfDocument !== undefined && this.pdfDocument !== null) {
+            this.pdfDocument.getPage(pageNumber).then((page) => {
+                const viewport = page.getViewport({ scale: this.zoom });
+                this.canvas.height = Math.floor(viewport.height);
+                this.canvas.width = Math.floor(viewport.width);
+                // Render PDF page into canvas context
+                const renderContext = {
+                    viewport,
+                    canvasContext: this.ctx,
+                };
+                // Render page method
+                const renderTask = page.render(renderContext);
+                // Wait for rendering to finish
+                renderTask.promise.then(() => {
+                    this.isPageRendering = false;
+                    this.pageRendered.emit(this.pageNum);
+                    if (this.pageNumPending !== null) {
+                        this.renderPage(this.pageNumPending); // New page rendering is pending
+                        this.pageChange.emit(this.pageNumPending); // emit
+                        this.pageNumPending = null;
+                    }
+                });
             });
-        });
+        }
     }
     queueRenderPage(pageNumber) {
         if (this.isPageRendering) {
@@ -24880,19 +24874,21 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             this.loadAndRender(this._template?.link);
         var dropTarget = this.component.shadowRoot.getElementById('ls-document-frame');
         // Used for single field selection
-        dropTarget.addEventListener('click', mouseClick.bind(this));
-        dropTarget.addEventListener('mousedown', mouseDown.bind(this));
-        dropTarget.addEventListener('mousemove', mouseMove.bind(this));
-        dropTarget.addEventListener('mouseup', mouseUp.bind(this));
-        dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
-        document.addEventListener('keydown', keyDown.bind(this));
-        dropTarget.addEventListener('dragenter', event => {
-            event.preventDefault();
-        });
-        dropTarget.addEventListener('dragover', event => {
-            event.preventDefault();
-        });
-        dropTarget.addEventListener('drop', mouseDrop.bind(this));
+        if (this.mode !== 'preview' || this._template?.locked === true) {
+            dropTarget.addEventListener('click', mouseClick.bind(this));
+            dropTarget.addEventListener('mousedown', mouseDown.bind(this));
+            dropTarget.addEventListener('mousemove', mouseMove.bind(this));
+            dropTarget.addEventListener('mouseup', mouseUp.bind(this));
+            dropTarget.addEventListener('dblclick', mouseDoubleClick.bind(this));
+            document.addEventListener('keydown', keyDown.bind(this));
+            dropTarget.addEventListener('dragenter', event => {
+                event.preventDefault();
+            });
+            dropTarget.addEventListener('dragover', event => {
+                event.preventDefault();
+            });
+            dropTarget.addEventListener('drop', mouseDrop.bind(this));
+        }
         this.generateFields();
     }
     // Generate all the field HTML elements that are required (for every page)
@@ -24921,7 +24917,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             const resultGroup = (await this.adapter.execute(this.token, getGroupData(this._template.groupId)));
             this.groupInfo = resultGroup.group;
             this.initViewer();
-            console.log(this._template);
+            if (this.mode === 'compose') {
+                this.manager = 'recipient';
+            }
+            this._recipients = JSON.parse(this.recipients.replace('\u0022', '"'));
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.pageCount = this._template.pageCount;
@@ -24941,10 +24940,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         attachAllTooltips(this.component.shadowRoot);
     }
     showTool(fieldFormType) {
-        return this.filterToolbox === null || this.filterToolbox.split('|').includes(fieldFormType);
+        return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: 'd8ce0d70a58af99fdd2c409e4054b58b64e3cb03' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'ab5e54ba96698f1013ecb180d238514722a64576' }), h("div", { key: '13ca00d49a5e90ccd87fd3848596b00da38f4de5', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '95f916a6ab5408b5464d041665d070cb03dd2a38', validationErrors: this.validationErrors, showDropDown: this.mode === "editor" })), h("div", { key: '3c4ab91e87f408ed58431b1f61d65598d82b302b', class: "page-header" }, h("p", { key: '9c83746dc708c3ce530530f853f89f7d048dc61c', class: "header-text-1" }, "Template Creation"), h("p", { key: 'bb7db7928e0116665762c8c9f4fa5dfc8490b86f' }, "/"), h("p", { key: 'b6e6c67e9f7078d792ec1fd52b0bb92035e5c30e', class: "header-text-2" }, this._template?.title)), h("form", { key: '5b4a2e3331860f327b4d027a6c4598ad5acf7a06', id: "ls-editor-form" }, this.mode !== "preview" ? (h("div", { id: "ls-left-box", class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { mode: this.mode, onManage: manager => {
+        return (h(Host, { key: 'a69b0674f4ee1423f3663e3a3a1b2b52ffb91ee7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'f1fbaa9fce9eb2848df44e99e0f8988a89a3c7bf' }), h("div", { key: 'c5a2e06e1f831a03278b42081ebccb7ddc4a6d84', class: "page-header" }, h("div", { key: 'b2d3fc361f2e3a1c411c5589499a890ab2deaa03', class: 'left-slot-wrapper' }, h("slot", { key: '8a39da556ccd35acccc65130e9253a283ffe9664', name: "left-button" })), h("div", { key: 'a27be93817874d436616a62656afd5fcdc412fdf', class: 'right-slot-wrapper' }, h("slot", { key: '658663b6d0e5c2a1108a432c68e91b78d32cfddd', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '8078631015dcb3b9c61f9db70b140d5aa6f4b53d' }, h("span", { key: '9c0b54dc0e7c9d23eb18f44a5c9a23e8c5b546e7', class: "header-text-1" }, "Template Creation"), h("span", { key: '353fe9482f0188262fbbfe80dbd90cfa9b78ee01' }, "/"), h("span", { key: 'a4efedbf6e339f4fb70209058f431a0ac97289ed', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '850613d2cb6564f9e581f4849915c296da6f715b' }, h("span", { key: 'e34a1c9932ec1e04da465eacba734feaae5b6091', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'd527566b2235088e3502da31be961583e38b9802' }, "/"), " ", h("span", { key: 'fb1bef4bb4e054a1d7f8bc1d2cd8894cc944885a', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: '7262cf8d8849c7b4864ed190ea10e99d86879175', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '76105fe985951ea1e94e48bf58f9de372f1c9c99', validationErrors: this.validationErrors }))), h("form", { key: '0c472e3c3f0850fc7f63f153cba6096d44dae3f8', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24953,15 +24952,20 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
                     participantManager.template = this._template;
                 }
+                else if (manager.detail === 'validation') {
+                    var validationManager = this.component.shadowRoot.getElementById('ls-validation-manager');
+                    console.log(validationManager);
+                    validationManager.validationErrors = this.validationErrors;
+                }
                 this.manager = manager.detail;
-            } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' })), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
+            } })), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Fields"), h("p", { class: "toolbox-section-description" }, "Drag and drop, or select and double click, to place fields on the Document.")), h("div", { class: "fields-box" }, this.signer > 0 && this.showTool('signature') && (h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", tooltip: "Use this field to collect Signatures from Participants", signer: this.signer })), this.signer === 0 && this.showTool('auto sign') && (h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "auto-sign", tooltip: "Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending", signer: this.signer })), this.showTool('text') && (h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", tooltip: "A field for collecting any plain text values such as: names, addresses or descriptions", signer: this.signer })), this.signer > 0 && this.showTool('signing date') && (h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", tooltip: "Automatically inserts the date upon completion by the assigned Participant", signer: this.signer })), this.showTool('date') && (h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", tooltip: "A field for collecting dates with built-in date formatting options", signer: this.signer })), this.showTool('email') && (h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", tooltip: "A Field to only accept entries formatted as an email address (e.g., example@example.com)", signer: this.signer })), this.showTool('initials') && (h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", tooltip: "Use this field anywhere Participants are required to Initial your document", signer: this.signer })), this.showTool('number') && (h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", tooltip: "A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)", signer: this.signer })), this.showTool('dropdown') && (h("ls-toolbox-field", { elementType: "dropdown", formElementType: "dropdown", label: "Dropdown", defaultHeight: 27, defaultWidth: 80, validation: 20, icon: "dropdown", tooltip: "Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes", signer: this.signer })), this.showTool('checkbox') && (h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", tooltip: "Places a checkbox on your document. Handy for T&Cs or  \u2714/\u2717 sections", signer: this.signer })), this.signer > 0 && this.showTool('regex') && (h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", tooltip: "Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need", signer: this.signer })), this.signer > 0 && this.showTool('image') && (h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", tooltip: "Use when you need Participants to upload their own images during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('file') && (h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", tooltip: "Use when you need Participants to upload their own documents during the signing process", signer: this.signer })), this.signer > 0 && this.showTool('drawn') && (h("ls-toolbox-field", { elementType: "drawn", formElementType: "drawn", label: "Drawn", defaultHeight: 120, defaultWidth: 120, validation: 90, icon: "pencil", tooltip: "Allow users to draw on the document using their mouse or touchscreen", signer: this.signer })))), h("ls-participant-manager", { id: "ls-participant-manager", class: this.manager === 'participant' ? 'toolbox' : 'hidden', editor: this }), h("ls-document-options", { id: "ls-document-options", class: this.manager === 'document' ? 'toolbox' : 'hidden' }), h("ls-validation-manager", { id: "ls-validation-manager", class: this.manager === 'validation' ? 'toolbox' : 'hidden' }), h("ls-recipient-manager", { id: "ls-recipient-manager", class: this.manager === 'recipient' ? 'toolbox compose-toolbox' : 'hidden' }, h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '18px', right: '16px' }, type: "compose" }), this._recipients &&
+            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors }))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("ls-toolbar", { key: 'a6d8ef8362453c0b506bf15ef6e81ed28390a035', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '2f087618c9a6459debbf38690f9ce2d936b6e7d3', id: "ls-mid-area" }, h("div", { key: 'a7883f796dcaa17d811ea02b3bf94dedd8460b98', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '44dd3294c9f2fbd37e7237f4fa6cf2177d5fa997', id: "ls-document-frame" }, h("canvas", { key: 'e0c972f5f70a103c6fa7e2a7ae478b75b717d67e', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'f22926e764e4f0c13dff4e95777bf27adf5ced77', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '45a5db8db4fb77eef714516d292a40c884e46910', id: "ls-box-selector" }))), h("ls-statusbar", { key: '7a1ad3aa1c76b5287b43b91798cb3f89289267bd', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: 'c4f1614420969b565b2962c385ff042df8e43e0d', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '2959ad6010449f4f6d01951bedae5200796a9ae0', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '39924ea9ddea3bbb3383d1a8d4f6b61a4a1eab38', id: "ls-mid-area" }, h("div", { key: '9c2c80da82a9acb733fa296910f140cc1dd37087', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'bdb359eae5be279d88edcaf767a9f8eab20c1693', id: "ls-document-frame" }, h("canvas", { key: '6cfe36af4cdfd989a154a9bac7851c5c2466013c', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'b0112a99fbfe8f1ee23260d710dc7a4d9bc2aff3', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'a1e2c19b9e0d236afd8ef9b9650d98b525895468', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'cee48ae238cefbe7473c606baa5566738509d564', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '1f9cd7f54541dc280d66f4564daffe65da8baaac', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
-        "mode": ["modeHandler"],
-        "displayTable": ["tableViewHandler"]
+        "mode": ["modeHandler"]
     }; }
     static get style() { return lsDocumentViewerCss; }
 }, [257, "ls-document-viewer", {
@@ -24970,7 +24974,8 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "userpool": [1],
         "endpoint": [1],
         "templateid": [1],
-        "signers": [1],
+        "recipients": [1],
+        "_recipients": [16],
         "zoom": [1026],
         "pageNum": [1026, "page-num"],
         "pageCount": [1026, "page-count"],
@@ -24979,11 +24984,9 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "mode": [1],
         "manager": [1025],
         "displayTable": [1028, "display-table"],
-        "filterToolbox": [1, "filter-toolbox"],
-        "showtoolbar": [4],
+        "filtertoolbox": [1],
         "showstatusbar": [4],
         "showpagepreview": [4],
-        "expandfields": [4],
         "readonly": [4],
         "showtableview": [4],
         "toolboxFilter": [1, "toolbox-filter"],
@@ -24997,15 +25000,14 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "pagePrev": [64],
         "unselect": [64],
         "setZoom": [64]
-    }, [[0, "mutate", "mutateHandler"], [0, "fieldTypeSelected", "handleFieldTypeSelected"], [0, "update", "updateHandler"], [0, "addParticipant", "addParticpantHandler"], [0, "selectFields", "selectFieldsHandler"], [0, "roleChange", "roleHandler"]], {
-        "mode": ["modeHandler"],
-        "displayTable": ["tableViewHandler"]
+    }, [[0, "mutate", "mutateHandler"], [0, "fieldTypeSelected", "handleFieldTypeSelected"], [0, "update", "updateHandler"], [0, "addParticipant", "addParticpantHandler"], [0, "changeSigner", "updateSigner"], [0, "selectFields", "selectFieldsHandler"], [0, "roleChange", "roleHandler"]], {
+        "mode": ["modeHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-helper-bar", "ls-icon", "ls-input-wrapper", "ls-keyboard-shortcuts", "ls-page-loader", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-tooltip", "ls-validation-tag"];
+    const components = ["ls-document-viewer", "ls-document-options", "ls-editor-field", "ls-editor-table", "ls-feature-column", "ls-field-alignment", "ls-field-content", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-format", "ls-field-placement", "ls-field-properties", "ls-field-properties-advanced", "ls-field-properties-autosign", "ls-field-properties-container", "ls-field-properties-date", "ls-field-properties-email", "ls-field-properties-file", "ls-field-properties-general", "ls-field-properties-image", "ls-field-properties-multiple", "ls-field-properties-number", "ls-field-properties-signature", "ls-field-properties-text", "ls-field-size", "ls-field-type-display", "ls-helper-bar", "ls-icon", "ls-input-wrapper", "ls-keyboard-shortcuts", "ls-page-loader", "ls-participant-card", "ls-participant-manager", "ls-participant-select", "ls-props-section", "ls-recipient-card", "ls-recipient-manager", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-tooltip", "ls-validation-manager", "ls-validation-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-document-viewer":
             if (!customElements.get(tagName)) {
@@ -25014,200 +25016,215 @@ function defineCustomElement$1() {
             break;
         case "ls-document-options":
             if (!customElements.get(tagName)) {
-                defineCustomElement$G();
+                defineCustomElement$J();
             }
             break;
         case "ls-editor-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$I();
             }
             break;
         case "ls-editor-table":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$H();
             }
             break;
         case "ls-feature-column":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$G();
             }
             break;
         case "ls-field-alignment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$F();
             }
             break;
         case "ls-field-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$E();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$D();
             }
             break;
         case "ls-field-distribute":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$C();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$B();
             }
             break;
         case "ls-field-format":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$A();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$z();
             }
             break;
         case "ls-field-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$y();
             }
             break;
         case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$x();
             }
             break;
         case "ls-field-properties-autosign":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$w();
             }
             break;
         case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$v();
             }
             break;
         case "ls-field-properties-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$u();
             }
             break;
         case "ls-field-properties-email":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$t();
             }
             break;
         case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$s();
             }
             break;
         case "ls-field-properties-general":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$r();
             }
             break;
         case "ls-field-properties-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$q();
             }
             break;
         case "ls-field-properties-multiple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$p();
             }
             break;
         case "ls-field-properties-number":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$o();
             }
             break;
         case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$n();
             }
             break;
         case "ls-field-properties-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$m();
             }
             break;
         case "ls-field-size":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$l();
             }
             break;
         case "ls-field-type-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$k();
             }
             break;
         case "ls-helper-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$j();
             }
             break;
         case "ls-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$i();
             }
             break;
         case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$h();
             }
             break;
         case "ls-keyboard-shortcuts":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$g();
             }
             break;
         case "ls-page-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$f();
             }
             break;
         case "ls-participant-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$e();
             }
             break;
         case "ls-participant-manager":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$d();
             }
             break;
         case "ls-participant-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$c();
             }
             break;
         case "ls-props-section":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-recipient-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-recipient-manager":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
             }
             break;
         case "ls-statusbar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "ls-toggle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "ls-toolbar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "ls-toolbox-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ls-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-validation-manager":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }