legalesign-document-viewer 0.5.0 → 0.5.2

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

@@ -1,4 +1,4 @@
-import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-DsR1ud4V.js';
+import { L as LsEditorField$1, d as defineCustomElement$1 } from './p-rzVe6t3I.js';
 
 const LsEditorField = LsEditorField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-feature-column.js

@@ -1,4 +1,4 @@
-import { L as LsFeatureColoumn, d as defineCustomElement$1 } from './p-D0cZaxkO.js';
+import { L as LsFeatureColoumn, d as defineCustomElement$1 } from './p-DFIjS6r1.js';
 
 const LsFeatureColumn = LsFeatureColoumn;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldAlignment$1, d as defineCustomElement$1 } from './p-YcP4tU0u.js';
+import { L as LsFieldAlignment$1, d as defineCustomElement$1 } from './p-BFlzDwrT.js';
 
 const LsFieldAlignment = LsFieldAlignment$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-aA8RuwY_.js';
+import { L as LsFieldContent$1, d as defineCustomElement$1 } from './p-9oE9-TFp.js';
 
 const LsFieldContent = LsFieldContent$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldDimensions$1, d as defineCustomElement$1 } from './p-DYQekJvr.js';
+import { L as LsFieldDimensions$1, d as defineCustomElement$1 } from './p-DeiaBmYM.js';
 
 const LsFieldDimensions = LsFieldDimensions$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-BxPfWmRj.js';
+import { L as LsFieldDistribute$1, d as defineCustomElement$1 } from './p-LE9vc3jX.js';
 
 const LsFieldDistribute = LsFieldDistribute$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldFormat$1, d as defineCustomElement$1 } from './p-Co-Giqfy.js';
+import { L as LsFieldFormat$1, d as defineCustomElement$1 } from './p-CUdAWxnx.js';
 
 const LsFieldFormat = LsFieldFormat$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldPlacement$1, d as defineCustomElement$1 } from './p-KMRQyALr.js';
+import { L as LsFieldPlacement$1, d as defineCustomElement$1 } from './p-DCiK4Zkr.js';
 
 const LsFieldPlacement = LsFieldPlacement$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-autosign.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesAutosign$1, d as defineCustomElement$1 } from './p-iIvOyhST.js';
+import { L as LsFieldPropertiesAutosign$1, d as defineCustomElement$1 } from './p-BIPw2c6i.js';
 
 const LsFieldPropertiesAutosign = LsFieldPropertiesAutosign$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-date.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-C6TaBByt.js';
+import { L as LsFieldPropertiesDate$1, d as defineCustomElement$1 } from './p-BwQxRjSC.js';
 
 const LsFieldPropertiesDate = LsFieldPropertiesDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-dropdown.js

@@ -1,17 +1,17 @@
 import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
-import { d as defineCustomElement$e } from './p-DsR1ud4V.js';
-import { d as defineCustomElement$d } from './p-aA8RuwY_.js';
-import { d as defineCustomElement$c } from './p-DYQekJvr.js';
+import { d as defineCustomElement$e } from './p-rzVe6t3I.js';
+import { d as defineCustomElement$d } from './p-9oE9-TFp.js';
+import { d as defineCustomElement$c } from './p-DeiaBmYM.js';
 import { d as defineCustomElement$b } from './p-CGQK3l8F.js';
-import { d as defineCustomElement$a } from './p-KMRQyALr.js';
+import { d as defineCustomElement$a } from './p-DCiK4Zkr.js';
 import { d as defineCustomElement$9 } from './p-C9CUft6J.js';
 import { d as defineCustomElement$8 } from './p-BQZBAjo_.js';
-import { d as defineCustomElement$7 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$7 } from './p-rOYFY0lA.js';
 import { d as defineCustomElement$6 } from './p-D95fiMAP.js';
 import { d as defineCustomElement$5 } from './p-Du60SSaA.js';
 import { d as defineCustomElement$4 } from './p-CJSY3-Q3.js';
 import { d as defineCustomElement$3 } from './p-DKaEsQyk.js';
