legalesign-document-viewer 0.3.4 → 0.3.5

package/dist/{components/p-DUVCAq-W.js → ls-document-viewer/ls-toolbox-field.entry.js}

@@ -1,16 +1,15 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defaultRolePalette } from './p-CwCWCxsI.js';
-import { d as defineCustomElement$1 } from './p-DM3pnD5z.js';
+import { r as registerInstance, a as createEvent, d as getElement, h, e as Host } from './index-Dlkip55O.js';
+import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
+import { a as attachAllTooltips } from './tooltip-Cb8nDMs-.js';
 
 const lsToolboxFieldCss = ".ls-toolbox-field{display:flex;padding:0.5rem;align-items:center;justify-content:center;gap:0.875rem;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:white;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-toolbox-field:hover{background:var(--gray-10, #f7f8fa);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid var(--gray-30, #e0e2e5)}.toolbox-field-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;border:1px solid var(--signer-color);background:var(--signer-color-light);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);color:var(--signer-color)}.toolbox-field-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;width:100%;margin:0}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
-const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.selected = createEvent(this, "selected");
+const LsToolboxField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fieldTypeSelected = createEvent(this, "fieldTypeSelected", 7);
     }
+    get component() { return getElement(this); }
     /**
      * The field type of this toolbox item, e.g. 'signature'. Note these should always be lowercase.
      */
@@ -25,6 +24,10 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
      * The icon to display for this field type.
      */
     icon;
+    /**
+     * The tooltip hint to describe to the field type
+     */
+    tooltip;
     /**
      * The starting height of this control type in pixels.
      */
@@ -38,13 +41,7 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
      */
     signer = 0;
     isSelected = false;
