legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/{p-BdTy5xDV.js.map → p-CDGosSW8.js.map}

@@ -1 +1 @@
-{"file":"p-BdTy5xDV.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,2BAA2B,GAAG,qtJAAqtJ;;MCQ5uJ,wBAAwB,iBAAAA,kBAAA,CAAA,MAAA,wBAAA,SAAAC,CAAA,CAAA;;;;;;AAC3B,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\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: 2.25rem;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\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';\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\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CDGosSW8.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,mtJAAmtJ,CAAC;;MCQ/uJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-text/ls-field-properties-text.css?tag=ls-field-properties-text&encapsulation=shadow","src/components/ls-field-properties-text/ls-field-properties-text.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.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\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: 2.25rem;\n  width: 100%;\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.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';\n\n@Component({\n  tag: 'ls-field-properties-text',\n  styleUrl: 'ls-field-properties-text.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesText {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CDgBo5Zz.js

@@ -0,0 +1,117 @@
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$d } from './p-DsR1ud4V.js';
+import { d as defineCustomElement$c } from './p-aA8RuwY_.js';
+import { d as defineCustomElement$b } from './p-DYQekJvr.js';
+import { d as defineCustomElement$a } from './p-CGQK3l8F.js';
+import { d as defineCustomElement$9 } from './p-KMRQyALr.js';
+import { d as defineCustomElement$8 } from './p-C9CUft6J.js';
+import { d as defineCustomElement$7 } from './p-BQZBAjo_.js';
+import { d as defineCustomElement$6 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$5 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$4 } from './p-Du60SSaA.js';
+import { d as defineCustomElement$3 } from './p-CJSY3-Q3.js';
+import { d as defineCustomElement$2 } from './p-DKaEsQyk.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
+
+const lsFieldPropertiesNumberCss = () => `:host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldPropertiesNumber = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesNumber extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    dataItem;
+    render() {
+        return (h(Host, { key: 'b80b5fcac71efe28dc3205735231a491795e7bd4' }, h("ls-field-properties-container", { key: '59dcf27dc38d2bc431c6b7a4c32c713c7a528c44', tabs: ['content', 'placement', 'dimensions'] }, h("div", { key: '530f40c313c2388652d2bb3546b047051615e95e', class: 'field-set', slot: "content" }, h("ls-field-content", { key: 'd5f3f1413755c694467d38db058f0a421fa35bce', dataItem: this.dataItem }), h("ls-field-properties-advanced", { key: '2172921644d4ca951ca743b407db38b004616be8', dataItem: this.dataItem })), h("div", { key: '723e4e936ad4d0d9fdfe15e3fb0be0990a41362f', class: 'field-set', slot: "dimensions" }, h("ls-field-dimensions", { key: '2f19c772c4fef5245f6b991dbc0f4bf7c289804f', dataItem: this.dataItem })), h("div", { key: 'd77f2d3c4607867c73d5f14ba86712e9f659c234', class: 'field-set', slot: "placement" }, h("ls-field-placement", { key: '989670bc4ae90c6304bc2bcc1d89c60bb34233e1', dataItem: this.dataItem }))), h("ls-field-footer", { key: '7016293db69530b0176cc374b861442b8b9e490c', dataItem: this.dataItem })));
+    }
+    static get style() { return lsFieldPropertiesNumberCss(); }
+}, [769, "ls-field-properties-number", {
+        "dataItem": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-number", "ls-editor-field", "ls-field-content", "ls-field-dimensions", "ls-field-footer", "ls-field-placement", "ls-field-properties-advanced", "ls-field-properties-container", "ls-field-type-display", "ls-icon", "ls-input-wrapper", "ls-props-section", "ls-toggle", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-number":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldPropertiesNumber);
+            }
+            break;
+        case "ls-editor-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ls-field-content":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ls-field-properties-advanced":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-properties-container":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-type-display":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesNumber as L, defineCustomElement as d };
+//# sourceMappingURL=p-CDgBo5Zz.js.map
+
+//# sourceMappingURL=p-CDgBo5Zz.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CDgBo5Zz.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,MAAM,CAAC,mtJAAmtJ,CAAC;;MCQjvJ,uBAAuB,iBAAAA,kBAAA,CAAA,MAAA,uBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC1B,IAAA,QAAQ;IAEZ,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-number/ls-field-properties-number.css?tag=ls-field-properties-number&encapsulation=shadow","src/components/ls-field-properties-number/ls-field-properties-number.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.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\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: 2.25rem;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\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';\n\n@Component({\n  tag: 'ls-field-properties-number',\n  styleUrl: 'ls-field-properties-number.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesNumber {\n  @Prop() dataItem: LSApiElement;\n    \n      render() {\n        return (\n          <Host>\n            <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n              <div class={'field-set'} slot=\"content\">\n                <ls-field-content dataItem={this.dataItem} />\n                <ls-field-properties-advanced dataItem={this.dataItem} />\n              </div>\n              <div class={'field-set'} slot=\"dimensions\">\n                <ls-field-dimensions dataItem={this.dataItem} />\n              </div>\n              <div class={'field-set'} slot=\"placement\">\n                <ls-field-placement dataItem={this.dataItem} />\n              </div>\n            </ls-field-properties-container>\n            <ls-field-footer dataItem={this.dataItem} />\n          </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DNojPpNK.js → p-CEB07hOR.js}

@@ -1,17 +1,19 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
 
-const lsRecipientManagerCss = ":host{display:block}*{margin:0}.ls-editor-infobox{padding:0.25rem}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;margin-bottom:0.375rem}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;margin-bottom:0.375rem}";
+const lsRecipientManagerCss = () => `:host{display:block}*{margin:0}.ls-editor-infobox{padding:0.25rem}.toolbox-section-title{color:var(--gray-100, #45484d);font-size:1.125rem;font-style:normal;font-weight:500;line-height:1.75rem;margin-bottom:0.375rem}.toolbox-section-description{color:var(--gray-80, #5e6066);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;margin-bottom:0.375rem}`;
 
 const LsRecipientManager = /*@__PURE__*/ proxyCustomElement(class LsRecipientManager extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
         return (h(Host, { key: '9c6026c5d362b25b31f25e2588226d1e7bb9ca78' }, h("div", { key: 'f4e732260416beb3f01803a9c6f8d6fee22859ec', class: 'ls-editor-infobox' }, h("h2", { key: 'd622ae085cc3fee0cbca43bb045764080e5f6bc8', class: "toolbox-section-title" }, "Recipients & Fields"), h("p", { key: 'd75d89a00e6f977ea4cca32df089ad1862c016ce', class: "toolbox-section-description" }, "Select Recipient to Expand and Drag to place Signature fields where you\u2019d like them to Sign.")), h("slot", { key: '5dd8bd6a4a769540c21e75e01a7b8ec0431ea30c' })));
     }
-    static get style() { return lsRecipientManagerCss; }
+    static get style() { return lsRecipientManagerCss(); }
 }, [257, "ls-recipient-manager"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -20,8 +22,8 @@ function defineCustomElement() {
     const components = ["ls-recipient-manager"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-recipient-manager":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsRecipientManager);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsRecipientManager);
             }
             break;
     } });