-import { d as defineCustomElement$2 } from './p-DoQc-O0l.js';
+import { d as defineCustomElement$2 } from './p-B3DQQkl0.js';
 
 const lsFieldPropertiesDropdownCss = () => `:host{display:block}`;
 

package/dist/components/ls-field-properties-email.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-Czz58vGf.js';
+import { L as LsFieldPropertiesEmail$1, d as defineCustomElement$1 } from './p-DAdBWpyz.js';
 
 const LsFieldPropertiesEmail = LsFieldPropertiesEmail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-file.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-DMZN9Rei.js';
+import { L as LsFieldPropertiesFile$1, d as defineCustomElement$1 } from './p-C081Jmpm.js';
 
 const LsFieldPropertiesFile = LsFieldPropertiesFile$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-general.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-HpepQ3-E.js';
+import { L as LsFieldPropertiesGeneral$1, d as defineCustomElement$1 } from './p-CEoxyplo.js';
 
 const LsFieldPropertiesGeneral = LsFieldPropertiesGeneral$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-image.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-C_uR3x8J.js';
+import { L as LsFieldPropertiesImage$1, d as defineCustomElement$1 } from './p-DV70G3Lb.js';
 
 const LsFieldPropertiesImage = LsFieldPropertiesImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-multiple.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-DskHTNiF.js';
+import { L as LsFieldPropertiesMultiple$1, d as defineCustomElement$1 } from './p-D6-fFbU9.js';
 
 const LsFieldPropertiesMultiple = LsFieldPropertiesMultiple$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-number.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-CDgBo5Zz.js';
+import { L as LsFieldPropertiesNumber$1, d as defineCustomElement$1 } from './p-BPxHmM4x.js';
 
 const LsFieldPropertiesNumber = LsFieldPropertiesNumber$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-signature.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-w39shV-b.js';
+import { L as LsFieldPropertiesSignature$1, d as defineCustomElement$1 } from './p-BypR5wtW.js';
 
 const LsFieldPropertiesSignature = LsFieldPropertiesSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-properties-text.js

@@ -1,4 +1,4 @@
-import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-CDGosSW8.js';
+import { L as LsFieldPropertiesText$1, d as defineCustomElement$1 } from './p-BEXhe8AJ.js';
 
 const LsFieldPropertiesText = LsFieldPropertiesText$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-DGiUKXDO.js';
+import { L as LsFieldProperties$1, d as defineCustomElement$1 } from './p-DgQhPrYg.js';
 
 const LsFieldProperties = LsFieldProperties$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsFieldSize$1, d as defineCustomElement$1 } from './p-DoAxt8ZN.js';
+import { L as LsFieldSize$1, d as defineCustomElement$1 } from './p-DSUzA701.js';
 
 const LsFieldSize = LsFieldSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-field-type-display.js

@@ -1,4 +1,4 @@
-import { L as LsFieldTypeDisplay$1, d as defineCustomElement$1 } from './p-Bi1Fu2dm.js';
+import { L as LsFieldTypeDisplay$1, d as defineCustomElement$1 } from './p-rOYFY0lA.js';
 
 const LsFieldTypeDisplay = LsFieldTypeDisplay$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-helper-bar.js

@@ -1,4 +1,4 @@
-import { L as LsHelperBar$1, d as defineCustomElement$1 } from './p-DFVuN2lH.js';
+import { L as LsHelperBar$1, d as defineCustomElement$1 } from './p-6JLudxC8.js';
 
 const LsHelperBar = LsHelperBar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-keyboard-shortcuts.js

@@ -1,4 +1,4 @@
-import { L as LsKeyboardShortcuts$1, d as defineCustomElement$1 } from './p-CvKjrahQ.js';
+import { L as LsKeyboardShortcuts$1, d as defineCustomElement$1 } from './p-Bbzg-qau.js';
 
 const LsKeyboardShortcuts = LsKeyboardShortcuts$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsParticipantCard$1, d as defineCustomElement$1 } from './p-w7mOEBr4.js';