-    selected;
-    modeHandler(_isSelected) {
-        // When opened fire an event to let the parent handle closing other controls
-        if (_isSelected) {
-            this.selected.emit(this.formElementType);
-        }
-    }
+    fieldTypeSelected;
     handleDragStart(event) {
         // Add the target element's id to the data transfer object
         event.dataTransfer.setData('application/json', JSON.stringify({
@@ -61,54 +58,32 @@ const LsToolboxField = /*@__PURE__*/ proxyCustomElement(class LsToolboxField ext
             console.log('down arrow pressed');
         }
     }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
     render() {
-        return (h(Host, { key: '46c05581e53608ba17ccf3c50edb3e8097028b55', draggable: "true" }, h("div", { key: '5f79fae515d92d0d13473cd487a0b9085f8bb093', class: 'ls-toolbox-field', style: this.isSelected && {
+        return (h(Host, { key: '6de8f37030daba94c2e48cfa50d853ce05760302', draggable: "true" }, h("div", { key: '1705c6b5dd533e474d734a07ffbcc7f54ad5f5b8', class: 'ls-toolbox-field', style: this.isSelected && {
                 background: defaultRolePalette[this.signer % 100].s10,
                 border: `1px solid ${defaultRolePalette[this.signer % 100].s60}`,
                 color: defaultRolePalette[this.signer % 100].s80,
                 boxShadow: `0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);`,
-            }, onClick: () => (this.isSelected = !this.isSelected) }, h("div", { key: '7b8a2967e8e3406760944cf663edc152e4a7c12c', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 } }, h("ls-icon", { key: 'e0ec95278d08e643544297d3f5aa26b66c3f9223', name: this.icon, size: "20" })), h("p", { key: 'e5be2362129ffd4e44eba9a5530c6a9d3693561f', class: "toolbox-field-label", style: this.isSelected && {
+            }, onClick: () => {
+                this.fieldTypeSelected.emit({
+                    label: this.label,
+                    formElementType: this.formElementType,
+                    elementType: this.elementType,
+                    validation: this.validation,
+                    defaultHeight: this.defaultHeight,
+                    defaultWidth: this.defaultWidth,
+                });
+            } }, h("div", { key: '69208e5e342623faf98170e18e8e371376ace090', class: "toolbox-field-icon", style: { '--signer-color-light': defaultRolePalette[this.signer % 100].s10, '--signer-color': defaultRolePalette[this.signer % 100].s60 }, "data-tooltip": this.tooltip, "data-tooltip-placement": "right" }, h("ls-icon", { key: 'e600ab045538f95fde540163fc858dce22ec7fd1', name: this.icon, size: "20" })), h("p", { key: 'e52b69e75a83ec6a7e890def976519949427fbfe', class: "toolbox-field-label", style: this.isSelected && {
                 color: defaultRolePalette[this.signer % 100].s80,
-            } }, this.label), h("ls-icon", { key: '287b53ec216fe60b87c6b2f69ccc3e81795d011f', name: "drag-vertical", size: "16", color: "#787a80" }))));
-    }
-    static get watchers() { return {
-        "isSelected": ["modeHandler"]
-    }; }
-    static get style() { return lsToolboxFieldCss; }
-}, [257, "ls-toolbox-field", {
-        "formElementType": [1, "form-element-type"],
-        "elementType": [1, "element-type"],
-        "validation": [2],
-        "label": [1],
-        "icon": [1],
-        "defaultHeight": [2, "default-height"],
-        "defaultWidth": [2, "default-width"],
-        "signer": [2],
-        "isSelected": [1028, "is-selected"]
-    }, [[1, "dragstart", "handleDragStart"], [0, "keydown", "handleKeyDown"]], {
-        "isSelected": ["modeHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
+            } }, this.label), h("ls-icon", { key: '24abe83ee86705a50eb47b8f6c2ce95b70ef88db', name: "drag-vertical", size: "16", color: "#787a80" })), h("ls-tooltip", { key: '6cb285f57f1ca9f65ecb5da5de04917820661565', id: "ls-tooltip-master", tooltipText: 'Something' })));
     }
-    const components = ["ls-toolbox-field", "ls-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ls-toolbox-field":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsToolboxField);
-            }
-            break;
-        case "ls-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
+LsToolboxField.style = lsToolboxFieldCss;
 
-export { LsToolboxField as L, defineCustomElement as d };
-//# sourceMappingURL=p-DUVCAq-W.js.map
+export { LsToolboxField as ls_toolbox_field };
+//# sourceMappingURL=ls-toolbox-field.entry.esm.js.map
 
-//# sourceMappingURL=p-DUVCAq-W.js.map
+//# sourceMappingURL=ls-toolbox-field.entry.js.map

package/dist/ls-document-viewer/ls-toolbox-field.entry.js.map

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

package/dist/ls-document-viewer/ls-tooltip.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-tooltip.entry.esm.js","sources":["src/components/ls-tooltip/ls-tooltip.css?tag=ls-tooltip&encapsulation=shadow","src/components/ls-tooltip/ls-tooltip.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.tooltip {\n  position: absolute;\n  border-radius: 0.5rem;\n  background: var(--gray-100, #45484d);\n  color: var(--white, #fff);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n  padding: 0.5rem 0.75rem;\n  max-width: 200px;\n  width: max-content;\n  white-space: wrap;\n  z-index: 1000;\n  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);\n}\n\n.tooltip-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0.25rem;\n}\n\n.tooltip.visible {\n  opacity: 1;\n  visibility: block;\n  scale: 1;\n  transition: opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out;\n}\n\n.tooltip.hidden {\n  opacity: 0;\n  scale: 0.85;\n  transition: opacity 0.2s ease-in, scale 0.1s 0.5s ease-in;\n}\n#arrow {\n  position: absolute;\n  background: var(--gray-100, #45484d);\n  width: 0.625rem;\n  height: 0.625rem;\n  transform: rotate(45deg);\n  border-radius: 0.125rem;\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-tooltip',\n  styleUrl: 'ls-tooltip.css',\n  shadow: true,\n})\nexport class LsTooltip {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) referenceElement: HTMLElement;\n  @Prop({ mutable: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n  @Prop({ mutable: true }) tooltipText: string;\n  @Prop({ mutable: true }) tooltipTitle: string;\n  @Prop() tooltipLocked = false;\n\n  @Watch('referenceElement')\n  updateReferenceHandler(newReference: HTMLElement) {\n    if (!newReference) return;\n\n    this.tooltipText = newReference.getAttribute('data-tooltip');\n    this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n    this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' | 'bottom' | 'left' | 'right') || 'top';\n\n    const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n    computePosition(this.referenceElement, innerTooltip, {\n      placement: this.placement,\n      middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n    })\n      .then(({ x, y, placement, middlewareData }) => {\n        Object.assign(innerTooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign((arrowElement as HTMLElement).style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          [staticSide]: '-4px',\n        });\n      })\n      .then(() => {\n        innerTooltip.classList.remove('hidden');\n        innerTooltip.classList.add('visible');\n        this.referenceElement = null;\n      });\n  }\n\n  @Method()\n  async hide() {\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n    innerTooltip.classList.remove('visible');\n    innerTooltip.classList.add('hidden');\n  }\n\n  render() {\n    return (\n      <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n        <div id=\"arrow\"></div>\n        {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n        {this.tooltipText}\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/ls-document-viewer/ls-tooltip.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, d as getElement, h } from './index-Dlkip55O.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './floating-ui.dom-DtWVTgos.js';
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(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: '7d2b151a35ae84bfa25ff2d27b9fa76d2dd45d4a', id: "ls-tooltip-inner", class: "tooltip hidden", role: "tooltip" }, h("div", { key: 'f073ac2345096a57ec21d2afd415663834127785', id: "arrow" }), this.tooltipTitle && h("p", { key: 'b012f0ba9c38eb51d314526e2c4df680de6e2ab3', class: "tooltip-title" }, this.tooltipTitle), this.tooltipText, h("slot", { key: '017e306bbd2880220134a46c5284b05dedcf8a39' })));
+    }
+    static get watchers() { return {
+        "referenceElement": ["updateReferenceHandler"]
+    }; }
+};
+LsTooltip.style = lsTooltipCss;
+
+export { LsTooltip as ls_tooltip };
+//# sourceMappingURL=ls-tooltip.entry.esm.js.map
+
+//# sourceMappingURL=ls-tooltip.entry.js.map