@@ -29,6 +31,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsRecipientManager as L, defineCustomElement as d };
-//# sourceMappingURL=p-DNojPpNK.js.map
+//# sourceMappingURL=p-CEB07hOR.js.map
 
-//# sourceMappingURL=p-DNojPpNK.js.map
+//# sourceMappingURL=p-CEB07hOR.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CEB07hOR.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,+WAA+W,CAAC;;MCOxY,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;;;;IAC7B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC7B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAyB,EAAA,qBAAA,CAAA,EAC1D,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,6BAA6B,EAAA,EAAA,mGAAA,CAAiG,CACnI,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-recipient-manager/ls-recipient-manager.css?tag=ls-recipient-manager&encapsulation=shadow","src/components/ls-recipient-manager/ls-recipient-manager.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  margin: 0;\n}\n\n.ls-editor-infobox {\n  padding: 0.25rem;\n}\n\n.toolbox-section-title {\n  color: var(--gray-100, #45484d);\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n  margin-bottom: 0.375rem;\n}\n\n.toolbox-section-description {\n  color: var(--gray-80, #5e6066);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n  margin-bottom: 0.375rem;\n}","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-recipient-manager',\n  styleUrl: 'ls-recipient-manager.css',\n  shadow: true,\n})\nexport class LsRecipientManager {\n  render() {\n    return (\n      <Host>\n        <div class={'ls-editor-infobox'}>\n          <h2 class=\"toolbox-section-title\">Recipients & Fields</h2>\n          <p class=\"toolbox-section-description\">Select Recipient to Expand and Drag to place Signature fields where you’d like them to Sign.</p>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CGQK3l8F.js

