legalesign-document-viewer 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (189) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/ls-document-options_35.cjs.entry.js +109 -51
  3. package/dist/cjs/ls-document-options_35.cjs.entry.js.map +1 -1
  4. package/dist/cjs/ls-document-viewer.cjs.js +1 -1
  5. package/dist/collection/components/ls-document-viewer/defaultPalette.js.map +1 -1
  6. package/dist/collection/components/ls-document-viewer/editorCalculator.js +2 -2
  7. package/dist/collection/components/ls-document-viewer/editorCalculator.js.map +1 -1
  8. package/dist/collection/components/ls-document-viewer/ls-document-viewer.css +11 -1
  9. package/dist/collection/components/ls-document-viewer/ls-document-viewer.js +8 -6
  10. package/dist/collection/components/ls-document-viewer/ls-document-viewer.js.map +1 -1
  11. package/dist/collection/components/ls-editor-field/ls-editor-field.js +6 -3
  12. package/dist/collection/components/ls-editor-field/ls-editor-field.js.map +1 -1
  13. package/dist/collection/components/ls-field-placement/ls-field-placement.css +27 -9
  14. package/dist/collection/components/ls-field-placement/ls-field-placement.js +1 -1
  15. package/dist/collection/components/ls-field-placement/ls-field-placement.js.map +1 -1
  16. package/dist/collection/components/ls-field-properties/ls-field-properties.css +1 -0
  17. package/dist/collection/components/ls-field-properties/ls-field-properties.js +1 -1
  18. package/dist/collection/components/ls-field-properties-autosign/ls-field-properties-autosign.js +1 -1
  19. package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.css +173 -10
  20. package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js +36 -1
  21. package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js.map +1 -1
  22. package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.css +178 -4
  23. package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.js +36 -1
  24. package/dist/collection/components/ls-field-properties-email/ls-field-properties-email.js.map +1 -1
  25. package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.css +178 -3
  26. package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.js +36 -1
  27. package/dist/collection/components/ls-field-properties-file/ls-field-properties-file.js.map +1 -1
  28. package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js +1 -1
  29. package/dist/collection/components/ls-field-properties-image/ls-field-properties-image.js +1 -1
  30. package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.js +1 -1
  31. package/dist/collection/components/ls-field-properties-number/ls-field-properties-number.js +1 -1
  32. package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.css +49 -4
  33. package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js +12 -1
  34. package/dist/collection/components/ls-field-properties-signature/ls-field-properties-signature.js.map +1 -1
  35. package/dist/collection/components/ls-field-properties-text/ls-field-properties-text.js +1 -1
  36. package/dist/collection/components/ls-field-size/ls-field-size.js +1 -1
  37. package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js +1 -1
  38. package/dist/collection/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.js +1 -1
  39. package/dist/collection/components/ls-formfield/inputs/ls-select-input/ls-select-input.js +1 -1
  40. package/dist/collection/components/ls-formfield/inputs/ls-text-input/ls-text-input.js +1 -1
  41. package/dist/collection/components/ls-formfield/inputs/ls-textarea-input/ls-textarea-input.js +1 -1
  42. package/dist/collection/components/ls-formfield/ls-formfield.js +2 -2
  43. package/dist/collection/components/ls-icon/ls-icon.js +1 -1
  44. package/dist/collection/components/ls-participant-manager/ls-participant-manager.js +2 -2
  45. package/dist/collection/components/ls-participant-select/ls-participant-select.js +4 -4
  46. package/dist/collection/components/ls-statusbar/ls-statusbar.js +3 -3
  47. package/dist/collection/components/ls-toggle/ls-toggle.js +1 -1
  48. package/dist/collection/components/ls-toolbar/ls-toolbar.js +1 -1
  49. package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.css +3 -4
  50. package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js +25 -1
  51. package/dist/collection/components/ls-toolbox-field/ls-toolbox-field.js.map +1 -1
  52. package/dist/components/ls-document-options.js +1 -1
  53. package/dist/components/ls-document-viewer.js +45 -43
  54. package/dist/components/ls-document-viewer.js.map +1 -1
  55. package/dist/components/ls-editor-field.js +1 -1
  56. package/dist/components/ls-feature-column.js +1 -1
  57. package/dist/components/ls-field-alignment.js +1 -1
  58. package/dist/components/ls-field-dimensions.js +1 -1
  59. package/dist/components/ls-field-distribute.js +1 -1
  60. package/dist/components/ls-field-format.js +1 -1
  61. package/dist/components/ls-field-placement.js +1 -1
  62. package/dist/components/ls-field-properties-autosign.js +1 -1
  63. package/dist/components/ls-field-properties-date.js +1 -1
  64. package/dist/components/ls-field-properties-email.js +1 -1
  65. package/dist/components/ls-field-properties-file.js +1 -1
  66. package/dist/components/ls-field-properties-general.js +1 -1
  67. package/dist/components/ls-field-properties-image.js +1 -1
  68. package/dist/components/ls-field-properties-multiple.js +1 -1
  69. package/dist/components/ls-field-properties-number.js +1 -1
  70. package/dist/components/ls-field-properties-signature.js +1 -1
  71. package/dist/components/ls-field-properties-text.js +1 -1
  72. package/dist/components/ls-field-properties.js +1 -1
  73. package/dist/components/ls-field-size.js +1 -1
  74. package/dist/components/ls-formfield.js +1 -1
  75. package/dist/components/ls-icon.js +1 -1
  76. package/dist/components/ls-number-input.js +1 -1
  77. package/dist/components/ls-participant-manager.js +1 -1
  78. package/dist/components/ls-participant-select.js +1 -1
  79. package/dist/components/ls-radio-input.js +1 -1
  80. package/dist/components/ls-select-input.js +1 -1
  81. package/dist/components/ls-statusbar.js +1 -1
  82. package/dist/components/ls-text-input.js +1 -1
  83. package/dist/components/ls-textarea-input.js +1 -1
  84. package/dist/components/ls-toggle.js +1 -1
  85. package/dist/components/ls-toolbar.js +1 -1
  86. package/dist/components/ls-toolbox-field.js +1 -1
  87. package/dist/components/{p-B9qKX3S0.js → p-6hZjNCO9.js} +5 -5
  88. package/dist/components/{p-B9qKX3S0.js.map → p-6hZjNCO9.js.map} +1 -1
  89. package/dist/components/{p-B1X25Dz_.js → p-B2NrT7P4.js} +5 -5
  90. package/dist/components/{p-B1X25Dz_.js.map → p-B2NrT7P4.js.map} +1 -1
  91. package/dist/components/{p-DC7lKZUf.js → p-B3WqeRix.js} +5 -5
  92. package/dist/components/{p-DC7lKZUf.js.map → p-B3WqeRix.js.map} +1 -1
  93. package/dist/components/{p-CF583nkL.js → p-BBfc4kkx.js} +7 -7
  94. package/dist/components/{p-CF583nkL.js.map → p-BBfc4kkx.js.map} +1 -1
  95. package/dist/components/{p-CEGQ-SIb.js → p-BDgNCPwS.js} +4 -4
  96. package/dist/components/{p-CEGQ-SIb.js.map → p-BDgNCPwS.js.map} +1 -1
  97. package/dist/components/{p-BxXqIouU.js → p-BEtorVYP.js} +5 -5
  98. package/dist/components/{p-BxXqIouU.js.map → p-BEtorVYP.js.map} +1 -1
  99. package/dist/components/p-BHOXtRwH.js +74 -0
  100. package/dist/components/p-BHOXtRwH.js.map +1 -0
  101. package/dist/components/{p-BlTHDG0s.js → p-BIp2Inn2.js} +3 -3
  102. package/dist/components/{p-BlTHDG0s.js.map → p-BIp2Inn2.js.map} +1 -1
  103. package/dist/components/{p-8QmwtD0L.js → p-BM12bWfu.js} +9 -6
  104. package/dist/components/p-BM12bWfu.js.map +1 -0
  105. package/dist/components/{p-D2smwTu5.js → p-B_eQ2Gz-.js} +7 -7
  106. package/dist/components/{p-D2smwTu5.js.map → p-B_eQ2Gz-.js.map} +1 -1
  107. package/dist/components/{p-Ct78kJaE.js → p-Bl6sK4Wf.js} +5 -5
  108. package/dist/components/{p-Ct78kJaE.js.map → p-Bl6sK4Wf.js.map} +1 -1
  109. package/dist/components/{p-DtHDNV_x.js → p-BoA6mH9f.js} +3 -3
  110. package/dist/components/{p-DtHDNV_x.js.map → p-BoA6mH9f.js.map} +1 -1
  111. package/dist/components/{p-CgRZ91kw.js → p-BuHDdmKo.js} +3 -3
  112. package/dist/components/{p-CgRZ91kw.js.map → p-BuHDdmKo.js.map} +1 -1
  113. package/dist/components/p-C-B8sqqJ.js +77 -0
  114. package/dist/components/p-C-B8sqqJ.js.map +1 -0
  115. package/dist/components/p-C00GqV9f.js.map +1 -1
  116. package/dist/components/p-CTKLmmO3.js +72 -0
  117. package/dist/components/p-CTKLmmO3.js.map +1 -0
  118. package/dist/components/{p-RoGGAmRf.js → p-CToSoYU7.js} +4 -4
  119. package/dist/components/{p-RoGGAmRf.js.map → p-CToSoYU7.js.map} +1 -1
  120. package/dist/components/{p-CnIzN0a9.js → p-Ciz2QmDr.js} +5 -5
  121. package/dist/components/{p-CnIzN0a9.js.map → p-Ciz2QmDr.js.map} +1 -1
  122. package/dist/components/{p-D3p38qOI.js → p-D4hGTY-V.js} +4 -4
  123. package/dist/components/{p-D3p38qOI.js.map → p-D4hGTY-V.js.map} +1 -1
  124. package/dist/components/{p-py-rQZsT.js → p-D8LhlUeT.js} +3 -3
  125. package/dist/components/{p-py-rQZsT.js.map → p-D8LhlUeT.js.map} +1 -1
  126. package/dist/components/{p-D3GPRslH.js → p-DBphBrvt.js} +10 -10
  127. package/dist/components/{p-D3GPRslH.js.map → p-DBphBrvt.js.map} +1 -1
  128. package/dist/components/{p-B1Q1LddX.js → p-DFgg8jhU.js} +5 -5
  129. package/dist/components/{p-B1Q1LddX.js.map → p-DFgg8jhU.js.map} +1 -1
  130. package/dist/components/{p-BI9SKPKN.js → p-DKmDGdr_.js} +3 -3
  131. package/dist/components/{p-BI9SKPKN.js.map → p-DKmDGdr_.js.map} +1 -1
  132. package/dist/components/{p-DTWaVEKo.js → p-DQthTAGK.js} +17 -17
  133. package/dist/components/p-DQthTAGK.js.map +1 -0
  134. package/dist/components/{p-pHw5Xziq.js → p-DS45bzgL.js} +3 -3
  135. package/dist/components/{p-pHw5Xziq.js.map → p-DS45bzgL.js.map} +1 -1
  136. package/dist/components/p-DT0wHPjN.js +77 -0
  137. package/dist/components/p-DT0wHPjN.js.map +1 -0
  138. package/dist/components/{p-GHcj9VUq.js → p-DXP-R4_o.js} +4 -4
  139. package/dist/components/{p-GHcj9VUq.js.map → p-DXP-R4_o.js.map} +1 -1
  140. package/dist/components/{p-D7KC-w81.js → p-DlfoNwRm.js} +10 -10
  141. package/dist/components/{p-D7KC-w81.js.map → p-DlfoNwRm.js.map} +1 -1
  142. package/dist/components/{p-CpK4mw5O.js → p-Eq1IwvY5.js} +3 -3
  143. package/dist/components/{p-CpK4mw5O.js.map → p-Eq1IwvY5.js.map} +1 -1
  144. package/dist/components/{p-D1o9mMCC.js → p-PVKJexBt.js} +9 -9
  145. package/dist/components/{p-D1o9mMCC.js.map → p-PVKJexBt.js.map} +1 -1
  146. package/dist/components/p-R3D1POuE.js +77 -0
  147. package/dist/components/p-R3D1POuE.js.map +1 -0
  148. package/dist/components/p-X9ibhDjX.js +91 -0
  149. package/dist/components/p-X9ibhDjX.js.map +1 -0
  150. package/dist/components/{p-CjicL5jA.js → p-YpxkkST1.js} +3 -3
  151. package/dist/components/{p-CjicL5jA.js.map → p-YpxkkST1.js.map} +1 -1
  152. package/dist/components/{p-IGbuOsUA.js → p-aHGDKnIY.js} +4 -4
  153. package/dist/components/{p-IGbuOsUA.js.map → p-aHGDKnIY.js.map} +1 -1
  154. package/dist/components/{p-Cs6tf1FE.js → p-cFB-6W0U.js} +3 -3
  155. package/dist/components/{p-Cs6tf1FE.js.map → p-cFB-6W0U.js.map} +1 -1
  156. package/dist/esm/loader.js +1 -1
  157. package/dist/esm/ls-document-options_35.entry.js +109 -51
  158. package/dist/esm/ls-document-options_35.entry.js.map +1 -1
  159. package/dist/esm/ls-document-viewer.js +1 -1
  160. package/dist/ls-document-viewer/{editorUtils-DbS95k5h.js.map → editorUtils-ClLXAGwA.js.map} +1 -1
  161. package/dist/ls-document-viewer/ls-document-viewer.esm.js +1 -1
  162. package/dist/ls-document-viewer/{p-85c0f6fa.entry.js → p-9946fb79.entry.js} +5 -5
  163. package/dist/ls-document-viewer/p-9946fb79.entry.js.map +1 -0
  164. package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts +1 -0
  165. package/dist/types/components/ls-field-properties-date/ls-field-properties-date.d.ts +2 -0
  166. package/dist/types/components/ls-field-properties-email/ls-field-properties-email.d.ts +2 -0
  167. package/dist/types/components/ls-field-properties-file/ls-field-properties-file.d.ts +2 -0
  168. package/dist/types/components/ls-field-properties-signature/ls-field-properties-signature.d.ts +1 -0
  169. package/dist/types/components/ls-toolbox-field/ls-toolbox-field.d.ts +4 -0
  170. package/dist/types/components.d.ts +34 -0
  171. package/package.json +1 -1
  172. package/dist/components/p-8QmwtD0L.js.map +0 -1
  173. package/dist/components/p-BNKSb1yR.js +0 -49
  174. package/dist/components/p-BNKSb1yR.js.map +0 -1
  175. package/dist/components/p-C93Q3D_9.js +0 -49
  176. package/dist/components/p-C93Q3D_9.js.map +0 -1
  177. package/dist/components/p-CTraMHE_.js +0 -49
  178. package/dist/components/p-CTraMHE_.js.map +0 -1
  179. package/dist/components/p-D4wPRNKc.js +0 -86
  180. package/dist/components/p-D4wPRNKc.js.map +0 -1
  181. package/dist/components/p-DTWaVEKo.js.map +0 -1
  182. package/dist/components/p-Dxupmj0q.js +0 -63
  183. package/dist/components/p-Dxupmj0q.js.map +0 -1
  184. package/dist/components/p-RFw2Bsri.js +0 -72
  185. package/dist/components/p-RFw2Bsri.js.map +0 -1
  186. package/dist/ls-document-viewer/ls-document-viewer.entry.esm.js.map +0 -1
  187. package/dist/ls-document-viewer/ls-document-viewer.entry.js +0 -24928
  188. package/dist/ls-document-viewer/ls-document-viewer.entry.js.map +0 -1
  189. package/dist/ls-document-viewer/p-85c0f6fa.entry.js.map +0 -1