+import { L as LsParticipantCard$1, d as defineCustomElement$1 } from './p-CpViLazu.js';
 
 const LsParticipantCard = LsParticipantCard$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LsParticipantManager$1, d as defineCustomElement$1 } from './p-CgKvhxXq.js';
+import { L as LsParticipantManager$1, d as defineCustomElement$1 } from './p-y-KagAwA.js';
 
 const LsParticipantManager = LsParticipantManager$1;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/ls-statusbar.js

@@ -1,4 +1,4 @@
-import { L as LsStatusbar$1, d as defineCustomElement$1 } from './p-D_mOmvQA.js';
+import { L as LsStatusbar$1, d as defineCustomElement$1 } from './p-DLjjcZXS.js';
 
 const LsStatusbar = LsStatusbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ls-toolbar.js

@@ -1,4 +1,4 @@
-import { L as LsToolbar$1, d as defineCustomElement$1 } from './p-DpHCeHja.js';
+import { L as LsToolbar$1, d as defineCustomElement$1 } from './p-T-mzC4lc.js';
 
 const LsToolbar = LsToolbar$1;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/ls-tooltip.js

@@ -1,4 +1,4 @@
-import { L as LsTooltip$1, d as defineCustomElement$1 } from './p-DoQc-O0l.js';
+import { L as LsTooltip$1, d as defineCustomElement$1 } from './p-B3DQQkl0.js';
 
 const LsTooltip = LsTooltip$1;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/{p-DFVuN2lH.js → p-6JLudxC8.js}

