legalesign-document-viewer 0.4.0 → 0.4.2

package/dist/components/ls-recipient-card.js

@@ -1,4 +1,4 @@
-import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-CTP4wFFE.js';
+import { L as LsRecipientCard$1, d as defineCustomElement$1 } from './p-Kpy4Ytig.js';
 
 const LsRecipientCard = LsRecipientCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-toolbox-field.js

@@ -1,4 +1,4 @@
-import { L as LsToolboxField$1, d as defineCustomElement$1 } from './p-CrXwf_vC.js';
+import { L as LsToolboxField$1, d as defineCustomElement$1 } from './p-COypjAnE.js';
 
 const LsToolboxField = LsToolboxField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-validation-manager.js

@@ -1,4 +1,4 @@
-import { L as LsValidationManager$1, d as defineCustomElement$1 } from './p-C8TAonIH.js';
+import { L as LsValidationManager$1, d as defineCustomElement$1 } from './p-BIqQK9GI.js';
 
 const LsValidationManager = LsValidationManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-C8TAonIH.js → p-BIqQK9GI.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CEhCcP_A.js';
 import { d as defaultRolePalette } from './p-CwCWCxsI.js';
 import { d as defineCustomElement$3 } from './p-CtV1B-_5.js';
-import { d as defineCustomElement$2 } from './p-CrXwf_vC.js';
+import { d as defineCustomElement$2 } from './p-COypjAnE.js';
 import { d as defineCustomElement$1 } from './p-DC0HL60H.js';
 
 const lsValidationManagerCss = ":host{display:block}*{box-sizing:border-box;margin:0}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.validation-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
@@ -66,6 +66,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsValidationManager as L, defineCustomElement as d };
-//# sourceMappingURL=p-C8TAonIH.js.map
+//# sourceMappingURL=p-BIqQK9GI.js.map
 
-//# sourceMappingURL=p-C8TAonIH.js.map
+//# sourceMappingURL=p-BIqQK9GI.js.map

package/dist/components/{p-C8TAonIH.js.map → p-BIqQK9GI.js.map}

@@ -1 +1 @@
-{"file":"p-C8TAonIH.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,2iFAA2iF;;MCU7jF,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;AAE9B;;;AAGG;AACK,IAAA,gBAAgB;IAExB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,0BAA0B,EAAuB,EAAA,iBAAA,CAAA,EAC7D,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,6BAA6B,EAAA,EAAA,sEAAA,CAElC,CACA,EACL,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;YACjE,MAAM,WAAW,GAAG,KAAK,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,IAAI,EAAE,WAAW,GAAG,GAAG,GAAG,IAAI;AACpF,YAAA,MAAM,QAAQ,GAAG,kBAAkB,CAAC,WAAW,IAAI,KAAK,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC;AAE/E,YAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,gBAAgB,EACvB,KAAK,EAAE;oBACL,oBAAoB,EAAE,QAAQ,CAAC,GAAG;oBAClC,sBAAsB,EAAE,QAAQ,CAAC,GAAG;oBACpC,0BAA0B,EAAE,QAAQ,CAAC,GAAG;oBACxC,oBAAoB,EAAE,QAAQ,CAAC,GAAG;oBAClC,0BAA0B,EAAE,QAAQ,CAAC,GAAG;oBACxC,4BAA4B,EAAE,QAAQ,CAAC,GAAG;AAC3C,iBAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAI,CAAA,EACzD,KAAK,EAAE,IAAI,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,2BAA2B,EAAA,EACrC,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAA,EAAG,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,CAAA,OAAA,EAAU,KAAK,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC,CAAA,CAAE,CAAK,EACrG,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAA,EAC/E,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAA,OAAA,EAAU,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,CAAC,CAAA,CAAE,CAC1E,CACF,CACP,EACA,KAAK,EAAE,OAAO,KACb,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,IAAA,EACC,CAAA,CAAA,kBAAA,EAAA,EACK,WAAW,EAAC,WAAW,EACvB,eAAe,EAAC,WAAW,EAC3B,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,wDAAwD,EAChE,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EAC5B,CAAA,EAEJ,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAA,EAAG,KAAK,CAAC,IAAI,EAAE,IAAI,IAAI,CAAA,EAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAA,CAAA,EAAI,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,CAAA,CAAE,CAAK,EAC5H,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAA,EAC/E,KAAK,CAAC,WAAW,CACd,CACL,CACJ,CACG,CACF;AAEV,SAAC,CAAC,CACE,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-validation-manager/ls-validation-manager.css?tag=ls-validation-manager&encapsulation=shadow","src/components/ls-validation-manager/ls-validation-manager.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.toolbox-section-description {\n  color: var(--gray-80, #5e6066);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.validation-section-title {\n  color: var(--gray-100, #45484d);\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.valid-label {\n  display: flex;\n  padding: 2px 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--yellow-20, #fff3c2);\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.role-label {\n  display: flex;\n  padding: 2px 3px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.dropdown-header h2 {\n  color: var(--gray-100, #45484d);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.dropdown-header p {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-validation-manager',\n  styleUrl: 'ls-validation-manager.css',\n  shadow: true,\n})\n\nexport class LsValidationManager {\n\n  /**\n   * The template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() validationErrors: ValidationError[];\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div>\n            <div class={'validation-section-title'}>Action Required</div>\n            <p class=\"toolbox-section-description\">\n              This document needs fields added or corrected before it can be sent.\n            </p>\n          </div>\n          {this.validationErrors && this.validationErrors.map((field, idx) => {\n            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n            return (\n              <div\n                key={idx}\n                class={'required-field'}\n                style={{\n                  '--field-background': pallette.s10,\n                  '--field-border-color': pallette.s10,\n                  '--field-background-hover': pallette.s20,\n                  '--field-text-color': pallette.s70,\n                  '--field-text-color-hover': pallette.s80,\n                  '--field-border-color-hover': pallette.s60,\n                }}\n              >\n                <div class={'required-field-items-left'}>\n                  <div class={'dot'} style={{ background: pallette.s60 }} />\n                  {field?.role && (\n                    <div class={'required-field-items-left'}>\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                      </div>\n                    </div>\n                  )}\n                  {field?.element && (\n                    <>\n                     <ls-toolbox-field\n                          elementType=\"signature\"\n                          formElementType=\"signature\"\n                          label=\"Signature\"\n                          defaultHeight={27}\n                          defaultWidth={120}\n                          validation={0}\n                          icon=\"signature\"\n                          tooltip=\"Use this field to collect Signatures from Participants\"\n                          signer={field.element.signer}\n                        />\n\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.description}\n                      </div>\n                    </>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BIqQK9GI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-validation-manager/ls-validation-manager.css?tag=ls-validation-manager&encapsulation=shadow","src/components/ls-validation-manager/ls-validation-manager.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.toolbox-section-description {\n  color: var(--gray-80, #5e6066);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.validation-section-title {\n  color: var(--gray-100, #45484d);\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.valid-label {\n  display: flex;\n  padding: 2px 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--yellow-20, #fff3c2);\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.role-label {\n  display: flex;\n  padding: 2px 3px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.dropdown-header h2 {\n  color: var(--gray-100, #45484d);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.dropdown-header p {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { ValidationError } from '../../types/ValidationError';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-validation-manager',\n  styleUrl: 'ls-validation-manager.css',\n  shadow: true,\n})\n\nexport class LsValidationManager {\n\n  /**\n   * The template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() validationErrors: ValidationError[];\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <div>\n            <div class={'validation-section-title'}>Action Required</div>\n            <p class=\"toolbox-section-description\">\n              This document needs fields added or corrected before it can be sent.\n            </p>\n          </div>\n          {this.validationErrors && this.validationErrors.map((field, idx) => {\n            const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n            const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n            return (\n              <div\n                key={idx}\n                class={'required-field'}\n                style={{\n                  '--field-background': pallette.s10,\n                  '--field-border-color': pallette.s10,\n                  '--field-background-hover': pallette.s20,\n                  '--field-text-color': pallette.s70,\n                  '--field-text-color-hover': pallette.s80,\n                  '--field-border-color-hover': pallette.s60,\n                }}\n              >\n                <div class={'required-field-items-left'}>\n                  <div class={'dot'} style={{ background: pallette.s60 }} />\n                  {field?.role && (\n                    <div class={'required-field-items-left'}>\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                      </div>\n                    </div>\n                  )}\n                  {field?.element && (\n                    <>\n                     <ls-toolbox-field\n                          elementType=\"signature\"\n                          formElementType=\"signature\"\n                          label=\"Signature\"\n                          defaultHeight={27}\n                          defaultWidth={120}\n                          validation={0}\n                          icon=\"signature\"\n                          tooltip=\"Use this field to collect Signatures from Participants\"\n                          signer={field.element.signer}\n                        />\n\n                      <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                      <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                        {field.description}\n                      </div>\n                    </>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CrXwf_vC.js → p-COypjAnE.js}

@@ -49,6 +49,17 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
     isSelected = false;
     fieldTypeSelected;
     handleDragStart(event) {
+        var canvas = document.createElement('div');
+        canvas.style.position = 'absolute';
+        canvas.style.left = '-100%';
+        canvas.style.zIndex = '-100';
+        canvas.style.height = this.defaultHeight + 'px';
+        canvas.style.width = this.defaultWidth + 'px';
+        canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+        canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;
+        canvas.innerHTML = this.formElementType;
+        document.body.appendChild(canvas);
+        event.dataTransfer.setDragImage(canvas, -50, -20);
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
             formElementType: this.formElementType,
@@ -69,7 +80,7 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '23a50f46d363a41bc0f0a42a7892d5ffb1099fcf', draggable: "true" }, h("div", { key: '9afa09051e7c34a40a07c3c1394c3b581d53f5b0', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: 'b8ba3bf139801233d2d81b5648d1a638505e0972', draggable: "true" }, h("div", { key: '9f6f1f44479fa2157daf47a3504b689d9e420b7b', class: 'ls-toolbox-field', style: this.isSelected && {
                 background: defaultRolePalette[this.signer % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
                 color: defaultRolePalette[this.signer % 100].s80,
@@ -84,9 +95,9 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: 'bfedf0d04f2806183d1c1d8957ecfe717eac8660', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '47ffa6ad7b778d4add640e2f43d8209c8412b1b8', name: this.icon, size: "20" })), h("p", { key: '9df555ea8f8e2f5db2805835eec7695207878264', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: '30345c85a9b6b6a721813bb4f013087b4a8cabba', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '765ea21ea33d53efd63ba1b79a1f573cf86d51e8', name: this.icon, size: "20" })), h("p", { key: '233dc63ee920abb8402e44b0ba9c5398034bb5bb', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), this.redDot && (h("div", { key: '9330738644de92f4fb4ced713dd276ab0b6bf154', class: 'warning-box' }, h("ls-icon", { key: '90fdcff3ce9dafe226798b1a0269e00f0bd29684', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '625c450c17234d6efd14c706e03b73d8bab8f8f5', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '77db2859250fd4aaebdd9d46e2e3aaf93afa4354', id: "ls-tooltip-master", tooltipText: "Something" })));
+            } }, this.label), this.redDot && (h("div", { key: '9f4c19c86d0a4dad73e0d3f9b4607e845065ed0c', class: 'warning-box' }, h("ls-icon", { key: 'd304104665589be58cfe07c425d3e27251019279', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '69daa9ade2b006ee3d7e15cd92ce607c21fb7a43', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6068cd2f85ee3baf054b20d7b5738d7421894f25', id: "ls-tooltip-master", tooltipText: "Something" })));
     }
     static get style() { return lsToolboxFieldCss; }
 }, [257, "ls-toolbox-field", {
@@ -129,6 +140,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsToolboxField as L, defineCustomElement as d };
-//# sourceMappingURL=p-CrXwf_vC.js.map
+//# sourceMappingURL=p-COypjAnE.js.map
 
-//# sourceMappingURL=p-CrXwf_vC.js.map
+//# sourceMappingURL=p-COypjAnE.js.map

package/dist/components/p-COypjAnE.js.map

@@ -0,0 +1 @@
+{"file":"p-COypjAnE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbox-field/ls-toolbox-field.css?tag=ls-toolbox-field&encapsulation=shadow","src/components/ls-toolbox-field/ls-toolbox-field.tsx"],"sourcesContent":[".ls-toolbox-field {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.875rem;\n  border-radius: 1rem;\n  border: 1px solid var(--gray-20, #edeff2);\n  background: white;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-toolbox-field:hover {\n  background: var(--gray-10, #f7f8fa);\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  border: 1px solid var(--gray-30, #e0e2e5);\n}\n\n.warning-box {\n  display: flex;\n  padding: 0.38rem;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.625rem;\n  border: 1px solid var(--red-40, #fca39a);\n  background: var(--red-10, #fff1f0);\n  color: var(--red-60, #f04438);\n}\n\n\n\n.toolbox-field-icon {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  border-radius: 0.5rem;\n  border: 1px solid var(--signer-color);\n  background: var(--signer-color-light);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  color: var(--signer-color);\n}\n\n.toolbox-field-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  width: 100%;\n  margin: 0;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Event, Host, Listen, Prop, Element, h, EventEmitter } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.css',\n  shadow: true,\n})\nexport class LsToolboxField {\n  @Element() component: HTMLElement;\n  /**\n   * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.\n   */\n  @Prop() formElementType: string;\n  @Prop() elementType: string;\n  @Prop() validation: number = 0;\n  @Prop() fixedAspect: number | null = null;\n  @Prop() redDot: boolean = false;\n\n  /**\n   * The text to display for this field type.\n   */\n  @Prop() label: string;\n\n  /**\n   * The icon to display for this field type.\n   */\n  @Prop() icon: Icon;\n  /**\n   * The tooltip hint to describe to the field type\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * The starting height of this control type in pixels.\n   */\n  @Prop() defaultHeight: number;\n  /**\n   * The starting width of this control type in pixels.\n   */\n  @Prop() defaultWidth: number;\n\n  /**\n   * The signer color of the element\n   */\n  @Prop() signer: number = 0;\n\n  @Prop({ mutable: true }) isSelected: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  fieldTypeSelected: EventEmitter<{\n    label: string;\n    elementType: string;\n    defaultHeight: number;\n    defaultWidth: number;\n    formElementType: string;\n    validation: number;\n    fixedAspect: number | null;\n  }>;\n\n  @Listen('dragstart')\n  handleDragStart(event) {\n\n    var canvas = document.createElement('div');\n    canvas.style.position = 'absolute';\n    canvas.style.left = '-100%';\n    canvas.style.zIndex = '-100';\n    canvas.style.height = this.defaultHeight +'px';\n    canvas.style.width = this.defaultWidth +'px';\n    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';\n    canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;\n    canvas.innerHTML = this.formElementType;\n    document.body.appendChild(canvas); \n\n    event.dataTransfer.setDragImage(canvas, -50, -20);\n\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        formElementType: this.formElementType,\n        elementType: this.elementType,\n        validation: this.validation,\n        defaultHeight: this.defaultHeight,\n        defaultWidth: this.defaultWidth,\n        fixedAspect: this.fixedAspect,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'copy';\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'ArrowDown') {\n      console.log('down arrow pressed');\n    }\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host draggable=\"true\">\n        <div\n          class={'ls-toolbox-field'}\n          style={\n            this.isSelected && {\n              background: defaultRolePalette[this.signer % 100].s10,\n              border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,\n              color: defaultRolePalette[this.signer % 100].s80,\n              boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,\n            }\n          }\n          onClick={() => {\n            this.fieldTypeSelected.emit({\n              label: this.label,\n              formElementType: this.formElementType,\n              elementType: this.elementType,\n              validation: this.validation,\n              defaultHeight: this.defaultHeight,\n              defaultWidth: this.defaultWidth,\n              fixedAspect: this.fixedAspect,\n            });\n          }}\n        >\n          <div\n            class=\"toolbox-field-icon\"\n            style={{ '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }}\n            data-tooltip={this.tooltip}\n            data-tooltip-placement=\"right\"\n          >\n            <ls-icon name={this.icon} size=\"20\" />\n          </div>\n          <p\n            class=\"toolbox-field-label\"\n            style={\n              this.isSelected && {\n                color: defaultRolePalette[this.signer % 100].s80,\n              }\n            }\n          >\n            {this.label}\n          </p>\n          {this.redDot && (\n            <div class={'warning-box'}>\n              <ls-icon name=\"exclamation-circle\" size=\"18\" solid />\n            </div>\n          )}\n          <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n        </div>\n        <ls-tooltip id=\"ls-tooltip-master\" tooltipText=\"Something\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CTP4wFFE.js → p-Kpy4Ytig.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CEhCcP_A.js';
 import { d as defaultRolePalette } from './p-CwCWCxsI.js';
 import { d as defineCustomElement$3 } from './p-CtV1B-_5.js';
-import { d as defineCustomElement$2 } from './p-CrXwf_vC.js';
+import { d as defineCustomElement$2 } from './p-COypjAnE.js';
 import { d as defineCustomElement$1 } from './p-DC0HL60H.js';
 
 const lsRecipientCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.75rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch}.dot{width:0.5rem;height:0.5rem;background:var(--red-50, #ff706b);border-radius:50%;margin-right:0.25rem}.top-card{border-radius:1rem 1rem 0 0}.full-card{border-radius:1.5rem}.bottom-card{border-radius:0 0 1rem 1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.fields-box{display:flex;flex-direction:column;gap:0.5rem;width:100%}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}.participant-card-text{padding:0 0.125rem 0.125rem 0.125rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px;width:100%}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0c34b8)}button.destructive{border:1px solid var(--red-60, #f04438);background:transparent;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0);background-color:var(--red-10, #fff1f0)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
@@ -100,6 +100,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsRecipientCard as L, defineCustomElement as d };
-//# sourceMappingURL=p-CTP4wFFE.js.map
+//# sourceMappingURL=p-Kpy4Ytig.js.map
 
-//# sourceMappingURL=p-CTP4wFFE.js.map
+//# sourceMappingURL=p-Kpy4Ytig.js.map

package/dist/components/{p-CTP4wFFE.js.map → p-Kpy4Ytig.js.map}

@@ -1 +1 @@
-{"file":"p-CTP4wFFE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-recipient-card/ls-recipient-card.css?tag=ls-recipient-card&encapsulation=shadow","src/components/ls-recipient-card/ls-recipient-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.75rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n}\n\n.dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--red-50, #ff706b);\n  border-radius: 50%;\n  margin-right: 0.25rem;\n}\n\n.top-card {\n  border-radius: 1rem 1rem 0 0;\n}\n\n.full-card {\n  border-radius: 1.5rem;\n}\n\n.bottom-card {\n  border-radius: 0 0 1rem 1rem;\n}\n\n.participant-card-inner {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.form-button-set {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.fields-box {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.role-label.fields {\n  border-radius: 1rem;\n  margin-top: 0.5rem;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--default-button-colour);\n}\n\n.innerButton:hover {\n  color: var(--hover-button-colour);\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.button-set {\n  display: flex;\n  gap: 0.125rem;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n}\n\n/* Global Styles */\n\n.full-width {\n  width: 100%;\n}\n\n.participant-card-text {\n  padding: 0 0.125rem 0.125rem 0.125rem;\n}\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.tertiary {\n  border: 1px solid var(--primary-60, #4456f6);\n  background: transparent;\n  color: var(--primary-70, #2134dc);\n}\n\nbutton.tertiary:hover {\n  border: 1px solid var(--primary-70, #2134dc);\n  border: 1px solid var(--primary-80, #0c34b8);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background: transparent;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n  background-color: var(--red-10, #fff1f0);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-recipient-card',\n  styleUrl: 'ls-recipient-card.css',\n  shadow: true,\n})\nexport class LsRecipientCard {\n  /**\n   * The initial template data, including the link for background PDF. See README and\n   * example for correct GraphQL query and data structure.\n   * {LSApiTemplate}\n   */\n  @Prop() recipient: LSApiRecipient;\n  @Prop() activeRecipient: number;\n  @Prop() template: LSApiTemplate;\n  @State() isHovered: boolean = false;\n\n  private setIsHovered(value: boolean) {\n    this.isHovered = value;\n  }\n  @Prop() validationErrors: ValidationError[] = [];\n  \n  /**\n   * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n   * {string}\n   */\n  @Prop() filtertoolbox?: string = null;\n\n  // Send an internal event to be processed\n  @Event() changeSigner: EventEmitter<number>;\n\n  showTool(fieldFormType: string): boolean {\n    return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n  }\n\n  render() {\n    const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];\n    const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');\n    return (\n      <Host>\n        <div\n          class={'participant-card top-card full-card'}\n          style={{\n            background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n            outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n            marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n            cursor: 'pointer',\n          }}\n          onClick={() => {\n            this.changeSigner.emit(this.recipient.signerIndex);\n          }}\n          onMouseEnter={() => {\n            this.setIsHovered(true);\n          }}\n          onMouseLeave={() => {\n            this.setIsHovered(false);\n          }}\n        >\n          <div class={'participant-card-inner'}>\n            <div class={'participant-card-top-items'}>\n              <div\n                class={'role-label'}\n                style={{\n                  background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n                {String(this.recipient?.signerIndex).padStart(2, '0')}\n              </div>\n              <ls-icon\n                name=\"cursor-click\"\n                size=\"16\"\n                customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n                solid\n                style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n              />\n              <div class=\"dot\" style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }} />\n            </div>\n\n            <div class={'participant-card-text'}>\n              <p\n                class=\"participant-text-description\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n                }}\n              >\n                {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n              </p>\n              <p\n                class=\"participant-text-type\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n                }}\n              >\n                {this.recipient.email}\n              </p>\n              {/* {this.recipient?.roleType !== 'APPROVER' && (\n                <div\n                  class={'role-label fields'}\n                  style={{\n                    background:\n                      recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                    color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                    // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n                  }}\n                >\n                  {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                  {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n                </div>\n              )} */}\n            </div>\n            {this.recipient.signerIndex === this.activeRecipient && (\n              <div class=\"fields-box\">\n                {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n                  <ls-toolbox-field\n                    elementType=\"signature\"\n                    formElementType=\"signature\"\n                    label=\"Signature\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={0}\n                    icon=\"signature\"\n                    tooltip=\"Use this field to collect Signatures from Participants\"\n                    signer={this.recipient.signerIndex}\n                    redDot={recipientSignatures.length === 0}\n                  />\n                )}\n\n                {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n                  <ls-toolbox-field\n                    elementType=\"auto sign\"\n                    formElementType=\"auto sign\"\n                    label=\"Auto Sign\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={3000}\n                    icon=\"auto-sign\"\n                    tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('text') && (\n                  <ls-toolbox-field\n                    elementType=\"text\"\n                    formElementType=\"text\"\n                    label=\"Text\"\n                    defaultHeight={27}\n                    defaultWidth={100}\n                    validation={0}\n                    icon=\"text\"\n                    tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n                  <ls-toolbox-field\n                    elementType=\"signing date\"\n                    formElementType=\"signing date\"\n                    label=\"Signing Date\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={30}\n                    icon=\"auto-date\"\n                    tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('date') && (\n                  <ls-toolbox-field\n                    elementType=\"date\"\n                    formElementType=\"date\"\n                    label=\"Date\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={2}\n                    icon=\"calender\"\n                    tooltip=\"A field for collecting dates with built-in date formatting options\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('email') && (\n                  <ls-toolbox-field\n                    elementType=\"email\"\n                    formElementType=\"email\"\n                    label=\"Email\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={1}\n                    icon=\"at-symbol\"\n                    tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('initials') && (\n                  <ls-toolbox-field\n                    elementType=\"initials\"\n                    formElementType=\"initials\"\n                    label=\"Initials\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={2000}\n                    icon=\"initials\"\n                    tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('number') && (\n                  <ls-toolbox-field\n                    elementType=\"number\"\n                    formElementType=\"number\"\n                    label=\"Number\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={50}\n                    icon=\"hashtag\"\n                    tooltip=\"A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('dropdown') && (\n                  <ls-toolbox-field\n                    elementType=\"dropdown\"\n                    formElementType=\"dropdown\"\n                    label=\"Dropdown\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={20}\n                    icon=\"dropdown\"\n                    tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('checkbox') && (\n                  <ls-toolbox-field\n                    elementType=\"checkbox\"\n                    formElementType=\"checkbox\"\n                    label=\"Checkbox\"\n                    defaultHeight={27}\n                    defaultWidth={27}\n                    validation={25}\n                    icon=\"check\"\n                    tooltip=\"Places a checkbox on your document. Handy for T&Cs or  ✔/✗ sections\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n                  <ls-toolbox-field\n                    elementType=\"regex\"\n                    formElementType=\"regex\"\n                    label=\"Regex\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={93}\n                    icon=\"code\"\n                    tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('image') && (\n                  <ls-toolbox-field\n                    elementType=\"image\"\n                    formElementType=\"image\"\n                    label=\"Image\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"photograph\"\n                    tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('file') && (\n                  <ls-toolbox-field\n                    elementType=\"file\"\n                    formElementType=\"file\"\n                    label=\"File\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={74}\n                    icon=\"upload\"\n                    tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n                  <ls-toolbox-field\n                    elementType=\"drawn\"\n                    formElementType=\"drawn\"\n                    label=\"Drawn\"\n                    defaultHeight={120}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"pencil\"\n                    tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Kpy4Ytig.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,srNAAsrN;;MCWpsN,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;AAC1B;;;;AAIG;AACK,IAAA,SAAS;AACT,IAAA,eAAe;AACf,IAAA,QAAQ;IACP,SAAS,GAAY,KAAK;AAE3B,IAAA,YAAY,CAAC,KAAc,EAAA;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;IAEhB,gBAAgB,GAAsB,EAAE;AAEhD;;;AAGG;IACK,aAAa,GAAY,IAAI;;AAG5B,IAAA,YAAY;AAErB,IAAA,QAAQ,CAAC,aAAqB,EAAA;AAC5B,QAAA,OAAO,IAAI,CAAC,aAAa,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC;;IAG7F,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE;QACnI,MAAM,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,KAAK,WAAW,IAAI,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC;QACvH,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,qCAAqC,EAC5C,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACrE,gBAAA,MAAM,EAAE,CAAA,UAAA,EAAa,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,CAAE,CAAA;AAChF,gBAAA,OAAO,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,MAAM,CAAE,CAAA;AACrJ,gBAAA,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,KAAK,SAAS,GAAG,WAAW,GAAG,GAAG;AACpE,gBAAA,MAAM,EAAE,SAAS;aAClB,EACD,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;AACpD,aAAC,EACD,YAAY,EAAE,MAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACzB,aAAC,EACD,YAAY,EAAE,MAAK;AACjB,gBAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;aACzB,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,wBAAwB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACrE,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACjE,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,KAAK,SAAS,GAAG,KAAK,GAAG,WAAW,EAAI,CAAA,EACzI,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CACjD,EACN,CACE,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,EACjF,KAAK,QACL,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,GAAG,OAAO,GAAG,MAAM,EAAE,EAC5G,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,KAAK,mBAAmB,CAAC,MAAM,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,EAAE,GAAI,CACpK,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,uBAAuB,EAAA,EACjC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,IAAI;AAClE,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CACzD,EACJ,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACjE,EAAA,EAEA,IAAI,CAAC,SAAS,CAAC,KAAK,CACnB,CAeA,EACL,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,KAClD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAC3D,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,WAAW,EACvB,eAAe,EAAC,WAAW,EAC3B,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,wDAAwD,EAChE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAClC,MAAM,EAAE,mBAAmB,CAAC,MAAM,KAAK,CAAC,GACxC,CACH,EAEA,IAAI,CAAC,SAAS,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAC7D,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,WAAW,EACvB,eAAe,EAAC,WAAW,EAC3B,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,IAAI,EAChB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,wGAAwG,EAChH,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EACA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KACpB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,wFAAwF,EAChG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,KAC9D,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,cAAc,EAC1B,eAAe,EAAC,cAAc,EAC9B,KAAK,EAAC,cAAc,EACpB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,4EAA4E,EACpF,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KACpB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,oEAAoE,EAC5E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EACA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KACrB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,CAAC,EACb,IAAI,EAAC,WAAW,EAChB,OAAO,EAAC,0FAA0F,EAClG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KACxB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,IAAI,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,4EAA4E,EACpF,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KACtB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,QAAQ,EACpB,eAAe,EAAC,QAAQ,EACxB,KAAK,EAAC,QAAQ,EACd,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,6JAA6J,EACrK,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KACxB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,UAAU,EACf,OAAO,EAAC,8HAA8H,EACtI,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KACxB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAC,UAAU,EACtB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,EAAE,EAChB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,+EAAqE,EAC7E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EAEA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KACvD,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,sHAAsH,EAC9H,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KACvD,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,sFAAsF,EAC9F,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KACtD,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,MAAM,EAClB,eAAe,EAAC,MAAM,EACtB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,EAAE,EACjB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,yFAAyF,EACjG,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,EACA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KACvD,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAC,OAAO,EACnB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAC,OAAO,EACb,aAAa,EAAE,GAAG,EAClB,YAAY,EAAE,GAAG,EACjB,UAAU,EAAE,EAAE,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,sEAAsE,EAC9E,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,EAAA,CAClC,CACH,CACG,CACP,CACG,CACF,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-recipient-card/ls-recipient-card.css?tag=ls-recipient-card&encapsulation=shadow","src/components/ls-recipient-card/ls-recipient-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.75rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n}\n\n.dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--red-50, #ff706b);\n  border-radius: 50%;\n  margin-right: 0.25rem;\n}\n\n.top-card {\n  border-radius: 1rem 1rem 0 0;\n}\n\n.full-card {\n  border-radius: 1.5rem;\n}\n\n.bottom-card {\n  border-radius: 0 0 1rem 1rem;\n}\n\n.participant-card-inner {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.form-button-set {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.fields-box {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.role-label.fields {\n  border-radius: 1rem;\n  margin-top: 0.5rem;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--default-button-colour);\n}\n\n.innerButton:hover {\n  color: var(--hover-button-colour);\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.button-set {\n  display: flex;\n  gap: 0.125rem;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n}\n\n/* Global Styles */\n\n.full-width {\n  width: 100%;\n}\n\n.participant-card-text {\n  padding: 0 0.125rem 0.125rem 0.125rem;\n}\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.tertiary {\n  border: 1px solid var(--primary-60, #4456f6);\n  background: transparent;\n  color: var(--primary-70, #2134dc);\n}\n\nbutton.tertiary:hover {\n  border: 1px solid var(--primary-70, #2134dc);\n  border: 1px solid var(--primary-80, #0c34b8);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background: transparent;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n  background-color: var(--red-10, #fff1f0);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSApiRecipient } from '../../types/LSApiRecipient';\nimport { LSApiTemplate } from '../../components';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-recipient-card',\n  styleUrl: 'ls-recipient-card.css',\n  shadow: true,\n})\nexport class LsRecipientCard {\n  /**\n   * The initial template data, including the link for background PDF. See README and\n   * example for correct GraphQL query and data structure.\n   * {LSApiTemplate}\n   */\n  @Prop() recipient: LSApiRecipient;\n  @Prop() activeRecipient: number;\n  @Prop() template: LSApiTemplate;\n  @State() isHovered: boolean = false;\n\n  private setIsHovered(value: boolean) {\n    this.isHovered = value;\n  }\n  @Prop() validationErrors: ValidationError[] = [];\n  \n  /**\n   * Allows the selection of fields in the toolbox to be limited to a | (pipe) delimited list.\n   * {string}\n   */\n  @Prop() filtertoolbox?: string = null;\n\n  // Send an internal event to be processed\n  @Event() changeSigner: EventEmitter<number>;\n\n  showTool(fieldFormType: string): boolean {\n    return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);\n  }\n\n  render() {\n    const recipientFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.recipient.signerIndex) || [];\n    const recipientSignatures = recipientFields.filter(f => f.elementType === 'signature' || f.elementType === 'auto sign');\n    return (\n      <Host>\n        <div\n          class={'participant-card top-card full-card'}\n          style={{\n            background: defaultRolePalette[this.recipient?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.recipient?.signerIndex % 100].s60}`,\n            outline: `${this.recipient.signerIndex === this.activeRecipient ? '4px solid ' + defaultRolePalette[this.recipient?.signerIndex % 100].s40 : 'none'}`,\n            marginTop: this.recipient.roleType === 'WITNESS' ? '-0.813rem' : '0',\n            cursor: 'pointer',\n          }}\n          onClick={() => {\n            this.changeSigner.emit(this.recipient.signerIndex);\n          }}\n          onMouseEnter={() => {\n            this.setIsHovered(true);\n          }}\n          onMouseLeave={() => {\n            this.setIsHovered(false);\n          }}\n        >\n          <div class={'participant-card-inner'}>\n            <div class={'participant-card-top-items'}>\n              <div\n                class={'role-label'}\n                style={{\n                  background: defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.recipient?.roleType === 'APPROVER' ? 'check-circle' : this.recipient?.roleType === 'WITNESS' ? 'eye' : 'signature'} />\n                {String(this.recipient?.signerIndex).padStart(2, '0')}\n              </div>\n              <ls-icon\n                name=\"cursor-click\"\n                size=\"16\"\n                customStyle={{ color: defaultRolePalette[this.recipient?.signerIndex % 100].s70 }}\n                solid\n                style={{ display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? 'block' : 'none' }}\n              />\n              <div class=\"dot\" style={{ display: (!this.isHovered || this.recipient.signerIndex === this.activeRecipient) && recipientSignatures.length === 0 ? 'block' : 'none' }} />\n            </div>\n\n            <div class={'participant-card-text'}>\n              <p\n                class=\"participant-text-description\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s100,\n                }}\n              >\n                {this.recipient?.firstname + ' ' + this.recipient?.lastname}\n              </p>\n              <p\n                class=\"participant-text-type\"\n                style={{\n                  color: defaultRolePalette[this.recipient?.signerIndex % 100].s80,\n                }}\n              >\n                {this.recipient.email}\n              </p>\n              {/* {this.recipient?.roleType !== 'APPROVER' && (\n                <div\n                  class={'role-label fields'}\n                  style={{\n                    background:\n                      recipientFields.length === 0 ? defaultRolePalette[this.recipient?.signerIndex % 100].s60 : defaultRolePalette[this.recipient?.signerIndex % 100].s20,\n                    color: recipientFields.length === 0 ? 'white' : defaultRolePalette[this.recipient?.signerIndex % 100].s90,\n                    // display: this.isHovered && this.recipient.signerIndex !== this.activeRecipient ? '' : 'none',\n                  }}\n                >\n                  {recipientSignatures.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                  {recipientSignatures.length === 0 ? 'Signature Required' : `${recipientFields.length} ${recipientFields.length === 1 ? 'Field' : 'Fields'}`}\n                </div>\n              )} */}\n            </div>\n            {this.recipient.signerIndex === this.activeRecipient && (\n              <div class=\"fields-box\">\n                {this.recipient.signerIndex > 0 && this.showTool('signature') && (\n                  <ls-toolbox-field\n                    elementType=\"signature\"\n                    formElementType=\"signature\"\n                    label=\"Signature\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={0}\n                    icon=\"signature\"\n                    tooltip=\"Use this field to collect Signatures from Participants\"\n                    signer={this.recipient.signerIndex}\n                    redDot={recipientSignatures.length === 0}\n                  />\n                )}\n\n                {this.recipient.signerIndex === 0 && this.showTool('auto sign') && (\n                  <ls-toolbox-field\n                    elementType=\"auto sign\"\n                    formElementType=\"auto sign\"\n                    label=\"Auto Sign\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={3000}\n                    icon=\"auto-sign\"\n                    tooltip=\"Auto-Sign lets Senders add a Signature to the Document that will be automatically applied upon Sending\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('text') && (\n                  <ls-toolbox-field\n                    elementType=\"text\"\n                    formElementType=\"text\"\n                    label=\"Text\"\n                    defaultHeight={27}\n                    defaultWidth={100}\n                    validation={0}\n                    icon=\"text\"\n                    tooltip=\"A field for collecting any plain text values such as: names, addresses or descriptions\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('signing date') && (\n                  <ls-toolbox-field\n                    elementType=\"signing date\"\n                    formElementType=\"signing date\"\n                    label=\"Signing Date\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={30}\n                    icon=\"auto-date\"\n                    tooltip=\"Automatically inserts the date upon completion by the assigned Participant\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('date') && (\n                  <ls-toolbox-field\n                    elementType=\"date\"\n                    formElementType=\"date\"\n                    label=\"Date\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={2}\n                    icon=\"calender\"\n                    tooltip=\"A field for collecting dates with built-in date formatting options\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.showTool('email') && (\n                  <ls-toolbox-field\n                    elementType=\"email\"\n                    formElementType=\"email\"\n                    label=\"Email\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={1}\n                    icon=\"at-symbol\"\n                    tooltip=\"A Field to only accept entries formatted as an email address (e.g., example@example.com)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('initials') && (\n                  <ls-toolbox-field\n                    elementType=\"initials\"\n                    formElementType=\"initials\"\n                    label=\"Initials\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={2000}\n                    icon=\"initials\"\n                    tooltip=\"Use this field anywhere Participants are required to Initial your document\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('number') && (\n                  <ls-toolbox-field\n                    elementType=\"number\"\n                    formElementType=\"number\"\n                    label=\"Number\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={50}\n                    icon=\"hashtag\"\n                    tooltip=\"A Field to only accept entries in numerical format. Additional validations include character limit (1 to 12 digits), and currency format (2 decimal places)\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('dropdown') && (\n                  <ls-toolbox-field\n                    elementType=\"dropdown\"\n                    formElementType=\"dropdown\"\n                    label=\"Dropdown\"\n                    defaultHeight={27}\n                    defaultWidth={80}\n                    validation={20}\n                    icon=\"dropdown\"\n                    tooltip=\"Use this field to create custom dropdown menus in your document, or place one of our handy presets for countries or prefixes\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.showTool('checkbox') && (\n                  <ls-toolbox-field\n                    elementType=\"checkbox\"\n                    formElementType=\"checkbox\"\n                    label=\"Checkbox\"\n                    defaultHeight={27}\n                    defaultWidth={27}\n                    validation={25}\n                    icon=\"check\"\n                    tooltip=\"Places a checkbox on your document. Handy for T&Cs or  ✔/✗ sections\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n\n                {this.recipient.signerIndex > 0 && this.showTool('regex') && (\n                  <ls-toolbox-field\n                    elementType=\"regex\"\n                    formElementType=\"regex\"\n                    label=\"Regex\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={93}\n                    icon=\"code\"\n                    tooltip=\"Need a specific validation? Use this field to enter a custom RegEx and have Participants enter exactly what you need\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('image') && (\n                  <ls-toolbox-field\n                    elementType=\"image\"\n                    formElementType=\"image\"\n                    label=\"Image\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"photograph\"\n                    tooltip=\"Use when you need Participants to upload their own images during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('file') && (\n                  <ls-toolbox-field\n                    elementType=\"file\"\n                    formElementType=\"file\"\n                    label=\"File\"\n                    defaultHeight={27}\n                    defaultWidth={120}\n                    validation={74}\n                    icon=\"upload\"\n                    tooltip=\"Use when you need Participants to upload their own documents during the signing process\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n                {this.recipient.signerIndex > 0 && this.showTool('drawn') && (\n                  <ls-toolbox-field\n                    elementType=\"drawn\"\n                    formElementType=\"drawn\"\n                    label=\"Drawn\"\n                    defaultHeight={120}\n                    defaultWidth={120}\n                    validation={90}\n                    icon=\"pencil\"\n                    tooltip=\"Allow users to draw on the document using their mouse or touchscreen\"\n                    signer={this.recipient.signerIndex}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ls-document-options_45.entry.js

@@ -25383,8 +25383,8 @@ const LsDocumentViewer = class {
             this.initViewer();
             if (this.mode === 'compose') {
                 this.manager = 'recipient';
+                this._recipients = JSON.parse(this.recipients.replace('\u0022', '"'));
             }
-            this._recipients = JSON.parse(this.recipients.replace('\u0022', '"'));
             //Revalidate
             this.validationErrors = validate.bind(this)(this._template);
             this.pageCount = this._template.pageCount;
@@ -25407,7 +25407,7 @@ const LsDocumentViewer = class {
         return this.filtertoolbox === null || this.filtertoolbox.split('|').includes(fieldFormType);
     }
     render() {
-        return (h(Host, { key: 'a69b0674f4ee1423f3663e3a3a1b2b52ffb91ee7' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: 'f1fbaa9fce9eb2848df44e99e0f8988a89a3c7bf' }), h("div", { key: 'c5a2e06e1f831a03278b42081ebccb7ddc4a6d84', class: "page-header" }, h("div", { key: 'b2d3fc361f2e3a1c411c5589499a890ab2deaa03', class: 'left-slot-wrapper' }, h("slot", { key: '8a39da556ccd35acccc65130e9253a283ffe9664', name: "left-button" })), h("div", { key: 'a27be93817874d436616a62656afd5fcdc412fdf', class: 'right-slot-wrapper' }, h("slot", { key: '658663b6d0e5c2a1108a432c68e91b78d32cfddd', name: "right-button" })), this.mode === 'editor' && (h("div", { key: '8078631015dcb3b9c61f9db70b140d5aa6f4b53d' }, h("span", { key: '9c0b54dc0e7c9d23eb18f44a5c9a23e8c5b546e7', class: "header-text-1" }, "Template Creation"), h("span", { key: '353fe9482f0188262fbbfe80dbd90cfa9b78ee01' }, "/"), h("span", { key: 'a4efedbf6e339f4fb70209058f431a0ac97289ed', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '850613d2cb6564f9e581f4849915c296da6f715b' }, h("span", { key: 'e34a1c9932ec1e04da465eacba734feaae5b6091', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'd527566b2235088e3502da31be961583e38b9802' }, "/"), " ", h("span", { key: 'fb1bef4bb4e054a1d7f8bc1d2cd8894cc944885a', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: '7262cf8d8849c7b4864ed190ea10e99d86879175', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: '76105fe985951ea1e94e48bf58f9de372f1c9c99', validationErrors: this.validationErrors }))), h("form", { key: '0c472e3c3f0850fc7f63f153cba6096d44dae3f8', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
+        return (h(Host, { key: '18a633cb175d9c7e76e56bf01e3c8424d32ab585' }, h(h.Fragment, null, this.isLoading && h("ls-page-loader", { key: '25a75f7af8e901df2fb9437d2919aa57457129cb' }), h("div", { key: '2fdeda62dd2c01754129b6d862aa3c3d5a2a1bdc', class: "page-header" }, h("div", { key: 'e44f3c112b65616bef7ac1cc4d6c5bf52c9b412a', class: 'left-slot-wrapper' }, h("slot", { key: 'eabed050a68f35292d52342623c6a4f2c2b92a9e', name: "left-button" })), h("div", { key: '1d4a9b8686e483864dbd47cc070425cf549bddca', class: 'right-slot-wrapper' }, h("slot", { key: '920bf1ffa9cdd895c1d4e66dd051ce41ad100a45', name: "right-button" })), this.mode === 'editor' && (h("div", { key: 'bda295d8ee65a355b25d8eb6679525a2d62e011c' }, h("span", { key: '997ef8d75cb7edafb33a6dcfbd1bbf2f9a0465f4', class: "header-text-1" }, "Template Creation"), h("span", { key: '855cd0855037a719dc9f0611cdb917bfa12db68b' }, "/"), h("span", { key: 'd540dcabca2c39bdb479ae9d5fbaf3a370c88be9', class: "header-text-2" }, this._template?.title))), this.mode === 'compose' && (h("div", { key: '3c564705e5bdc91b1a3c1f490dac2ec2dd9ba20a' }, h("span", { key: 'a65c1bf128737b35c331b949eb184e20488c3e0f', class: "header-text-1" }, "Compose"), " ", h("span", { key: 'bba6eb666e75486141c87addab7060a7f863007a' }, "/"), " ", h("span", { key: '5a754925c20d7114601f363560284acaa30387f4', class: "header-text-2" }, this._template?.title)))), this.mode === 'editor' && (h("div", { key: 'f181cf2c95e1ccd0955aad5945b949706319d398', class: 'validation-tag-wrapper' }, h("ls-validation-tag", { key: 'f0ee01d4e1aefc4caa16cfc40037c950b18c7ea7', validationErrors: this.validationErrors }))), h("form", { key: '168931f3d1225b9f2ffeecd507cd1b24c2e3978a', id: "ls-editor-form" }, this.mode !== 'preview' ? (h("div", { id: "ls-left-box", class: "leftBox", style: this.mode === 'compose' ? { borderRadius: '1.75rem' } : {} }, h("div", { class: !this.selected || this.selected.length === 0 ? 'left-box-inner' : 'hidden' }, this.mode === 'editor' && (h("ls-feature-column", { mode: this.mode, onManage: manager => {
                 if (manager.detail === 'document') {
                     var documentManager = this.component.shadowRoot.getElementById('ls-document-options');
                     documentManager.template = this._template;
@@ -25426,7 +25426,7 @@ const LsDocumentViewer = class {
             this._recipients.map(recipient => (h("ls-recipient-card", { recipient: recipient, activeRecipient: this.signer, filtertoolbox: this.filtertoolbox, template: this._template, validationErrors: this.validationErrors }))))), !this.displayTable && (h("div", { class: this.selected.length > 0 ? 'field-properties-outer' : 'hidden' }, h("div", { class: 'properties-header' }, h("div", { class: 'properties-header-icon' }, h("ls-icon", { name: "pre-filled-content" })), h("h1", { class: 'properties-header-title' }, "Field Properties"), h("button", { class: 'tertiaryGrey', onClick: e => {
                 this.selected = [];
                 e.preventDefault();
-            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '2959ad6010449f4f6d01951bedae5200796a9ae0', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: '39924ea9ddea3bbb3383d1a8d4f6b61a4a1eab38', id: "ls-mid-area" }, h("div", { key: '9c2c80da82a9acb733fa296910f140cc1dd37087', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'bdb359eae5be279d88edcaf767a9f8eab20c1693', id: "ls-document-frame" }, h("canvas", { key: '6cfe36af4cdfd989a154a9bac7851c5c2466013c', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: 'b0112a99fbfe8f1ee23260d710dc7a4d9bc2aff3', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: 'a1e2c19b9e0d236afd8ef9b9650d98b525895468', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'cee48ae238cefbe7473c606baa5566738509d564', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '1f9cd7f54541dc280d66f4564daffe65da8baaac', id: "ls-tooltip-master" })));
+            }, "data-tooltip": "Close Properties Panel" }, h("ls-icon", { name: "x", size: "20" }))), h("ls-field-properties", { id: "my-field-panel" }), h("slot", null))))) : (h(h.Fragment, null)), this.selected.length > 0 && h("ls-toolbar", { key: '3e5ba341473bf08a29091ab12c3fee99bbdc2671', id: "ls-toolbar", template: this._template, editor: this, groupInfo: this.groupInfo }), h("div", { key: 'a929a78238ace37b999bc30a4410c9ec23a8cfbe', id: "ls-mid-area" }, h("div", { key: 'c6da6a55d0d837b301222cbcbbef093475345b51', class: 'document-frame-wrapper', id: "document-frame-wrapper" }, h("div", { key: 'f442db65d13cc0accc891528e0cbd63b78d0dfb1', id: "ls-document-frame" }, h("canvas", { key: '678382556830d4e99a651378e1898cbf2b537bd6', id: "pdf-canvas", class: this.displayTable || this.isLoading ? 'hidden' : '' }), h("ls-editor-table", { key: '6309f63776709b22b169ba539c780795bee2132a', editor: this, class: this.displayTable ? '' : 'hidden' }), h("div", { key: '0e6b11139b50ab2ee5d9a1162e29f9a4122e1f92', id: "ls-box-selector" }))), h("ls-statusbar", { key: 'e2f14c7674d5ba0ac660ab8e02c9c55195a3b6b6', editor: this, page: this.pageNum, pageCount: this.pageCount })))), h("ls-tooltip", { key: '6fbd2449f461859b491a6754996ba149256a4857', id: "ls-tooltip-master" })));
     }
     static get watchers() { return {
         "mode": ["modeHandler"]
@@ -36033,6 +36033,17 @@ const LsToolboxField = class {
     isSelected = false;
     fieldTypeSelected;
     handleDragStart(event) {
+        var canvas = document.createElement('div');
+        canvas.style.position = 'absolute';
+        canvas.style.left = '-100%';
+        canvas.style.zIndex = '-100';
+        canvas.style.height = this.defaultHeight + 'px';
+        canvas.style.width = this.defaultWidth + 'px';
+        canvas.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+        canvas.style.border = `1px dashed ${defaultRolePalette[this.signer % 100].s60}`;
+        canvas.innerHTML = this.formElementType;
+        document.body.appendChild(canvas);
+        event.dataTransfer.setDragImage(canvas, -50, -20);
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
             formElementType: this.formElementType,
@@ -36053,7 +36064,7 @@ const LsToolboxField = class {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '23a50f46d363a41bc0f0a42a7892d5ffb1099fcf', draggable: "true" }, h("div", { key: '9afa09051e7c34a40a07c3c1394c3b581d53f5b0', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: 'b8ba3bf139801233d2d81b5648d1a638505e0972', draggable: "true" }, h("div", { key: '9f6f1f44479fa2157daf47a3504b689d9e420b7b', class: 'ls-toolbox-field', style: this.isSelected && {
                 background: defaultRolePalette[this.signer % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
                 color: defaultRolePalette[this.signer % 100].s80,
@@ -36068,9 +36079,9 @@ const LsToolboxField = class {
                     defaultWidth: this.defaultWidth,
                     fixedAspect: this.fixedAspect,
                 });
-            } }, h("div", { key: 'bfedf0d04f2806183d1c1d8957ecfe717eac8660', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '47ffa6ad7b778d4add640e2f43d8209c8412b1b8', name: this.icon, size: "20" })), h("p", { key: '9df555ea8f8e2f5db2805835eec7695207878264', class: "toolbox-field-label", style: this.isSelected && {
+            } }, h("div", { key: '30345c85a9b6b6a721813bb4f013087b4a8cabba', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: '765ea21ea33d53efd63ba1b79a1f573cf86d51e8', name: this.icon, size: "20" })), h("p", { key: '233dc63ee920abb8402e44b0ba9c5398034bb5bb', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), this.redDot && (h("div", { key: '9330738644de92f4fb4ced713dd276ab0b6bf154', class: 'warning-box' }, h("ls-icon", { key: '90fdcff3ce9dafe226798b1a0269e00f0bd29684', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '625c450c17234d6efd14c706e03b73d8bab8f8f5', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '77db2859250fd4aaebdd9d46e2e3aaf93afa4354', id: "ls-tooltip-master", tooltipText: "Something" })));
+            } }, this.label), this.redDot && (h("div", { key: '9f4c19c86d0a4dad73e0d3f9b4607e845065ed0c', class: 'warning-box' }, h("ls-icon", { key: 'd304104665589be58cfe07c425d3e27251019279', name: "exclamation-circle", size: "18", solid: true }))), h("ls-icon", { key: '69daa9ade2b006ee3d7e15cd92ce607c21fb7a43', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6068cd2f85ee3baf054b20d7b5738d7421894f25', id: "ls-tooltip-master", tooltipText: "Something" })));
     }
 };
 LsToolboxField.style = lsToolboxFieldCss;