legalesign-document-viewer 0.1.2 → 0.1.3

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

@@ -1,40 +1,40 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
-import { a as alter, o as oob, m as matchData, g as getApiType } from './p-CjicL5jA.js';
-import { d as defineCustomElement$z } from './p-D7KC-w81.js';
-import { d as defineCustomElement$y } from './p-8QmwtD0L.js';
+import { a as alter, o as oob, m as matchData, g as getApiType } from './p-YpxkkST1.js';
+import { d as defineCustomElement$z } from './p-DlfoNwRm.js';
+import { d as defineCustomElement$y } from './p-BM12bWfu.js';
 import { d as defineCustomElement$x } from './p-C9AqDCzm.js';
-import { d as defineCustomElement$w } from './p-CpK4mw5O.js';
-import { d as defineCustomElement$v } from './p-pHw5Xziq.js';
-import { d as defineCustomElement$u } from './p-py-rQZsT.js';
-import { d as defineCustomElement$t } from './p-CgRZ91kw.js';
-import { d as defineCustomElement$s } from './p-BlTHDG0s.js';
-import { d as defineCustomElement$r } from './p-RFw2Bsri.js';
-import { d as defineCustomElement$q } from './p-DTWaVEKo.js';
-import { d as defineCustomElement$p } from './p-CnIzN0a9.js';
-import { d as defineCustomElement$o } from './p-BNKSb1yR.js';
-import { d as defineCustomElement$n } from './p-C93Q3D_9.js';
-import { d as defineCustomElement$m } from './p-CTraMHE_.js';
-import { d as defineCustomElement$l } from './p-BxXqIouU.js';
-import { d as defineCustomElement$k } from './p-DC7lKZUf.js';
-import { d as defineCustomElement$j } from './p-Ct78kJaE.js';
-import { d as defineCustomElement$i } from './p-B1Q1LddX.js';
-import { d as defineCustomElement$h } from './p-Dxupmj0q.js';
-import { d as defineCustomElement$g } from './p-B1X25Dz_.js';
-import { d as defineCustomElement$f } from './p-BI9SKPKN.js';
-import { d as defineCustomElement$e } from './p-D3GPRslH.js';
-import { d as defineCustomElement$d } from './p-DtHDNV_x.js';
-import { d as defineCustomElement$c } from './p-D3p38qOI.js';
-import { d as defineCustomElement$b } from './p-B9qKX3S0.js';
-import { d as defineCustomElement$a } from './p-CF583nkL.js';
-import { d as defineCustomElement$9 } from './p-RoGGAmRf.js';
-import { d as defineCustomElement$8 } from './p-CEGQ-SIb.js';
-import { d as defineCustomElement$7 } from './p-D2smwTu5.js';
-import { d as defineCustomElement$6 } from './p-IGbuOsUA.js';
-import { d as defineCustomElement$5 } from './p-GHcj9VUq.js';
-import { d as defineCustomElement$4 } from './p-Cs6tf1FE.js';
-import { d as defineCustomElement$3 } from './p-D1o9mMCC.js';
-import { d as defineCustomElement$2 } from './p-D4wPRNKc.js';
+import { d as defineCustomElement$w } from './p-Eq1IwvY5.js';
+import { d as defineCustomElement$v } from './p-DS45bzgL.js';
+import { d as defineCustomElement$u } from './p-D8LhlUeT.js';
+import { d as defineCustomElement$t } from './p-BuHDdmKo.js';
+import { d as defineCustomElement$s } from './p-BIp2Inn2.js';
+import { d as defineCustomElement$r } from './p-CTKLmmO3.js';
+import { d as defineCustomElement$q } from './p-DQthTAGK.js';
+import { d as defineCustomElement$p } from './p-Ciz2QmDr.js';
+import { d as defineCustomElement$o } from './p-R3D1POuE.js';
+import { d as defineCustomElement$n } from './p-DT0wHPjN.js';
+import { d as defineCustomElement$m } from './p-C-B8sqqJ.js';
+import { d as defineCustomElement$l } from './p-BEtorVYP.js';
+import { d as defineCustomElement$k } from './p-B3WqeRix.js';
+import { d as defineCustomElement$j } from './p-Bl6sK4Wf.js';
+import { d as defineCustomElement$i } from './p-DFgg8jhU.js';
+import { d as defineCustomElement$h } from './p-BHOXtRwH.js';
+import { d as defineCustomElement$g } from './p-B2NrT7P4.js';
+import { d as defineCustomElement$f } from './p-DKmDGdr_.js';
+import { d as defineCustomElement$e } from './p-DBphBrvt.js';
+import { d as defineCustomElement$d } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$c } from './p-D4hGTY-V.js';
+import { d as defineCustomElement$b } from './p-6hZjNCO9.js';
+import { d as defineCustomElement$a } from './p-BBfc4kkx.js';
+import { d as defineCustomElement$9 } from './p-CToSoYU7.js';
+import { d as defineCustomElement$8 } from './p-BDgNCPwS.js';
+import { d as defineCustomElement$7 } from './p-B_eQ2Gz-.js';
+import { d as defineCustomElement$6 } from './p-aHGDKnIY.js';
+import { d as defineCustomElement$5 } from './p-DXP-R4_o.js';
+import { d as defineCustomElement$4 } from './p-cFB-6W0U.js';
+import { d as defineCustomElement$3 } from './p-PVKJexBt.js';
+import { d as defineCustomElement$2 } from './p-X9ibhDjX.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -19858,7 +19858,7 @@ function addField(frame, data) {
     node.style.left = Math.floor(data.left * this.zoom) + 'px';
     node.style.height = Math.floor(data.height * this.zoom) + 'px';
     node.style.width = Math.floor(data.width * this.zoom) + 'px';