package/dist/ls-document-viewer/ls-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-tooltip.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-tooltip/ls-tooltip.css?tag=ls-tooltip&encapsulation=shadow","src/components/ls-tooltip/ls-tooltip.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.tooltip {\n  position: absolute;\n  border-radius: 0.5rem;\n  background: var(--gray-100, #45484d);\n  color: var(--white, #fff);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n  padding: 0.5rem 0.75rem;\n  max-width: 200px;\n  width: max-content;\n  white-space: wrap;\n  z-index: 1000;\n  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);\n}\n\n.tooltip-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0.25rem;\n}\n\n.tooltip.visible {\n  opacity: 1;\n  visibility: block;\n  scale: 1;\n  transition: opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out;\n}\n\n.tooltip.hidden {\n  opacity: 0;\n  scale: 0.85;\n  transition: opacity 0.2s ease-in, scale 0.1s 0.5s ease-in;\n}\n#arrow {\n  position: absolute;\n  background: var(--gray-100, #45484d);\n  width: 0.625rem;\n  height: 0.625rem;\n  transform: rotate(45deg);\n  border-radius: 0.125rem;\n}\n","import { arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, Element, Method, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-tooltip',\n  styleUrl: 'ls-tooltip.css',\n  shadow: true,\n})\nexport class LsTooltip {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) referenceElement: HTMLElement;\n  @Prop({ mutable: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n  @Prop({ mutable: true }) tooltipText: string;\n  @Prop({ mutable: true }) tooltipTitle: string;\n  @Prop() tooltipLocked = false;\n\n  @Watch('referenceElement')\n  updateReferenceHandler(newReference: HTMLElement) {\n    if (!newReference) return;\n\n    this.tooltipText = newReference.getAttribute('data-tooltip');\n    this.tooltipTitle = newReference.getAttribute('data-tooltip-title');\n    this.placement = (newReference.getAttribute('data-tooltip-placement') as 'top' | 'bottom' | 'left' | 'right') || 'top';\n\n    const arrowElement = this.el.shadowRoot.querySelector('#arrow');\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n\n    computePosition(this.referenceElement, innerTooltip, {\n      placement: this.placement,\n      middleware: [offset(6), flip(), shift({ padding: 5 }), arrow({ element: arrowElement })],\n    })\n      .then(({ x, y, placement, middlewareData }) => {\n        Object.assign(innerTooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow || {};\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign((arrowElement as HTMLElement).style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          [staticSide]: '-4px',\n        });\n      })\n      .then(() => {\n        innerTooltip.classList.remove('hidden');\n        innerTooltip.classList.add('visible');\n        this.referenceElement = null;\n      });\n  }\n\n  @Method()\n  async hide() {\n    const innerTooltip = this.el.shadowRoot.getElementById('ls-tooltip-inner') as HTMLElement;\n    innerTooltip.classList.remove('visible');\n    innerTooltip.classList.add('hidden');\n  }\n\n  render() {\n    return (\n      <div id=\"ls-tooltip-inner\" class=\"tooltip hidden\" role=\"tooltip\">\n        <div id=\"arrow\"></div>\n        {this.tooltipTitle && <p class=\"tooltip-title\">{this.tooltipTitle}</p>}\n        {this.tooltipText}\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/ls-validation-tag.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-validation-tag.entry.esm.js","sources":["src/components/ls-validation-tag/ls-validation-tag.css?tag=ls-validation-tag&encapsulation=shadow","src/components/ls-validation-tag/ls-validation-tag.tsx"],"sourcesContent":[":host {\n  position: relative;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.valid-label {\n  display: flex;\n  padding: 2px 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--yellow-20, #fff3c2);\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.role-label {\n  display: flex;\n  padding: 2px 3px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.dropdown-header h2 {\n  color: var(--gray-100, #45484d);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.dropdown-header p {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/{components/p-DyE9zKT7.js → ls-document-viewer/ls-validation-tag.entry.js}

@@ -1,23 +1,17 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvHSBTD8.js';
-import { d as defaultRolePalette } from './p-CwCWCxsI.js';
-import { d as defineCustomElement$1 } from './p-DM3pnD5z.js';
+import { r as registerInstance, h, e as Host } from './index-Dlkip55O.js';
+import { d as defaultRolePalette } from './defaultPalette-CwCWCxsI.js';
 
 const lsValidationTagCss = ":host{position:relative}*{box-sizing:border-box;margin:0}.valid-label{display:flex;padding:2px 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:1rem;font-size:0.75rem;font-style:normal;font-weight:500;line-height:1.25rem;width:fit-content}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.field-counter{display:flex;padding:0.125rem;justify-content:center;align-items:center;border-radius:1rem;font-size:0.625rem;line-height:0.75rem;font-style:normal;font-weight:500;color:var(--yellow-20, #fff3c2);background:#e17100;min-width:1rem}.field-dropdown{position:absolute;top:2rem;right:0;background:white;display:flex;flex-direction:column;gap:0.75rem;width:20rem;padding:1rem;border-radius:1rem;border:1px solid #e5e7eb;background:#fff;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);max-height:20rem;overflow-y:auto;flex-direction:column;align-items:flex-start;z-index:1000}.required-field{position:relative;display:flex;width:100%;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--field-background);color:var(--field-text-color);border:1px solid var(--field-border-color);transition:all 0.1s ease-in-out}.required-field:hover{background:var(--field-background-hover);color:var(--field-text-color-hover);border:1px solid var(--field-border-color-hover);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.required-field-items-left{display:flex;gap:0.5rem;align-items:center;width:100%}.required-field-items-left p{font-size:0.875rem;font-style:normal;font-weight:500;line-height:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{height:0.5rem;width:0.5rem;border-radius:50%}.role-label{display:flex;padding:2px 3px;justify-content:center;align-items:center;border-radius:0.25rem;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;text-transform:capitalize}.dropdown-header h2{color:var(--gray-100, #45484d);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;margin-bottom:0.125rem}.dropdown-header p{color:var(--gray-80, #6c6e73);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}";
 
-const LsValidationTag = /*@__PURE__*/ proxyCustomElement(class LsValidationTag extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const LsValidationTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
     }
     status = 'Invalid';
     validationErrors = [];
     isExpanded = false;
-    validateChange(newValue) {
-        console.log(newValue);
-    }
     render() {
-        return (h(Host, { key: '81f7243eb9ac2099bac672ce98f26e4da6bb8fed' }, h("div", { key: '33e7174b2032cc6282f84b26a4f943e1baac6dd9', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '6b820c6a30a090d656c5a6a06b66c8c3cda8fa2c', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: 'b4404382dea2c84c042dd1b330b2f0be823b643e', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: 'eca209963d0acadbef0764909f15bb4a0350f4c6', class: 'field-dropdown' }, h("div", { key: '5a57240e85f7826049b12bda0f2cbfc72599c6b9', class: 'dropdown-header' }, h("h2", { key: '34bb3c2fac8a092cc424a4ebdce49137d6dcd384' }, "Signature Fields Required"), h("p", { key: 'cedda6d0383cd029efdd33fa7edfcd22c0cf65e2' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
+        return (h(Host, { key: 'e9550ce2a25fecb9450646da2975ebc3ee2cc7d8' }, h("div", { key: '1029ed6832847a4d1de6d625a8826aff345a0582', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && h("div", { key: '8f8c59ead9f8a4ca774d1726a780511425ce2d34', class: 'field-counter' }, this.validationErrors.length), this.validationErrors.length > 0 && (h("ls-icon", { key: 'fd05f640ad20f6063b7e66980b7f7362be663df1', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } }))), this.isExpanded && this.validationErrors.length !== 0 && (h("div", { key: '32e9a993a48711b36861d80e9f86c37815b74772', class: 'field-dropdown' }, h("div", { key: '0c316ce402bed2bbc05eac98dba857f56beedfbc', class: 'dropdown-header' }, h("h2", { key: '706747fcd41484e6d94d2dfbb53caf3acd457b43' }, "Signature Fields Required"), h("p", { key: 'b9fa0d6fceb95df99a49843d6a9100877fd01d06' }, this.validationErrors.length, " ", this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields', " placed for them")), this.validationErrors.map((field, idx) => {
             const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;
             const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];
             return (h("div", { key: idx, class: 'required-field', style: {
@@ -30,38 +24,10 @@ const LsValidationTag = /*@__PURE__*/ proxyCustomElement(class LsValidationTag e
                 } }, h("div", { class: 'required-field-items-left' }, h("div", { class: 'dot', style: { background: pallette.s60 } }), field?.role && (h("div", { class: 'required-field-items-left' }, h("p", { style: { color: pallette.s80 } }, field.role?.name || `Signer ${field?.role?.signerIndex + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`))), field?.element && (h(h.Fragment, null, h("p", { style: { color: pallette.s80 } }, field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`), h("div", { class: 'role-label', style: { background: pallette.s30, color: pallette.s70 } }, field.description))))));
         })))));
     }
-    static get watchers() { return {
-        "validationErrors": ["validateChange"]
-    }; }
-    static get style() { return lsValidationTagCss; }
-}, [257, "ls-validation-tag", {
-        "status": [1025],
-        "validationErrors": [1040, "validation-errors"],
-        "isExpanded": [1028, "is-expanded"]
-    }, undefined, {
-        "validationErrors": ["validateChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ls-validation-tag", "ls-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ls-validation-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsValidationTag);
-            }
-            break;
-        case "ls-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
+LsValidationTag.style = lsValidationTagCss;
 
-export { LsValidationTag as L, defineCustomElement as d };
-//# sourceMappingURL=p-DyE9zKT7.js.map
+export { LsValidationTag as ls_validation_tag };
+//# sourceMappingURL=ls-validation-tag.entry.esm.js.map
 
-//# sourceMappingURL=p-DyE9zKT7.js.map
+//# sourceMappingURL=ls-validation-tag.entry.js.map

package/dist/ls-document-viewer/ls-validation-tag.entry.js.map

@@ -0,0 +1 @@
+{"file":"ls-validation-tag.entry.esm.js","mappings":"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","names":[],"sources":["src/components/ls-validation-tag/ls-validation-tag.css?tag=ls-validation-tag&encapsulation=shadow","src/components/ls-validation-tag/ls-validation-tag.tsx"],"sourcesContent":[":host {\n  position: relative;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.valid-label {\n  display: flex;\n  padding: 2px 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  width: fit-content;\n}\n\n.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.field-counter {\n  display: flex;\n  padding: 0.125rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 1rem;\n  font-size: 0.625rem;\n  line-height: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  color: var(--yellow-20, #fff3c2);\n  background: #e17100;\n  min-width: 1rem;\n}\n\n.field-dropdown {\n  position: absolute;\n  top: 2rem;\n  right: 0;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 20rem;\n  padding: 1rem;\n  border-radius: 1rem;\n  border: 1px solid #e5e7eb;\n  background: #fff;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  max-height: 20rem;\n  overflow-y: auto;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1000;\n}\n\n.required-field {\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.75rem;\n  padding: 0.5rem 0.5rem 0.5rem 1rem;\n  background: var(--field-background);\n  color: var(--field-text-color);\n  border: 1px solid var(--field-border-color);\n  transition: all 0.1s ease-in-out;\n}\n\n.required-field:hover {\n  background: var(--field-background-hover);\n  color: var(--field-text-color-hover);\n  border: 1px solid var(--field-border-color-hover);\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n.required-field-items-left {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  width: 100%;\n}\n\n.required-field-items-left p {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 0.875rem; /* 142.857% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dot {\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 50%;\n}\n\n.role-label {\n  display: flex;\n  padding: 2px 3px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n  text-transform: capitalize;\n}\n\n.dropdown-header h2 {\n  color: var(--gray-100, #45484d);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  margin-bottom: 0.125rem;\n}\n\n.dropdown-header p {\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { ValidationError } from '../../types/ValidationError';\n\n@Component({\n  tag: 'ls-validation-tag',\n  styleUrl: 'ls-validation-tag.css',\n  shadow: true,\n})\nexport class LsValidationTag {\n  @Prop({ mutable: true }) status: string = 'Invalid';\n  @Prop({ mutable: true }) validationErrors: ValidationError[] = [];\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && <div class={'field-counter'}>{this.validationErrors.length}</div>}\n          {this.validationErrors.length > 0 && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>Signature Fields Required</h2>\n              <p>\n                {this.validationErrors.length} {this.validationErrors.length === 1 ? 'Recipient needs a Signature Field' : 'Recipients need Signature Fields'} placed for them\n              </p>\n            </div>\n            {this.validationErrors.map((field, idx) => {\n              const signerIndex = field?.role?.signerIndex ? field?.role?.signerIndex % 100 : null;\n              const pallette = defaultRolePalette[signerIndex || field?.element?.signer || 0];\n\n              return (\n                <div\n                  key={idx}\n                  class={'required-field'}\n                  style={{\n                    '--field-background': pallette.s10,\n                    '--field-border-color': pallette.s10,\n                    '--field-background-hover': pallette.s20,\n                    '--field-text-color': pallette.s70,\n                    '--field-text-color-hover': pallette.s80,\n                    '--field-border-color-hover': pallette.s60,\n                  }}\n                >\n                  <div class={'required-field-items-left'}>\n                    <div class={'dot'} style={{ background: pallette.s60 }} />\n                    {field?.role && (\n                      <div class={'required-field-items-left'}>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `Signer ${field?.role?.signerIndex + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.role?.roleType.toLowerCase() || `Signer ${field.role?.signerIndex + 1}`}\n                        </div>\n                      </div>\n                    )}\n                    {field?.element && (\n                      <>\n                        <p style={{ color: pallette.s80 }}>{field.role?.name || `${field.element.formElementType} ${field?.element?.label + 1}`}</p>\n                        <div class={'role-label'} style={{ background: pallette.s30, color: pallette.s70 }}>\n                          {field.description}\n                        </div>\n                      </>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/ls-document-viewer/tooltip-Cb8nDMs-.js

@@ -0,0 +1,32 @@
+function showTooltip(event) {
+    const rootNode = this.getRootNode();
+    const tooltip = rootNode.getElementById('ls-tooltip-master');
+    tooltip.referenceElement = event.currentTarget;
+}
+function hideTooltip(_event) {
+    const rootNode = this.getRootNode();
+    const tooltip = rootNode.getElementById('ls-tooltip-master');
+    // if (this.tooltipLocked) return;
+    tooltip.hide();
+}
+function attachAllTooltips(root) {
+    const tooltipTargets = root.querySelectorAll('[data-tooltip]');
+    tooltipTargets.forEach(tt => {
+        tt.addEventListener('mouseenter', showTooltip);
+        tt.addEventListener('mouseleave', hideTooltip);
+        tt.addEventListener('focus', showTooltip);
+        tt.addEventListener('blur', hideTooltip);
+        // tt.addEventListener('click', (e) => {
+        //   hideTooltip(e);
+        //   this.tooltipLocked = true;
+        //   setTimeout(() => {
+        //     this.tooltipLocked = false;
+        //   }, 500);
+        // });
+    });
+}
+
+export { attachAllTooltips as a };
+//# sourceMappingURL=tooltip-Cb8nDMs-.js.map
+
+//# sourceMappingURL=tooltip-Cb8nDMs-.js.map

package/dist/ls-document-viewer/tooltip-Cb8nDMs-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-Cb8nDMs-.js","sources":["src/utils/tooltip.ts"],"sourcesContent":["export function showTooltip(event) {\n  const rootNode = this.getRootNode();\n  const tooltip = rootNode.getElementById('ls-tooltip-master') as HTMLLsTooltipElement;\n  tooltip.referenceElement = event.currentTarget as HTMLElement;\n}\n\nexport function hideTooltip(_event) {\n const rootNode = this.getRootNode();\n  const tooltip = rootNode.getElementById('ls-tooltip-master') as HTMLLsTooltipElement;\n  // if (this.tooltipLocked) return;\n  tooltip.hide();\n}\n\nexport function attachAllTooltips(root: ShadowRoot | Document) {\n  const tooltipTargets = root.querySelectorAll('[data-tooltip]');\n  tooltipTargets.forEach(tt => {\n   \n      tt.addEventListener('mouseenter', showTooltip);\n      tt.addEventListener('mouseleave', hideTooltip);\n      tt.addEventListener('focus', showTooltip);\n      tt.addEventListener('blur', hideTooltip);\n    // tt.addEventListener('click', (e) => {\n    //   hideTooltip(e);\n    //   this.tooltipLocked = true;\n    //   setTimeout(() => {\n    //     this.tooltipLocked = false;\n    //   }, 500);\n    // });\n  });\n}\n\n"],"names":[],"mappings":"AAAM,SAAU,WAAW,CAAC,KAAK,EAAA;AAC/B,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAAyB;AACpF,IAAA,OAAO,CAAC,gBAAgB,GAAG,KAAK,CAAC,aAA4B;AAC/D;AAEM,SAAU,WAAW,CAAC,MAAM,EAAA;AACjC,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,CAAyB;;IAEpF,OAAO,CAAC,IAAI,EAAE;AAChB;AAEM,SAAU,iBAAiB,CAAC,IAA2B,EAAA;IAC3D,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;AAC9D,IAAA,cAAc,CAAC,OAAO,CAAC,EAAE,IAAG;AAExB,QAAA,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC;AAC9C,QAAA,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC;AAC9C,QAAA,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC;AACzC,QAAA,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC;;;;;;;;AAQ5C,KAAC,CAAC;AACJ;;;;"}

package/dist/types/components/ls-document-options/ls-document-options.d.ts

@@ -15,6 +15,6 @@ export declare class LsDocumentOptions {
     alter(diff: object): void;
     private titletimer;
     debounce(diff: any, delay: any): void;
-    editNameBtn: HTMLElement;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-document-viewer/adapter/LsDocumentAdapter.d.ts

@@ -7,7 +7,7 @@ export declare class LsDocumentAdapter {
     constructor(endpoint?: string | null);
     handleEvent: (event: LSMutateEvent, accessToken: string) => Promise<"invalid" | {
         result: object;
-        obj: LSApiRole | LSApiElement | LSApiTemplate;
+        obj: LSApiElement | LSApiTemplate | LSApiRole;
         event: LSMutateEvent;
     }>;
     /**

package/dist/types/components/ls-document-viewer/editorUtils.d.ts

@@ -22,6 +22,6 @@ export declare function matchData(data: {
     event: LSMutateEvent;
 }): void;
 export declare function syncRoles(): Promise<void>;
-export declare function getApiType(obj: any): "document" | "unknown" | "invalid" | "element" | "role" | "template";
+export declare function getApiType(obj: any): "document" | "invalid" | "element" | "role" | "template" | "unknown";
 export declare const validationTypes: any;
 export declare function getInputType(validation: number): ValidationType;

package/dist/types/components/ls-document-viewer/ls-document-viewer.d.ts

@@ -58,8 +58,14 @@ export declare class LsDocumentViewer {
      * {string}
      */
     templateid: string;
+    /**
+     * A JSON string containing the signer details. Only used in COMPOSE mode.
+     * {string}
+     */
+    signers: string;
     zoom: number;
     pageNum: number;
+    pageCount: number;
     signer: number;
     _template: LSApiTemplate;
     validationErrors: ValidationError[];
@@ -67,6 +73,7 @@ export declare class LsDocumentViewer {
     groupInfo: any;
     selected: HTMLLsEditorFieldElement[];
     isLoading: boolean;
+    fieldTypeSelected: IToolboxField;
     /**
      * An ease of use property that will arrange document-viewer appropraitely.
      * {'preview' | 'editor' | 'custom'}
@@ -132,6 +139,7 @@ export declare class LsDocumentViewer {
     update: EventEmitter<LSMutateEvent[]>;
     private adapter;
     mutateHandler(event: CustomEvent<LSMutateEvent[]>): void;
+    handleFieldTypeSelected(event: any): void;
     updateHandler(event: CustomEvent<LSMutateEvent[]>): void;
     addParticpantHandler(event: CustomEvent<{
         type: LSApiRoleType;
@@ -182,6 +190,6 @@ export declare class LsDocumentViewer {
     showPageFields(page: number): void;
     load(): Promise<void>;
     componentWillLoad(): void;
-    handleSelectedField(event: any): void;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-document-viewer/mouseHandlers.d.ts

@@ -4,3 +4,4 @@ export declare function mouseMove(event: any): void;
 export declare function mouseUp(event: any): void;
 export declare function mouseClick(e: any): void;
 export declare function mouseDrop(event: any): void;
+export declare function mouseDoubleClick(event: any): void;

package/dist/types/components/ls-feature-column/ls-feature-column.d.ts

@@ -1,10 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class LsFeatureColoumn {
+    component: HTMLElement;
     /**
      * Determines / sets which of the far left 'managers' is active.
      * {'document' | 'toolbox' | 'participant' }
      */
     manager: 'document' | 'toolbox' | 'participant';
     manage: EventEmitter<'document' | 'toolbox' | 'participant'>;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-field-alignment/ls-field-alignment.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { LSApiElement, LSMutateEvent } from '../../components';
 export declare class LsFieldAlignment {
+    component: HTMLElement;
     dataItem: LSApiElement[];
     mutate: EventEmitter<LSMutateEvent[]>;
     update: EventEmitter<LSMutateEvent[]>;
@@ -11,5 +12,6 @@ export declare class LsFieldAlignment {
     left(): void;
     middle(): void;
     bottom(): void;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-field-dimensions/ls-field-dimensions.d.ts

@@ -1,11 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { LSApiElement, LSMutateEvent } from '../../components';
 export declare class LsFieldDimensions {
+    component: HTMLElement;
     dataItem: LSApiElement | LSApiElement[];
     mutate: EventEmitter<LSMutateEvent[]>;
     update: EventEmitter<LSMutateEvent[]>;
     isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement;
     isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[];
     alter(diff: object): void;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-field-distribute/ls-field-distribute.d.ts

@@ -10,5 +10,6 @@ export declare class LsFieldDistribute {
     gapVertical(spacing: number): void;
     gapHorizontal(spacing: number): void;
     distributeVertical(): void;
+    componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ls-field-format/ls-field-format.d.ts

@@ -5,7 +5,15 @@ export declare class LsFieldFormat {
     mutate: EventEmitter<LSMutateEvent[]>;
     update: EventEmitter<LSMutateEvent[]>;
     component: HTMLElement;
+    private handleKeyDown;
+    private handleKeyUp;
     selectFieldsHandler(): void;
     alter(diff: object): void;
+    componentDidLoad(): void;
+    allElementsSame: () => {
+        isSame: boolean;
+        fontName: string;
+        fontSize: string | number;
+    };
     render(): any;
 }

package/dist/types/components/ls-field-placement/ls-field-placement.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { LSApiElement } from '../../types/LSApiElement';
 import { LSMutateEvent } from '../../types/LSMutateEvent';
 export declare class LsFieldPlacement {
+    component: HTMLElement;
     dataItem: LSApiElement | LSApiElement[];
     mutate: EventEmitter<LSMutateEvent[]>;
     update: EventEmitter<LSMutateEvent[]>;
@@ -13,5 +14,6 @@ export declare class LsFieldPlacement {
     right(): number;
     middle(): number;
     bottom(): number;
+    componentDidLoad(): void;
     render(): any;
 }