package/dist/esm/ls-document-options_35.entry.js CHANGED
@@ -19845,7 +19845,7 @@ function addField(frame, data) {
19845
19845
  node.style.left = Math.floor(data.left * this.zoom) + 'px';
19846
19846
  node.style.height = Math.floor(data.height * this.zoom) + 'px';
19847
19847
  node.style.width = Math.floor(data.width * this.zoom) + 'px';
19848
- node.style.fontSize = Math.floor(data.fontSize) + 'pt';
19848
+ node.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
19849
19849
  node.style.alignContent = data.align;
19850
19850
  node.style.fontFamily = data.fontName;
19851
19851
  node.dataItem = data;
@@ -19857,7 +19857,7 @@ function moveField(item, data) {
19857
19857
  item.style.left = Math.floor(data.left * this.zoom) + 'px';
19858
19858
  item.style.height = Math.floor(data.height * this.zoom) + 'px';
19859
19859
  item.style.width = Math.floor(data.width * this.zoom) + 'px';
19860
- item.style.fontSize = Math.floor(data.fontSize) + 'pt';
19860
+ item.style.fontSize = Math.floor(data.fontSize * this.zoom) + 'pt';
19861
19861
  item.style.fontFamily = data.fontName;
19862
19862
  item.style.textAlign = data.align;
19863
19863
  item.dataItem = data;
@@ -24505,7 +24505,7 @@ class LsDocumentAdapter {
24505
24505
  }
24506
24506
  }
24507
24507
 
24508
- 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)}";
24508
+ 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)}";
24509
24509
 
24510
24510
  pdfExports.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js';
24511
24511
  const LsDocumentViewer = class {
@@ -24671,7 +24671,7 @@ const LsDocumentViewer = class {
24671
24671
  console.log(event);
24672
24672
  if (this.token)
24673
24673
  event.detail.forEach(me => this.adapter.handleEvent(me, this.token).then(result => {
24674
- if (me.action === "create")
24674
+ if (me.action === 'create')
24675
24675
  matchData.bind(this)(result);
24676
24676
  }));
24677
24677
  }
@@ -24689,9 +24689,8 @@ const LsDocumentViewer = class {
24689
24689
  if (propPanel)
24690
24690
  propPanel.dataItem = event.detail;
24691
24691
  }
24692
- // Send selection changes to bars and panels if in use.
24692
+ // Send role selection changes to bars and panels
24693
24693
  roleHandler(event) {
24694
- console.log(event.detail);
24695
24694
  this.signer = event.detail;
24696
24695
  }
24697
24696
  //
@@ -24905,8 +24904,11 @@ const LsDocumentViewer = class {
24905
24904
  if (this.token && !this._template)
24906
24905
  this.load();
24907
24906
  }
24907
+ signerColor = (index) => {
24908
+ return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
24909
+ };
24908
24910
  render() {
24909
- 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 => {
24911
+ 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 => {
24910
24912
  if (manager.detail === 'document') {
24911
24913
  var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
24912
24914
  documentManager.template = this._template;
@@ -24916,10 +24918,10 @@ const LsDocumentViewer = class {
24916
24918
  participantManager.template = this._template;
24917
24919
  }
24918
24920
  this.manager = manager.detail;
24919
- } }), 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 => {
24921
+ } }), 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 => {
24920
24922
  this.selected = [];
24921
24923
  e.preventDefault();
24922
- } }, 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 }))))));
24924
+ } }, 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 }))))));
24923
24925
  }
