legalesign-document-viewer 0.4.5 → 0.4.7

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

@@ -1,49 +1,50 @@
-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$I, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-C8ZQeYj-.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
+import { a as alter, o as oob, f as findDimensions, r as recalculateCoordinates, b as findIn, u as updateTemplate, d as defineCustomElement$J, m as matchData, v as validate, c as moveField, g as getApiType, e as addField, h as getTemplate } from './p-CB6w78IO.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.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-DPtMBZYM.js';
-import { d as defineCustomElement$D } from './p-DCZnqvsu.js';
-import { d as defineCustomElement$C } from './p-FjzffTyc.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-DmszHmWG.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-B2etz1Ic.js';
-import { d as defineCustomElement$t } from './p-B7S9E2ci.js';
-import { d as defineCustomElement$s } from './p-QEWyXsBw.js';
-import { d as defineCustomElement$r } from './p-DKx68i7a.js';
-import { d as defineCustomElement$q } from './p-DDNZkGBj.js';
-import { d as defineCustomElement$p } from './p-DyU3O3tg.js';
-import { d as defineCustomElement$o } from './p-BzxhEsKd.js';
-import { d as defineCustomElement$n } from './p-BiOHci04.js';
-import { d as defineCustomElement$m } from './p-CCt1S0nA.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-B2ofj7BM.js';
-import { d as defineCustomElement$9 } from './p-DVtr8lsT.js';
-import { d as defineCustomElement$8 } from './p-BNX_U6jC.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-COypjAnE.js';
-import { d as defineCustomElement$4 } from './p-DC0HL60H.js';
-import { d as defineCustomElement$3 } from './p-BIqQK9GI.js';
-import { d as defineCustomElement$2 } from './p-G8kF15oY.js';
+import { d as defineCustomElement$K } from './p-DtfgidTY.js';
+import { d as defineCustomElement$I } from './p-CB2IouRT.js';
+import { d as defineCustomElement$H } from './p-C0vy7fEN.js';
+import { d as defineCustomElement$G } from './p-SymuFFwR.js';
+import { d as defineCustomElement$F } from './p-hgs41zT_.js';
+import { d as defineCustomElement$E } from './p-BHTy08Q0.js';
+import { d as defineCustomElement$D } from './p-CqvHgqQi.js';
+import { d as defineCustomElement$C } from './p-CYeSt5Fo.js';
+import { d as defineCustomElement$B } from './p-Ce_FwQKY.js';
+import { d as defineCustomElement$A } from './p-D5Lt75HV.js';
+import { d as defineCustomElement$z } from './p-BXjDp97T.js';
+import { d as defineCustomElement$y } from './p-4zazHXkZ.js';
+import { d as defineCustomElement$x } from './p-mtgdqmoW.js';
+import { d as defineCustomElement$w } from './p-BSoZFh0I.js';
+import { d as defineCustomElement$v } from './p-Ca9OGLvH.js';
+import { d as defineCustomElement$u } from './p-DjunXuAM.js';
+import { d as defineCustomElement$t } from './p-B8NAATla.js';
+import { d as defineCustomElement$s } from './p-BdTy5xDV.js';
+import { d as defineCustomElement$r } from './p-DhQKM6mo.js';
+import { d as defineCustomElement$q } from './p-D0oqtZ7v.js';
+import { d as defineCustomElement$p } from './p-BArB45ep.js';
+import { d as defineCustomElement$o } from './p-CnLhdSVD.js';
+import { d as defineCustomElement$n } from './p-DXAEPHmo.js';
+import { d as defineCustomElement$m } from './p-COuOscFT.js';
+import { d as defineCustomElement$l } from './p-DpEeDtkU.js';
+import { d as defineCustomElement$k } from './p-6l08SdGl.js';
+import { d as defineCustomElement$j } from './p-95nSEls8.js';
+import { d as defineCustomElement$i } from './p-Myru1I0U.js';
+import { d as defineCustomElement$h } from './p-DMtkP3At.js';
+import { d as defineCustomElement$g } from './p-DuLbniAl.js';
+import { d as defineCustomElement$f } from './p-Dp_6qCVD.js';
+import { d as defineCustomElement$e } from './p-Dt8uznTD.js';
+import { d as defineCustomElement$d } from './p-8ubyIwnl.js';
+import { d as defineCustomElement$c } from './p-C3Qs4SL0.js';
+import { d as defineCustomElement$b } from './p-CpKruuk0.js';
+import { d as defineCustomElement$a } from './p-DNojPpNK.js';
+import { d as defineCustomElement$9 } from './p-B28ZaK_Y.js';
+import { d as defineCustomElement$8 } from './p-bm-gsw1C.js';
+import { d as defineCustomElement$7 } from './p-CMrBTV-g.js';
+import { d as defineCustomElement$6 } from './p-BzEEnXM3.js';
+import { d as defineCustomElement$5 } from './p-2R-Lmtr0.js';
+import { d as defineCustomElement$4 } from './p-CwVY532N.js';
+import { d as defineCustomElement$3 } from './p-CRf3zadK.js';
+import { d as defineCustomElement$2 } from './p-CEARE5Dy.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -24434,7 +24435,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}.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)}";
+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:1rem;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{border:1px gray solid;width:29.375rem;min-width:24.375rem;padding:0.25rem;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.compose-toolbox{display:flex;flex-direction:column;width:100%;height:100%;overflow:none;border-radius:0;border:none;background:white;padding:0.25rem}.recipients-box{position:relative;display:flex;flex-direction:column;gap:0.75rem;overflow-y:auto;width:calc(100% + 0.25rem);padding:0.75rem 0.25rem 0.25rem 0.25rem}.scroll-gradient-top{position:absolute;top:5.9375rem;left:0;width:100%;height:1rem;background:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.scroll-gradient-bottom{position:absolute;bottom:1rem;left:0.75rem;width:calc(100% - 1.5rem);height:1rem;background:linear-gradient(to top, white, rgba(255, 255, 255, 0));pointer-events:none;z-index:100}.ls-editor-infobox{padding:0.125rem 0.5rem 0.125rem 0.5rem}#pdf-canvas{top:0px;left:0px;width:6.25rem;height:6.25rem;box-shadow:0 0.5rem 2rem 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 23.75rem 2rem 23.75rem}#ls-document-frame{position:relative;height:98vh;margin-right:auto;margin-left:auto}.prevButton{position:relative;bottom:1.875rem}.nextButton{position:relative;bottom:1.875rem}.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:2.25rem}.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 {
@@ -24442,11 +24443,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.pageRendered = createEvent(this, "pageRendered");
-        this.pageChange = createEvent(this, "pageChange");
-        this.selectFields = createEvent(this, "selectFields");
-        this.mutate = createEvent(this, "mutate");
-        this.update = createEvent(this, "update");
+        this.pageRendered = createEvent(this, "pageRendered", 7);
+        this.pageChange = createEvent(this, "pageChange", 7);
+        this.selectFields = createEvent(this, "selectFields", 7);
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
     }
     get component() { return this; }
     isPageRendering;
@@ -24544,6 +24545,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             this.readonly = false;
         }
     }