@@ -1,8 +1,8 @@
 import { t as transformTag, p as proxyCustomElement, H, 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-CvKjrahQ.js';
-import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
+import { d as defineCustomElement$2 } from './p-Bbzg-qau.js';
+import { d as defineCustomElement$1 } from './p-B3DQQkl0.js';
 
 const lsHelperBarCss = () => `.controls-bar{display:flex;flex-direction:column;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem;gap:0.75rem;padding:0.5rem}button{all:unset;border:0;color:var(--gray-80, #6c6e73)}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}button:disabled{color:var(--gray-40, #c1c4c8);cursor:not-allowed}.divider{height:1px;background-color:var(--gray-30, #e0e2e5);width:100%;margin:-0.25rem 0}`;
 
@@ -16,21 +16,17 @@ const LsHelperBar = /*@__PURE__*/ proxyCustomElement(class LsHelperBar extends H
     }
     get component() { return this; }
     expanded = false;
-    shortcutsBtn;
+    showShortcuts = false;
     componentDidLoad() {
         attachAllTooltips(this.component.shadowRoot);
     }
     render() {
-        return (h(Host, { key: '0ea5ddfbf8e09f857ce4bea741fab2f9661785c7' }, h("div", { key: 'a0d17c33fa0f6513ab6b22d3715bf31625e77fba', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: 'd4d1405c68b9e96babb93e2044d7bf7b736444b3', style: !this.expanded ? { display: 'none' } : { display: 'block' }, id: "keyboard-btn", ref: el => {
-                if (el) {
-                    this.shortcutsBtn = el;
-                }
-            } }, h("ls-keyboard-shortcuts", { key: 'dce4fffb30a3ed7115ee0816434552996794ad3a', referenceElement: this.shortcutsBtn }), h("ls-icon", { key: '04e31a96e6593b2fc73854619bbc80ef20fc4d26', name: "keyboard" })), h("button", { key: 'e0ff256398468065fb76fe273c1a4089af598dbf', style: !this.expanded ? { display: 'none' } : { display: 'block' }, "data-pendo": "launch-new-edit-tour" }, h("ls-icon", { key: '5ce37cfa92b2525a8d344fed6b8835930db1aeb0', name: "map", "data-tooltip": "Take a Guided Tour", "data-tooltip-placement": "left" })), h("button", { key: 'ab1cc9441815b58fc92d1688bf540a6ad9ea9349', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: 'fdb1d13e35ff66d03c77bd15858910c4773b5105', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("div", { key: 'cfc76e9434590eb0c06055d89b219479e4b0fa8b', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: '430c37f8e0f4206a76f006c3f72c60c5e2b8a2dc' }, h("ls-icon", { key: 'c3e6c2bac0ec08c2cec5c0c5237cdb7b2ec740ef', name: "question-mark-circle" }))), h("slot", { key: '38c98e7e91042d1cddb4217e8f61c44d32f65a7a' }), h("ls-tooltip", { key: '8ddaf7d60cd84a206efb4c71240db45772bc8d70', id: "ls-tooltip-master" })));
+        return (h(Host, { key: '30a8f100d517d615e1fbc7c52c7e1f86c4549a89' }, h("div", { key: '62f5f6eed565af753563bc43a918396fd91381c9', class: 'controls-bar', onMouseEnter: () => (this.expanded = true), onMouseLeave: () => (this.expanded = false) }, h("button", { key: '08a86f0a7d44623bce2cbb5435859c92766ac024', style: !this.expanded ? { display: 'none' } : { display: 'block', position: 'relative' }, id: "keyboard-btn", onMouseEnter: () => (this.showShortcuts = true), onMouseLeave: () => (this.showShortcuts = false) }, h("ls-keyboard-shortcuts", { key: '2d2d0ab566f1a8c2add4c0450d737d1beb935f88', style: !this.showShortcuts ? { display: 'none' } : { display: 'block' } }), h("ls-icon", { key: 'f31f21fce3ffb21ea191fa8db6de7bb7a7313751', name: "keyboard" })), h("button", { key: '87a70381023f29f40810ecc4d290266295f9fdfa', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://legalesign.com/articles/', '_blank') }, h("ls-icon", { key: '4a1c606c82f78b1bba5a9c7a4450409bdf84e55a', name: "book-open", "data-tooltip": "View Documentation \u2197", "data-tooltip-placement": "left" })), h("button", { key: 'd5955e42644aa5a4ccac6a284d710c5eb146cec9', style: !this.expanded ? { display: 'none' } : { display: 'block' }, onClick: () => window.open('https://support.legalesign.io/tickets', '_blank') }, h("ls-icon", { key: '5b621ff4e1f4d2b787e646cb410fd8bdadeb0be4', name: "support", "data-tooltip": "Contact Support", "data-tooltip-placement": "left" })), h("div", { key: 'd72e63eba152f275daa2058c9fe0835f8894d50e', class: "divider", style: !this.expanded ? { display: 'none' } : { display: 'block' } }), h("button", { key: 'caf712e88e9cb6788a11b954272d3f5567b52b10' }, h("ls-icon", { key: 'a3bd59fa89a46d2d6b4213d8c0c0acb17dc409c5', name: "question-mark-circle" }))), h("slot", { key: '23e527882282cb515e31569db653c570f1e851f7' }), h("ls-tooltip", { key: '99bf0cda5ea0d1f3c0b6041df347f9d9f632d7f8', id: "ls-tooltip-master" })));
     }
     static get style() { return lsHelperBarCss(); }
 }, [769, "ls-helper-bar", {
         "expanded": [1028],
-        "shortcutsBtn": [32]
+        "showShortcuts": [1028, "show-shortcuts"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -63,6 +59,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsHelperBar as L, defineCustomElement as d };
-//# sourceMappingURL=p-DFVuN2lH.js.map
+//# sourceMappingURL=p-6JLudxC8.js.map
 
-//# sourceMappingURL=p-DFVuN2lH.js.map
+//# sourceMappingURL=p-6JLudxC8.js.map

package/dist/components/p-6JLudxC8.js.map

@@ -0,0 +1 @@
+{"file":"p-6JLudxC8.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,8dAA8d,CAAC;;MCQhf,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAEG,QAAQ,GAAY,KAAK;IACzB,aAAa,GAAY,KAAK;IAEvD,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,EAAA,EACjH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,EACxF,EAAE,EAAC,cAAc,EACjB,YAAY,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAC/C,YAAY,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAAA,EAEhD,CAAuB,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAI,CAAA,EAClG,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EAIT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,kCAAkC,EAAE,QAAQ,CAAC,EAAA,EAClJ,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,cAAA,EAAc,2BAAsB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CACvF,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,uCAAuC,EAAE,QAAQ,CAAC,EAAA,EACvJ,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,cAAA,EAAc,iBAAiB,EAAwB,wBAAA,EAAA,MAAM,GAAG,CAChF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAI,CAAA,EAC3F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,sBAAsB,EAAA,CAAG,CAChC,CACL,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-helper-bar/ls-helper-bar.css?tag=ls-helper-bar&encapsulation=shadow","src/components/ls-helper-bar/ls-helper-bar.tsx"],"sourcesContent":[".controls-bar {\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n  gap: 0.75rem;\n  padding: 0.5rem;\n}\n\nbutton {\n  all: unset;\n  border: 0;\n  color: var(--gray-80, #6c6e73);\n}\n\nbutton:hover {\n  color: var(--gray-100, #45484d);\n  border-radius: 0.5rem;\n}\n\nbutton:disabled {\n  color: var(--gray-40, #c1c4c8);\n  cursor: not-allowed;\n}\n\n.divider {\n  height: 1px;\n  background-color: var(--gray-30, #e0e2e5);\n  width: 100%;\n  margin: -0.25rem 0;\n}","import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-helper-bar',\n  styleUrl: 'ls-helper-bar.css',\n  shadow: true,\n})\nexport class LsHelperBar {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Prop({ mutable: true }) showShortcuts: boolean = false;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'} onMouseEnter={() => (this.expanded = true)} onMouseLeave={() => (this.expanded = false)}>\n          <button\n            style={!this.expanded ? { display: 'none' } : { display: 'block', position: 'relative' }}\n            id=\"keyboard-btn\"\n            onMouseEnter={() => (this.showShortcuts = true)}\n            onMouseLeave={() => (this.showShortcuts = false)}\n          >\n            <ls-keyboard-shortcuts style={!this.showShortcuts ? { display: 'none' } : { display: 'block' }} />\n            <ls-icon name=\"keyboard\" />\n          </button>\n          {/* <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} data-pendo=\"launch-new-edit-tour\">\n            <ls-icon name=\"map\" data-tooltip=\"Take a Guided Tour\" data-tooltip-placement=\"left\" />\n          </button> */}\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://legalesign.com/articles/', '_blank')}>\n            <ls-icon name=\"book-open\" data-tooltip=\"View Documentation ↗\" data-tooltip-placement=\"left\" />\n          </button>\n          <button style={!this.expanded ? { display: 'none' } : { display: 'block' }} onClick={() => window.open('https://support.legalesign.io/tickets', '_blank')}>\n            <ls-icon name=\"support\" data-tooltip=\"Contact Support\" data-tooltip-placement=\"left\" />\n          </button>\n          <div class=\"divider\" style={!this.expanded ? { display: 'none' } : { display: 'block' }} />\n          <button>\n            <ls-icon name=\"question-mark-circle\" />\n          </button>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-aA8RuwY_.js → p-9oE9-TFp.js}

@@ -1,6 +1,6 @@
 import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
-import { d as defineCustomElement$6, i as validationTypes } from './p-DsR1ud4V.js';
-import { d as defineCustomElement$5 } from './p-Bi1Fu2dm.js';
+import { d as defineCustomElement$6, i as validationTypes } from './p-rzVe6t3I.js';
+import { d as defineCustomElement$5, g as getFieldPlaceholder, a as getFieldTitleSuggestion } from './p-rOYFY0lA.js';
 import { d as defineCustomElement$4 } from './p-D95fiMAP.js';
 import { d as defineCustomElement$3 } from './p-Du60SSaA.js';
 import { d as defineCustomElement$2 } from './p-CJSY3-Q3.js';
@@ -40,13 +40,13 @@ const LsFieldContent = /*@__PURE__*/ proxyCustomElement(class LsFieldContent ext
         }, delay);
     }
     supportsValue() {
-        const typesWithValue = ["signature", "intials", "image", "file", "signing", "date", "autosign", "regex"];
+        const typesWithValue = ['signature', 'initials', 'image', 'file', 'signing', 'autosign', 'regex', 'signing date', 'auto sign', 'dropdown', 'checkbox'];
         return !typesWithValue.includes(this.dataItem?.elementType);
     }
     render() {
-        return (h(Host, { key: '3aa145da2c93db6900ba96388d86c72472686aa3' }, h("ls-props-section", { key: '4d08885c91a113e3c58b79046abc18e0b57ac1e4', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '166c7438df51abd4ee13952444a9e0996dd3d1ac', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '7a8f379af5a5bcfd3317dcd143129e493e963b08', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: '48ff9c0929d5cc38303b33423c8af14ef41d402a', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: (ev) => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '589a7bf1ff07a9c0cccfc347d0d8e2ccd4292629', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: 'bfd8071a1f1f54b9b1c1ee7a44b29c126b8f481b', value: this.dataItem?.label, placeholder: "eg. Sign Here", onInput: (e) => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: '1fc16d46a133d7f8724b7e89fec0430908a5d440', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '5c891526edb6a685222cfbc8f322a089e7cd5279', value: this.dataItem?.value, placeholder: "e.g. Gordon Smith", onInput: (e) => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: '681316a7a8e67745fd9bf1735dc5d282ce62e756', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: 'c919685a5b466e8ff6fd4d7ee4dbbcf9c66bfcee', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: (e) => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: '21d860e34e7a1715a5618b375c57c979acfb5dcb', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: 'e4cc5533901b4a0842ea97bb6a97f4f55816d1cb', select: true }, h("select", { key: '4875147dbdcfdeadf4485f2b283bed89fe43c083', onChange: (ev) => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+        return (h(Host, { key: '4d4146e1a795225562a6a91618ccc7973d12f29e' }, h("ls-props-section", { key: 'a6602c7f06a071e1dc93e730522d6c3964df0db1', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '5e4cc25fa7751311898a0ffcb1c8fa4051fa3466', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '6c7f9322b7e166711dc303fc247fdae93ef894ce', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: 'd3d7fd82f398bb141c0a75f333f05823111b40a0', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '01e833c22b0baf0e38366f650561d4d8f7b64f65', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: 'de409e66dcf1a38c8432d8be0eb4c7fb25e3053a', value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.elementType), onInput: e => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: 'c0a939035f6564071ee5c2fea6b1db9d4c6d1945', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '3e990ba1bfc3c38deaecc387b4b900bbc670b8eb', value: this.dataItem?.value, placeholder: getFieldPlaceholder(this.dataItem?.elementType), onInput: e => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: 'd78b2cd1895e538c19efd3e4c35184b4e47729d5', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: '60740fac2845c752130a97dd8d82c569e12c2f16', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: 'a5ba81f935578fa5aa023bf570baead025560834', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: '7239abc547873d84de6a1e07295ac564a004478e', select: true }, h("select", { key: '90d1a3fd8402f7a99e1615252ae8e1cd141d6571', onChange: ev => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
             .filter(type => type.formType === this.dataItem?.elementType)
-            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: 'de3eef5f0ea1297b43c3e92851935552f1fdcef9' })));
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: '1b2db062e9ef5af6f2ff2ecbd1f5dad08fa2340e' })));
     }
     static get style() { return lsFieldContentCss(); }
 }, [769, "ls-field-content", {
@@ -99,6 +99,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldContent as L, defineCustomElement as d };
-//# sourceMappingURL=p-aA8RuwY_.js.map
+//# sourceMappingURL=p-9oE9-TFp.js.map
 
-//# sourceMappingURL=p-aA8RuwY_.js.map
+//# sourceMappingURL=p-9oE9-TFp.js.map

package/dist/components/p-9oE9-TFp.js.map

@@ -0,0 +1 @@
+{"file":"p-9oE9-TFp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-content/ls-field-content.css?tag=ls-field-content&encapsulation=shadow","src/components/ls-field-content/ls-field-content.tsx"],"sourcesContent":[":host {\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.2rem;\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, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { validationTypes } from '../ls-document-viewer/editorUtils';\nimport { getFieldPlaceholder, getFieldTitleSuggestion } from '../ls-document-viewer/defaultFieldLabels';\n\n@Component({\n  tag: 'ls-field-content',\n  styleUrl: 'ls-field-content.css',\n  shadow: true,\n})\nexport class LsFieldContent {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() showValidationTypes: boolean = true;\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.dataItem = { ...this.dataItem, ...diff };\n    this.debounce(this.dataItem, 500);\n  }\n\n  private labeltimer;\n\n  debounce(data, delay) {\n    if (this.labeltimer) clearTimeout(this.labeltimer);\n\n    this.labeltimer = setTimeout(() => {\n      const diffs: LSMutateEvent[] = [{ action: 'update', data }];\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  supportsValue() {\n    const typesWithValue = ['signature', 'initials', 'image', 'file', 'signing', 'autosign', 'regex', 'signing date', 'auto sign', 'dropdown', 'checkbox'];\n\n    return !typesWithValue.includes(this.dataItem?.elementType);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ls-props-section sectionTitle=\"Field Type\" sectionDescription=\"The Field you currently have selected\">\n          <ls-field-type-display fieldType={this.dataItem?.elementType} assignee={this.dataItem?.signer} />\n        </ls-props-section>\n        <ls-props-section sectionTitle=\"Required Field\" row={true}>\n          <ls-toggle id=\"toggle-required\" checked={!this.dataItem?.optional} onValueChange={ev => this.alter({ optional: !ev.detail })} />\n        </ls-props-section>\n        <ls-props-section sectionTitle=\"Field Label\" sectionDescription=\"Add a label to clarify the information required from the Recipient.\">\n          <input\n            value={this.dataItem?.label}\n            placeholder={getFieldTitleSuggestion(this.dataItem?.elementType)}\n            onInput={e => this.alter({ label: (e.target as HTMLInputElement).value })}\n          />\n        </ls-props-section>\n        {this.supportsValue() && (\n          <ls-props-section sectionTitle=\"Value\" sectionDescription=\"A prefilled value that can be altered by the signer.\">\n            <input\n              value={this.dataItem?.value}\n              placeholder={getFieldPlaceholder(this.dataItem?.elementType)}\n              onInput={e => this.alter({ value: (e.target as HTMLInputElement).value })}\n            />\n          </ls-props-section>\n        )}\n        {this.dataItem.validation === 20 && (\n          <ls-props-section sectionTitle=\"Options\" sectionDescription=\"Define the options available in the dropdown. One option per line.\">\n            <textarea\n              value={this.dataItem?.options}\n              placeholder=\"Option 1&#10;Option 2&#10;Option 3\"\n              onInput={e => this.alter({ options: (e.target as HTMLTextAreaElement).value })}\n            />\n          </ls-props-section>\n        )}\n\n        {this.showValidationTypes && (\n          <ls-props-section sectionTitle=\"Content Format\" sectionDescription=\"Select the specific format you want the Recipient to enter.\">\n            <ls-input-wrapper select>\n              <select onChange={ev => this.alter({ validation: parseInt((ev.target as HTMLSelectElement).value) })}>\n                {validationTypes\n                  .filter(type => type.formType === this.dataItem?.elementType)\n                  .map(type => (\n                    <option selected={this.dataItem?.validation === type.id} value={type.id}>\n                      {type.description}\n                    </option>\n                  ))}\n              </select>\n            </ls-input-wrapper>\n          </ls-props-section>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-gQGwMtz0.js → p-B3DQQkl0.js}

@@ -1,3 +1,5 @@
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -1433,7 +1435,98 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-export { arrow as a, computePosition as c, flip as f, offset as o, shift as s };
-//# sourceMappingURL=p-gQGwMtz0.js.map
+const lsTooltipCss = () => `:host{position:absolute;pointer-events:none}*{box-sizing:border-box;margin:0;padding:0}.tooltip{position:absolute;border-radius:0.5rem;background:var(--gray-100, #45484d);color:var(--white, #fff);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;padding:0.5rem 0.75rem;max-width:200px;width:max-content;white-space:wrap;z-index:1000;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)}.tooltip-title{font-size:0.875rem;font-weight:600;line-height:1rem;margin-bottom:0.25rem}.tooltip.visible{opacity:1;visibility:block;scale:1;transition:opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out}.tooltip.hidden{opacity:0;scale:0.85;transition:opacity 0.2s ease-in, scale 0.1s 0.5s ease-in}#arrow{position:absolute;background:var(--gray-100, #45484d);width:0.625rem;height:0.625rem;transform:rotate(45deg);border-radius:0.125rem}`;
+
+const LsTooltip = /*@__PURE__*/ proxyCustomElement(class LsTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    referenceElement;
+    placement = 'top';
+    tooltipText;
+    tooltipTitle;
+    tooltipLocked = false;
+    updateReferenceHandler(newReference) {
+        if (!newReference)
+            return;
+        this.tooltipText = newReference.getAttribute('data-tooltip');
+        this.tooltipTitle = newReference.getAttribute('data-tooltip-title');
+        this.placement = newReference.getAttribute('data-tooltip-placement') || 'top';
+        const arrowElement = this.el.shadowRoot.querySelector('#arrow');
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        computePosition(this.referenceElement, innerTooltip, {
+            placement: this.placement,
+            middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],
+        })
+            .then(({ x, y, placement, middlewareData }) => {
+            Object.assign(innerTooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+            Object.assign(arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                [staticSide]: '-4px',
+            });
+        })
+            .then(() => {
+            innerTooltip.classList.remove('hidden');
+            innerTooltip.classList.add('visible');
+            this.referenceElement = null;
+        });
+    }
+    async hide() {
+        const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner');
+        innerTooltip.classList.remove('visible');
+        innerTooltip.classList.add('hidden');
+    }
+    render() {
+        return (h("div", { key: '0e5642c211c164f0f6d9e8221be4d668eedc3b74', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: '2354cb2b4689c02d9dc4573b1a41b043f2da59e8', id: "arrow" }), this.tooltipTitle && h("p", { key: '1d1c7a8a5c3cf388ef202a77ab4b242129572276', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: 'e8cb721e79f022387958f5b5357db677477a996a' })));
+    }
+    static get watchers() { return {
+        "referenceElement": ["updateReferenceHandler"]
+    }; }
+    static get style() { return lsTooltipCss(); }
+}, [769, "ls-tooltip", {
+        "referenceElement": [1040],
+        "placement": [1025],
+        "tooltipText": [1025, "tooltip-text"],
+        "tooltipTitle": [1025, "tooltip-title"],
+        "tooltipLocked": [4, "tooltip-locked"],
+        "hide": [64]
+    }, undefined, {
+        "referenceElement": ["updateReferenceHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsTooltip);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsTooltip as L, defineCustomElement as d };
+//# sourceMappingURL=p-B3DQQkl0.js.map
 
-//# sourceMappingURL=p-gQGwMtz0.js.map
+//# sourceMappingURL=p-B3DQQkl0.js.map