24924
24926
  static get watchers() { return {
24925
24927
  "mode": ["modeHandler"],
@@ -25005,6 +25007,7 @@ const LsEditorField = class {
25005
25007
  }
25006
25008
  else {
25007
25009
  this.component.style.background = 'transparent';
25010
+ this.component.style.boxShadow = 'none';
25008
25011
  }
25009
25012
  }
25010
25013
  onInputChange(e) {
@@ -25032,18 +25035,20 @@ const LsEditorField = class {
25032
25035
  this.component.style.opacity = '0.7';
25033
25036
  this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
25034
25037
  }
25035
- else
25038
+ else {
25036
25039
  this.component.style.background = `transparent`;
25040
+ this.component.style.boxShadow = 'none';
25041
+ }
25037
25042
  }
25038
25043
  participantColor = (index) => {
25039
25044
  return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
25040
25045
  };
25041
25046
  render() {
25042
25047
  console.log('Rendering ls-editor-field', this.dataItem);
25043
- return (h(Host, { key: 'b9e35f54e8852fcdd156c1f092e5c3dc0b099e01', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '51e3a6f60ea26ba6987bfde2ec290675ab36ff4b', class: {
25048
+ return (h(Host, { key: 'ddff7fdaa6832313753e0fb32b085425bddb9962', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '43c0e90e8d68462a34fdb4d31a90cf08a5c87994', class: {
25044
25049
  'ls-editor-field': true,
25045
25050
  'is-selected': this.selected,
25046
- } }, h("input", { key: 'eb04f44ee432c774410ef9e977f4783c093fb3ca', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: '572479a0869f845fc40537c5eadd48fc64d30119', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
25051
+ } }, h("input", { key: 'f7e8a0aadcb0c08c0c1b1f89f8b2cee4fddb362e', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: 'f0446b10d267911421007a39634665fd3fc52e46', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
25047
25052
  }
25048
25053
  static get watchers() { return {
25049
25054
  "selected": ["watchSelectedHandler"]
@@ -25422,7 +25427,7 @@ const LsFieldFormat = class {
25422
25427
  };
25423
25428
  LsFieldFormat.style = lsFieldFormatCss;
25424
25429
 
25425
- const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
25430
+ const lsFieldPlacementCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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)}";
25426
25431
 
25427
25432
  const LsFieldPlacement = class {
25428
25433
  constructor(hostRef) {
@@ -25459,7 +25464,7 @@ const LsFieldPlacement = class {
25459
25464
  }
25460
25465
  }
25461
25466
  render() {
25462
- return (h(Host, { key: 'c38e749ed70fbec06710f1842f6a4a9d098f85b2' }, this.isMultiple(this.dataItem) && (h("div", { key: '9b6c2574cac07b37cebf5cabe2c14e9c03747ff6', class: 'ls-field-properties-section' }, h("div", { key: 'ad445360db70d5ae6f99df12f0b0e11caf079115' }, "Height: ", h("input", { key: 'e7095cd297a757619db208599495818831810d51', value: '', onChange: e => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: '857a4248fc0be62c2de1496cc46777477cc7ab34' }, "Width: ", h("input", { key: '64766dcbcf2e4ff5bc18148a3d559320e8768a59', value: '', onChange: e => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: 'c8fd6e434f645ef256cab36aea1eb9f2c792d602' }, "Top: ", h("input", { key: '523cd4e7ef778206040e61de23881c68cd83764f', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '8123153cc00b5ad6dfd1962644716d88afe3fd50' }, "Left: ", h("input", { key: '292224f465f7a5492e1e6c53fe05eba1b958068f', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (h("div", { key: '3e8dab366e5f0b03a917d2dd5df5297324834a31', class: 'field-set' }, h("div", { key: 'bfe027f0be2444246e64b28705be24a8b3983f1c', class: 'ls-field-properties-section' }, h("div", { key: '5e26da9efc1a46c0f7d51d8af6c4f360adb217c7', class: 'ls-field-properties-section-text' }, h("p", { key: '2ff018f921da3820578ba7ce116e2f4bf3beeb12', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '92ec4d9c3a839964c049c218ea2e3096e9f8416c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '8e090fdba7956c47176cb2e208bab978d9db574b', class: 'input-row' }, h("div", { key: '0454d313992a5d3cba41b177d5e2f383e79760d3', class: 'input-wrapper' }, h("ls-icon", { key: 'd06422f06d4d9e3db801005d440b1b419ef99596', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'bc688f5479fb3e4d118af31a0c06fb18f4df8c7f', class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '6739deb4c2a592de6c49b62da73b976889974cb2', class: 'input-wrapper' }, h("ls-icon", { key: '84f3f46cb645ebfb559f93615b354735e5d3ea68', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'ca64de782e04b9854715c97dcccfae638e39a5d8', class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '548b2fa676f1c7f1423487d8122ed4fbbc5643aa', class: 'ls-field-properties-section' }, h("div", { key: '3c95021d94b59e35f71a1394a96f2ecba6830ea3', class: 'ls-field-properties-section-text' }, h("p", { key: 'f2998db5a8f3b74d93a64d00934014da39a86d12', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '28532bcde4770d9c5a1ec242bb62f45f8daf9082', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '089ab35ef48a8edf701eb3c0f46b0848d3dfb792', class: 'button-group' }, h("button", { key: 'ec313d99c1f9bff5d6d950855a9398c61ad7fbfd', disabled: true }, h("ls-icon", { key: '612ca8d573b699ebee86be53f3ed1b01a19423c1', name: "field-scale" })), h("button", { key: 'd4b2f23e97ecc77c1c2f078640651d10b23e3576', disabled: true }, h("ls-icon", { key: '902d890ed20e4d558475019c0cac0e71e96af29f', name: "field-match-width" })), h("button", { key: '846578af26854723a618210cdb9326028df305bc', disabled: true }, h("ls-icon", { key: '11390d2dd057fc8f53f814752368da1f3cc6ca9d', name: "field-match-height" })))), h("div", { key: 'bf2413d0db983afd7d027ff83974c989498dc9f6' }, "Top: ", h("input", { key: 'b303dac5c9642abae9d9153de0ddf42dfb4de10e', value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: 'f619f27989365109b7ed1c3ad5e9c0a830f248d7' }, "Left: ", h("input", { key: 'cf4566c32111ca92b3da4be25e4c57ff5ab53ca3', value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" }))))));
25467
+ return (h(Host, { key: '6a0f7b6a8c5dc94cde14c81ee6be2397b27e3be5' }, this.isMultiple(this.dataItem) && (h("div", { key: '99ef4a60bb31d91649288da9f8c78fb9dbe15196', class: 'ls-field-properties-section' }, h("div", { key: '9399eeb98d0ecaae3f16ea5535a2041308113db2' }, "Top: ", h("input", { key: '995214d8614f4dc6166d43419c0f6837b2e937e6', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '857a4248fc0be62c2de1496cc46777477cc7ab34' }, "Left: ", h("input", { key: 'e49db0de0b0044227668f8fa651bb4aab8d31145', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (h("div", { key: 'a31cbbb2991fe43f312a42a1b8d4d6b9d069db32', class: 'field-set' }, h("div", { key: '2388774b0c3c078fc8e72ed328dcfd256437098b', class: 'ls-field-properties-section' }, h("div", { key: '39a346434ba2439c692623a71cc69567359c432f', class: 'ls-field-properties-section-text' }, h("p", { key: '74d47b7f6db5be09b56ae08e102591689a27044c', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: 'bbd451ef39808d320c6bb57cba1570af4410708a', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '6630c43f54b472aafb962516e2588df47d80c196', class: 'input-row' }, h("div", { key: '78ffbda8a8576a9806d8052020af8a5dc287785a', class: 'input-wrapper' }, h("ls-icon", { key: '7d20243698615ceaf080fd4fbb8d9acef287cce7', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '5101713e0a86e315c9e9bb6b4b4d12c4f163bab2', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }) })), h("div", { key: '52062eaa3342d2ff605cb3ae88a0f4e5b3970ef1', class: 'input-wrapper' }, h("ls-icon", { key: 'e164c0b662367ed76c437f677ec491c7b987ede5', id: "selectLeadingIcon", name: "y" }), h("input", { key: '0f75d89d266ec35a37504209da986c6886ccffa1', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" })))), h("div", { key: '9cdc2157455ad96575bf44adaa6ce651409f4af9', class: 'ls-field-properties-section' }, h("div", { key: '21d853b2adfd9c603b7a44ea186bec339722805e', class: 'ls-field-properties-section-text' }, h("p", { key: '8447f40ba847665b408ee9d5e843ac380e5576ab', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'f81f48bebb40c4ee7b3a02a8f1d42606306b4b4c', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '9963c2c0a7b1cf29f833344dd909f3bc2f11350b', class: 'button-group' }, h("button", { key: 'e1f9e3ffbd836d9d0829a2caefccd5b6a9f6e2f0', disabled: true }, h("ls-icon", { key: 'e259983fc064b02148b977901a8f8ec6fd08ed86', name: "field-distribute-vertically" })), h("button", { key: '14e31e45a360b4621886fa6ba5fc7fac6bd657a7', disabled: true }, h("ls-icon", { key: 'c045fcc5a5f7330b0a578c12630e0b078181b948', name: "field-distribute-horizontally" })))), h("div", { key: '9a84503f0b4e779d731cca2c153ac81f6b9f2588', class: 'ls-field-properties-section' }, h("div", { key: 'e531166182eea81dff63f27c0590b70889b0a982', class: 'ls-field-properties-section-text' }, h("p", { key: '43a8c468645308af2b50427efc5cba290d40ba82', class: 'ls-field-properties-section-title' }, "Scale and Gap"), h("p", { key: '01f2a1dcd782b9556aa750ed7ec76a81feb379a7', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '51503e9dd0e20b1ac514e06f44c3e8196d309279', class: 'input-row' }, h("div", { key: '5d5e2e4bbc76334243b1b83e9c9e47cf7dafef02', class: 'input-wrapper' }, h("ls-icon", { key: 'c85652c6cb40c6af1c9c5fa8aa050e462e2629a7', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '463d16d911ca88612bc6c922dbdb96d848f332b4', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '6aa81eee5a4ef286e4caea458b7559b1d7073018', class: 'input-wrapper' }, h("ls-icon", { key: 'd39f4bc6fcdebe4c2c1133daceccda27a067c813', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: '9c8389f6edc9329dbcfb8092fd63037f686b9cb4', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
25463
25468
  }
25464
25469
  };
25465
25470
  LsFieldPlacement.style = lsFieldPlacementCss;
@@ -25500,7 +25505,7 @@ const LsFieldProperties = class {
25500
25505
  return h("ls-field-properties-multiple", { dataItem: this.dataItem });
25501
25506
  }
25502
25507
  render() {
25503
- return (h(Host, { key: '9896a32cfd8d2a9eb4abddff21bb9e4ea84dcdf7' }, this.dataItem && this.renderFields(), h("slot", { key: 'a55449c4637fc60efc6ab67b4f192eeb4b85b804' })));
25508
+ return (h(Host, { key: '309f411a7efb7960a8e207eb32c178f3d68d775e' }, this.dataItem && this.renderFields(), h("slot", { key: '3cfe6de10eaa41e4d7ce72ba825d2202316b9b86' })));
25504
25509
  }
25505
25510
  };
25506
25511
  LsFieldProperties.style = lsFieldPropertiesCss;
@@ -25513,46 +25518,85 @@ const LsFieldPropertiesAutosign = class {
25513
25518
  }
25514
25519
  dataItem;
25515
25520
  render() {
25516
- return (h(Host, { key: 'ef859b2117bdedccae56214ddd7b375f8ada8e87' }, h("div", { key: '37cdf936c339386dd2307b4bcb39e6fc52aeecf3', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'fc221640e08436c16cdd4515119dc07456245f3d' }, "Label: ", h("input", { key: '54b60ba302a743592c6179a8dd6be9af3446b7d1', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '34595223e6d6bdddb325adaa6f3580a72802e12f', dataItem: this.dataItem }), h("slot", { key: 'f7bc363dc0246a2050514db7438924b4a1f47bfe' })));
25521
+ return (h(Host, { key: 'b92e0d9344c0443598e16dfb603c8bb9c33e86f9' }, h("div", { key: 'cf3191dbbdb254d9a571e7a5a213d6ccd5fb22da', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'e55e1bc4078c5fa0d1697402d790e53f49ffc7e4' }, "Label: ", h("input", { key: '3d519f647bafeb12c028e199ec4f7897da82129d', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '6113d5217406e9bb172449a4c0ab93432ac3d059', dataItem: this.dataItem }), h("slot", { key: 'd1d085d0099e3d9185e677a9511e39d3d9df37b9' })));
25517
25522
  }
25518
25523
  };
25519
25524
  LsFieldPropertiesAutosign.style = lsFieldPropertiesAutosignCss;
25520
25525
 
25521
- const lsFieldPropertiesDateCss = ":host{display:block}.ls-field-properties-section{display:flex;flex-direction:column;min-width:110px;background-color:white;border-radius:0.75rem;border:1px solid var(--gray-20, #EDEFF2);background:var(--white, #FFF);box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)}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)}";
25526
+ const lsFieldPropertiesDateCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
25522
25527
 
25523
25528
  const LsFieldPropertiesDate = class {
25524
25529
  constructor(hostRef) {
25525
25530
  registerInstance(this, hostRef);
25526
25531
  }
25527
25532
  dataItem;
25533
+ fieldSet = 'content';
25534
+ signerColor = (index) => {
25535
+ return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
25536
+ };
25528
25537
  render() {
25529
- return (h(Host, { key: '5f36efcbdbf004aa947fa25fc9159243576a5e42' }, h("div", { key: 'b6e62fcd4c300ade79b3e5695f08da6d2cd3a2a5', class: "ls-field-properties-section" }, "Date Field"), h("div", { key: 'f43166063cfd066d302977ca543edfb6a9ab2d91' }, "Label: ", h("input", { key: '123c7cc4ea9f9ca3329251c72115df2b926a4e51', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4996ee02f38bc8d698f582b9ffaca18c4cd3691c', dataItem: this.dataItem }), h("slot", { key: 'cec0eca70cca852ab6c432c4e09ac410b9f0c675' })));
25538
+ return (h(Host, { key: '28e26ac6bcf4f5ec3e469ca42d539953ed757e32' }, h("div", { key: '899362fdb9f354535b59274df592562c632472e8', class: 'tabs-container' }, h("button", { key: 'e8c62f54808b383b06b10779ee09c0a647e3a862', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '24712078c0e55c4ad33b055296d1dc6bbeab1def', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'c43695c3affe8d3d8e7864f6a31d5b75b9c5fe0f', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '7dedaac7e3acfe1ea869fc07ccacf6918319876a', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
25539
+ border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
25540
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25541
+ } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
25542
+ border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25543
+ color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25544
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25545
+ } }, h("ls-icon", { name: "calender", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Date")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
25546
+ .filter(type => type.formType === 'date')
25547
+ .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'b8aa134277c9c97dbe055c9c4a0d063674d902f0', class: 'button-footer' }, h("button", { key: '1e48e484cdfa1979401ff7c2d569e09a95b4e6ce', class: 'secondary' }, h("ls-icon", { key: 'e813c24682528c0c43a44b56437b8b605d142126', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '31e153b6a547c20d9a9750f8e7773d16815b57ca', class: 'destructive' }, h("ls-icon", { key: '747b02f9578f2e6ca14fa1020925504c98be6cf7', name: "trash", size: "20" }), "Delete")), h("slot", { key: 'cf1fe9517aadac9fbfaa606121b0a10e904628ea' })));
25530
25548
  }
25531
25549
  };
25532
25550
  LsFieldPropertiesDate.style = lsFieldPropertiesDateCss;
25533
25551
 
25534
- const lsFieldPropertiesEmailCss = ":host{display:block}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)}";
25552
+ const lsFieldPropertiesEmailCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
25535
25553
 
25536
25554
  const LsFieldPropertiesEmail = class {
25537
25555
  constructor(hostRef) {
25538
25556
  registerInstance(this, hostRef);
25539
25557
  }
25540
25558
  dataItem;
25559
+ fieldSet = 'content';
25560
+ signerColor = (index) => {
25561
+ return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
25562
+ };
25541
25563
  render() {
25542
- return (h(Host, { key: 'd3a0c484f228ef606bf3f09053d3022ae62969b2' }, h("div", { key: '517c2072d42b03726b1373a9f7fd118391ead4d6', class: "ls-field-properties-section" }, "Email Field"), h("div", { key: '5a8501e366d4a3e24e45c2462333665e9460b6e7' }, "Label: ", h("input", { key: '4d19471fb299507ff5cb79f20dc0aaf979ff4594', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '70932d5f976bfd86f536ae831b8f00f2af638b17', dataItem: this.dataItem }), h("slot", { key: 'd18fd2d5117bcd67446e408b5efacc87a78406ec' })));
25564
+ return (h(Host, { key: '366b730ea9a1096ab6098ae9b2bb98ca9e11d29a' }, h("div", { key: '8e6839f5c298a391fcae2e79ce03478ad469d64f', class: 'tabs-container' }, h("button", { key: '88756cc3cae04027c89fce3760223308bf55ebcf', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '41d1e59547bb3d5f7bba58a067d87f4672387a2a', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'e958ed78f39d46ea879a51d21fb902006904470b', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '53164cca19d076f7d49d263b53abd11bbea7e982', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
25565
+ border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
25566
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25567
+ } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
25568
+ border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25569
+ color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25570
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25571
+ } }, h("ls-icon", { name: "at-symbol", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Email")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
25572
+ .filter(type => type.formType === 'email')
25573
+ .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'b497ae9483f55bbd6111b63a3e3b75c9660d4937', class: 'button-footer' }, h("button", { key: '0c0d68dd36200ea19ce9eaf11075599d0fe50b43', class: 'secondary' }, h("ls-icon", { key: 'c2c54a3b8a744c494e684592f0a6d7d08c2843d8', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'd88a0eb280d075c4adad2abdd548897e82fcbae6', class: 'destructive' }, h("ls-icon", { key: '31ddc278180530e8a1b9452249b1b784d77b56ce', name: "trash", size: "20" }), "Delete")), h("slot", { key: '0e166025806021ba078d0d0eec65c1f41ef20789' })));
25543
25574
  }
25544
25575
  };
25545
25576
  LsFieldPropertiesEmail.style = lsFieldPropertiesEmailCss;
25546
25577
 
25547
- const lsFieldPropertiesFileCss = ":host{display:block}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)}";
25578
+ const lsFieldPropertiesFileCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
25548
25579
 
25549
25580
  const LsFieldPropertiesFile = class {
25550
25581
  constructor(hostRef) {
25551
25582
  registerInstance(this, hostRef);
25552
25583
  }
25553
25584
  dataItem;
25585
+ fieldSet = 'content';
25586
+ signerColor = (index) => {
25587
+ return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
25588
+ };
25554
25589
  render() {
25555
- return (h(Host, { key: 'f5e5eb758f2f08582f069399b72a25a4e0faa639' }, h("div", { key: 'dd9730536a367e53a25e46a6b1aaef4810feb1ae', class: "ls-field-properties-section" }, "File Properties"), h("div", { key: '98842c159128b20f08ce136c1a9958b780e47427' }, "Label: ", h("input", { key: '8211be4661c5a4a413a6f2e091ee112d192b86d3', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '8326064c12bcc380cd5e12ca5801df2eb2273a8a', dataItem: this.dataItem }), h("slot", { key: '7d395a1ac14a5b1da744ad9bf219ab82822dba8f' })));
25590
+ return (h(Host, { key: '979c8b325bf4675630a746fac203cf0b45811896' }, h("div", { key: '79f61e9f1afbac6e2dd5b9395ea01d89b771a6a7', class: 'tabs-container' }, h("button", { key: '36fe49eac7cb389333f2cd73b732845ec7617024', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: 'd7c6d114aa43a8b1d287ced8663712ac76c4b9f7', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '7d94a07973d9927e3289a81ab1cc14b9890b6d26', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'f351044ba72e63b37f1d55292fc2e29eb527df65', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
25591
+ border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
25592
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25593
+ } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
25594
+ border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25595
+ color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25596
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25597
+ } }, h("ls-icon", { name: "upload", size: "20" })), h("p", { class: 'ls-field-type-name' }, "File")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, validationTypes
25598
+ .filter(type => type.formType === 'file')
25599
+ .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.value }, type.description))))))))), h("div", { key: 'e6d801473e74d51783c11e507ee5d5fc81310c21', class: 'button-footer' }, h("button", { key: 'd17ea5d20f26c43015cfe3441040f4bb59640c8f', class: 'secondary' }, h("ls-icon", { key: '419df479abff15f4d6812b010d1b9373083959e3', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: 'c5d41606e3bf716e10d6b117a32164ce4ecb026a', class: 'destructive' }, h("ls-icon", { key: 'fe495b8b5c5fe40bd33066ae2a19896374817fc1', name: "trash", size: "20" }), "Delete"))));
25556
25600
  }
25557
25601
  };
25558
25602
  LsFieldPropertiesFile.style = lsFieldPropertiesFileCss;
@@ -25565,7 +25609,7 @@ const LsFieldPropertiesGeneral = class {
25565
25609
  }
25566
25610
  dataItem;
25567
25611
  render() {
25568
- return (h(Host, { key: '29c2b0632e58cb30fca1fd3f837db79c897fbb01' }, h("div", { key: 'baa26ca0495d29ab9aace32b279e4ed010675b9c', class: "ls-field-properties-section" }, "General Field"), h("div", { key: 'e4d6e80b1ecbede11d74cad5f7917f91c8b14b26' }, "Label: ", h("input", { key: '91766f7afae6d7c6ba07ffa762fffa874b5e96f7', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'c4d7c6bb209b96d835b98f31b5dc5c140cbcd2d2', dataItem: this.dataItem }), h("slot", { key: 'b7dd122186d9fa7cdf237d640de253868c829195' })));
25612
+ return (h(Host, { key: 'e87b03ad929cc1dea1d030fd612a310d5173c838' }, h("div", { key: 'cf2d750d5aa86e737e54b2c7175e0f9af84b5fde', class: "ls-field-properties-section" }, "General Field"), h("div", { key: '4f18444c661c88c4b79510d5b0b7258285c15858' }, "Label: ", h("input", { key: '532c0119c5bbbda70844d91616c4ee50b8d783f7', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '9f38fd900b3133eec3bcb0f8d36cc576f33dfa41', dataItem: this.dataItem }), h("slot", { key: '15467859e256ec22ec6201002cce2605bf4d3f27' })));
25569
25613
  }
25570
25614
  };
25571
25615
  LsFieldPropertiesGeneral.style = lsFieldPropertiesGeneralCss;
@@ -25578,7 +25622,7 @@ const LsFieldPropertiesImage = class {
25578
25622
  }
25579
25623
  dataItem;
25580
25624
  render() {
25581
- return (h(Host, { key: '9546581401fdbb0f9d0c9566e9a72c49a59630c8' }, h("div", { key: '2990f1e64135276ba8c40566722d96555f8242a4', class: "ls-field-properties-section" }, "Image Properties"), h("div", { key: 'da9829e55adabcd6c803cece056f4ca9927ee3d9' }, "Label: ", h("input", { key: 'aa3d011463eaab19cd9e21ddb255e76a08e5e1d1', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'f549680f91b8106d711a3130739d5432eac813f9', dataItem: this.dataItem }), h("slot", { key: '380973640d7b90e56c36b43ca7f12ad78ca44dbc' })));
25625
+ return (h(Host, { key: 'c690e84f0aaa5c21f912350d9edf2ff1805ee7c8' }, h("div", { key: 'bb1c3cd8c3a50f62010689e22b043bcce518a365', class: "ls-field-properties-section" }, "Image Properties"), h("div", { key: '8805a1f3f16fcd8a662622af4c153a40cd9fa113' }, "Label: ", h("input", { key: 'fdacaeeb623483d8ff9a1485223eb2e88d3a6f47', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'f666dd08fe2c5d1e013bb36bf441e32be69b0b04', dataItem: this.dataItem }), h("slot", { key: 'fda720e8f6e3cdabd50a9e41e40172a34681c300' })));
25582
25626
  }
25583
25627
  };
25584
25628
  LsFieldPropertiesImage.style = lsFieldPropertiesImageCss;
@@ -25591,7 +25635,7 @@ const LsFieldPropertiesMultiple = class {
25591
25635
  }
25592
25636
  dataItem;
25593
25637
  render() {
25594
- return (h(Host, { key: '9b5ad0338d0d3df1e65abdde7c06e7660ee9fe61' }, h("div", { key: 'f01035a01df3dfa1b9126ea18f07a4fe1caf2a87' }, this.dataItem.length, " items"), h("ls-field-dimensions", { key: '19fd136913c7537efeb1f1f0c41940b972e2f1b4', dataItem: this.dataItem }), h("slot", { key: 'a573e2c199b6ab963e57785c89c6328f4b088d9f' })));
25638
+ return (h(Host, { key: 'b4efff7bf847390c74406f2cdb74ce1494760913' }, h("div", { key: 'bab7582267affd8d2869f1644c277cafbf7193ca' }, this.dataItem.length, " items"), h("ls-field-dimensions", { key: '0b49d95f9a49b3a5f99b8ce03c7f7b9761507d9e', dataItem: this.dataItem }), h("slot", { key: 'acb018458e9772db9107c024f982a3b575976c06' })));
25595
25639
  }
25596
25640
  };
25597
25641
  LsFieldPropertiesMultiple.style = lsFieldPropertiesMultipleCss;
@@ -25604,12 +25648,12 @@ const LsFieldPropertiesNumber = class {
25604
25648
  }
25605
25649
  dataItem;
25606
25650
  render() {
25607
- return (h(Host, { key: '0f10b1ecddaffa356bc97bbcfafef2c8f51ecdbd' }, h("div", { key: 'b39a8b0137b49bc9d82d911ac1df2c569d166a53', class: "ls-field-properties-section" }, "Number Field"), h("div", { key: 'd196e2fbdb8c2b06b672479f3e52621f64562f12' }, "Label: ", h("input", { key: 'f599d0785c34374775197cc1a24be0577cd67107', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '507ceeb0c38de7de8dba7329582d142c1e32e311', dataItem: this.dataItem }), h("slot", { key: '70f3a30f34643a73ce47eb1d59b5c852b9e3d8cc' })));
25651
+ return (h(Host, { key: '38689e88511a48f76700b6690b6f16bbdcf5c275' }, h("div", { key: 'e0256e1b6323656b6f8b7b088a1ef11ba5c64bf5', class: "ls-field-properties-section" }, "Number Field"), h("div", { key: '5c7465ccfd35e26ac079ad9daf55a53aefd46e26' }, "Label: ", h("input", { key: '62437f98d0d2998c304caeb5dd86f1c750d13681', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'c023c4022d367594fe0ccc564343f8190327300d', dataItem: this.dataItem }), h("slot", { key: '29dfa45d57e3b9b6532dbf2730567b71fd1c0096' })));
25608
25652
  }
25609
25653
  };
25610
25654
  LsFieldPropertiesNumber.style = lsFieldPropertiesNumberCss;
25611
25655
 
25612
- const lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem 1rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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)}";
25656
+ const lsFieldPropertiesSignatureCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;border:1px dashed var(--primary-30, #9dc3fc);background:var(--primary-10, #eff4ff);padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative}.full-width{width:100%}#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{display:flex;gap:0.5rem;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;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.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)}";
25613
25657
 
25614
25658
  const LsFieldPropertiesSignature = class {
25615
25659
  constructor(hostRef) {
@@ -25617,8 +25661,18 @@ const LsFieldPropertiesSignature = class {
25617
25661
  }
25618
25662
  dataItem;
25619
25663
  fieldSet = 'content';
25664
+ signerColor = (index) => {
25665
+ return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
25666
+ };
25620
25667
  render() {
25621
- return (h(Host, { key: '902b7e4b85508cec60977d4e40bbc070d9ef1839' }, h("div", { key: '081bcf381484c555f8960d484ed40630dfdb6162', class: 'tabs-container' }, h("button", { key: '3f92e00c092e813542eab9a3ed7d859ccd4af855', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '3f197a95a8ae4cc55c9ea2502fe492cd2d0cc882', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '5e7bb07611cf2665b1df1c4de10afb8886281e20', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper' }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon' }, h("ls-icon", { name: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" })), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Content Format"), h("p", { class: 'ls-field-properties-section-description' }, "Select the specific format you want the Recipient to enter..")), h("div", { class: 'input-wrapper' }, h("ls-icon", { id: "selectorIcon", name: "selector" }), h("select", null, h("option", { value: "text" }, "Text"), h("option", { value: "email" }, "Email"), h("option", { value: "signature" }, "Signature")))))), h("div", { key: 'c3c1222873d5185d387c9b1f6d8a25c0df6913bf', class: 'button-footer' }, h("button", { key: '2b3782d9c79e352943cc63ee90a055d0947989c1' }, "Duplicate"), h("button", { key: '6c2423657ed456ebadb8e235e231e14cc13ca809' }, "Delete")), h("slot", { key: 'a7132e286834c21b1a7f0762ae398ae6ab6c3456' })));
25668
+ return (h(Host, { key: 'df0094f1092e955e6dd14b91a7e67e7c03b18ee2' }, h("div", { key: '93e2fc1e8d557cebcd9c898ed318a5c63b01719f', class: 'tabs-container' }, h("button", { key: '5ac877ef74986931e2f2c3d1521f14f09776dadd', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '10e426f98422863ce40b7026ad3af7fda567615f', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: 'a452edbb8356e27c53637d90bb30175c4ec78303', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: 'b91ec8aa31925a648ce5c94243e2056c05f4bbf1', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("ls-field-placement", { dataItem: this.dataItem })) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Field you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
25669
+ border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,
25670
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25671
+ } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
25672
+ border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25673
+ color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,
25674
+ background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,
25675
+ } }, h("ls-icon", { name: "signature", size: "20" })), h("p", { class: 'ls-field-type-name' }, "Signature")))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.dataItem?.label, width: "30", placeholder: "eg. Sign Here" }))))), h("div", { key: '386d082d5cc813c9c195ecc7ece0855b86e0cd7c', class: 'button-footer' }, h("button", { key: '35d6174b961aa32db31047c7b401553ccb82f579', class: 'secondary' }, h("ls-icon", { key: 'f901fbf9aa48417f2ea0a2a8fc527fa6e90cca33', name: "field-duplicate", size: "20" }), "Duplicate"), h("button", { key: '8be34a33298fde349fa6a7d42e8c4d5c44eb756d', class: 'destructive' }, h("ls-icon", { key: 'a56208fc1ae308a1f8eace45c0a5c5d5d35a12d7', name: "trash", size: "20" }), "Delete")), h("slot", { key: '5facdb89f9df774f31a1218b268746b418f8e3c3' })));
25622
25676
  }
25623
25677
  };
25624
25678
  LsFieldPropertiesSignature.style = lsFieldPropertiesSignatureCss;
@@ -25631,7 +25685,7 @@ const LsFieldPropertiesText = class {
25631
25685
  }
25632
25686
  dataItem;
25633
25687
  render() {
25634
- return (h(Host, { key: '1295bbae1e4a761e63a934e3feee2b9aa9a0da8e' }, h("div", { key: 'dd54b3014616de7b86f4d4eb24441b1b439b8d45', class: "ls-field-properties-section" }, "Text Field"), h("div", { key: '1a64abccc0e69cdc8373dd71b154459975c8fb9a' }, "Label: ", h("input", { key: '256315c9510b4044130fd1d8c15267c54019231f', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '99d0de4df00dee8f3fa23f9981125b1418d2444d', dataItem: this.dataItem }), h("slot", { key: '66371315995cca39a712832028cf524818b8ccb4' })));
25688
+ return (h(Host, { key: 'a4db8b126a38153d494b6a2e4005d08b93455f21' }, h("div", { key: '220eac7c15bf25713e9d7688410fb7a19fd08a0e', class: "ls-field-properties-section" }, "Text Field"), h("div", { key: 'e93bac0aac9e1db6e73c59a5ccedc74ebc6112de' }, "Label: ", h("input", { key: '23fa2aaa09a4923ff6d15647b6ed5c868d769388', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '4bf078ffa799a5ca66f95de683957675d7dcb406', dataItem: this.dataItem }), h("slot", { key: '91fd6d676d88d718f84aca7a9b3742f8a5523053' })));
25635
25689
  }
25636
25690
  };
25637
25691
  LsFieldPropertiesText.style = lsFieldPropertiesTextCss;
@@ -25658,7 +25712,7 @@ const LsFieldSize = class {
25658
25712
  this.update.emit(diffs);
25659
25713
  }
25660
25714
  render() {
25661
- return (h(Host, { key: '25d9b6ba469e6b6b2e0f236529282e89e684e065' }, h("div", { key: 'db43f95f4d932d37eea1b6d735a886551813a7fd', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '9227a946d3dce34de1b2c6bae9c95a723ee1614c', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '88900fc8776b8513ffe6b6bfeddcfcbc73225a12', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '19dabfd4e1cf471ca14f27d6d655b4cb77cf4839', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '46465688fe1a1dd8cf94b8f216159bd840686519', class: "ls-round-button", onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: 'a0df5a1a31e2b118b04c21f3fa28fcb1d5811db3', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c1a0f481f9fd28ed4ccf2098746551a28ae1032', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '435276bc215fde675a89d5f3f318c72b0a10c723', class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '42e7f189b4b2fec56a031272379a3b3540b9ae36', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '245318518d13d13bca367dab4e45a247c8596d1c', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '6f214bdecb84e0fef7e0b3346d3a25687befd186' })));
25715
+ return (h(Host, { key: '370469e2e9bbfb5d9c1b034aa5a6056c125b1563' }, h("div", { key: 'b5807f2770fd9cfd9fc257aec00c113ffb3e22b4', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '31f39a39290f7edf4669f30ffe20cd5056aa07e6', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '50e12865b2fb41cce603a8017793dda5283efaef', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '281ec1021546c1701f6984c5d47f0812c11ecff7', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '2ddfd3aafb6d8f45f9807a71e892ff8faf2485b9', class: "ls-round-button", onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: 'e39193ff14ed9dd817268fab706d662df75b68de', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2d6c9aefe4da11be709b88d9745e646273885c9', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '692649a6564f3df46d04360108fecf1bad055bb7', class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '7905e0ab8fd9d51fe6823ada2dbe50a6f5c0e51e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '51fef530c0a273c0850cd859ae3db3af51213110', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'e5a1ccbd3d3fac7280a9273ca2c19ed672ca1d89' })));
25662
25716
  }
25663
25717
  };
25664
25718
  LsFieldSize.style = lsFieldSizeCss;
@@ -25706,10 +25760,10 @@ const LsFormfield = class {
25706
25760
  render() {
25707
25761
  const { name, fieldId, label, as, value, placeholder, descriptionText, errorText, aria, infoTooltipText, disabled, extraLabel, valid, dirty, count, countMax, buttonClick, buttonIcon, fieldIcon, labelIcon, } = this;
25708
25762
  const countClass = value && value.toString().length > countMax ? 'formfield-count-error' : 'formfield-count';
25709
- return (h("host", { key: '2a860cf8cb54c410168c49a2fb35bf76eddca99e', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: 'fc186bf689335835399fddd48788298824b6a226', class: "formfield-top-elements" }, h("div", { key: 'c3a4e9739abdef99e6eaf572e0b40656c25f8857', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: '1bb71ff13bc570fe3f814dcca4daf036d539f3d4', name: labelIcon }), h("label", { key: '449dd956e77c34d104f42c006ee67d4df93931bd', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: 'e0c4e739928bebd4d57c1ab8cd9a2544121910ac', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), errorText ||
25763
+ return (h("host", { key: '1a31b37448b48d4d89b7c73e8ac26e951b3eacc1', class: "formfield-host" }, label?.length > 1 || extraLabel !== 'none' && (h("div", { key: 'e652e0b4d24b3c79c722ffbdcc7487478285db5f', class: "formfield-top-elements" }, h("div", { key: '384366ebbf68834977299e5e6e676343e06bbe01', class: "formfield-left-side" }, labelIcon && h("ls-icon", { key: 'c8d197bbeca42e72a9c69faa4cef98274be8b1f1', name: labelIcon }), h("label", { key: 'bae645add69fe37ac8cde9eef4c0b38566ed7bd4', htmlFor: name, class: "formfield-label" }, label), infoTooltipText && h("ls-icon", { key: '1d7a22559e0cbaa31cd9634f003a24b5e4533f67', name: 'information-circle' })), extraLabel === 'optional' ? (h("ls-label", { text: "Optional", colour: "gray", type: "low" })) : extraLabel === 'required' ? (h("ls-label", { text: "Required", colour: "gray", type: "low" })) : (''))), as === 'text' ? (h("ls-text-input", { id: fieldId, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon, onInput: (event) => this.handleChange(event) })) : as === 'select' ? (h("ls-select-input", { id: name, name: name, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon }, h("slot", null))) : as === 'radio' ? (h("ls-radio-input", { radioId: label, label: value?.toString(), icon: fieldIcon, name: name, disabled: disabled })) : as === 'textarea' ? (h("ls-textarea-input", { id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'password' ? (h("ls-text-input", { type: "password", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'displayonly' ? (h("ls-text-input", { type: "displayonly", id: name, name: name, value: value?.toString(), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : as === 'number' ? (h("ls-number-input", { type: "ls", id: name, name: name, value: Number(value), countMax: countMax, placeholder: placeholder, "aria-label": aria, required: extraLabel === 'required', disabled: disabled, valid: valid, dirty: dirty, buttonIcon: buttonIcon, buttonClick: buttonClick, fieldIcon: fieldIcon })) : (h("p", null, "placeholder")), errorText ||
25710
25764
  count ||
25711
25765
  countMax ||
25712
- (descriptionText && (h("div", { key: '215b4149397b1a2529cba0fcb7921672bdd50aa0', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: '5b6b723f36e9acc8dfcb375a8ca80011e6b4bc5b', class: "formfield-count-container" }, h("p", { key: '7fa67582d63522fbb90645c6c85070e5a6df9e49', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: 'bd8bab45ee4267db47cd292c406270c1c7b464e1', class: countClass }, h("p", { key: '54749071cb04b62b7400b03676d33d75a419b6f3' }, "/"), h("p", { key: 'b8fe026691a36bacab09326f3a90da181b902d8d' }, countMax))))))))));
25766
+ (descriptionText && (h("div", { key: '28d90f818b3d0b80d5d2f2af79dcdf84c4f169b8', class: "formfield-bottom-elements" }, errorText && !valid ? h("p", { class: "formfield-error-text" }, errorText) : descriptionText ? h("p", { class: "formfield-description-text" }, descriptionText) : '', count && (h("div", { key: '36d89672d85a3a702fdef0be12e85864e8592e83', class: "formfield-count-container" }, h("p", { key: 'a936d3309ba99a82378596b6c6b01a1b63b6508e', class: countClass }, value?.toString()?.length), countMax > 0 && (h("div", { key: '11436b2e9bfd90c1bf9bb0c092d575b04312ad6f', class: countClass }, h("p", { key: 'c294b63dc89642ec8d18871ab7929225d34a252a' }, "/"), h("p", { key: '12e3ae9fa67ce3a12fecd935b0db5d66661f7082' }, countMax))))))))));
25713
25767
  }
25714
25768
  static get watchers() { return {
25715
25769
  "value": ["valueWatcher"]
@@ -32720,7 +32774,7 @@ const LsIcon = class {
32720
32774
  console.warn('Icons in src/components/ls-icon/icons.ts should be identical to the enum type in src/types/Icon.ts. Please add all icons to the enum type.');
32721
32775
  }
32722
32776
  render() {
32723
- return (h("host", { key: '524961e24d0d8496a0a78e69965f3e231ea06c73' }, icons
32777
+ return (h("host", { key: '50d59c76f04664a23e2ba5c2c841f600efec02c1' }, icons
32724
32778
  ?.filter((icon) => icon.name === this.name)
32725
32779
  ?.map((icon) => (h("div", { key: icon?.name, class: 'iconContainer', style: {
32726
32780
  height: `${this.size}px`,
@@ -32771,7 +32825,7 @@ const LsNumberInput = class {
32771
32825
  ? 'invalid'
32772
32826
  : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
32773
32827
  const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
32774
- return (h("host", { key: '26f5e53075cb901622e04147622fbde7d832340a', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '7abfaccd1dd83dd84d29c9666f4273b8d29002c9', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '7879feac85ea0e12d6693806efe6982562bf318a', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '3361a5b5ca5e156ce346c9399c51377622f76e3b', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '64e5a52ed43a09b22ef2b45c6e22da993d77c730', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: 'ffc0b6e797303daa29b144d5943414f422a4a6be', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '04b640b4fedd42431d5224d75c4485e4f09b8b9e', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '333e27cfdd2c9da9d755df67a17fe40c8cf867b8', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '473db8f85195189380da6dd3a95b0a707ce58291', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'cc33846635f6bbb89980e6ede44e81dfa3a812a2', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: '8eb656b54ac0c446218526e8d84dc7f1621641b2', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'c7331a6a5fb40cbb5168d1b5403a69e56011600c', id: 'buttonIcon', name: 'plus-sm' })))));
32828
+ return (h("host", { key: '794d35ed6560fe1ec5798e54ef29306978d03d50', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: '4f87d8841c7888ef60dc49f1858611c60830c5e1', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: 'd21f4db0b255d2615dec43e8b0ea0acc83e8f8fe', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: 'd5e398cf289a86f6bbe4634347e1cf199e9fe1de', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: '8ba911402323ee7c7eb91124f3fa3a988f439e1f', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '203390784de95eaf47fe1b2f8e44d0370dd08ddd', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '432584cb1e38877df70256a331a62478b386d6cb', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'acada7eab9b490d2505fcd2c0d1bb08ba0ae7d8f', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: 'dbc5e58f0d8310445d4717b110ec6ee59c349513', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'a5974c1990792c95f1aa6d260ba53720ac33afdb', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'a9a50f10982d7d357f0ea69eea951a534b7e5dec', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: '1553817d47191ba8eacfc68cabe0896613f2d7e5', id: 'buttonIcon', name: 'plus-sm' })))));
32775
32829
  }
32776
32830
  };
32777
32831
  LsNumberInput.style = lsNumberInputCss;
@@ -32827,7 +32881,7 @@ const LsParticipantManager = class {
32827
32881
  return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
32828
32882
  };
32829
32883
  render() {
32830
- return (h(Host, { key: '5410e94b861138ea9ad1723c11acdbd0035eed21' }, h("div", { key: 'ae5b41faab6087917c8f19e53ab457f1514f7dbb', class: "ls-editor-infobox" }, h("h2", { key: '0499354c9a207d1d395fd05ffaf99f8bc3bfe5ab', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'ce76df4d92e82768ca0d3bfaff94d21bb0ccfc72', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '96c91f99af48fd06041b9cada12092ba6b2d7d06', class: "participant-list" }, this.template?.roles.map((r, index) => {
32884
+ return (h(Host, { key: '846505f31da41d85e4aae5119637975ce94f736d' }, h("div", { key: 'fee2a1a3cc304c61a915a9583372263148acc4cc', class: "ls-editor-infobox" }, h("h2", { key: '706f3d3c7a15d132fd4e449d4dc6544076f27ab6', class: "toolbox-section-title" }, "Participants"), h("p", { key: '57fa9b430561cb6439ef5c60141d5d9ffbd115ee', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: 'e21c5e1ce563b6acc7c3135581ae23d45fcff829', class: "participant-list" }, this.template?.roles.map((r, index) => {
32831
32885
  return (h("div", { class: "participant-card", onClick: () => {
32832
32886
  this.selectedHandler(r);
32833
32887
  }, style: {
@@ -32846,7 +32900,7 @@ const LsParticipantManager = class {
32846
32900
  } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
32847
32901
  color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
32848
32902
  } }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
32849
- })), h("div", { key: 'a672fcda086d600b58938fdd5ab9c66854d81b7a', class: 'add-participant-button' }, h("button", { key: '7a742d4a99b9129c738edc571fc7c35633fc2371', onClick: () => this.createHandler() }, h("ls-icon", { key: '04d51087a6a8c592ac2e51a0ab3602a9c6d214ba', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '3185f42a372c38495d011c62c7c35ff1610ae6e1' }, "Add Participant"))), h("slot", { key: 'bf619899ce807ca4743c27795cc118ce19b3dd65' })));
32903
+ })), h("div", { key: '8d8b004e6e30e748a63c63b4315fdd58d1748aab', class: 'add-participant-button' }, h("button", { key: '41312ffdafec9bca1a0e3ef7b0e554d74739f957', onClick: () => this.createHandler() }, h("ls-icon", { key: '03cbcf950e7a61b7a35083034dfe160e6537d7b2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '2644a582f45a54ca06661d21cc47d81cb224c94d' }, "Add Participant"))), h("slot", { key: '2eb37c729f03886331c2bb0fe28c77bb26b2e232' })));
32850
32904
  }
32851
32905
  };
32852
32906
  LsParticipantManager.style = lsParticipantManagerCss;
@@ -32900,18 +32954,18 @@ const LsParticipantSelect = class {
32900
32954
  return index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
32901
32955
  };
32902
32956
  render() {
32903
- return (h(Host, { key: '1b7bc7262bc1364ec6e50279c276f757f9523726' }, h("div", { key: '15d24c73d27c780f17266ebe4f74bfca60ec6983', class: "dropdown" }, h("div", { key: '060537ade8ff72fe43651ad0e2776bb23a4b9423', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '76efc33a692b6c23e8872e0e0c7e7bca880fb67c', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bc33d6be1efbcf008326b31fd2471325580d618a', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: '68ea2320845d45fb37c9fd3e3f4f0ef55d4e7df0', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '7607adc2969e74a0e2f5d8b4fdce85664ee99583', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: '37ca4f877a27f0b8fd3df9a15db7d05724683f61', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: 'd4b468f4da727d5b5d09320d7fe65e0242b24889', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '70af166b66ac3d494ca7cee79ff02d36593a0a21', class: 'selected-role-label', style: {
32957
+ return (h(Host, { key: 'adc06aa02f40eb9f365bd054fdbc17ec37ff8716' }, h("div", { key: 'c9c48044bdd4b590145f459ab299e76accef6ffa', class: "dropdown" }, h("div", { key: '9895a30c6a2e6962feedfd09436d7f6b45c2e6be', class: "dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: '216a68483c4ba3463e9bd49a7c228e57b00fa2a7', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e09aa4f1fd4f13dc58bf4c0849f1fd78cb80dda8', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'f2fdb78217f014be89293f38d858154d0913e5a5', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '6d67903da3a1d5ccadb81e6d52cd745d7de2267b', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: 'ae2f8081640fe8f320a8445b451ab75c51ff7415', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '5e9fe963642411d4e55a96d5582836400f3dd374', class: 'placing-fields-text' }, "Placing Fields for"), h("div", { key: '8ffffe29c80d7c4eb1891659c709378a9c3f6fc9', class: 'selected-role-label', style: {
32904
32958
  background: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-20)`,
32905
32959
  color: `var(--${this.participantColor(this.selectedRole?.signerIndex)}-90)`,
32906
- } }, h("ls-icon", { key: '64747e141a8a7763ada9e193fba7adc946968ae2', size: "18", name: this.selectedRole?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature' }), this.selectedRole.name || `Participant ${this.selectedRole.signerIndex}`), h("button", { key: 'cbc500d7845376d795b711b083d46469bc8ab2cd', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '86b4aebbfbf647cd2dc4d72143bc052cc58acd22', name: "chevron-down" }))), this.isOpen && (h("div", { key: '01e5074c5e9aa4bbe196a7c15bd8bc778320c085', class: "dropdown-list" }, h("div", { key: '4b30c6958d9560b66a0edfdd80417b004dfa409d', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '025956c7424ba1a0216cf388bab3aca6935abe43', class: 'role-icon', style: {
32960
+ } }, h("ls-icon", { key: 'adf53e3bfec038ea29501a9a345660e05e2df96b', size: "18", name: this.selectedRole?.signerIndex === 0 ? 'user' : this.selectedRole?.signerIndex > 100 ? 'eye' : 'signature' }), this.selectedRole.name || `Participant ${this.selectedRole.signerIndex}`), h("button", { key: 'c5ad6fe12825485d2b07d2e24ff96914cc1c8713', class: 'tertiaryGrey expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: '2f8b34f2f213b794e8c08d56834de53608e86ae6', name: "chevron-down" }))), this.isOpen && (h("div", { key: '025633acc266061aae0ff2e71c1a8288d8419aa0', class: "dropdown-list" }, h("div", { key: 'c3bb123591c89ca9ddc165e45974c463e416cf0c', class: this.selectedRole?.signerIndex === 0 ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole({ signerIndex: 0, name: 'Sender' }), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle' : 'check-circle') }, h("div", { key: '7b7e2539026fcc467985871a8a3ec5090a990690', class: 'role-icon', style: {
32907
32961
  background: `var(--${defaultRolePalette[0]}-40)`,
32908
32962
  color: `var(--${defaultRolePalette[0]}-80)`,
32909
- } }, h("ls-icon", { key: '9aafdf1d2dd8a5c3622cc0af0f53d9a299f569ab', name: "user" })), h("div", { key: 'bc5700a571d05023013a9963cd36fa95a8863297', class: 'role-text' }, h("p", { key: '4f174876a2182121322ea21191e47bacd5cec2bc', class: 'role-name' }, 'Sender'), h("p", { key: '57bbc81c50498c2b02af91756dc32520935bb397', class: 'role-type' }, "You")), h("ls-icon", { key: '004867f576a3d946a8f55f78b326a909210cb828', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
32963
+ } }, h("ls-icon", { key: 'f5c41d6441598e8e5521b03b68036fca4334deb6', name: "user" })), h("div", { key: '9ff52f210dbc37b22ad8fbfc11ca5c97f4e93e0f', class: 'role-text' }, h("p", { key: '4264fc560cd02f2f4b569be4ae3b4dba7a27984f', class: 'role-name' }, 'Sender'), h("p", { key: '916b0b78771ad2f57286ac851da0024b2090046e', class: 'role-type' }, "You")), h("ls-icon", { key: 'ee7a56441d57d661c79981b51aee2e6f4fbc30e6', class: 'check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle' : 'base-circle', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'dropdown-item selected' : 'dropdown-item', onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.check-icon')?.setAttribute('name', 'check-circle'), onMouseLeave: e => e.currentTarget
32910
32964
  .querySelector('.check-icon')
32911
32965
  ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle' : 'check-circle') }, h("div", { class: 'role-icon', style: {
32912
32966
  background: r.signerIndex > 100 ? `var(--${this.participantColor(r?.signerIndex)}-30)` : `var(--${this.participantColor(r?.signerIndex)}-40)`,
32913
32967
  color: `var(--${this.participantColor(r?.signerIndex)}-90)`,
32914
- } }, h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), h("slot", { key: 'cc39fdec4df56f6005859900cc615f3692ed8763' })));
32968
+ } }, h("ls-icon", { name: r.signerIndex > 100 ? 'eye' : 'signature' })), h("div", { class: 'role-text' }, h("p", { class: 'role-name' }, r.name || `Participant ${r.signerIndex}`), h("p", { class: 'role-type' }, r.signerIndex > 200 ? 'Approver' : r.signerIndex > 100 ? 'Witness' : 'Signer')), h("ls-icon", { class: 'check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle' : 'base-circle', solid: r.signerIndex === this.selectedRole?.signerIndex }))))))), h("slot", { key: '3051c3214e714789a52a94b06044deb2e6b61066' })));
32915
32969
  }
32916
32970
  };
32917
32971
  LsParticipantSelect.style = lsParticipantSelectCss;
@@ -32932,7 +32986,7 @@ const LsRadioInput = class {
32932
32986
  render() {
32933
32987
  const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
32934
32988
  const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
32935
- return (h("label", { key: 'dc990966f20e2bb4feffeb56d664e6909ef3580d', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '48d1f6521a5da2ece22a1b9f142a301737ecf41d', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: 'dfb511621431e6eab85971e73f047b041d715bb1', class: 'spanContainer' }, h("span", { key: 'db7af0eefb47aaaa631f497068d9c5b9fab39cf1' }, icon && h("ls-icon", { key: '10750358dfed7f2660bfe51a858f4b4c82c0299f', name: icon, size: "16" })), h("span", { key: 'ebb6584576fcc0cc5aecb5e65d5d44b13ccb6ef0' }, label))));
32989
+ return (h("label", { key: '621ef21ba0ad35eea192888b38baa71cb0b7b5c0', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '81ab1231ce9321fc949126ec4f3b41e1a45a7229', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '96b420d8564684aebc9e26240e9435adeb89f295', class: 'spanContainer' }, h("span", { key: 'd5ae7c5e0b47868453aef50429609060fc0d6989' }, icon && h("ls-icon", { key: 'c40866a3d56e08c08cb5c44e0a296902fb96df9e', name: icon, size: "16" })), h("span", { key: '4efebbaf9020a29f8c2b439d45f772b902f7019d' }, label))));
32936
32990
  }
32937
32991
  };
32938
32992
  LsRadioInput.style = lsRadioInputCss;
@@ -32969,7 +33023,7 @@ const LsSelectInput = class {
32969
33023
  : displayOnly
32970
33024
  ? 'displayOnly'
32971
33025
  : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
32972
- return (h("host", { key: '5404f46b23c51efc24a23c3c73efc9db36e73657', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'c43caf43753b698ce5ac4f8c49d261e11a2113e2', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '7bd50a1fb5ec910fe2cefe3ed81e7c1ad7ea0823', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '8912ffc1c2cc99da4c5fd0407d99073c372217a1' })), h("div", { key: '5241861a1264573cbeab05c8b4bcc813e29203a8', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '37137a9e0fd740f34874598c08d3281b539809f9', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
33026
+ return (h("host", { key: '23a3bd28d346226d7c5c6797a8fb8235bc826ca3', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'e3e62e3955940b53fbfe77109de407049ddc33ca', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '538f2ffec923748499d56619db951587421bb0cc', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '703df2c5108e0e968be453c13db77da508f4675f' })), h("div", { key: '3ff197806e02d925e5d677b472a2502784cac157', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '4eb47121bc35a79ae4fb3b763c38b8d5a68f62ed', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
32973
33027
  }
32974
33028
  };
32975
33029
  LsSelectInput.style = lsSelectInputCss;
@@ -33015,11 +33069,11 @@ const LsStatusbar = class {
33015
33069
  }
33016
33070
  render() {
33017
33071
  console.log('editor', this.editor);
33018
- return (h(Host, { key: 'ea525e6f8646c08be30354b2f2d1d36e21c995ba' }, h("div", { key: 'cf4cf005f20ce4bf620fb83b5cf7d02e230feb53', class: "status-bar-section" }, h("button", { key: '9f1921447fdea726f82dffad74ff88920d79f487', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'e5d681a4c0bb88dd69b39e931beb15df5d3a8548', name: "zoom-out" })), h("div", { key: '2655a0d7eb16c14bd67a546bbc000b6b42458b98' }, h("input", { key: 'def758649e35599d62bdfd064459f077332bd14e', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '229d1430e6e95636e962bf6b3d6e36c6ae235cb9', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'e7447b83ec8771b3284f7d2dfd9041c90fdcdb59', name: "zoom-in" }))), h("div", { key: 'cedaa23937a88d80777f8edce525408b0135d614', class: "status-bar-section" }, h("button", { key: 'f80d6ed2eed2ea8e51e64bb8a364be438ed19dcf', onClick: () => this.fitWidth() }, h("ls-icon", { key: '41558075bd1aa98e5d6318b691f2d6f40d526144', name: "fit-width" })), h("button", { key: '22028567cd63cf80157342f6b8af5039eb880c56', onClick: () => this.fitHeight() }, h("ls-icon", { key: '31dfcbaeb893d14b54798758207dd01c3276d7f0', name: "fit-height" }))), h("div", { key: '51a2d7a31fafd9e4cc408b92a92ceca3c672697d', class: "status-bar-section" }, h("button", { key: 'e7f179826b17caa8674a0f80a0de000ccebfb318', onClick: () => {
33072
+ return (h(Host, { key: '29e74976e7444161b89f0fa80ba142eff3032d63' }, h("div", { key: '4503a9ff460e9266d8432e1ad8d0927753fc46c6', class: "status-bar-section" }, h("button", { key: 'bca26ed3b8d5b788b0a4359e5d5ddd793a3e98a7', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'f249a5e2adcf4395caf67dbd584ca463084a4830', name: "zoom-out" })), h("div", { key: 'aa832c008d5f55566c3bb2986fe39dc32158f8cf' }, h("input", { key: '12562098a3495a8b5daefaaa56241ce7ac72cae2', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '2d37fb2a3dd4834ac8eab5471e6d5382a5cbe4b2', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '885fb40cafe1d04a5fc2282f0488167e3787104b', name: "zoom-in" }))), h("div", { key: '3fb58e160add6ec615df61d7c31727ffba1073d3', class: "status-bar-section" }, h("button", { key: '26b3681201915faecfa5c54093dc7f6f4c2e2bae', onClick: () => this.fitWidth() }, h("ls-icon", { key: 'cde71d2e228468736d6f61d8dbb9a985d56ed87b', name: "fit-width" })), h("button", { key: '03ce74b5f0669a43ee1630b6c99eb583f5572d6a', onClick: () => this.fitHeight() }, h("ls-icon", { key: 'c7ca92cc5ca9ea331f933b523fd451d9cca494bf', name: "fit-height" }))), h("div", { key: 'd6677fed47861805989c4a52cfbfcf6754857864', class: "status-bar-section" }, h("button", { key: '0d5a5616e15f68911efce0573507337491c7e304', onClick: () => {
33019
33073
  this.editor.pagePrev();
33020
- } }, h("ls-icon", { key: 'f76093367b1ae81db37d0621722703e42407ba84', name: "chevron-left" })), h("p", { key: '72f7ddb0e090c946df6c7e47cdd45f3074f73d68' }, "1 / 2"), h("button", { key: 'f83e36917ed5082ac865aee641c4ced4d39f4ba0', onClick: () => {
33074
+ } }, h("ls-icon", { key: '599d5eee4d7aae6719972efd8c150a90d3a61245', name: "chevron-left" })), h("p", { key: 'afbbd26449146e65a5f44e21bf49095da39bc59d' }, "1 / 2"), h("button", { key: 'b751678f28ac886ff4aba3df87d7368e1b80d504', onClick: () => {
33021
33075
  this.editor.pageNext();
33022
- } }, h("ls-icon", { key: '877c0a545d80a06964a9d1ac34019f0c6361cd6f', name: "chevron-right" }))), h("slot", { key: '7110433cf65751673c3ae4d47257b296086fda1c' })));
33076
+ } }, h("ls-icon", { key: '95175e526b2e7361d94d6ae1d1b704b402ae17ba', name: "chevron-right" }))), h("slot", { key: '35082524ac623c9146016b6c7fb344365e48625c' })));
33023
33077
  }
33024
33078
  };
33025
33079
  LsStatusbar.style = lsStatusbarCss;
@@ -33059,7 +33113,7 @@ const LsTextInput = class {
33059
33113
  : dirty && !valid
33060
33114
  ? 'invalid'
33061
33115
  : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
33062
- return (h(Host, { key: '2978808bf54b2b522a024edf435474cdf8a91493', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'fafd7c95669dcdf5624b9f755e38682e7821e426', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), h("div", { key: '919854e0f69d87869ff766f77d414ec6567ecb91', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'c771152b3c5f32f76846c25cd1231a0a4b3b8a01', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '3e6ea76efc810432a16d2ecb220d7fa65e8aa1f1', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '505faf86093fbe3ff1122c3192c68ec48628a2fb', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '3aa26d8404de80855fecc8d9ecd9aa3bda67bdb8', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
33116
+ return (h(Host, { key: 'ece2114bb17097f9748baf7b5ba7816c940b0da3', class: 'host' }, fieldIcon && (h("ls-icon", { key: '42566241f476a8d076379977825a021568d2eaff', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), type === 'password' ? (h("input", { type: showPassword && 'password', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })) : type === 'displayonly' ? (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: true })) : (h("input", { class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled })), h("div", { key: 'f23fd439c838e6433856b1a8c844f3885c1afcd5', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'dcad35ca05b968901cb7477aeede0d6267b23d41', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '76fc749f7551b089f38cb7def68dac0b62ed350e', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '52f58af15ca770863e09bb4c46f4017304a5effb', id: 'buttonIcon', name: buttonIcon }))), type === 'password' && !buttonIcon && (h("ls-icon-button", { key: '73f521570c8846caa8ca5f5e2b50bf9602544782', id: 'password-icon', icon: showPassword ? 'eye' : 'eye-off', onClick: handlePassword })))));
33063
33117
  }
33064
33118
  };
33065
33119
  LsTextInput.style = lsTextInputCss;
@@ -33095,7 +33149,7 @@ const LsTextareaInput = class {
33095
33149
  : displayOnly
33096
33150
  ? 'displayOnly'
33097
33151
  : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
33098
- return (h("host", { key: '371f2b1fe9a694762079ddff3b058a15f11d9710', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'fe998b8e39c3acd32cf69f3e5c8580f36242afda', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: 'a4a18e12eafa77ee49684b8ebe0c46aeb6baddbd', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: 'ba0e06f5862510f09e83c3d7c703453dbb7e3a0d', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'b181bca3400830764a78c26b617b80e0876f8b35', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '0723e5fb856398a70fc936dfa1fec8ea0a767dda', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '7fedc63c34c2188432efae00b1ee9d499ca56a8e', id: 'buttonIcon', name: buttonIcon }))))));
33152
+ return (h("host", { key: '33417515941cf937c4734d99c744cac2050c1517', class: 'host' }, fieldIcon && (h("ls-icon", { key: '3d0d5ffe3a48a0bcdd034d7956b32536e645fa43', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("textarea", { key: '7bed853348e26ea3436cd98b3f8fe44ac644a70f', class: inputClass, id: name, name: name, value: value, maxlength: countMax, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled }), h("div", { key: '7ac04c2c6fea8dd58d54573bd242be1dd9603f53', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: 'd01bd35115a651fe7cbd752dfbdf49625cdcc1a1', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && (h("button", { key: '43dc1db404f654aaa6d38d7cb71b1b0eebae6fb2', class: 'button', onClick: buttonClick }, h("ls-icon", { key: 'facf4fbde3b718a93d7198ed4f77bd293b8df5f5', id: 'buttonIcon', name: buttonIcon }))))));
33099
33153
  }
33100
33154
  };
33101
33155
  LsTextareaInput.style = lsTextareaInputCss;
@@ -33107,7 +33161,7 @@ const LsToggle = class {
33107
33161
  registerInstance(this, hostRef);
33108
33162
  }
33109
33163
  render() {
33110
- return (h(Host, { key: '1a3e104280a39b83b82c0454cebad829a38353a7' }, h("label", { key: '7a9ee630ff623aa25d1364409aa77ddb2b1abec9', class: "switch" }, h("input", { key: '78a3c7e6199561d2b446ee01d4f483f064985c06', type: "checkbox" }), h("span", { key: '0f8f18a6e0dc1621d2d6eb0db18accb1ac3617ce', class: "slider round" })), h("slot", { key: 'cc23067cdab76afb4788700db8076c2a6314fb3b' })));
33164
+ return (h(Host, { key: '14aa511f200cbc949d135b07cb07a70b7edfbdcf' }, h("label", { key: 'f994ca1531ab9080830b74c751965475308f3572', class: "switch" }, h("input", { key: 'be377728a99b1163f6d61e8d3ffe12d2f9da205a', type: "checkbox" }), h("span", { key: 'a8498a99718af2a5be833eef6b6d95d76aae29ff', class: "slider round" })), h("slot", { key: 'bd760e7276a77d97bba2799beff818aef974d2ee' })));
33111
33165
  }
33112
33166
  };
33113
33167
  LsToggle.style = lsToggleCss;
@@ -33150,12 +33204,12 @@ const LsToolbar = class {
33150
33204
  this.update.emit(diffs);
33151
33205
  }
33152
33206
  render() {
33153
- return (h(Host, { key: '20d1b50b89d3237b3b49e751d75bd1bd7f54b5f4' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '347f742c35f16a5d79a29f7b4e867e198f9bb48b' })));
33207
+ return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '7790e788903c493268ab783df10ebce9662afc84' })));
33154
33208
  }
33155
33209
  };
33156
33210
  LsToolbar.style = lsToolbarCss;
33157
33211
 
33158
- const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--blue-60, #5684f0);background:var(--blue-10, #f0f6ff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--blue-60, #5684f0)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}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)}";
33212
+ const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}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)}";
33159
33213
 
33160
33214
  const LsToolboxField = class {
33161
33215
  constructor(hostRef) {
@@ -33183,6 +33237,10 @@ const LsToolboxField = class {
33183
33237
  * The starting width of this control type in pixels.
33184
33238
  */
33185
33239
  defaultWidth;
33240
+ /**
33241
+ * The signer color of the element
33242
+ */
33243
+ color = 'primary';
33186
33244
  handleDragStart(event) {
33187
33245
  // Add the target element's id to the data transfer object
33188
33246
  event.dataTransfer.setData('application/json', JSON.stringify({
@@ -33200,7 +33258,7 @@ const LsToolboxField = class {
33200
33258
  }
33201
33259
  }
33202
33260
  render() {
33203
- return (h(Host, { key: '3b1c762ec69f8b6c9fca18ba946aa39a45d0ac0a', draggable: "true" }, h("div", { key: '438540d9722e9fe01cef7f54e606493856ad496f', class: "toolbox-field-icon" }, h("ls-icon", { key: 'f7f73ce11d7f1c60a86a6e0d828b0b9b36d858f5', name: this.icon, size: "20" })), h("p", { key: '08fe18e47c355dfc281f8ecfe80760077c357d33', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: 'ea542c61355b66087f052a616b2dc677f9a694d8', name: "drag-vertical", size: "16", color: "#787a80" })));
33261
+ return (h(Host, { key: '14ad8062f22a1d3eb0130dbd26bf06c522c6b4e6', draggable: "true" }, h("div", { key: 'd4da463a5786f80d87d472ab19e812c4d4395f35', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: 'a2453e407f4681bfc14ea9b4d01d54d8ae00a47f', name: this.icon, size: "20" })), h("p", { key: '61b6673d2b2af3a80e049bcccf01be4c94eabbe7', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '53a1e91ee1ddc89e1e6835c7e96efb56583fbce5', name: "drag-vertical", size: "16", color: "#787a80" })));
33204
33262
  }
33205
33263
  };
33206
33264
  LsToolboxField.style = lsToolboxFieldCss;