+    zoomChanged(newZoom) {
+        const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field');
+        fields.forEach(f => f.setAttribute('zoom', String(newZoom)));
+    }
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
@@ -24604,7 +24609,6 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => matchData.bind(this)(result)));
     }
     handleFieldTypeSelected(event) {
-        console.log(event);
         const fields = this.component.shadowRoot.querySelectorAll('ls-toolbox-field');
         fields.forEach(element => {
             element.isSelected = element.formElementType === event.detail.formElementType;
@@ -24641,8 +24645,25 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
     }
     // Updates are internal event between LS controls not to be confused with mutate
     updateSigner(event) {
-        if (event.detail)
+        if (event.detail) {
             this.signer = event.detail;
+            try {
+                const leftBox = this.component.shadowRoot?.getElementById('ls-recipient-manager');
+                if (leftBox) {
+                    const recipientsBox = leftBox.querySelector('.recipients-box');
+                    const card = recipientsBox?.querySelector(`ls-recipient-card[data-signer-index="${event.detail}"]`);
+                    if (card && recipientsBox) {
+                        recipientsBox.scrollTo({
+                            top: 0,
+                            behavior: 'smooth',
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                // fail silently
+            }
+        }
     }
     // Send selection changes to bars and panels if in use.
     selectFieldsHandler(event) {
@@ -24852,7 +24873,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                 this.selected = Array.from(fields).filter(fx => fx.selected);
             }
             else if (update.action === 'delete') {
+                console.log('Deleting field via syncChange', update.data);
                 const fi = this.component.shadowRoot.getElementById('ls-field-' + update.data.id);
+                if (!fi)
+                    return;
                 const fields = this._template.elementConnection.templateElements;
                 this._template = { ...this._template, elementConnection: { ...this._template.elementConnection, templateElements: fields.filter(f => f.id !== update.data.id) } };
                 this.component.shadowRoot.getElementById('ls-document-frame').removeChild(fi);
@@ -24943,7 +24967,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: '24e54561967e9bf975d292ce20392c45ab346a24' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'ab977b3f64fba964ff8fda1c2460c94ca6d2ff91' }), h("div", { key: '2d75654239867fe3950b549bc42733349c741e62', class: "page-header" }, h("div", { key: '4e62b62337608b3fe73be60088f72371c197db97', class: 'left-slot-wrapper' }, h("slot", { key: 'f2a2ef74789a65ab31a0775bb956a5b175c10cad', name: "left-button" })), h("div", { key: '01b97a05b5af8455b23f212564a6c7fb98767131', class: 'right-slot-wrapper' }, h("slot", { key: '076416c9f25ad58fdb384a45112b7036ca18dbf3', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '0bf8356c5dafd6a8c921b93696f9ec4e3bb4a7db' }, h("span", { key: 'c7f12e2e419aac679594ea822f40755e3b45d9c6', class: "header-text-1" }, "Template Creation"), h("span", { key: '2ee2d5f30b58ce0b7bc727b7bdf480e2775af8a9' }, "/"), h("span", { key: '710ead7ec8e82198a5cd57947ff383a7843fb160', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '2e0cadb9a499f941f433c4e99c5a3b686e2c99c7' }, h("span", { key: 'f23f3fb138f0cd002b5d2496dc170c292d018fc4', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'ce7b5d18a8fbbcb81ecaf6312b4dbc0c06049ee4' }, "/"), " ", h("span", { key: '3ba860f3579a068cb979214302fbebebeb4ff3ae', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: '250a1ec19cc70cdc54904970e45794b89bd16c73', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'ae9152ee7f09a04a3b1b90be1cdb014a316d1214', validationErrors: this.validationErrors }))), h("form", { key: '269870bd47c3e06dea241f82803c6aa48780c55d', 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 => {
+        return (h(Host, { key: '62402c417f86fc4281d953b1a4f8709d0f1d6cd7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '15a4db508ee9d16e44a9e84ac4c5be7f2c4f3686' }), h("div", { key: '76f9909417bc27bb9bc2f2524076f05d6c88e9bf', class: "page-header" }, h("div", { key: 'e859052dfb395701cc79b273e93877028628cf15', class: 'left-slot-wrapper' }, h("slot", { key: '34dfd7d2989bb1f96ee822517a709a4ed9820705', name: "left-button" })), h("div", { key: '1d6a035338ce475b564679b7ca1722133247d7b4', class: 'right-slot-wrapper' }, h("slot", { key: '266cce39667d3d4455ffc2f0ce2f20ee27058759', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'd54a9943c81adf4b8fe1906aa5c162b05a657373' }, h("span", { key: '7f81f4fa0ef0a94f1fac293aca22aa61ec273196', class: "header-text-1" }, "Template Creation"), h("span", { key: 'e949e88dc267a1d6317d222dbbdfde6a4953243a' }, "/"), h("span", { key: 'f9f9bad3007748b69d6a9371caab1f1cf0134be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: 'a3a1247ae9f2f3a0af62f8edf126d4a183062ba1', style: { display: 'flex', alignItems: 'center', gap: '0.25rem' } }, h("span", { key: '5481c7f19fd6f0bb01ef4ac2423bf31c89044fac', class: "header-text-1" }, "Compose"), " ", h("span", { key: '80b479704b6cb18916e573958930bb7e30b0010a' }, "/"), " ", h("ls-title-input", { key: 'c21d49a7e4eeaebbc8c1234f0b73d0a2b93aa5d3', template: this._template })))), this.mode === 'editor' && (h("div", { key: '574f02201940531dab79ea39680935d987bd581d', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'ce68bb580c64ef38b5ab9fe286a2c01dac46a802', validationErrors: this.validationErrors }))), h("form", { key: '13325057436527a2aee93c34d43cf2c9f9cd7e9e', 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;
@@ -24958,14 +24982,15 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     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" }, "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, fieldTypeSelected: this.fieldTypeSelected }))))), !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' ? 'compose-toolbox' : 'hidden' }, h("div", { class: 'scroll-gradient-top' }), h("div", { class: 'scroll-gradient-bottom' }), h("ls-validation-tag", { validationErrors: this.validationErrors, style: { position: 'absolute', top: '1.125rem', right: '1rem' }, type: "compose" }), h("div", { class: 'recipients-box' }, this._recipients &&
+            this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors, fieldTypeSelected: this.fieldTypeSelected, "data-signer-index": recipient.signerIndex })))))), !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)), this.selected.length > 0 && h("ls-toolbar", { key: 'c9d61564562f5e8e2daf2d64b7f53f46bfaddc72', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '82ccb98a66969e35302936fc04ea1a343c7b7c88', id: "ls-mid-area" }, h("div", { key: '0670c9bbff024b256513ca6f4dc85a5b890db617', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'b1f6c15bc46f650ddec12df17274a6b38dad2d23', id: "ls-document-frame" }, h("canvas", { key: 'a28c5f0300be933438c23430689c66f7960767e1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'e7f7c65385389d527ec56fb468e81d9c25d90ead', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'cff629b4589523648277eaf96019838de3e0a487', id: "ls-box-selector" }))), h("ls-statusbar", { key: '857d84f8b261c2383bf8c248a72f30a0b7ea25b8', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '5d87d0297bf80e96dc013fd957e93313bd988401', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "1.25rem" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '3dfaa11e478b1869eef9a3a4aa90a522b9a533b2', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'ecca8f68c1cb6745ee0322dd4b32d903f40ffc9e', id: "ls-mid-area" }, h("div", { key: '4e70ad5fb15755747fa78385a14b0b5c1629af2d', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: '49f3923bb36f1415e791771588aa11b4d5272cad', id: "ls-document-frame" }, h("canvas", { key: '6632d26bba751070acf649939d2e090763d3b7e1', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '5528e11634d1eeee5fdf1c40f390be5fcc53a757', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'd7db1734c8340f5914086992e96ee211aea42e51', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'b03bf614bc06460a573ee9a83756a1d1e424bd83', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '016522d8cf6bc49ab28eb556395d0d1d28f53a02', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
-        "mode": ["modeHandler"]
+        "mode": ["modeHandler"],
+        "zoom": ["zoomChanged"]
     }; }
     static get style() { return lsDocumentViewerCss; }
 }, [257, "ls-document-viewer", {
@@ -25001,13 +25026,14 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         "unselect": [64],
         "setZoom": [64]
     }, [[0, "mutate", "mutateHandler"], [0, "fieldTypeSelected", "handleFieldTypeSelected"], [0, "update", "updateHandler"], [0, "addParticipant", "addParticpantHandler"], [0, "changeSigner", "updateSigner"], [0, "selectFields", "selectFieldsHandler"], [0, "roleChange", "roleHandler"]], {
-        "mode": ["modeHandler"]
+        "mode": ["modeHandler"],
+        "zoom": ["zoomChanged"]
     }]);
 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-recipient-card", "ls-recipient-manager", "ls-statusbar", "ls-toggle", "ls-toolbar", "ls-toolbox-field", "ls-tooltip", "ls-validation-manager", "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-title-input", "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)) {
@@ -25016,190 +25042,195 @@ function defineCustomElement$1() {
             break;
         case "ls-document-options":
             if (!customElements.get(tagName)) {
-                defineCustomElement$J();
+                defineCustomElement$K();
             }
             break;
         case "ls-editor-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$I();
+                defineCustomElement$J();
             }
             break;
         case "ls-editor-table":
             if (!customElements.get(tagName)) {
-                defineCustomElement$H();
+                defineCustomElement$I();
             }
             break;
         case "ls-feature-column":
             if (!customElements.get(tagName)) {
-                defineCustomElement$G();
+                defineCustomElement$H();
             }
             break;
         case "ls-field-alignment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$G();
             }
             break;
         case "ls-field-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$F();
             }
             break;
         case "ls-field-dimensions":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$E();
             }
             break;
         case "ls-field-distribute":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$D();
             }
             break;
         case "ls-field-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "ls-field-format":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "ls-field-placement":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "ls-field-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "ls-field-properties-advanced":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "ls-field-properties-autosign":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "ls-field-properties-container":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "ls-field-properties-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "ls-field-properties-email":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "ls-field-properties-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "ls-field-properties-general":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "ls-field-properties-image":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "ls-field-properties-multiple":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "ls-field-properties-number":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "ls-field-properties-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "ls-field-properties-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "ls-field-size":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "ls-field-type-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "ls-helper-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "ls-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "ls-input-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "ls-keyboard-shortcuts":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "ls-page-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "ls-participant-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "ls-participant-manager":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "ls-participant-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "ls-props-section":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "ls-recipient-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "ls-recipient-manager":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "ls-statusbar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-title-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }