legalesign-document-viewer 0.1.3 → 0.1.7

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

@@ -0,0 +1 @@
+{"file":"p-DVFCDy_Y.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-general/ls-field-properties-general.css?tag=ls-field-properties-general&encapsulation=shadow","src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.properties-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n  position: relative;\n  border-radius: 0.875rem;\n  padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n  border-radius: 0.625rem;\n  background: var(--white, #fff);\n  display: flex;\n  padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n  align-items: center;\n  gap: 0.875rem;\n  align-self: stretch;\n}\n\n.ls-field-type-icon {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  border-radius: 0.5rem;\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-field-type-name {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n}\n\n.tabs-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  border-radius: 0.75rem;\n  background: var(--white, #ffffff);\n}\n\n.ls-tab {\n  all: unset;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n  background: var(--primary-10, #eff4ff);\n  color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid var(--gray-20, #f0f1f2);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: calc(100% - 10.938rem);\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  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n}\n\n.full-width {\n  width: 100%;\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  display: flex;\n  gap: 0.5rem;\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  font-weight: 500;\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.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\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\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}\n\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, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n  @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n    \n      signerColor = (index: number) => {\n        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n      };\n\n  render() {\n    return (\n      <Host>\n        <div class={'tabs-container'}>\n                  <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n                    Content\n                  </button>\n                  <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n                    Placement\n                  </button>\n                  <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n                    Dimensions\n                  </button>\n                </div>\n                <div class={'scrolling-container'}>\n                  {this.fieldSet === 'placement' ? (\n                    <ls-field-placement dataItem={this.dataItem} />\n                  ) : this.fieldSet === 'dimensions' ? (\n                    <div class={'field-set'}>\n                      <ls-field-dimensions dataItem={this.dataItem} />\n                    </div>\n                  ) : (\n                    <div class={'field-set'}>\n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Field Type</p>\n                          <p class={'ls-field-properties-section-description'}>The Field you currently have selected</p>\n                        </div>\n                        <div\n                          class={'ls-field-type-wrapper'}\n                          style={{\n                            border: `1px dashed var(--${this.signerColor(this.dataItem?.signer)}-30)`,\n                            background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                          }}\n                        >\n                          <div class={'ls-field-type-inner'}>\n                            <div\n                              class={'ls-field-type-icon'}\n                              style={{\n                                border: `1px solid var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                                color: `var(--${this.signerColor(this.dataItem?.signer)}-60)`,\n                                background: `var(--${this.signerColor(this.dataItem?.signer)}-10)`,\n                              }}\n                            >\n                              <ls-icon name=\"field-placement\" size=\"20\" />\n                            </div>\n                            <p class={'ls-field-type-name'}>General Field</p>\n                          </div>\n                        </div>\n                      </div>\n                      <div class={'ls-field-properties-section row'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Required Field</p>\n                        </div>\n                        <ls-toggle />\n                      </div>\n        \n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Field Label</p>\n                          <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n                        </div>\n                        <input value={this.dataItem?.label} width=\"30\" placeholder=\"eg. Sign Here\" />\n                      </div>\n        \n                      <div class={'ls-field-properties-section'}>\n                        <div class={'ls-field-properties-section-text'}>\n                          <p class={'ls-field-properties-section-title'}>Content Format</p>\n                          <p class={'ls-field-properties-section-description'}>Select the specific format you want the Recipient to enter..</p>\n                        </div>\n                        <div class={'input-wrapper'}>\n                          <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n                          <select>\n                            {validationTypes.map(type => (\n                                <option selected={this.dataItem?.validation === type.id} value={type.value}>\n                                  {type.description}\n                                </option>\n                              ))}\n                          </select>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n                <div class={'button-footer'}>\n                  <button class={'secondary'}>\n                    <ls-icon name=\"field-duplicate\" size=\"20\" />\n                    Duplicate\n                  </button>\n                  <button class={'destructive'}>\n                    <ls-icon name=\"trash\" size=\"20\" />\n                    Delete\n                  </button>\n                </div>\n                <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BM12bWfu.js → p-DasXNgMG.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
-import { b as getInputType } from './p-YpxkkST1.js';
+import { b as getInputType } from './p-DqJ_uIFZ.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
 
 const lsEditorFieldCss = ":host{display:block;position:absolute;margin:0px;padding:0px 0px 0px 0px;isolation:isolate}.ls-editor-field-editable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;margin:0;padding:0px 0px 0px 0px;min-width:2em;height:100%;width:100%}.ls-editor-field{opacity:0.7}.ls-editor-field-editable:focus{outline:none}.ls-editor-field-draggable{display:block;font-family:inherit;font-size:inherit;overflow:hidden;white-space:nowrap;min-width:2px;height:98%;width:98%}.hidden-field{display:none}input{all:unset}.draggable-input{font-family:inherit;font-size:inherit;position:relative;height:95%;width:95%}.editing-input{caret-color:rgb(15 23 42);caret-shape:auto;height:100%;width:100%}";
@@ -118,11 +118,10 @@ const LsEditorField = /*@__PURE__*/ proxyCustomElement(class LsEditorField exten
         return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        console.log('Rendering ls-editor-field', this.dataItem);
-        return (h(Host, { key: 'ddff7fdaa6832313753e0fb32b085425bddb9962', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '43c0e90e8d68462a34fdb4d31a90cf08a5c87994', class: {
+        return (h(Host, { key: 'f4ab6bc46e4cdbd1b2bd3b18d08703369af685b9', style: { border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` } }, h("div", { key: '8b8a45c0acdc4342f95abf5884b60064408c2562', class: {
                 'ls-editor-field': true,
                 'is-selected': this.selected,
-            } }, h("input", { key: 'f7e8a0aadcb0c08c0c1b1f89f8b2cee4fddb362e', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: 'f0446b10d267911421007a39634665fd3fc52e46', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
+            } }, h("input", { key: '18d0df23d55da5ca5e9a1ead1bf32797b21c8e70', id: "editing-input", class: this.isEditing ? 'ls-editor-field-editable' : 'hidden-field', type: getInputType(this.dataItem.validation).inputType, value: this.dataItem?.value || this.innerValue, onChange: e => this.onInputChange(e) }), h("div", { key: '1756931604edf30a6e30b055f56b70e07dd077a8', id: "field-info", class: this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable' }, this.innerValue || this.dataItem?.label || this.dataItem?.formElementType))));
     }
     static get watchers() { return {
         "selected": ["watchSelectedHandler"]
@@ -158,6 +157,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsEditorField as L, defineCustomElement as d };
-//# sourceMappingURL=p-BM12bWfu.js.map
+//# sourceMappingURL=p-DasXNgMG.js.map
 
-//# sourceMappingURL=p-BM12bWfu.js.map
+//# sourceMappingURL=p-DasXNgMG.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DasXNgMG.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,6sBAA6sB;;MCUztB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;AAEC,IAAA,QAAQ;AACzB,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,OAAO;AACP,IAAA,IAAI;AACJ,IAAA,IAAI;IACH,SAAS,GAAY,KAAK;IAC1B,QAAQ,GAAW,IAAI;IACvB,cAAc,GAAY,KAAK;AAC/B,IAAA,UAAU;AACX,IAAA,YAAY;AAGpB,IAAA,WAAW,CAAC,CAAgB,EAAA;AAC1B,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;;;AAKrF,IAAA,eAAe,CAAC,CAAC,EAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,CAAC,CAAC,OAAO;YAAE;;QAGhB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;YAC/D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;AACpC,aAAA,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW;;aACpC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;;;IAKxC,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;QAC9B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK;AAE1E,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,eAAe,CAAqB;AAC7F,QAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;QAEpB,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,SAAS,GAAG,0BAA0B;YAC9C,OAAO,CAAC,KAAK,EAAE;;;AAKnB,IAAA,eAAe,CAAC,KAAK,EAAA;QACnB,OAAO,CAAC,GAAG,CAAC,2BAA2B,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;AAChB,SAAA,CAAC,CACH;AACD,QAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;;IAIxC,oBAAoB,CAAC,SAAkB,EAAE,SAAkB,EAAA;QACzD,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,CAAS,MAAA,EAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;YAC7F,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK;YACpC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,wEAAwE;;aACpG;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa;YAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM;;;AAI3C,IAAA,aAAa,CAAC,CAAC,EAAA;;QAEb,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;;IAGlC,gBAAgB,GAAA;QACd,IAAI,CAAC,YAAY,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AAC/C,YAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,WAAW,EAAE;;AAErB,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,YAAY,CAAgB;;;;AAKrF,oBAAA,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI;AACtD,oBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI;;;AAG1D,SAAC,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGzC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,CAAS,MAAA,EAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM;YAC7F,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK;YACpC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,wEAAwE;;aACpG;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa;YAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM;;;AAI3C,IAAA,gBAAgB,GAAG,CAAC,KAAa,KAAI;AACnC,QAAA,OAAO,KAAK,GAAG,GAAG,GAAG,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG,GAAG,kBAAkB,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,CAAC,CAAC;AAC3J,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAM,IAAA,CAAA,EAAE,EAAA,EAC5F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,aAAa,EAAE,IAAI,CAAC,QAAQ;aAC7B,EAAA,EAED,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,0BAA0B,GAAG,cAAc,EACnE,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAC9C,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EACpC,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,2BAA2B,EAAA,EACtF,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe,CACtE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-field/ls-editor-field.css?tag=ls-editor-field&encapsulation=shadow","src/components/ls-editor-field/ls-editor-field.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: absolute;\n  margin: 0px;\n  padding: 0px 0px 0px 0px;\n  isolation: isolate;\n}\n\n.ls-editor-field-editable {\n  display: block;\n  font-family: inherit;\n  font-size: inherit;\n  overflow: hidden;\n\n  /* no extra spaces */\n  white-space: nowrap;\n  margin: 0;\n  padding: 0px 0px 0px 0px;\n  /* default widths */\n  min-width: 2em;\n  height: 100%;\n  width: 100%;\n}\n\n.ls-editor-field {\n  opacity: 0.7;\n}\n\n.ls-editor-field-editable:focus {\n  outline: none;\n}\n\n.ls-editor-field-draggable {\n  display: block;\n  font-family: inherit;\n  font-size: inherit;\n  overflow: hidden;\n\n  /* no extra spaces */\n  white-space: nowrap;\n\n  /* default widths */\n  min-width: 2px;\n  height: 98%;\n  width: 98%;\n}\n\n/* .is-selected {\n    border: 1px dotted rgb(193, 26, 26);\n} */\n\n.hidden-field {\n  display: none;\n}\n\ninput {\n  all: unset;\n}\n\n.draggable-input {\n  font-family: inherit;\n  font-size: inherit;\n  position: relative;\n  height: 95%;\n  width: 95%;\n}\n\n.editing-input {\n  caret-color: rgb(15 23 42);\n  caret-shape: auto;\n  height: 100%;\n  width: 100%;\n}","import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean;\n  @Prop() readonly: boolean;\n  @Prop() palette: string[];\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number; width: number };\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === 'Enter') {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'));\n    }\n  }\n\n  @Listen('mousemove', { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = 'ew-resize';\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = 'ns-resize';\n    } else {\n      this.component.style.cursor = 'move';\n    }\n  }\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect();\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n\n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(editbox);\n\n    if (editbox) {\n      editbox.className = 'ls-editor-field-editable';\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    console.log('dragstart ls-editor-field', event, this.type);\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\n      'application/json',\n      JSON.stringify({\n        type: this.type,\n      }),\n    );\n    event.dataTransfer.dropEffect = 'move';\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) {\n      this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = 'transparent';\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  onInputChange(e) {\n    // console.log(\"INPUT CHANGE\", e);\n    this.innerValue = e.target.value;\n  }\n\n  componentDidLoad() {\n    this.sizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          //          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + 'px';\n          movebox.style.width = entry.contentRect.width + 'px';\n        }\n      }\n    });\n\n    this.sizeObserver.observe(this.component);\n\n    // New dropped components automatically need selecting.\n    if (this.selected) {\n      this.component.style.background = `var(--${this.participantColor(this.dataItem?.signer)}-20)`;\n      this.component.style.opacity = '0.7';\n      this.component.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';\n    } else {\n      this.component.style.background = `transparent`;\n      this.component.style.boxShadow = 'none';\n    }\n  }\n\n  participantColor = (index: number) => {\n    return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  render() {\n    return (\n      <Host style={{ border: `2px solid var(--${this.participantColor(this.dataItem?.signer)}-60)` }}>\n        <div\n          class={{\n            'ls-editor-field': true,\n            'is-selected': this.selected,\n          }}\n        >\n          <input\n            id=\"editing-input\"\n            class={this.isEditing ? 'ls-editor-field-editable' : 'hidden-field'}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value || this.innerValue}\n            onChange={e => this.onInputChange(e)}\n          />\n          <div id=\"field-info\" class={this.isEditing ? 'hidden-field' : 'ls-editor-field-draggable'}>\n            {this.innerValue || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BDgNCPwS.js → p-Dc4pAKEn.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-DjfDnBZ1.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsSelectInputCss = "* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n";
 
@@ -35,7 +35,7 @@ const LsSelectInput = /*@__PURE__*/ proxyCustomElement(class LsSelectInput exten
                     : displayOnly
                         ? 'displayOnly'
                         : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
-        return (h("host", { key: '23a3bd28d346226d7c5c6797a8fb8235bc826ca3', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'e3e62e3955940b53fbfe77109de407049ddc33ca', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '538f2ffec923748499d56619db951587421bb0cc', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '703df2c5108e0e968be453c13db77da508f4675f' })), h("div", { key: '3ff197806e02d925e5d677b472a2502784cac157', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '4eb47121bc35a79ae4fb3b763c38b8d5a68f62ed', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
+        return (h("host", { key: '6057a8c24ad92b90d7d0306cc33e1d1203013d57', class: 'host' }, fieldIcon && (h("ls-icon", { key: 'bd93aa8411864400f3252b07d0422e3878f064c8', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("select", { key: '89f56b035f9406771bcfd02c4e028d246a1c3132', class: inputClass, id: name, name: name, "aria-label": aria, required: required, disabled: disabled }, h("slot", { key: '325b4225d203241b8be7566a60ac506ca77108eb' })), h("div", { key: '2d28afc89b2155e0fa629d174dc9601283002fb8', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '0b5d46698d73145af331452c27b5c4ecf9b03491', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon ? (h("button", { class: 'button', onClick: buttonClick }, h("ls-icon", { id: 'buttonIcon', name: buttonIcon }))) : (h("ls-icon", { id: disabled ? 'select-arrow-disabled' : 'select-arrow', name: 'chevron-down' })))));
     }
     static get style() { return lsSelectInputCss; }
 }, [260, "ls-select-input", {
@@ -73,6 +73,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsSelectInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-BDgNCPwS.js.map
+//# sourceMappingURL=p-Dc4pAKEn.js.map
 
-//# sourceMappingURL=p-BDgNCPwS.js.map
+//# sourceMappingURL=p-Dc4pAKEn.js.map

package/dist/components/{p-BDgNCPwS.js.map → p-Dc4pAKEn.js.map}

@@ -1 +1 @@
-{"file":"p-BDgNCPwS.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\n              : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    return (\n      <host class='host'>\n        {fieldIcon && (\n          <ls-icon\n            id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n            name={fieldIcon}\n          ></ls-icon>\n        )}\n        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\n        <div class='right-items'>\n          {dirty && !disabled && (\n            <ls-icon\n              id={valid ? 'validIcon' : 'invalidIcon'}\n              name={valid ? 'check-circle' : 'exclamation-circle'}\n            ></ls-icon>\n          )}\n          {buttonIcon ? (\n            <button class='button' onClick={buttonClick}>\n              <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n            </button>\n          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Dc4pAKEn.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,m5IAAm5I;;MCS/5I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;AAChB,IAAA,IAAI;AACJ,IAAA,KAAK;AACL,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,QAAQ;AACR,IAAA,WAAW;AACX,IAAA,QAAQ;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,UAAU;AACV,IAAA,SAAS;;;;IAMjB,MAAM,GAAA;QACJ,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,GACV,GAAG,IAAI;AAER,QAAA,MAAM,UAAU,GAAG,IAAI,CACrB,YAAY,EACZ;AACE,cAAE;cACA,KAAK,IAAI;AACT,kBAAE;AACF,kBAAE,KAAK,IAAI,CAAC;AACV,sBAAE;AACF,sBAAE;AACA,0BAAE;0BACA,SAAS,EACnB,SAAS,IAAI,YAAY,EACzB,KAAK,IAAI,cAAc,EACvB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,KAAK,IAAI,mBAAmB,CAC3C;QAED,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAA,EACf,SAAS,KACR,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,QAAQ,GAAG,mBAAmB,GAAG,WAAW,EAChD,IAAI,EAAE,SAAS,GACN,CACZ,EACD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACE,YAAA,EAAA,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAAA,EAElB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,KAAK,IAAI,CAAC,QAAQ,KACjB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,KAAK,GAAG,WAAW,GAAG,aAAa,EACvC,IAAI,EAAE,KAAK,GAAG,cAAc,GAAG,oBAAoB,GAC1C,CACZ,EACA,UAAU,IACT,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAA,EACzC,CAAA,CAAA,SAAA,EAAA,EAAS,EAAE,EAAC,YAAY,EAAC,IAAI,EAAE,UAAU,EAAY,CAAA,CAC9C,KACN,eACH,EAAE,EAAE,QAAQ,GAAG,uBAAuB,GAAG,cAAc,EACvD,IAAI,EAAE,cAAc,EACX,CAAA,CAAC,CACR,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-select-input/ls-select-input.css?tag=ls-select-input","src/components/ls-formfield/inputs/ls-select-input/ls-select-input.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.host {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n#fieldIcon {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-80)\n}\n\n#fieldIconDisabled {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.75rem;\n  color: var(--gray-60)\n}\n\n.icon-input {\n  padding-left: 2.5rem !important;\n}\n\n.button-input {\n  padding-right: 2.5rem !important;\n}\n\n.right-items-input {\n  padding-right: 4rem !important;\n}\n\n.input-base {\n  display: flex;\n  width: 100%;\n  height: 2.25rem;\n  padding: 0rem 0.75rem;\n  align-items: center;\n  vertical-align: text-top;\n  gap: 0.5rem;\n  align-self: stretch;\n  border-radius: 0.5rem;\n  /* Shadow/sm */\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  /* text-sm/leading-5/font-regular */\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 400;\n}\n\nselect::-ms-expand {\n  display: none;\n}\n\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n#select-arrow {\n  color: var(--gray-70);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n#select-arrow-disabled {\n  color: var(--gray-40);\n  margin-right: 0.25rem;\n  margin-left: -0.125rem;\n}\n\n.input-base:active:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n.input-base:focus:not(:disabled) {\n  outline: 1px solid var(--Legalesign-Blue-60, #4456F6);\n  box-shadow: 0px 0px 3px 0px rgba(0, 15, 153, 0.25), 0px 0px 2px 0px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9DC3FC;\n}\n\n\n.default {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-100);\n}\n\n.default:hover {\n  border: 1px solid var(--gray-50, #D8D9DC);\n  background: var(--White, #FFF);\n  color: var(--gray-110);\n}\n\n\n.disabled {\n  border: 1px solid var(--gray-40, #D8D9DC);\n  background: var(--gray-10, #F7F8FA);\n  color: var(--gray-60);\n  cursor: not-allowed;\n}\n\n.invalid {\n  border: 1px solid var(--red-40, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.invalid:hover {\n  border: 1px solid var(--red-50, #FFA19E);\n  background: var(--White, #FFF);\n  color: var(--Red-100, #7A1714);\n}\n\n.valid {\n  border: 1px solid var(--green-40, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n.valid:hover {\n  border: 1px solid var(--green-50, #72F0C2);\n  background: var(--White, #FFF);\n  color: var(--Green-100, #125241);\n}\n\n\n.right-items {\n  position: absolute;\n  padding: 0.25rem;\n  height: 36px;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n} \n\n#invalidIcon {\n  margin: 0 0.5rem;\n  color: var(--red-70);\n}\n\n#validIcon {\n  margin: 0 0.5rem;\n  color: var(--green-60);\n}\n\n.button {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--White, #FFF);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-90);\n  }\n}\n\n.button:hover {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--gray-50, #C8C9CC);\n  background: var(--gray-20, #EDEFF2);\n  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:active {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n.button:focus {\n  display: flex;\n  height: 28px;\n  width: 28px;\n  padding: 0.25rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.375rem;\n  border: 1px solid var(--Primary-Blue-Light, #4456F6);\n  background: var(--White, #FFF);\n  box-shadow: 0px 0px 4px 0px #C7DDFF inset, 0px 0px 0px 4px #9DC3FC;\n\n  #buttonIcon {\n    color: var(--gray-100);\n  }\n}\n\n\n\n\n\n","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-select-input',\n  styleUrl: 'ls-select-input.css',\n  shadow: false,\n})\nexport class LsSelectInput {\n  @Prop() name: string;\n  @Prop() value: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() displayOnly: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  // handleChange(event) {\n  //   this.value = event.target.value;\n  // }\n\n  render() {\n    const {\n      name,\n      aria,\n      disabled,\n      displayOnly,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n    } = this;\n\n    const inputClass = clsx(\n      'input-base',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : displayOnly\n              ? 'displayOnly'\n              : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    return (\n      <host class='host'>\n        {fieldIcon && (\n          <ls-icon\n            id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n            name={fieldIcon}\n          ></ls-icon>\n        )}\n        <select\n          class={inputClass}\n          id={name}\n          name={name}\n          aria-label={aria}\n          required={required}\n          disabled={disabled}\n        >\n          <slot />\n        </select>\n        <div class='right-items'>\n          {dirty && !disabled && (\n            <ls-icon\n              id={valid ? 'validIcon' : 'invalidIcon'}\n              name={valid ? 'check-circle' : 'exclamation-circle'}\n            ></ls-icon>\n          )}\n          {buttonIcon ? (\n            <button class='button' onClick={buttonClick}>\n              <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n            </button>\n          ) : (<ls-icon\n            id={disabled ? 'select-arrow-disabled' : 'select-arrow'}\n            name={'chevron-down'}\n          ></ls-icon>) }\n        </div>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CToSoYU7.js → p-DeaQdy4U.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-DjfDnBZ1.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsRadioInputCss = ".radioLabel{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.5rem 0.75rem}.radioLabel.checked{background-color:var(--primary-10);border-color:var(--primary-20);color:var(--primary-90)}.radioLabel:not(checked){color:var(--gray-90);background-color:var(--gray-10);border:1px solid var(--gray-20)}.radioLabel.checked:hover{border-color:var(--primary-30);color:var(--primary-100)}.radioLabel:not(.checked):not(.disabled):hover{border-color:var(--gray-50);color:var(--gray-100)}.radioLabel:focus:not(.disabled){box-shadow:var(--focus-box-shadow);outline-offset:var(--focus-outline-offset);outline:none}.radioLabel.disabled{cursor:not-allowed}.radioLabel.disabled.checked{background-color:var(--primary-10);color:var(--primary-40);border-color:var(--primary-40)}.radioLabel.disabled:not(.checked){background-color:var(--gray-10);color:var(--gray-60)}.inputClass{margin-top:0px}.inputClass:focus{outline:none}.inputClass:disabled{cursor:not-allowed}.spanContainer{display:flex;gap:0.25rem;align-items:center}";
 
@@ -19,7 +19,7 @@ const LsRadioInput = /*@__PURE__*/ proxyCustomElement(class LsRadioInput extends
     render() {
         const { label, radioId, icon, name, disabled, checked, customStyle, } = this;
         const radioLabelClass = clsx('radioLabel', disabled && 'disabled', checked && 'checked');
-        return (h("label", { key: '621ef21ba0ad35eea192888b38baa71cb0b7b5c0', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '81ab1231ce9321fc949126ec4f3b41e1a45a7229', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '96b420d8564684aebc9e26240e9435adeb89f295', class: 'spanContainer' }, h("span", { key: 'd5ae7c5e0b47868453aef50429609060fc0d6989' }, icon && h("ls-icon", { key: 'c40866a3d56e08c08cb5c44e0a296902fb96df9e', name: icon, size: "16" })), h("span", { key: '4efebbaf9020a29f8c2b439d45f772b902f7019d' }, label))));
+        return (h("label", { key: '0a42e5e7876168eeac63f3d1005d64b2ab90107c', htmlFor: radioId, tabIndex: 0, class: radioLabelClass, style: customStyle }, h("input", { key: '106b67793bf5dde83ef6086cd588b3fdc59befe7', type: 'radio', class: 'inputClass', id: radioId, name: name, value: label, disabled: disabled, tabIndex: 0, checked: checked }), h("div", { key: '2fcabb808dd94c490ddb855d5da1261f6965be55', class: 'spanContainer' }, h("span", { key: 'b5b74b98e6553da9497d9da33f4a268292b2bec5' }, icon && h("ls-icon", { key: '700388ccde573f6432597eb4111fff01577ee8f7', name: icon, size: "16" })), h("span", { key: 'f0a9bf1243d429bd4d62c619c6f043057099a8ff' }, label))));
     }
     static get style() { return lsRadioInputCss; }
 }, [256, "ls-radio-input", {
@@ -52,6 +52,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsRadioInput as L, defineCustomElement as d };
-//# sourceMappingURL=p-CToSoYU7.js.map
+//# sourceMappingURL=p-DeaQdy4U.js.map
 
-//# sourceMappingURL=p-CToSoYU7.js.map
+//# sourceMappingURL=p-DeaQdy4U.js.map

package/dist/components/{p-CToSoYU7.js.map → p-DeaQdy4U.js.map}

@@ -1 +1 @@
-{"file":"p-CToSoYU7.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qgCAAqgC;;MCShhC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;AACf,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAY,MAAM;IACtB,OAAO,GAAY,KAAK;IACxB,QAAQ,GAAa,KAAK;AAC1B,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,GAAG,IAAI;AACR,QAAA,MAAM,eAAe,GAAG,IAAI,CAC1B,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,CACrB;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAAA,EAElB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAY,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,KAAK,CAAQ,CAChB,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.css?tag=ls-radio-input","src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.tsx"],"sourcesContent":[".radioLabel{\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.radioLabel.checked {\n  background-color: var(--primary-10);\n  border-color: var(--primary-20);\n  color: var(--primary-90)\n}\n\n.radioLabel:not(checked) {\n  color: var(--gray-90);\n  background-color: var(--gray-10);\n  border: 1px solid var(--gray-20);\n}\n\n.radioLabel.checked:hover {\n  border-color: var(--primary-30);\n  color: var(--primary-100);\n  \n}\n\n.radioLabel:not(.checked):not(.disabled):hover {\n  border-color: var(--gray-50);\n  color: var(--gray-100);\n}\n\n.radioLabel:focus:not(.disabled) {\n  box-shadow: var(--focus-box-shadow);\n  outline-offset: var(--focus-outline-offset);\n  outline: none;\n}\n\n.radioLabel.disabled {\n  cursor: not-allowed;\n}\n\n.radioLabel.disabled.checked {\n  background-color: var(--primary-10);\n  color: var(--primary-40);\n  border-color: var(--primary-40);\n}\n\n.radioLabel.disabled:not(.checked) {\n  background-color: var(--gray-10);\n  color: var(--gray-60);\n}\n\n.inputClass {\n  margin-top: 0px;\n}\n\n.inputClass:focus {\n  outline: none;\n}\n\n.inputClass:disabled {\n  cursor: not-allowed;\n}\n\n.spanContainer {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-radio-input',\n  styleUrl: 'ls-radio-input.css',\n  shadow: false,\n})\nexport class LsRadioInput {\n  @Prop() radioId: string;\n  @Prop() label: string;\n  @Prop() icon?: Icon;\n  @Prop() name?: string = 'name';\n  @Prop() checked: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() customStyle?: { [key: string]: string };\n\n  render() {\n    const {\n      label,\n      radioId,\n      icon,\n      name,\n      disabled,\n      checked,\n      customStyle,\n    } = this;\n    const radioLabelClass = clsx(\n      'radioLabel',\n      disabled && 'disabled',\n      checked && 'checked',\n    );\n\n    return (\n      <label\n        htmlFor={radioId}\n        tabIndex={0}\n        class={radioLabelClass}\n        style={customStyle}\n      >\n        <input\n          type='radio'\n          class='inputClass'\n          id={radioId}\n          name={name}\n          value={label}\n          disabled={disabled}\n          tabIndex={0}\n          checked={checked}\n        />\n        <div class='spanContainer'>\n          <span>{icon && <ls-icon name={icon} size={\"16\"}></ls-icon>}</span>\n          <span>{label}</span>\n        </div>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DeaQdy4U.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,qgCAAqgC;;MCShhC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;AACf,IAAA,OAAO;AACP,IAAA,KAAK;AACL,IAAA,IAAI;IACJ,IAAI,GAAY,MAAM;IACtB,OAAO,GAAY,KAAK;IACxB,QAAQ,GAAa,KAAK;AAC1B,IAAA,WAAW;IAEnB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,GACZ,GAAG,IAAI;AACR,QAAA,MAAM,eAAe,GAAG,IAAI,CAC1B,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,CACrB;AAED,QAAA,QACE,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,WAAW,EAAA,EAElB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,OAAO,EAChB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAY,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,KAAK,CAAQ,CAChB,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.css?tag=ls-radio-input","src/components/ls-formfield/inputs/ls-radio-input/ls-radio-input.tsx"],"sourcesContent":[".radioLabel{\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.radioLabel.checked {\n  background-color: var(--primary-10);\n  border-color: var(--primary-20);\n  color: var(--primary-90)\n}\n\n.radioLabel:not(checked) {\n  color: var(--gray-90);\n  background-color: var(--gray-10);\n  border: 1px solid var(--gray-20);\n}\n\n.radioLabel.checked:hover {\n  border-color: var(--primary-30);\n  color: var(--primary-100);\n  \n}\n\n.radioLabel:not(.checked):not(.disabled):hover {\n  border-color: var(--gray-50);\n  color: var(--gray-100);\n}\n\n.radioLabel:focus:not(.disabled) {\n  box-shadow: var(--focus-box-shadow);\n  outline-offset: var(--focus-outline-offset);\n  outline: none;\n}\n\n.radioLabel.disabled {\n  cursor: not-allowed;\n}\n\n.radioLabel.disabled.checked {\n  background-color: var(--primary-10);\n  color: var(--primary-40);\n  border-color: var(--primary-40);\n}\n\n.radioLabel.disabled:not(.checked) {\n  background-color: var(--gray-10);\n  color: var(--gray-60);\n}\n\n.inputClass {\n  margin-top: 0px;\n}\n\n.inputClass:focus {\n  outline: none;\n}\n\n.inputClass:disabled {\n  cursor: not-allowed;\n}\n\n.spanContainer {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}","import { Component, Prop, h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-radio-input',\n  styleUrl: 'ls-radio-input.css',\n  shadow: false,\n})\nexport class LsRadioInput {\n  @Prop() radioId: string;\n  @Prop() label: string;\n  @Prop() icon?: Icon;\n  @Prop() name?: string = 'name';\n  @Prop() checked: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() customStyle?: { [key: string]: string };\n\n  render() {\n    const {\n      label,\n      radioId,\n      icon,\n      name,\n      disabled,\n      checked,\n      customStyle,\n    } = this;\n    const radioLabelClass = clsx(\n      'radioLabel',\n      disabled && 'disabled',\n      checked && 'checked',\n    );\n\n    return (\n      <label\n        htmlFor={radioId}\n        tabIndex={0}\n        class={radioLabelClass}\n        style={customStyle}\n      >\n        <input\n          type='radio'\n          class='inputClass'\n          id={radioId}\n          name={name}\n          value={label}\n          disabled={disabled}\n          tabIndex={0}\n          checked={checked}\n        />\n        <div class='spanContainer'>\n          <span>{icon && <ls-icon name={icon} size={\"16\"}></ls-icon>}</span>\n          <span>{label}</span>\n        </div>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-YpxkkST1.js → p-DqJ_uIFZ.js}

@@ -34,12 +34,29 @@ function debounce(func, timeout = 300) {
 // if a mutation has created a new id then update the dataitem with OLD id to the new one
 function matchData(data) {
     const newObj = data.result;
-    const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id);
-    console.log(fi, data);
+    const prefix = atob(data.obj.id).substring(0, 3);
     // because mutations return the ID back with the mutation name we just assume its the first (and only) JSON prop
     const id = newObj[Object.keys(newObj)[0]];
-    fi.setAttribute('id', 'ls-field-' + id);
-    fi.dataItem = { ...data.obj, id };
+    if (data.event.action === 'create') {
+        if (prefix === 'ele') {
+            const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id);
+            fi.setAttribute('id', 'ls-field-' + id);
+            fi.dataItem = { ...data.obj, id };
+        }
+        else if (prefix === 'rol') {
+            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+            // Note this respread ensures that re-renders are triggered
+            this._template = { ...this._template, roles: [...this._template.roles, { ...data.obj, id }] };
+            participantManager.template = this._template;
+        }
+    }
+    else if (data.event.action === 'delete') {
+        if (prefix === 'rol') {
+            var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager');
+            this._template = { ...this._template, roles: this._template.roles.filter(r => r.id !== id) };
+            participantManager.template = this._template;
+        }
+    }
 }
 // Utility function which extracts the type from any API id
 function getApiType(obj) {
@@ -146,7 +163,15 @@ const validationTypes = [
     { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },
     { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
-    { id: 76, description: 'File: zip with PDF (for internal view, signed PDF for signer)', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
+    {
+        id: 76,
+        description: 'File: zip with PDF (for internal view, signed PDF for signer)',
+        formType: 'file',
+        defaultHeight: 16,
+        defaultWidth: 200,
+        typeDefault: false,
+        inputType: 'text',
+    },
     { id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
     { id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },
     { id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },
@@ -162,6 +187,6 @@ function getInputType(validation) {
 }
 
 export { alter as a, getInputType as b, debounce as d, getApiType as g, matchData as m, oob as o, validationTypes as v };
-//# sourceMappingURL=p-YpxkkST1.js.map
+//# sourceMappingURL=p-DqJ_uIFZ.js.map
 
-//# sourceMappingURL=p-YpxkkST1.js.map
+//# sourceMappingURL=p-DqJ_uIFZ.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DqJ_uIFZ.js","mappings":"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","names":[],"sources":["src/components/ls-document-viewer/editorUtils.ts"],"sourcesContent":["/**\n * These utils are used to make document-viewer more readable\n * but they must be called using the bind() function so that\n * all code is executed within the correct 'this' scope.\n *\n * Avoid using arrow functions here as they reassign \"thiss\"\n */\n\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { ValidationType } from '../../types/ValidationType';\n\n/**\n * Determines if an element will be plotted out of bounds, i.e. off\n * the page.\n */\nexport function oob(obj: LSApiElement): boolean {\n  if (obj.left + obj.width > obj.pageDimensions.width || obj.top < 0 || obj.left < 0 || obj.top + obj.height > obj.pageDimensions.height) return true;\n  else return false;\n}\n\nexport function alter(diffFn) {\n  const diffs: LSMutateEvent[] = this.selected.map(c => {\n    return { action: 'update', data: diffFn(c.dataItem) as LSApiElement };\n  });\n  this.mutate.emit(diffs);\n  this.update.emit(diffs);\n}\n\nexport function resetDataItems() {\n  const fields = this.component.shadowRoot.querySelectorAll('ls-editor-field') as HTMLLsEditorFieldElement[];\n  this.selected = Array.from(fields).filter(fx => fx.selected);\n  this.selectFields.emit(this.selected.map(fx => fx.dataItem));\n}\n\nexport function debounce(func, timeout = 300) {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, timeout);\n  };\n}\n\n// if a mutation has created a new id then update the dataitem with OLD id to the new one\nexport function matchData(data: { result: any; obj: any; event: LSMutateEvent }) {\n  const newObj = data.result;\n  const prefix = atob(data.obj.id).substring(0, 3);\n  // because mutations return the ID back with the mutation name we just assume its the first (and only) JSON prop\n  const id = newObj[Object.keys(newObj)[0]];\n\n  if (data.event.action === 'create') {\n    if (prefix === 'ele') {\n      const fi = this.component.shadowRoot.getElementById('ls-field-' + data.obj.id) as HTMLLsEditorFieldElement;\n\n      fi.setAttribute('id', 'ls-field-' + id);\n      fi.dataItem = { ...data.obj, id };\n    } else if (prefix === 'rol') {\n      var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager') as HTMLLsParticipantManagerElement;\n      // Note this respread ensures that re-renders are triggered\n      this._template = { ...this._template, roles: [...this._template.roles, { ...data.obj, id }] };\n      participantManager.template = this._template;\n    }\n  } else if (data.event.action === 'delete') {\n    if (prefix === 'rol') {\n      var participantManager = this.component.shadowRoot.getElementById('ls-participant-manager') as HTMLLsParticipantManagerElement;\n      this._template = { ...this._template, roles: this._template.roles.filter(r => r.id !== id) };\n      participantManager.template = this._template;\n    }\n  }\n}\n\n// Utility function which extracts the type from any API id\nexport function getApiType(obj: any) {\n  if (!obj?.id) return 'invalid';\n\n  const apiId = atob(obj.id);\n  if (apiId.length < 3) return 'invalid';\n\n  const prefix = atob(obj.id).substring(0, 3);\n\n  switch (prefix) {\n    case 'ele':\n      return 'element';\n    case 'rol':\n      return 'role';\n    case 'tpl':\n      return 'template';\n    case 'doc':\n      return 'document';\n    default:\n      return 'unknown';\n  }\n}\n\nexport const validationTypes: any = [\n  { id: 0, description: 'general purpose', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 30, description: 'yyyy/mm/dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 31, description: 'yy/mm/dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 32, description: 'dd/mm/yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 33, description: 'dd/mm/yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 34, description: 'mm/dd/yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 35, description: 'mm/dd/yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 36, description: 'yyyy.mm.dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 37, description: 'yy.mm.dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 38, description: 'dd.mm.yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 39, description: 'dd.mm.yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 40, description: 'mm.dd.yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 41, description: 'mm.dd.yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 42, description: 'yyyy-mm-dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 43, description: 'yy-mm-dd (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 44, description: 'dd-mm-yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 45, description: 'dd-mm-yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 46, description: 'mm-dd-yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 47, description: 'mm-dd-yy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 48, description: 'd mmmm yyyy (auto sign day)', formType: 'signing date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 73, description: 'Secret Code', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 77, description: 'Title caps (force text to title caps)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 78, description: 'Uppercase  (force text to uppercase)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 79, description: 'Lowercase (force text to lowercase)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 65, description: '1 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 66, description: '2 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 67, description: '3 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 68, description: '4 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 69, description: '5 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 70, description: '6 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 71, description: '7 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 72, description: '8 character (any text)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 1000, description: 'First name field (special use)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 1001, description: 'Last name field (special use)', formType: 'text', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 1, description: 'Email', formType: 'email', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 1002, description: 'Email field (special use)', formType: 'email', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 50, description: 'Whole number', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'number' },\n  { id: 51, description: 'Number', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 52, description: 'Currency', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 53, description: '1 number', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 54, description: '2 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 55, description: '3 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 56, description: '4 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 57, description: '5 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 58, description: '6 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 59, description: '7 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 60, description: '8 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 61, description: '9 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 62, description: '10 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 63, description: '11 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 64, description: '12 numbers', formType: 'number', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'number' },\n  { id: 2, description: 'yyyy/mm/dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'date' },\n  { id: 3, description: 'yy/mm/dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 4, description: 'dd/mm/yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'date' },\n  { id: 5, description: 'dd/mm/yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 6, description: 'mm/dd/yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 7, description: 'mm/dd/yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 80, description: 'mm/yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 81, description: 'mm/yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 8, description: 'yyyy.mm.dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 9, description: 'yy.mm.dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 10, description: 'dd.mm.yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 11, description: 'dd.mm.yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 12, description: 'mm.dd.yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 13, description: 'mm.dd.yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 82, description: 'mm.yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 83, description: 'mm.yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 14, description: 'yyyy-mm-dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 15, description: 'yy-mm-dd', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 16, description: 'dd-mm-yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 17, description: 'dd-mm-yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 18, description: 'mm-dd-yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 19, description: 'mm-dd-yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 84, description: 'mm-yy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 85, description: 'mm-yyyy', formType: 'date', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'date' },\n  { id: 20, description: 'Dropdown List', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 91, description: 'Countries', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 92, description: 'Name prefix titles', formType: 'dropdown', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 24, description: '✔/✗', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 25, description: '✔/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 26, description: '✗/empty', formType: 'checkbox', defaultHeight: 16, defaultWidth: 16, typeDefault: false, inputType: 'text' },\n  { id: 74, description: 'File: attach to confirmatory email to sender', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 75, description: 'File: append to PDF, PDF files only', formType: 'file', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  {\n    id: 76,\n    description: 'File: zip with PDF (for internal view, signed PDF for signer)',\n    formType: 'file',\n    defaultHeight: 16,\n    defaultWidth: 200,\n    typeDefault: false,\n    inputType: 'text',\n  },\n  { id: 90, description: 'Drawn field.', formType: 'drawn field', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 2000, description: 'Initials', formType: 'initials', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 93, description: 'Regular Expression field', formType: 'regular expression', defaultHeight: 16, defaultWidth: 200, typeDefault: false, inputType: 'text' },\n  { id: 3000, description: 'Auto Sign', formType: 'auto sign', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'text' },\n  { id: 4000, description: 'Text Area', formType: 'textarea', defaultHeight: 16, defaultWidth: 200, typeDefault: true, inputType: 'readonly' },\n];\n\n// See validation table in database for latest values - these have to be hard coded for our HTML control - ASW\nexport function getInputType(validation: number): ValidationType {\n  if (validation === null) return validationTypes[0];\n\n  const inputType: ValidationType = validationTypes.find(v => v.id === validation);\n\n  return inputType === null ? validationTypes[0] : inputType;\n}\n"],"version":3}

package/dist/components/{p-X9ibhDjX.js → p-DxZasSi4.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsToolboxFieldCss = ":host{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -52,7 +52,7 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
         }
     }
     render() {
-        return (h(Host, { key: '14ad8062f22a1d3eb0130dbd26bf06c522c6b4e6', draggable: "true" }, h("div", { key: 'd4da463a5786f80d87d472ab19e812c4d4395f35', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: 'a2453e407f4681bfc14ea9b4d01d54d8ae00a47f', name: this.icon, size: "20" })), h("p", { key: '61b6673d2b2af3a80e049bcccf01be4c94eabbe7', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '53a1e91ee1ddc89e1e6835c7e96efb56583fbce5', name: "drag-vertical", size: "16", color: "#787a80" })));
+        return (h(Host, { key: '28635190b959516d2805743afe73a75899e93188', draggable: "true" }, h("div", { key: 'ebac5f01b6e811b287d3602e11ff9d9b2d2cbf42', class: "toolbox-field-icon", style: { '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` } }, h("ls-icon", { key: '8c90a428b4996db02725b8c69c347fbd3e7f7f98', name: this.icon, size: "20" })), h("p", { key: '7707d244b00898a9c3efb2ba8d2a64665b737b69', class: "toolbox-field-label" }, this.label), h("ls-icon", { key: '9dc296c2b3da9b561a95fc7cc5cf28f7a85e27c2', name: "drag-vertical", size: "16", color: "#787a80" })));
     }
     static get style() { return lsToolboxFieldCss; }
 }, [257, "ls-toolbox-field", {
@@ -86,6 +86,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsToolboxField as L, defineCustomElement as d };
-//# sourceMappingURL=p-X9ibhDjX.js.map
+//# sourceMappingURL=p-DxZasSi4.js.map
 
-//# sourceMappingURL=p-X9ibhDjX.js.map
+//# sourceMappingURL=p-DxZasSi4.js.map

package/dist/components/{p-X9ibhDjX.js.map → p-DxZasSi4.js.map}

@@ -1 +1 @@
-{"file":"p-X9ibhDjX.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,u8JAAu8J;;MCQp9J,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AACzB;;AAEG;AACK,IAAA,eAAe;AACf,IAAA,WAAW;IACX,UAAU,GAAW,CAAC;AAE9B;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,aAAa;AACrB;;AAEG;AACK,IAAA,YAAY;AAEpB;;AAEG;IACK,KAAK,GAAW,SAAS;AAGjC,IAAA,eAAe,CAAC,KAAK,EAAA;;QAEnB,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,YAAY,EAAE,IAAI,CAAC,YAAY;AAChC,SAAA,CAAC,CACH;AACD,QAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;;AAIxC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;AAC7B,YAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;IAIrC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,MAAM,EAAA,EACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAA,IAAA,CAAM,EAAE,gBAAgB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAM,IAAA,CAAA,EAAE,EAAA,EACvI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CAClC,EACN,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,CACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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":[":host {\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: var(--white, #fff);\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.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, Host, Listen, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.css',\n  shadow: true,\n})\nexport class LsToolboxField {\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\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  /**\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() color: string = 'primary';\n\n  @Listen('dragstart')\n  handleDragStart(event) {\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      }),\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  render() {\n    return (\n      <Host draggable=\"true\">\n        <div class=\"toolbox-field-icon\" style={{ '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` }}>\n          <ls-icon name={this.icon} size=\"20\" />\n        </div>\n        <p class=\"toolbox-field-label\">{this.label}</p>\n        <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DxZasSi4.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,u8JAAu8J;;MCQp9J,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AACzB;;AAEG;AACK,IAAA,eAAe;AACf,IAAA,WAAW;IACX,UAAU,GAAW,CAAC;AAE9B;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,aAAa;AACrB;;AAEG;AACK,IAAA,YAAY;AAEpB;;AAEG;IACK,KAAK,GAAW,SAAS;AAGjC,IAAA,eAAe,CAAC,KAAK,EAAA;;QAEnB,KAAK,CAAC,YAAY,CAAC,OAAO,CACxB,kBAAkB,EAClB,IAAI,CAAC,SAAS,CAAC;YACb,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,YAAY,EAAE,IAAI,CAAC,YAAY;AAChC,SAAA,CAAC,CACH;AACD,QAAA,KAAK,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM;;AAIxC,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;AAC7B,YAAA,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;IAIrC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,MAAM,EAAA,EACpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,sBAAsB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAA,IAAA,CAAM,EAAE,gBAAgB,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAM,IAAA,CAAA,EAAE,EAAA,EACvI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CAClC,EACN,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,CACrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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":[":host {\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: var(--white, #fff);\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.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, Host, Listen, Prop, h } from '@stencil/core';\nimport { Icon } from '../../types/Icon';\n\n@Component({\n  tag: 'ls-toolbox-field',\n  styleUrl: 'ls-toolbox-field.css',\n  shadow: true,\n})\nexport class LsToolboxField {\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\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  /**\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() color: string = 'primary';\n\n  @Listen('dragstart')\n  handleDragStart(event) {\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      }),\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  render() {\n    return (\n      <Host draggable=\"true\">\n        <div class=\"toolbox-field-icon\" style={{ '--signer-color-light': `var(--${this.color}-10)`, '--signer-color': `var(--${this.color}-60)` }}>\n          <ls-icon name={this.icon} size=\"20\" />\n        </div>\n        <p class=\"toolbox-field-label\">{this.label}</p>\n        <ls-icon name=\"drag-vertical\" size=\"16\" color=\"#787a80\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-6hZjNCO9.js → p-V-QJ5j_K.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
 import { d as defaultRolePalette } from './p-C00GqV9f.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsParticipantManagerCss = ".label-span{position:absolute;font-family:inherit;display:inline-flex;align-items:center;line-height:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}*{box-sizing:border-box;margin:0}.hidden{visibility:hidden;display:none}.participant-list{position:relative;display:flex;flex-direction:column;gap:0.75rem}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch;border-radius:1rem}.role-label{display:flex;padding:0.125rem 0.375rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.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}.ls-editor-infobox{padding:2px 8px 2px 8px}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.add-participant-button{position:sticky;display:flex;padding:0.75rem 0;margin-bottom:-0.75rem;margin-top:-0.75rem;bottom:-0.75rem;background-image:linear-gradient(to top, var(--gray-10, #f7f8fa) 0%, var(--gray-10, #f7f8fa) 80%, transparent 100%)}.add-participant-button button{display:flex;gap:0.75rem;justify-content:center;align-items:center;width:100%;border:2px dashed var(--gray-20, #edeff2);background:var(--white, #fff);color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -29,22 +29,25 @@ const LsParticipantManager = /*@__PURE__*/ proxyCustomElement(class LsParticipan
     }
     deleteHandler(role) {
         this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
     }
     swapHandler(role1, role2) {
         this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
     }
     createHandler() {
+        const defaultExperience = this.editor._group.experienceConnection.experiences.find(x => x.defaultExperience === true);
         const data = [
             {
                 action: 'create',
                 data: {
                     id: btoa('rol' + crypto.randomUUID()),
-                    name: 'Signer ' + this.template.roles.length,
+                    name: 'Signer ' + (this.template.roles.length + 1),
                     roleType: 'SIGNER',
-                    signerIndex: this.template.roles.length,
+                    signerIndex: this.template.roles.length + 1,
                     ordinal: this.template.roles.length,
                     signerParent: null,
-                    experience: '',
+                    experience: defaultExperience.id,
+                    templateId: this.template.id
                 },
             },
         ];
@@ -55,7 +58,7 @@ const LsParticipantManager = /*@__PURE__*/ proxyCustomElement(class LsParticipan
         return index > 200 ? 'gray' : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
     };
     render() {
-        return (h(Host, { key: '846505f31da41d85e4aae5119637975ce94f736d' }, h("div", { key: 'fee2a1a3cc304c61a915a9583372263148acc4cc', class: "ls-editor-infobox" }, h("h2", { key: '706f3d3c7a15d132fd4e449d4dc6544076f27ab6', class: "toolbox-section-title" }, "Participants"), h("p", { key: '57fa9b430561cb6439ef5c60141d5d9ffbd115ee', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: 'e21c5e1ce563b6acc7c3135581ae23d45fcff829', class: "participant-list" }, this.template?.roles.map((r, index) => {
+        return (h(Host, { key: '4f05b9b42935d385ac4dcf575dff6655a39b625c' }, h("div", { key: '07ec67a5c919dbc1258768dd7db80d21790a8c1e', class: "ls-editor-infobox" }, h("h2", { key: '365f0a1c25e77ffc1b89354b867e7844b53a40fe', class: "toolbox-section-title" }, "Participants"), h("p", { key: 'cc7e0187d20492ea7568bd77ef4c3cb2df8b12ce', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '61045bc3accf319bfd5c84953f6a0066b6bd2114', class: "participant-list" }, this.template && this.template?.roles.map((r, index) => {
             return (h("div", { class: "participant-card", onClick: () => {
                     this.selectedHandler(r);
                 }, style: {
@@ -73,8 +76,9 @@ const LsParticipantManager = /*@__PURE__*/ proxyCustomElement(class LsParticipan
                     color: `var(--${this.participantColor(r?.signerIndex)}-100)`,
                 } }, r.name || `${r.signerIndex > 100 ? 'Witness' : 'Signer'} ${index + 1}`), h("p", { class: "participant-text-type", style: {
                     color: `var(--${this.participantColor(r?.signerIndex)}-80)`,
-                } }, r.signerIndex > 100 ? 'Witness' : 'Signer'))));
-        })), h("div", { key: '8d8b004e6e30e748a63c63b4315fdd58d1748aab', class: 'add-participant-button' }, h("button", { key: '41312ffdafec9bca1a0e3ef7b0e554d74739f957', onClick: () => this.createHandler() }, h("ls-icon", { key: '03cbcf950e7a61b7a35083034dfe160e6537d7b2', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: '2644a582f45a54ca06661d21cc47d81cb224c94d' }, "Add Participant"))), h("slot", { key: '2eb37c729f03886331c2bb0fe28c77bb26b2e232' })));
+                    textTransform: 'capitalize'
+                } }, r.roleType))));
+        })), h("div", { key: '295045bfeca2144d556311574fe6c34e74453c40', class: 'add-participant-button' }, h("button", { key: '6a0a02834fd09aff180fffc58983a0eac9fde61d', onClick: () => this.createHandler() }, h("ls-icon", { key: 'd623a2c621f730b96339657d49be661c96d1d9fa', name: "user-add", size: "20", color: "var(--gray-100, #45484D);" }), h("p", { key: 'ce3954251ce0b939dab95f9ea1772da1bb0cf9ea' }, "Add Participant"))), h("slot", { key: '65e160a9fde84fb8a09b14e60c992324bd9a8892' })));
     }
     static get style() { return lsParticipantManagerCss; }
 }, [257, "ls-participant-manager", {
@@ -102,6 +106,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsParticipantManager as L, defineCustomElement as d };
-//# sourceMappingURL=p-6hZjNCO9.js.map
+//# sourceMappingURL=p-V-QJ5j_K.js.map
 
-//# sourceMappingURL=p-6hZjNCO9.js.map
+//# sourceMappingURL=p-V-QJ5j_K.js.map