legalesign-document-viewer 0.4.6 → 0.4.8

package/dist/components/p-DfaX9tao.js

@@ -1,108 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
-import { d as defineCustomElement$2 } from './p-BQN3l4X7.js';
-import { d as defineCustomElement$1 } from './p-C3Qs4SL0.js';
-
-const lsFieldPropertiesAdvancedCss = ":host,.field-set{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.25rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}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:100%}#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)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){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:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}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;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.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 LsFieldPropertiesAdvanced = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesAdvanced extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.mutate = createEvent(this, "mutate", 7);
-        this.update = createEvent(this, "update", 7);
-    }
-    dataItem;
-    expanded = false;
-    mutate;
-    update;
-    isSingle(dt) {
-        return dt.length === undefined;
-    }
-    isMultiple(dt) {
-        return typeof dt.length === 'number';
-    }
-    // Send one or more mutations up the chain
-    // The source of the chain fires the mutation
-    // NOTE this alter is debounced to account for typing
-    alter(diff, bounceDelay = 0) {
-        console.log('Altering advanced props:', diff);
-        let diffs = [];
-        if (this.isMultiple(this.dataItem)) {
-            this.dataItem = this.dataItem.map(di => {
-                return { ...di, ...diff };
-            });
-            diffs = this.dataItem.map(di => {
-                return { action: 'update', data: { ...di, ...diff } };
-            });
-        }
-        else if (this.isSingle(this.dataItem)) {
-            this.dataItem = { ...this.dataItem, ...diff };
-            diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
-        }
-        if (bounceDelay === 0) {
-            this.update.emit(diffs);
-            this.mutate.emit(diffs);
-        }
-        else {
-            this.debounce(diffs, bounceDelay);
-        }
-    }
-    titletimer;
-    debounce(diffs, delay) {
-        if (this.titletimer)
-            clearTimeout(this.titletimer);
-        this.titletimer = setTimeout(() => {
-            this.update.emit(diffs);
-            this.mutate.emit(diffs);
-        }, delay);
-    }
-    getValue(key) {
-        if (this.isMultiple(this.dataItem)) {
-            return '';
-        }
-        else if (this.isSingle(this.dataItem)) {
-            return this.dataItem[key];
-        }
-        return '';
-    }
-    render() {
-        return (h(Host, { key: 'adc2b87c39dbe48a990e310d319488193fa4363f' }, h("div", { key: 'afe76dc7c97f20a5d02c468749efc624f8a5bd2f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: '753b14a303f8c778126ac11146f7d6b7e7ef8b3f', name: this.expanded ? 'expand' : 'collapse', size: "20", solid: true }), h("p", { key: '379e7ac4ce24c30a9e835d0169e0612f4f67361f' }, "Advanced Properties")), this.expanded && (h("div", { key: 'e4ff2c54e710def3c4e4e46f780e249588139627', class: 'field-set' }, h("ls-props-section", { key: '2fbfa8e4d8706077f31cc6042a3067ab648c574d', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '9d4620a4ec75c57289401fd611329929521ce300', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
-                console.log(e);
-                this.alter({ fieldOrder: e.target.value }, 100);
-            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: '812b66263389b77c010bdaa1f1d72067e1ead50f', sectionTitle: "Ref. Name" }, h("input", { key: '4d91f09201c6004cb0ede5f926502e3239fcfcd4', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '3a86622b67586c43699729bddc852707df359dad', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '7136c6ad42008dd34fcd2f1fa6c76a21a73a6117', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: 'd01a7dc32e3916979d7f9ee2994ae0f7f89df5eb', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: 'b6b3196e800c7931a6d0f7fc6e5af2fa1ada02e6', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '9809509fc79dda1ff103c9cbbdbc353e974b35c9', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: 'a1d50a115bb92c538c8cb6f7ed80f5bb642681c5', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '80fed4a7bf99f86f201251666942a71009ebffc0', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: 'a3429d3400c26bba3ed650995d2550af537c8fa5', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
-    }
-    static get style() { return lsFieldPropertiesAdvancedCss; }
-}, [257, "ls-field-properties-advanced", {
-        "dataItem": [1040, "data-item"],
-        "expanded": [1028]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ls-field-properties-advanced", "ls-icon", "ls-props-section"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ls-field-properties-advanced":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsFieldPropertiesAdvanced);
-            }
-            break;
-        case "ls-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "ls-props-section":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { LsFieldPropertiesAdvanced as L, defineCustomElement as d };
-//# sourceMappingURL=p-DfaX9tao.js.map
-
-//# sourceMappingURL=p-DfaX9tao.js.map

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

@@ -1 +0,0 @@
-{"file":"p-DfaX9tao.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-advanced/ls-field-properties-advanced.css?tag=ls-field-properties-advanced&encapsulation=shadow","src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"sourcesContent":[":host, .field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.expand-fields-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.25rem;\n  cursor: pointer;\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.expand-fields-row p {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\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: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\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:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\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  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\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  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\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 } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\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  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // 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, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"20\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-Dgc5eQou.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,ktJAAktJ;;MCQtuJ,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;AACxB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-text/ls-field-properties-text.css?tag=ls-field-properties-text&encapsulation=shadow","src/components/ls-field-properties-text/ls-field-properties-text.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-text',\n  styleUrl: 'ls-field-properties-text.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesText {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-Dr_eGXsl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-statusbar/ls-statusbar.css?tag=ls-statusbar&encapsulation=shadow","src/components/ls-statusbar/ls-statusbar.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 1000;\n  right: 1rem;\n  bottom: 1rem;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: end;\n  height: 2.25rem;\n  overflow: visible;\n}\n\n.controls-bar {\n  display: flex;\n  flex-direction: row;\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}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.status-bar-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n}\n\n.controls-bar > :not(:nth-child(1)) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\nbutton {\n  border: 0;\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\ninput[type=\"range\"] {\n  -webkit-appearance: none; /* Remove default styling */\n  width: 100%;\n  height: 8px;\n  background: var(--gray-20, #EDEFF2);\n  border-radius: 5px;\n  outline: none;\n}\n\n/* Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Firefox */\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 8px;\n  height: 8%;\n  background: var(--gray-70, #4a4c51); /* Custom thumb color */\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n/* Track color for Firefox */\ninput[type=\"range\"]::-moz-range-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\n/* Track color for Chrome, Safari, Edge */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  background: var(--gray-20, #EDEFF2);\n  height: 8px;\n  border-radius: 5px;\n}\n\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\nbutton {\n  all: unset;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--gray-80, #6c6e73);\n  text-transform: capitalize;\n}\n\nbutton.tertiaryGrey:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n  @Prop({ mutable: true }) page: number;\n  @Prop({ mutable: true }) pageCount: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');\n    const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin\n\n    console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);\n    const scale: number = space / this.editor.pageDimensions[0].width;\n    console.log(Math.round(scale * 1e2) / 1e2);\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const space = window.screen.height - 40; // 40 for padding/margin\n    const scale: number = space / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'}>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.setZoom(this.editor.zoom * 0.8)} id=\"zoom-out-btn\" data-tooltip=\"Zoom Out\">\n            <ls-icon name=\"zoom-out\" />\n          </button>\n          <div>\n            <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n          </div>\n          <button onClick={() => this.setZoom(this.editor.zoom / 0.8)} id=\"zoom-in-btn\" data-tooltip=\"Zoom In\">\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()} id=\"fit-width-btn\" data-tooltip=\"Fit Width\">\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()} id=\"fit-height-btn\" data-tooltip=\"Fit Height\">\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'} style={this.pageCount === 1 && { display: 'none' }}>\n          <button\n            onClick={() => {\n              this.editor.pagePrev();\n            }}\n            disabled={this.page === 1}\n            id=\"prev-page-btn\"\n            data-tooltip={this.page === 1 ? 'No Previous Page' : 'Previous Page'}\n          >\n            <ls-icon name=\"chevron-left\" />\n          </button>\n          <p>\n            {this.page} / {this.pageCount}\n          </p>\n          <button\n            onClick={() => {\n              this.editor.pageNext();\n            }}\n            disabled={this.page === this.pageCount}\n            id=\"next-page-btn\"\n            data-tooltip={this.page === this.pageCount ? 'No Next Page' : 'Next Page'}\n          >\n            <ls-icon name=\"chevron-right\" />\n          </button>\n        </div>\n        </div>\n        <ls-helper-bar />\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-Fw6kMqPe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-participant-card/ls-participant-card.css?tag=ls-participant-card&encapsulation=shadow","src/components/ls-participant-card/ls-participant-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.participant-card {\n  display: flex;\n  padding: 0.625rem;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  align-self: stretch;\n}\n\n.top-card {\n  border-radius: 1rem 1rem 0 0;\n}\n\n.full-card {\n  border-radius: 1rem;\n}\n\n.bottom-card {\n  border-radius: 0 0 1rem 1rem;\n}\n\n.participant-card-inner {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.hidden {\n  visibility: hidden;\n  display: none;\n}\n\n.form-button-set {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.role-label {\n  display: flex;\n  padding: 0.125rem 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.role-label.fields {\n  border-radius: 1rem;\n  margin-top: 0.5rem;\n}\n\n.innerButton {\n  margin: 0px;\n  padding: 0px;\n  max-height: 1.25rem !important;\n  max-width: 1.25rem !important;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--default-button-colour);\n}\n\n.innerButton:hover {\n  color: var(--hover-button-colour);\n}\n\n.participant-card-top-items {\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.button-set {\n  display: flex;\n  gap: 0.125rem;\n}\n\n.participant-text-description {\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.participant-text-type {\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.titleButton {\n  width: 100%;\n  text-align: left;\n  background-color: transparent;\n  border: none;\n}\n\n/* Global Styles */\n\n.full-width {\n  width: 100%;\n}\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n  width: fit-content;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.tertiary {\n  border: 1px solid var(--primary-60, #4456f6);\n  background: transparent;\n  color: var(--primary-70, #2134dc);\n}\n\nbutton.tertiary:hover {\n  border: 1px solid var(--primary-70, #2134dc);\n  border: 1px solid var(--primary-80, #0c34b8);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background: transparent;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n  background-color: var(--red-10, #fff1f0);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Watch, Element, State } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-participant-card',\n  styleUrl: 'ls-participant-card.css',\n  shadow: true,\n})\nexport class LsParticipantCard {\n  @Element() component: HTMLElement;\n  @Prop() signer: LSApiRole;\n  @Prop() index: number;\n  @Prop({ mutable: true }) editable: boolean = false;\n  @Prop() template: LSApiTemplate;\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  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  opened: EventEmitter<LSApiRole>;\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.signer = { ...this.signer, ...diff };\n    this.debounce(this.signer, 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      this.update.emit(diffs);\n    }, delay);\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n    this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n\n  @Watch('editable')\n  modeHandler(_editable) {\n    // When opened fire an event to let the parent handle closing other controls\n    if (_editable) {\n      this.opened.emit(this.signer);\n    }\n  }\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  })\n  addParticipant: EventEmitter<{ type: LSApiRoleType; parent?: string | null }>;\n\n  @State() swapUpBtn: HTMLElement;\n  @State() swapDownBtn: HTMLElement;\n  @State() editBtn: HTMLElement;\n  @State() deleteParticipantBtn: HTMLElement;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];\n    const child = this.template.roles.find(r => r.signerParent === this.signer.id);\n\n    return (\n      <Host>\n        <div\n          class={'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card')}\n          style={{\n            background: defaultRolePalette[this.signer?.signerIndex % 100].s10,\n            border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,\n            marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',\n          }}\n          onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.button-set')?.classList.remove('hidden')}\n          onMouseLeave={e => (e.currentTarget as HTMLElement).querySelector('.button-set')?.classList.add('hidden')}\n          onDblClick={() => {\n            this.editable = true;\n          }}\n        >\n          <div class={'participant-card-inner'}>\n            <div class={'participant-card-top-items'}>\n              <div\n                class={'role-label'}\n                style={{\n                  background: defaultRolePalette[this.signer?.signerIndex % 100].s20,\n                  color: defaultRolePalette[this.signer?.signerIndex % 100].s90,\n                }}\n              >\n                <ls-icon name={this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye'} />\n                {(this.signer?.ordinal || '')}\n              </div>\n              <div class={'button-set hidden'}>\n                {this.index > 0 && this.signer.roleType !== 'WITNESS' && (\n                  <div\n                    class=\"innerButton\"\n                    onClick={() => {\n                      this.swapHandler(this.signer, this.template.roles[this.index - 1]);\n                    }}\n                    style={{\n                      '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                      '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                    }}\n                    data-tooltip=\"Move Up\"\n                  >\n                    <ls-icon name=\"arrow-up\" size=\"18\" />\n                  </div>\n                )}\n                {this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (\n                  <div\n                    class=\"innerButton\"\n                    onClick={() => {\n                      this.swapHandler(this.signer, this.template.roles[this.index + 1]);\n                    }}\n                    style={{\n                      '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                      '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                    }}\n                    data-tooltip=\"Move Down\"\n                  >\n                    <ls-icon name=\"arrow-down\" size=\"18\" />\n                  </div>\n                )}\n                <div\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.editable = !this.editable;\n                  }}\n                  style={{\n                    '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                    '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                  }}\n                >\n                  <ls-icon name={this.editable ? 'check' : 'pencil-alt'} size=\"18\" data-tooltip={this.editable ? \"Save Changes\" : \"Edit Participant\"} />\n            \n                </div>\n                <div\n                  class=\"innerButton\"\n                  onClick={() => {\n                    this.deleteHandler(this.signer);\n                  }}\n                  style={{\n                    '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,\n                    '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,\n                  }}\n                  data-tooltip=\"Delete Participant\"\n                  data-tooltip-placement=\"top-end\"\n                >\n                  <ls-icon name=\"trash\" size=\"18\" />\n                </div>\n              </div>\n            </div>\n            {this.editable ? (\n              <div class={'participant-card-inner'}>\n                {this.signer?.roleType !== 'WITNESS' ? (\n                  <ls-input-wrapper select leadingIcon={this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature'}>\n                    <select\n                      name=\"roleType\"\n                      id=\"role-type\"\n                      class={'has-leading-icon'}\n                      onChange={e => this.alter({ roleType: (e.target as HTMLSelectElement).value })}\n                      disabled={child ? true : false}\n                    >\n                      <option value=\"APPROVER\" selected={this.signer?.roleType === 'APPROVER'}>\n                        Approver\n                      </option>\n                      <option value=\"SIGNER\" selected={this.signer?.roleType === 'SIGNER'}>\n                        Signer\n                      </option>\n                    </select>\n                  </ls-input-wrapper>\n                ) : (\n                  <ls-input-wrapper leadingIcon=\"eye\">\n                    <input name=\"roleType\" id=\"role-type\" class={'has-leading-icon'} disabled value=\"Witness\" />\n                  </ls-input-wrapper>\n                )}\n                <input\n                  type=\"text\"\n                  id=\"participant-description\"\n                  name=\"participantDescription\"\n                  placeholder=\"Description, eg. Tenant 1, Agent\"\n                  defaultValue={this.signer.name}\n                  onInput={e => this.alter({ name: (e.target as HTMLInputElement).value })}\n                  onKeyUp={e => {\n                    if (e.key === 'Enter' || e.keyCode === 13) this.editable = false;\n                  }}\n                />\n                {this.signer?.roleType === 'SIGNER' && !child ? (\n                  <button class={'tertiary'} onClick={() => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id })}>\n                    <ls-icon name=\"plus\" style={{ marginRight: '0.25rem' }} />\n                    Add Witness\n                  </button>\n                ) : this.signer?.roleType === 'SIGNER' && child ? (\n                  <button\n                    class={'destructive'}\n                    onClick={() => {\n                      this.deleteHandler(child);\n                    }}\n                  >\n                    <ls-icon name=\"minus-sm\" style={{ marginRight: '0.25rem' }} />\n                    Remove Witness\n                  </button>\n                ) : this.signer?.roleType === 'WITNESS' ? (\n                  <button\n                    class={'destructive'}\n                    onClick={() => {\n                      this.deleteHandler(this.signer);\n                    }}\n                  >\n                    <ls-icon name=\"minus-sm\" style={{ marginRight: '0.25rem' }} />\n                    Remove Witness\n                  </button>\n                ) : null}\n              </div>\n            ) : (\n              <div class={'participant-card-text'}>\n                <p\n                  class=\"participant-text-description\"\n                  style={{\n                    color: defaultRolePalette[this.signer?.signerIndex % 100].s100,\n                  }}\n                >\n                  {this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`}\n                </p>\n                <p\n                  class=\"participant-text-type\"\n                  style={{\n                    color: defaultRolePalette[this.signer?.signerIndex % 100].s80,\n                    textTransform: 'capitalize',\n                  }}\n                >\n                  {this.signer.roleType.toLowerCase()}\n                </p>\n                {this.signer?.roleType !== 'APPROVER' && (\n                  <div\n                    class={'role-label fields'}\n                    style={{\n                      background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,\n                      color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,\n                    }}\n                  >\n                    {participantFields.length === 0 && <ls-icon name=\"exclamation-circle\" size=\"16\" style={{ marginRight: '0.125rem' }} />}\n                    {participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-K67Z4FW4.js

@@ -1,72 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
-import { d as defaultRolePalette } from './p-CwCWCxsI.js';
-import { d as defineCustomElement$1 } from './p-BQN3l4X7.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-label:hover{cursor:pointer;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.valid{background-color:var(--green-30, #9df5d4);color:var(--green-100, #125241)}.invalid.default{background:var(--yellow-20, #fff3c2);color:var(--yellow-90, #8a3f0e)}.invalid.compose{border:1px solid var(--red-40, #ffa19e);background:var(--red-10, #fff0f0);color:var(--red-80, #c1140e)}.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-counter.compose{color:var(--red-10, #fff0f0);background:var(--red-60, #f64a44)}.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}.field-dropdown.compose{width:14rem;padding:0.75rem;gap:0.5rem}.field-dropdown.compose>*{width:100%}.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;}.validation-tag-container{padding:12px;display:flex;flex-direction:column;gap:8px}.validation-tag-header{padding-bottom:8px;border-bottom:1px solid #edeff2}.validation-tag-title{font-family:'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;font-size:14px;color:#45484d;line-height:20px}.validation-tag-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;transition:background-color 0.2s}.validation-tag-row:hover{background-color:var(--gray-10, #f9f9fa)}.validation-tag-bar{width:4px;height:32px;border-radius:9999px;flex-shrink:0}.validation-tag-details{flex:1 1 0%;min-width:0}.validation-tag-name{font-family:'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;font-size:14px;color:#45484d;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.validation-tag-email{font-family:'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;font-size:12px;color:#5e6066;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
-
-const LsValidationTag = /*@__PURE__*/ proxyCustomElement(class LsValidationTag extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.changeSigner = createEvent(this, "changeSigner", 7);
-    }
-    status = 'Invalid';
-    validationErrors = [];
-    isExpanded = false;
-    type = 'default';
-    showDropDown = true;
-    changeSigner;
-    render() {
-        return (h(Host, { key: '56d4edab1559ad588b75595f81e5225c4fca5ae9' }, h("div", { key: 'f0eda9f66ec990740dd5e55ee84a011c9e4cfe32', class: `valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`, onClick: this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded)) }, this.validationErrors.length > 0 && h("div", { key: 'a6eed97b64022a6a01f799ead4d8abacb6c850e3', class: `field-counter ${this.type === 'compose' ? 'compose' : 'default'}` }, this.validationErrors.length), this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`, this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (h("ls-icon", { key: '44fdf98c392b1c90840f77587a8706fd06bfc809', name: this.isExpanded ? 'chevron-up' : 'chevron-down', style: { cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' } })), this.validationErrors.length > 0 && this.type === 'compose' && h("ls-icon", { key: 'a3a7c71bf4db7608bb01999480ca617911ef4799', name: "cursor-click", solid: true, size: "16", customStyle: { color: 'var(--red-70, #DC2721);' } })), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (h("div", { key: '0e2c0587bb8fc4a30f1e7dac52daa9bb1908e65a', class: 'field-dropdown' }, h("div", { key: '6356acf2267aec3cd114a08ed1005ba126579519', class: 'dropdown-header' }, h("h2", { key: 'aeaa96f8765175d8ad8ef3443e69f22252344e6a' }, "Fields Required"), h("p", { key: '8a6465b75162bdc0069045240393afaa7a7ef793' }, 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: {
-                    '--field-background': pallette.s10,
-                    '--field-border-color': pallette.s10,
-                    '--field-background-hover': pallette.s20,
-                    '--field-text-color': pallette.s70,
-                    '--field-text-color-hover': pallette.s80,
-                    '--field-border-color-hover': pallette.s60,
-                } }, 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))))));
-        }))), this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (h("div", { key: '13769805869726da8bcef70dedd1b7200ab47ca7', class: 'field-dropdown compose' }, h("div", { key: '42844a68f69899d936ca81d5f1eea60021d8aaff', class: "validation-tag-header" }, h("p", { key: '9ab9f5d30516c5e05c0d9ec1817fb53eb60c759f', class: "validation-tag-title" }, "Recipients Missing Signature")), 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", { class: "validation-tag-row", key: idx, onClick: () => {
-                    this.changeSigner.emit(field?.role?.signerIndex);
-                    this.isExpanded = false;
-                } }, h("div", { class: "validation-tag-bar", style: { background: pallette.s60 } }), h("div", { class: "validation-tag-details" }, h("p", { class: "validation-tag-name" }, `${field?.role?.firstname} ${field?.role?.lastname}`), h("p", { class: "validation-tag-email" }, field?.role?.email))));
-        })))));
-    }
-    static get style() { return lsValidationTagCss; }
-}, [257, "ls-validation-tag", {
-        "status": [1025],
-        "validationErrors": [1040, "validation-errors"],
-        "isExpanded": [1028, "is-expanded"],
-        "type": [1],
-        "showDropDown": [4, "show-drop-down"]
-    }]);
-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();
-
-export { LsValidationTag as L, defineCustomElement as d };
-//# sourceMappingURL=p-K67Z4FW4.js.map
-
-//# sourceMappingURL=p-K67Z4FW4.js.map

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

@@ -1 +0,0 @@
-{"file":"p-K67Z4FW4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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.valid-label:hover {\n  cursor: pointer;\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.valid {\n  background-color: var(--green-30, #9df5d4);\n  color: var(--green-100, #125241);\n}\n\n.invalid.default {\n  background: var(--yellow-20, #fff3c2);\n  color: var(--yellow-90, #8a3f0e);\n}\n\n.invalid.compose {\n  border: 1px solid var(--red-40, #ffa19e);\n  background: var(--red-10, #fff0f0);\n  color: var(--red-80, #c1140e);\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-counter.compose {\n  color: var(--red-10, #fff0f0);\n  background: var(--red-60, #f64a44);\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.field-dropdown.compose {\n  width: 14rem;\n  padding: 0.75rem;\n  gap: 0.5rem;\n}\n\n.field-dropdown.compose > * {\n  width: 100%;\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\n.validation-tag-container {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.validation-tag-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #edeff2;\n}\n\n.validation-tag-title {\n  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  color: #45484d;\n  line-height: 20px;\n}\n\n.validation-tag-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.validation-tag-row:hover {\n  background-color: var(--gray-10, #f9f9fa);\n}\n\n.validation-tag-bar {\n  width: 4px;\n  height: 32px;\n  border-radius: 9999px;\n  flex-shrink: 0;\n}\n\n.validation-tag-details {\n  flex: 1 1 0%;\n  min-width: 0;\n}\n\n.validation-tag-name {\n  font-family: 'IBM Plex Sans Medium', 'IBM Plex Sans', sans-serif;\n  font-size: 14px;\n  color: #45484d;\n  line-height: 20px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.validation-tag-email {\n  font-family: 'IBM Plex Sans Light', 'IBM Plex Sans', sans-serif;\n  font-size: 12px;\n  color: #5e6066;\n  line-height: 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } 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  @Prop() type: 'compose' | 'default' = 'default';\n  @Prop() showDropDown: boolean = true;\n\n  @Event() changeSigner: EventEmitter<number>;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`valid-label ${this.validationErrors.length === 0 ? 'valid' : 'invalid'} ${this.type === 'compose' ? 'compose' : 'default'}`}\n          onClick={this.validationErrors.length && (() => (this.isExpanded = !this.isExpanded))}\n        >\n          {this.validationErrors.length > 0 && <div class={`field-counter ${this.type === 'compose' ? 'compose' : 'default'}`}>{this.validationErrors.length}</div>}\n          {this.type === 'compose' ? (this.validationErrors.length === 0 ? 'Ready' : `Required`) : this.validationErrors.length === 0 ? 'Ready to Send' : `Requires Fields`}\n          {this.validationErrors.length > 0 && this.showDropDown && this.type !== 'compose' && (\n            <ls-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'} style={{ cursor: 'pointer', scale: '0.60', margin: '0 -0.25rem' }} />\n          )}\n          {this.validationErrors.length > 0 && this.type === 'compose' && <ls-icon name=\"cursor-click\" solid size=\"16\" customStyle={{ color: 'var(--red-70, #DC2721);' }} />}\n        </div>\n        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type !== 'compose' && (\n          <div class={'field-dropdown'}>\n            <div class={'dropdown-header'}>\n              <h2>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        {this.isExpanded && this.validationErrors.length !== 0 && this.showDropDown && this.type === 'compose' && (\n          <div class={'field-dropdown compose'}>\n            <div class=\"validation-tag-header\">\n              <p class=\"validation-tag-title\">Recipients Missing Signature</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              return (\n                <div\n                  class=\"validation-tag-row\"\n                  key={idx}\n                  onClick={() => {\n                    this.changeSigner.emit(field?.role?.signerIndex);\n                    this.isExpanded = false;\n                  }}\n                >\n                  <div class=\"validation-tag-bar\" style={{ background: pallette.s60 }}></div>\n                  <div class=\"validation-tag-details\">\n                    <p class=\"validation-tag-name\">{`${field?.role?.firstname} ${field?.role?.lastname}`}</p>\n                    <p class=\"validation-tag-email\">{field?.role?.email}</p>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-RnnpDT-h.js.map

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

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

@@ -1 +0,0 @@
-{"file":"p-dMh2qwev.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,ktJAAktJ;;MCQvuJ,sBAAsB,iBAAAA,kBAAA,CAAA,MAAA,sBAAA,SAAAC,CAAA,CAAA;;;;;;AACzB,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAA+B,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,YAAY,CAAC,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,SAAS,EAAA,EACrC,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC7C,CAAA,CAAA,8BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,YAAY,EAAA,EACxC,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC5C,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,CAC3C,CACwB,EAChC,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-image/ls-field-properties-image.css?tag=ls-field-properties-image&encapsulation=shadow","src/components/ls-field-properties-image/ls-field-properties-image.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-image',\n  styleUrl: 'ls-field-properties-image.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesImage {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <ls-field-properties-container tabs={['content', 'placement', 'dimensions']}>\n          <div class={'field-set'} slot=\"content\">\n            <ls-field-content dataItem={this.dataItem} />\n            <ls-field-properties-advanced dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"dimensions\">\n            <ls-field-dimensions dataItem={this.dataItem} />\n          </div>\n          <div class={'field-set'} slot=\"placement\">\n            <ls-field-placement dataItem={this.dataItem} />\n          </div>\n        </ls-field-properties-container>\n        <ls-field-footer dataItem={this.dataItem} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"p-ecEYUtBb.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,q+IAAq+I;;MCSj/I,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;AAIxB,IAAA,QAAQ;AAOR,IAAA,MAAM;AAON,IAAA,MAAM;;AAGE,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;QAC/C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,KAAoB,KAAI;QAC7C,KAAK,CAAC,eAAe,EAAE;AACzB,KAAC;;IAID,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,YAAA,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,wBAAwB,CAAsB;AACrG,YAAA,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ;AAC7D,YAAA,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,sBAAsB,CAAqB;AACtG,YAAA,IAAI,WAAW;AAAE,gBAAA,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE;;AAElF,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;;;AAK9C,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAG;AACnD,YAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE;AACtE,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAoB,CAAC;AACtD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGzB,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,eAAe,GAAG,MAAK;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;AAC/C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC;QACjF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ;AAC/C,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC;AACrF,QAAA,OAAO,EAAE,MAAM,EAAE,YAAY,IAAI,gBAAgB,EAAE,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,OAAO,EAAE,QAAQ,EAAE,gBAAgB,GAAG,aAAa,GAAG,OAAO,EAAE;AAC7J,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC3D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,cAAA,EAAc,aAAa,EAAA,EACnD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;aACpE,EACD,KAAK,EAAE,kBAAkB,EAAA,EAEzB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,QAAQ,EAAC,IAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,KAAK,OAAO,EAAE,KAAK,EAAE,OAAO,EAE9E,EAAA,OAAA,CAAA,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,EACT,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,GAAW,CACjD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,cAAA,EAAc,WAAW,EAAA,EACjD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EACvC,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;oBAAE;AACrD,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;AACpE,aAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,kBACY,iBAAiB,EAAA,EAE9B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,kBACY,mBAAmB,EAAA,EAEhC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAChC,aAAC,kBACY,kBAAkB,EAAA,EAE/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CACF,CACP,EACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,KAC1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,qBAAqB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,cAAA,EAAc,aAAa,EAAA,EACnD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EACrD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,wBAAwB,EAC3B,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC;AACrE,aAAC,EACD,KAAK,EAAE,kBAAkB,EAAA,EAEzB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAe,EAAA,OAAA,CAAA,EACpC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAyB,EAAA,iBAAA,CAAA,EACxD,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAiB,EAAA,SAAA,CAAA,EACxC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAmB,EAAA,WAAA,CAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,CACjC,CACL,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,cAAA,EAAc,WAAW,EAAA,EACjD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EAC1D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,sBAAsB,EACzB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,IAAG;AAChB,gBAAA,IAAK,KAAK,CAAC,MAA2B,CAAC,KAAK,KAAK,EAAE;oBAAE;AACrD,gBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;AACpE,aAAC,EACD,KAAK,EAAE,kBAAkB,GACzB,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/B,aAAC,kBACY,iBAAiB,EAAA,EAE9B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACjC,aAAC,kBACY,mBAAmB,EAAA,EAEhC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAA,CAAW,CAC9B,EACT,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAChC,aAAC,kBACY,kBAAkB,EAAA,EAE/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,GAAW,CAC9B,CACL,CAWF,CACP,EACD,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-format/ls-field-format.css?tag=ls-field-format&encapsulation=shadow","src/components/ls-field-format/ls-field-format.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: row;\n}\n\n.ls-field-format-bar {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\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='number'] {\n  width: max-content;\n  max-width: 3rem;\n\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n\n\n","import { Component, EventEmitter, Host, Prop, h, Element, Event, Watch } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-format',\n  styleUrl: 'ls-field-format.css',\n  shadow: true,\n})\nexport class LsFieldFormat {\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\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  @Element() component: HTMLElement;\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  private handleKeyUp = (event: KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  // Send selection changes to bars and panels if in use.\n  @Watch('dataItem')\n  selectFieldsHandler() {\n    if (this.dataItem.length > 0) {\n      var selFont = this.component.shadowRoot.getElementById('ls-toolbar-font-select') as HTMLSelectElement;\n      if (selFont) selFont.value = this.allElementsSame()?.fontName;\n      var selFontSize = this.component.shadowRoot.getElementById('ls-toolbar-font-size') as HTMLInputElement;\n      if (selFontSize) selFontSize.value = this.allElementsSame()?.fontSize.toString();\n    }\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: 'update', data: { ...c, ...diff } as LSApiElement };\n    });\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n    this.update.emit(diffs);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return;\n    const firstFontName = this.dataItem[0].fontName;\n    const allFontsSame = this.dataItem.every(item => item.fontName === firstFontName);\n    const firstFontSize = this.dataItem[0].fontSize;\n    const allFontSizesSame = this.dataItem.every(item => item.fontSize === firstFontSize);\n    return { isSame: allFontsSame && allFontSizesSame, fontName: allFontsSame ? firstFontName : 'mixed', fontSize: allFontSizesSame ? firstFontSize : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp}>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'has-leading-icon'}\n              >\n                <option disabled selected={this.allElementsSame()?.fontName === 'mixed'} value={'mixed'}>\n                  Mixed\n                </option>\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n            </div>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type='number'\n                min=\"4\"\n                value={this.allElementsSame()?.fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'has-leading-icon'}\n              />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\n              >\n                <ls-icon name=\"menu-alt-3\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        )}\n        {this.dataItem && this.dataItem.length === 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Family\">\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <select\n                id=\"ls-toolbar-font-select\"\n                onChange={input => {\n                  this.alter({ fontName: (input.target as HTMLSelectElement).value });\n                }}\n                class={'has-leading-icon'}\n              >\n                <option value=\"arial\">Arial</option>\n                <option value=\"liberation sans\">Liberation Sans</option>\n                <option value=\"courier\">Courier</option>\n                <option value=\"helvetica\">Helvetica</option>\n                <option value=\"verdana\">Verdana</option>\n              </select>\n            </div>\n            <div class=\"input-wrapper\" data-tooltip=\"Font Size\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                id=\"ls-toolbar-font-size\"\n                type=\"number\"\n                min=\"4\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\n                  if ((input.target as HTMLInputElement).value === '') return;\n                  this.alter({ fontSize: (input.target as HTMLInputElement).value });\n                }}\n                class={'has-leading-icon'}\n              />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n                data-tooltip=\"Align Text Left\"\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n                data-tooltip=\"Align Text Center\"\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\n                data-tooltip=\"Align Text Right\"\n              >\n                <ls-icon name=\"menu-alt-3\"></ls-icon>\n              </button>\n            </div>\n\n            {/* <select\n              onChange={input => {\n                this.alter({ align: (input.target as HTMLSelectElement).value });\n              }}\n            >\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select> */}\n          </div>\n        )}\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}