-    node.style.fontSize = Math.floor(data.fontSize) + 'pt';
+    node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
     node.style.alignContent = data.align;
     node.style.fontFamily = data.fontName;
     node.dataItem = data;
@@ -19870,7 +19870,7 @@ function moveField(item, data) {
     item.style.left = Math.floor(data.left * this.zoom) + 'px';
     item.style.height = Math.floor(data.height * this.zoom) + 'px';
     item.style.width = Math.floor(data.width * this.zoom) + 'px';
-    item.style.fontSize = Math.floor(data.fontSize) + 'pt';
+    item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
     item.style.fontFamily = data.fontName;
     item.style.textAlign = data.align;
     item.dataItem = data;
@@ -24333,7 +24333,7 @@ class LsDocumentAdapter {
     }
 }
 
-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}.leftBox{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%}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{display:flex;flex-direction:column;width:100%}.document-frame-wrapper{position:relative;padding:0 1.25rem;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow:auto}.spacer{min-height:5.5rem;width:100%}#ls-document-frame{position:relative;height:98vh;max-width:100%;max-height:100%;margin:0px;padding:2px;scrollbar-width:auto;scrollbar-color: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;max-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%}.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}#my-field-panel{position:relative;height:calc(100% - 4.313rem)}.leftBox{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%}.left-box-inner{position:relative;display:flex;height:100%;padding:0.75rem;gap:0.75rem}.rightBox{width:200px;border:1px gray solid;width:470px;min-width:390px;padding:4px;font-family:inherit}.toolbox{display:flex;flex-direction:column;width:100%;height:100%;border-radius:8px;border:1px solid var(--gray-30, #e0e2e5);background:var(--gray-10, #f7f8fa);padding:0.75rem;gap:1rem;overflow-y:auto}.ls-editor-infobox{padding:2px 8px 2px 8px}#pdf-canvas{top:0px;left:0px;width:100px;height:100px}#ls-mid-area{display:flex;flex-direction:column;width:100%}.document-frame-wrapper{position:relative;padding:0 1.25rem;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow-y:auto}.spacer{min-height:5.5rem;width:100%}#ls-document-frame{position:relative;height:98vh;max-width:100%;max-height:100%;margin:0px;padding:2px;scrollbar-width:auto;scrollbar-color: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;max-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 {
@@ -24501,7 +24501,7 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         console.log(event);
         if (this.token)
             event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => {
-                if (me.action === "create")
+                if (me.action === 'create')
                     matchData.bind(this)(result);
             }));
     }
@@ -24519,9 +24519,8 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         if (propPanel)
             propPanel.dataItem = event.detail;
     }
-    // Send selection changes to bars and panels if in use.
+    // Send role selection changes to bars and panels
     roleHandler(event) {
-        console.log(event.detail);
         this.signer = event.detail;
     }
     //