@@ -0,0 +1,80 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$1 } from './p-D95fiMAP.js';
+
+const lsFieldFooterCss = () => `:host{display:block}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}`;
+
+const LsFieldFooter = /*@__PURE__*/ proxyCustomElement(class LsFieldFooter extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+        this.selectFields = createEvent(this, "selectFields", 7);
+    }
+    /**
+     * The selected items information (as JSON).
+     * {LSApiElement[]}
+     */
+    dataItem;
+    mutate;
+    update;
+    selectFields;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getItems() {
+        if (this.isSingle(this.dataItem)) {
+            return [this.dataItem];
+        }
+        return this.dataItem;
+    }
+    deleteField = () => {
+        this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di }; }));
+    };
+    duplicateField = () => {
+        this.getItems().forEach(current => {
+            const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };
+            const newTop = current.top + current.height;
+            if (newTop + current.height < current.pageDimensions.height) {
+                newItem.top = newTop;
+            }
+            this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);
+        });
+    };
+    render() {
+        return (h(Host, { key: 'b304511650fb8ab792ee4112ce4eb6ecabfad7b1' }, h("div", { key: 'ffb272b2be2e33164600f4751d91df4aabe6a37d', class: 'button-footer' }, h("button", { key: '4186e5559318e08134f5d3d3eef95be7dd277583', class: 'secondary', onClick: () => this.duplicateField() }, h("ls-icon", { key: '421a920a74da3f785236ca4051df988bada70e2d', name: "field-duplicate", size: "1.25rem" }), "Duplicate"), h("button", { key: 'd7f34ff31f29b11d3d1801bdf4d88fe23e8d5c9d', class: 'destructive', onClick: () => this.deleteField() }, h("ls-icon", { key: '91abcc24bf4bea621252a5982442d38a7a36644d', name: "trash", size: "1.25rem", color: 'var(--red-60)' }), "Delete")), h("slot", { key: 'df560039d19466975b12468042f2bfd0a3b81b6f' })));
+    }
+    static get style() { return lsFieldFooterCss(); }
+}, [769, "ls-field-footer", {
+        "dataItem": [1040]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-footer", "ls-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-footer":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldFooter);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldFooter as L, defineCustomElement as d };
+//# sourceMappingURL=p-CGQK3l8F.js.map
+
+//# sourceMappingURL=p-CGQK3l8F.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CGQK3l8F.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,m9BAAm9B,CAAC;;MCQv+B,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AACxB;;;AAGG;AAIH,IAAA,QAAQ;AAMR,IAAA,MAAM;AAON,IAAA,MAAM;AAON,IAAA,YAAY;AAEZ,IAAA,QAAQ,CAAC,EAAiC,EAAA;AACxC,QAAA,OAAQ,EAAqB,CAAC,MAAM,KAAK,SAAS;;AAGpD,IAAA,UAAU,CAAC,EAAiC,EAAA;AAC1C,QAAA,OAAO,OAAQ,EAAqB,CAAC,MAAM,KAAK,QAAQ;;IAG1D,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AAChC,YAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;;QAExB,OAAO,IAAI,CAAC,QAAQ;;IAGtB,WAAW,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,IAAM,EAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CAAA,EAAE,CAAC,CAAC;AACxF,KAAC;IAED,cAAc,GAAG,MAAK;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,IAAG;AAChC,YAAA,MAAM,OAAO,GAAG,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE;YACrE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM;AAC3C,YAAA,IAAI,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE;AAC3D,gBAAA,OAAO,CAAC,GAAG,GAAG,MAAM;;YAEtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1E,SAAC,CAAC;AACJ,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAA,EACzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAA,EAC9D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EAE1C,WAAA,CAAA,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC7D,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,EAAG,CAAA,WAEtD,CACL,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-footer/ls-field-footer.css?tag=ls-field-footer&encapsulation=shadow","src/components/ls-field-footer/ls-field-footer.tsx"],"sourcesContent":[":host {\n  display: block;\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\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\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","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-footer',\n  styleUrl: 'ls-field-footer.css',\n  shadow: true,\n})\nexport class LsFieldFooter {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement | LSApiElement[];\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  selectFields: EventEmitter<LSApiElement[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  getItems(): LSApiElement[] {\n    if (this.isSingle(this.dataItem)) {\n      return [this.dataItem];\n    }\n    return this.dataItem;\n  }\n\n  deleteField = () => {\n    this.mutate.emit(this.getItems().map(di => { return { action: 'delete', data: di } }));\n  }\n\n  duplicateField = () => {\n    this.getItems().forEach(current => {\n      const newItem = { ...current, id: btoa('ele' + crypto.randomUUID()) };\n      const newTop = current.top + current.height;\n      if (newTop + current.height < current.pageDimensions.height) {\n        newItem.top = newTop;\n      }\n      this.mutate.emit([{ action: 'create', data: newItem, select: 'clear' }]);\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'button-footer'}>\n          <button class={'secondary'} onClick={() => this.duplicateField()}>\n            <ls-icon name=\"field-duplicate\" size=\"1.25rem\" />\n            Duplicate\n          </button>\n          <button class={'destructive'} onClick={() => this.deleteField()}>\n            <ls-icon name=\"trash\" size=\"1.25rem\" color='var(--red-60)' />\n            Delete\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C3Qs4SL0.js → p-CJSY3-Q3.js}

@@ -1,11 +1,13 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
 
-const lsPropsSectionCss = "*{margin:0;box-sizing:border-box}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}";
+const lsPropsSectionCss = () => `*{margin:0;box-sizing:border-box}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}`;
 
 const LsPropsSection = /*@__PURE__*/ proxyCustomElement(class LsPropsSection extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     sectionTitle;
@@ -14,8 +16,8 @@ const LsPropsSection = /*@__PURE__*/ proxyCustomElement(class LsPropsSection ext
     render() {
         return (h(Host, { key: '4b24bc2ccb0ee11c0d9cc1770ec0d1b239b924d5' }, h("div", { key: 'a92e48cf867e686ac84c3f3ce3945d3fc4d73811', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: '811c27c607c3611cc958a66fef19ae0fb124d6fd', class: 'ls-field-properties-section-text' }, h("p", { key: 'f4ccf988b97952f0d02cae2810dc134555807a5b', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: 'a85216a0721e875f765ac82b46961ffe22788eb0', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: 'e22f8f4565c5190273f079f88f3f9b3c7826c912' }))));
     }
-    static get style() { return lsPropsSectionCss; }
-}, [257, "ls-props-section", {
+    static get style() { return lsPropsSectionCss(); }
+}, [769, "ls-props-section", {
         "sectionTitle": [1, "section-title"],
         "sectionDescription": [1, "section-description"],
         "row": [4]
@@ -27,8 +29,8 @@ function defineCustomElement() {
     const components = ["ls-props-section"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-props-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsPropsSection);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsPropsSection);
             }
             break;
     } });
@@ -36,6 +38,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsPropsSection as L, defineCustomElement as d };
-//# sourceMappingURL=p-C3Qs4SL0.js.map
+//# sourceMappingURL=p-CJSY3-Q3.js.map
 
-//# sourceMappingURL=p-C3Qs4SL0.js.map
+//# sourceMappingURL=p-CJSY3-Q3.js.map

package/dist/components/p-CJSY3-Q3.js.map

@@ -0,0 +1 @@
+{"file":"p-CJSY3-Q3.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,smBAAsmB,CAAC;;MCO3nB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;AACjB,IAAA,YAAY;AACZ,IAAA,kBAAkB;IAClB,GAAG,GAAa,KAAK;IAE7B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,GAAG,GAAG,iCAAiC,GAAG,6BAA6B,EAAA,EACtF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kCAAkC,EAAA,EAC5C,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,mCAAmC,IAAG,IAAI,CAAC,YAAY,CAAK,EACrE,IAAI,CAAC,kBAAkB,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,yCAAyC,EAAA,EAAG,IAAI,CAAC,kBAAkB,CAAK,CAC1G,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-props-section/ls-props-section.css?tag=ls-props-section&encapsulation=shadow","src/components/ls-props-section/ls-props-section.tsx"],"sourcesContent":["* {\n  margin: 0;\n  box-sizing: border-box;\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","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-props-section',\n  styleUrl: 'ls-props-section.css',\n  shadow: true,\n})\nexport class LsPropsSection {\n  @Prop() sectionTitle: string;\n  @Prop() sectionDescription?: string;\n  @Prop() row?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>{this.sectionTitle}</p>\n            {this.sectionDescription && <p class={'ls-field-properties-section-description'}>{this.sectionDescription}</p>}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CPZtW_1V.js

@@ -0,0 +1,124 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
+import { d as defineCustomElement$3 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$2 } from './p-DKaEsQyk.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
+
+const lsDocumentOptionsCss = () => `*{box-sizing:border-box;margin:0;padding:0}:host{display:block}.ls-editor-infobox{padding:0.125rem 0.5rem 0.125rem 0.5rem}.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}.template-details{display:flex;flex-direction:column;gap:0.75rem}.template-detail-section{position:relative;display:flex;padding:0.75rem;align-items:center;gap:0.5rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #fff)}.template-detail-section-title{color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;width:100%}.template-detail-section-info{color:var(--gray-70);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;width:100%}.template-title{border-radius:0.5rem;padding:0.25rem;color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;cursor:pointer;width:100%;margin-top:-0.125rem}.template-title:hover{background:var(--gray-10, #f7f8fa)}.column{display:flex;flex-direction:column;align-items:flex-start}.editButton{position:absolute;top:0.75rem;right:0.75rem;margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--gray-70, #2134dc)}.editButton:hover{color:var(--gray-80)}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsDocumentOptions = /*@__PURE__*/ proxyCustomElement(class LsDocumentOptions extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    get component() { return this; }
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    editTitle = false;
+    selectedHandler(newSelected, _oldSelected) {
+        console.log(newSelected, 'document manager');
+    }
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.debounce(diff, 500);
+    }
+    titletimer;
+    debounce(diff, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.template = { ...this.template, ...diff };
+            const diffs = [{ action: 'update', data: this.template }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        function formatDate(isoString) {
+            const date = new Date(isoString);
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+            const year = date.getFullYear();
+            const hours = String(date.getHours()).padStart(2, '0');
+            const minutes = String(date.getMinutes()).padStart(2, '0');
+            return `${day}/${month}/${year} at ${hours}:${minutes}`;
+        }
+        return (h(Host, null, h("div", { class: "ls-editor-infobox" }, h("h2", { class: "toolbox-section-title" }, "Template Details"), h("p", { class: "toolbox-section-description" }, "Details and insights about the Template.")), h("div", { class: 'template-details' }, h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Name"), h("div", { class: "editButton", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, h("ls-icon", { name: this.editTitle ? 'check' : 'pencil-alt', size: "1.25rem", id: "edit-name-btn", "data-tooltip": this.editTitle ? 'Save' : 'Edit Name' })), this.editTitle ? (h("input", { value: this.template?.title, style: { width: '100%' }, onInput: e => {
+                e.preventDefault();
+                this.alter({ title: e.target.value });
+            }, onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editTitle = false;
+            } })) : (h("div", { class: "template-title", onClick: () => {
+                this.editTitle = !this.editTitle;
+            } }, h("p", null, this.template?.title)))), h("div", { class: 'template-detail-section' }, h("div", null, h("p", { class: "template-detail-section-title" }, "Auto Archive"), h("p", { class: 'template-detail-section-info' }, "After Sending the Template will be automatically archived.")), h("ls-toggle", { checked: this.template?.autoArchive, onValueChange: e => {
+                this.alter({ autoArchive: e.detail });
+            } })), h("div", { class: 'template-detail-section' }, h("div", null, h("p", { class: "template-detail-section-title" }, "Lock Template"), h("p", { class: 'template-detail-section-info' }, "Lock Template to avoid changes being made")), h("ls-toggle", { checked: this.template?.locked, onValueChange: e => {
+                this.alter({ locked: e.detail });
+            } })), h("div", { class: 'template-detail-section' }, h("div", null, h("p", { class: "template-detail-section-title", "tooltip-data": "Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template." }, "Fixed Signature Aspect"), h("p", { class: 'template-detail-section-info' }, "Fixes the aspect ratio of all signatures on the document")), h("ls-toggle", { checked: this.template?.fixSignatureScale, onValueChange: e => {
+                this.alter({ fixSignatureScale: e.detail });
+            } })), h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Document Retention (Days)"), h("p", null, h("input", { value: this.template?.documentRetentionDays, style: { width: '100%' }, type: 'number', onInput: e => {
+                e.preventDefault();
+                this.alter({ documentRetentionDays: e.target.value });
+            } }))), h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Pages"), h("p", null, this.template?.pageCount)), h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Date Created"), " ", h("p", null, formatDate(this.template?.created))), h("div", { class: 'template-detail-section column' }, h("p", { class: "template-detail-section-title" }, "Created By"), " ", h("p", null, this.template?.createdBy))), h("slot", null), h("ls-tooltip", { id: "ls-tooltip-master" })));
+    }
+    static get watchers() { return {
+        "template": ["selectedHandler"]
+    }; }
+    static get style() { return lsDocumentOptionsCss(); }
+}, [769, "ls-document-options", {
+        "template": [1040],
+        "editTitle": [32]
+    }, undefined, {
+        "template": ["selectedHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-document-options", "ls-icon", "ls-toggle", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-document-options":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsDocumentOptions);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsDocumentOptions as L, defineCustomElement as d };
+//# sourceMappingURL=p-CPZtW_1V.js.map
+
+//# sourceMappingURL=p-CPZtW_1V.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CPZtW_1V.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-options/ls-document-options.css?tag=ls-document-options&encapsulation=shadow","src/components/ls-document-options/ls-document-options.tsx"],"sourcesContent":["* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n:host {\n  display: block;\n}\n\n.ls-editor-infobox {\n  padding: 0.125rem 0.5rem 0.125rem 0.5rem;\n}\n\n.toolbox-section-title {\n  color: var(--gray-100, #45484d);\n  font-size: 1.125rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.75rem; /* 155.556% */\n}\n\n.toolbox-section-description {\n  color: var(--gray-80, #5e6066);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.template-details {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.template-detail-section {\n  position: relative;\n  display: flex;\n  padding: 0.75rem;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 1rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #fff);\n}\n\n.template-detail-section-title {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: 100%;\n}\n\n.template-detail-section-info {\n  color: var(--gray-70);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 142.857% */\n  width: 100%;\n}\n\n.template-title {\n  border-radius: 0.5rem;\n  padding: 0.25rem;\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n  cursor: pointer;\n  width: 100%;\n  margin-top: -0.125rem;\n\n}\n\n.template-title:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start\n}\n\n.editButton {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--gray-70, #2134dc);\n}\n\n.editButton:hover {\n  color: var(--gray-80);\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: 2.25rem;\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\n","import { Component, Host, h, Prop, Watch, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-document-options',\n  styleUrl: 'ls-document-options.css',\n  shadow: true,\n})\nexport class LsDocumentOptions {\n  @Element() component: HTMLElement;\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop({ mutable: true, reflect: true }) template: LSApiTemplate;\n\n  @State() editTitle: boolean = false;\n\n  @Watch('template')\n  selectedHandler(newSelected, _oldSelected) {\n    console.log(newSelected, 'document manager');\n  }\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object) {\n    this.debounce(diff, 500);\n  }\n\n  private titletimer;\n\n  debounce(diff, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.template = { ...this.template, ...diff };\n      const diffs: LSMutateEvent[] = [{ action: 'update', data: this.template }];\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    function formatDate(isoString) {\n      const date = new Date(isoString);\n\n      const day = String(date.getDate()).padStart(2, '0');\n      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n      const year = date.getFullYear();\n\n      const hours = String(date.getHours()).padStart(2, '0');\n      const minutes = String(date.getMinutes()).padStart(2, '0');\n\n      return `${day}/${month}/${year} at ${hours}:${minutes}`;\n    }\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Template Details</h2>\n          <p class=\"toolbox-section-description\">Details and insights about the Template.</p>\n        </div>\n        <div class={'template-details'}>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Name</p>\n            <div\n              class=\"editButton\"\n              onClick={() => {\n                this.editTitle = !this.editTitle;\n              }}\n            >\n              <ls-icon\n                name={this.editTitle ? 'check' : 'pencil-alt'}\n                size=\"1.25rem\"\n                id=\"edit-name-btn\"\n                data-tooltip={this.editTitle ? 'Save' : 'Edit Name'}\n              />\n            </div>\n            {this.editTitle ? (\n              <input\n                value={this.template?.title}\n                style={{ width: '100%' }}\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ title: (e.target as HTMLInputElement).value });\n                }}\n                onKeyUp={e => {\n                  if (e.key === 'Enter' || e.keyCode === 13) this.editTitle = false;\n                }}\n              />\n            ) : (\n              <div\n                class=\"template-title\"\n                onClick={() => {\n                  this.editTitle = !this.editTitle;\n                }}\n              >\n                <p>{this.template?.title}</p>\n              </div>\n            )}\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Auto Archive</p>\n              <p class={'template-detail-section-info'}>After Sending the Template will be automatically archived.</p>\n            </div>\n            {/* <ls-formfield as=\"radio\" value={'false'} /> */}\n            <ls-toggle\n              checked={this.template?.autoArchive}\n              onValueChange={e => {\n                this.alter({ autoArchive: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\">Lock Template</p>\n              <p class={'template-detail-section-info'}>Lock Template to avoid changes being made</p>\n            </div>\n            <ls-toggle\n              checked={this.template?.locked}\n              onValueChange={e => {\n                this.alter({ locked: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section'}>\n            <div>\n              <p class=\"template-detail-section-title\" tooltip-data=\"Fixes the aspect ratio of all signatures on the document. This allows Participants to re-use the same signature throughout the signing process. If this setting is turned on after several signature fields have been placed, fields will automatically re-size to match the aspect ratio of the first signature on the Template.\">Fixed Signature Aspect</p>\n              <p class={'template-detail-section-info'}>Fixes the aspect ratio of all signatures on the document</p>\n            </div>\n\n            <ls-toggle\n              checked={this.template?.fixSignatureScale}\n              onValueChange={e => {\n                this.alter({ fixSignatureScale: e.detail });\n              }}\n            ></ls-toggle>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Document Retention (Days)</p>\n            <p>\n              <input\n                value={this.template?.documentRetentionDays}\n                style={{ width: '100%' }}\n                type='number'\n                onInput={e => {\n                  e.preventDefault();\n                  this.alter({ documentRetentionDays: (e.target as HTMLInputElement).value });\n                }}\n              />\n              </p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Pages</p>\n            <p>{this.template?.pageCount}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Date Created</p> <p>{formatDate(this.template?.created)}</p>\n          </div>\n          <div class={'template-detail-section column'}>\n            <p class=\"template-detail-section-title\">Created By</p> <p>{this.template?.createdBy}</p>\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}