@@ -24735,8 +24734,11 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
         if (this.token && !this._template)
             this.load();
     }
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
     render() {
-        return (h(Host, { key: '1f453e1a26fb18ca58e7a76e034c392c69036299' }, h(h.Fragment, null, h("div", { key: 'a243987e02be03141f7ae38331ac6e31cbd54155', class: "page-header" }, h("p", { key: 'e5566866caf1fe53d7ca016b8983db466170f5a3', class: "header-text-1" }, "Template Creation"), h("p", { key: '56141469d2e9fe4c254d4fff5adb685b575b2760' }, "/"), h("p", { key: '8b3049337e87a0b6128b3e6c4cb61c7d86973f75', class: "header-text-2" }, "Template Name")), h("form", { key: 'feec289147e5545e573419c801d75a4cfce0805a', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
+        return (h(Host, { key: '5211ee24231dedce593a1b638daa121267cfbf75' }, h(h.Fragment, null, h("div", { key: '5f0b68c90b8935e4d9a0a37f70b1e36d669d2c02', class: "page-header" }, h("p", { key: 'dcd2efb1551dc8e7082e2fa25a11055125527b83', class: "header-text-1" }, "Template Creation"), h("p", { key: '59c33765a7ec5ff160fe5a058acdc18e017a162c' }, "/"), h("p", { key: '108722e31b9560fea2b42f197f98203e03c07b26', class: "header-text-2" }, "Template Name")), h("form", { key: '2681b25088e5f78e5169e4eccc32d8e7b9651887', id: "ls-editor-form" }, this.showtoolbox === true ? (h("div", { class: "leftBox" }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, h("ls-feature-column", { onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -24746,10 +24748,10 @@ const LsDocumentViewer$1 = /*@__PURE__*/ proxyCustomElement(class LsDocumentView
                     participantManager.template = this._template;
                 }
                 this.manager = manager.detail;
-            } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature" }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials" }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender" }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date" }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol" }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text" }), h("div", { class: 'expand-fields-row' }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true, onClick: () => (this.expandfields = !this.expandfields) }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag" }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check" }), h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "signature" }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code" }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph" }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload" }))))), 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.showrightpanel && !this.displayTable && (h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
+            } }), h("div", { id: "ls-toolbox", class: this.manager === 'toolbox' ? 'toolbox' : 'hidden' }, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Participant Fields"), h("p", { class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "signature", formElementType: "signature", label: "Signature", defaultHeight: 27, defaultWidth: 120, validation: 0, icon: "signature", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "initials", formElementType: "initials", label: "Initials", defaultHeight: 27, defaultWidth: 120, validation: 2000, icon: "initials", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "date", formElementType: "date", label: "Date", defaultHeight: 27, defaultWidth: 80, validation: 2, icon: "calender", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "signing date", formElementType: "signing date", label: "Signing Date", defaultHeight: 27, defaultWidth: 120, validation: 30, icon: "auto-date", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "email", formElementType: "email", label: "Email", defaultHeight: 27, defaultWidth: 120, validation: 1, icon: "at-symbol", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "text", formElementType: "text", label: "Text", defaultHeight: 27, defaultWidth: 100, validation: 0, icon: "text", color: this.signerColor(this.signer) }), h("div", { class: 'expand-fields-row' }, h("ls-icon", { name: this.expandfields ? 'expand' : 'collapse', size: "20", solid: true, onClick: () => (this.expandfields = !this.expandfields) }), h("p", null, "More Field Types")), this.expandfields && (h("div", { class: "fields-box" }, h("ls-toolbox-field", { elementType: "number", formElementType: "number", label: "Number", defaultHeight: 27, defaultWidth: 80, validation: 50, icon: "hashtag", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "checkbox", formElementType: "checkbox", label: "Checkbox", defaultHeight: 27, defaultWidth: 27, validation: 25, icon: "check", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "auto sign", formElementType: "auto sign", label: "Auto Sign", defaultHeight: 27, defaultWidth: 120, validation: 3000, icon: "signature", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "regex", formElementType: "regex", label: "Regex", defaultHeight: 27, defaultWidth: 120, validation: 93, icon: "code", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "image", formElementType: "image", label: "Image", defaultHeight: 27, defaultWidth: 120, validation: 90, icon: "photograph", color: this.signerColor(this.signer) }), h("ls-toolbox-field", { elementType: "file", formElementType: "file", label: "File", defaultHeight: 27, defaultWidth: 120, validation: 74, icon: "upload", color: this.signerColor(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.showrightpanel && !this.displayTable && (h("div", { class: this.selected && this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '47de0db018bf53cfdb7bb0ef26757b973d438ff1', id: "ls-mid-area" }, h("ls-toolbar", { key: '53aa0b226cd6fa2000d5f1b6790ce83c2e95b05e', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: 'bb7a1c9c7e3fef860df212303da6a2b7e1b35b1e', class: 'document-frame-wrapper' }, h("div", { key: '80ebd016a88097d4a7291c7c419fae18575e9062', class: 'spacer' }), h("div", { key: 'dc0aeca84345c7286b15c31b843c8cea64e47378', id: "ls-document-frame" }, h("canvas", { key: '0ab999ef6ed67ae2089abbbc0ed14a855d5ad031', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'acb7c1d83252347041f545af635906f00ad4970b', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '4440d60d83c57fef4301a8758ca96445b4fca884', id: "ls-box-selector" }))), h("ls-statusbar", { key: '728417e11b223cadcf4c2676de701db150892bbe', editor: this }))))));
+            } }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), h("div", { key: '31cd692fde3f164d578b7ddc362cb1e663a51b4d', id: "ls-mid-area" }, h("ls-toolbar", { key: 'f696e4f47618440e27d8233aa2d5ac931374afb5', id: "ls-toolbar", dataItem: this.selected ? this.selected.map(s => s.dataItem) : null, template: this._template }), h("div", { key: '18e06d7f77ad6d31e8fbc98ff2a01c1d3ec47361', class: 'document-frame-wrapper' }, h("div", { key: '67565650c5f50326f944ef09787ee6a72c10d203', class: 'spacer' }), h("div", { key: '7cf6ab23d1553d8dc9910546f8085f7558cbefcd', id: "ls-document-frame" }, h("canvas", { key: 'f8d2d988a2b668224e63982029c55a102b5b7729', id: "pdf-canvas", class: this.displayTable ? 'hidden' : '' }), h("ls-editor-table", { key: 'c33d5c80ef5ae794d85be860524b809d84ea108b', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'd0cef83695bc3e2afceadcea12fb5563788489a9', id: "ls-box-selector" }))), h("ls-statusbar", { key: '5b814c90c929b917b9f8f0bfe1c6476294b4dfb1', editor: this }))))));
     }
     static get watchers() { return {
         "mode": ["modeHandler"],