legalesign-document-viewer 0.1.3 → 0.1.4

package/dist/components/p-ChfFmzMa.js

@@ -0,0 +1,138 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
+import { d as defaultRolePalette } from './p-C00GqV9f.js';
+import { d as defineCustomElement$8 } from './p-vll2Fgrb.js';
+import { d as defineCustomElement$7 } from './p-C9d-OiqW.js';
+import { d as defineCustomElement$6 } from './p-BVXVFpxy.js';
+import { d as defineCustomElement$5 } from './p-CQr7nmKb.js';
+import { d as defineCustomElement$4 } from './p-Cotorbsf.js';
+import { d as defineCustomElement$3 } from './p-8Yvey07o.js';
+import { d as defineCustomElement$2 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-9Z-GK0Bd.js';
+
+const defaultFieldIcons = {
+    'signature': 'signature',
+    'text': 'text',
+    'signing date': 'auto-date',
+    'date': 'calender',
+    'initials': 'initials',
+    'checkbox': 'check',
+    'email': 'at-symbol',
+    'number': 'hashtag',
+    'image': 'photograph',
+    'dropdown': 'document-text',
+    'file': 'upload',
+    'drawn field': 'pencil',
+    'regular expression': 'code',
+};
+function getFieldIcon(key) {
+    return defaultFieldIcons[key] || 'view-grid';
+}
+
+const lsFieldPropertiesMultipleCss = ":host{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;position:relative}*{margin:0}.properties-container{display:flex;flex-direction:column;height:100%}.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}.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;}.ls-field-type-wrapper{position:relative;border-radius:0.875rem;padding:0.25rem}.ls-field-type-inner{border-radius:0.625rem;background:var(--white, #fff);display:flex;padding:0.25rem 0.5rem 0.25rem 0.25rem;align-items:center;gap:0.875rem;align-self:stretch}.ls-field-type-icon{display:flex;padding:0.5rem;align-items:center;border-radius:0.5rem;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}.ls-field-type-name{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1.5rem;text-transform:capitalize}.tabs-container{display:grid;grid-template-columns:repeat(3, 1fr);width:100%;gap:0.125rem;padding:0.125rem;border:1px solid var(--gray-30, #e0e2e5);border-radius:0.75rem;background:var(--white, #ffffff)}.ls-tab{all:unset;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:0.5rem;border-radius:0.625rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;color:var(--gray-80, #6c6e73)}.ls-tab.active{background:var(--primary-10, #eff4ff);color:var(--primary-60, #4456f6)}.ls-tab:not(.active):hover{background:var(--gray-10, #f7f8fa)}.button-footer{display:flex;padding-top:1rem;border-top:1px solid var(--gray-20, #f0f1f2);flex-direction:column;justify-content:flex-end;gap:0.75rem;margin-top:auto}.scrolling-container{overflow-y:auto;padding:0 1rem;margin:0 -1rem;height:calc(100% - 10.938rem)}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;width:100%}.input-wrapper{position:relative}.full-width{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)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{display:flex;gap:0.5rem;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;font-weight:500;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.secondary{border:1px solid var(--gray-50, #c8c9cc);background:var(--white, #fff);color:var(--gray-90, #5e6066);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1)}button.secondary:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}button.destructive{border:1px solid var(--red-60, #f04438);background-color:white;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+
+const LsFieldPropertiesMultiple = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesMultiple extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    dataItem;
+    fieldSet = 'content';
+    signerColor = (index) => {
+        return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];
+    };
+    allSignersSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, signer: undefined };
+        const firstSigner = this.dataItem[0].signer;
+        const allSame = this.dataItem.every(item => item.signer === firstSigner);
+        return { isSame: allSame, signer: allSame ? firstSigner : 13 };
+    };
+    allLabelsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, label: undefined };
+        const firstLabel = this.dataItem[0].label;
+        const allSame = this.dataItem.every(item => item.label === firstLabel);
+        return { isSame: allSame, label: allSame ? firstLabel : undefined };
+    };
+    allElementsSame = () => {
+        if (!this.dataItem || this.dataItem.length === 0)
+            return { isSame: true, elementType: 'mixed' };
+        const firstElementType = this.dataItem[0].elementType;
+        const allSame = this.dataItem.every(item => item.elementType === firstElementType);
+        return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };
+    };
+    render() {
+        return (h(Host, { key: 'd47418c11bf08918bbc5de9815c9ed0060637730' }, h("div", { key: 'ffbe7dddad76d40c13d394b94f560bc28f0efd49', class: 'tabs-container' }, h("button", { key: '215fa1ffeb0fc0e7e5f5f74268245a0bfc24b578', class: this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'content') }, "Content"), h("button", { key: '38cbd8b91dc129be1398ba79384c316bee79eedc', class: this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'placement') }, "Placement"), h("button", { key: '8ca2cb33b774b93d2a9ca2dd84dab64c5f757fec', class: this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab', onClick: () => (this.fieldSet = 'dimensions') }, "Dimensions")), h("div", { key: '584ff1cce354ad1f7326a73c3d2d6729dbaccac7', class: 'scrolling-container' }, this.fieldSet === 'placement' ? (h("div", { class: 'field-set' }, h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-placement", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }))) : this.fieldSet === 'dimensions' ? (h("div", { class: 'field-set' }, h("ls-field-dimensions", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'field-set' }, h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Type"), h("p", { class: 'ls-field-properties-section-description' }, "The Fields you currently have selected")), h("div", { class: 'ls-field-type-wrapper', style: {
+                border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, h("div", { class: 'ls-field-type-inner' }, h("div", { class: 'ls-field-type-icon', style: {
+                border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,
+                background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,
+            } }, h("ls-icon", { name: getFieldIcon(this.allElementsSame().elementType), size: "20" })), h("p", { class: 'ls-field-type-name' }, this.dataItem.length, " ", this.allElementsSame().elementType, " ", 'Fields')))), h("div", { class: 'ls-field-properties-section row' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Required Field")), h("ls-toggle", null)), h("div", { class: 'ls-field-properties-section' }, h("div", { class: 'ls-field-properties-section-text' }, h("p", { class: 'ls-field-properties-section-title' }, "Field Label"), h("p", { class: 'ls-field-properties-section-description' }, "Add a label to clarify the information required from the Recipient.")), h("input", { value: this.allLabelsSame().label, width: "30", placeholder: "eg. Sign Here" }))))), h("ls-field-footer", { key: '4ac7b3459381ce8b58dbed6aa0de6612e26ecbb4' }), h("slot", { key: 'c07eed0aa02861a7cc12939dcb11c16ccfebb58c' })));
+    }
+    static get style() { return lsFieldPropertiesMultipleCss; }
+}, [257, "ls-field-properties-multiple", {
+        "dataItem": [16, "data-item"],
+        "fieldSet": [1, "field-set"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-multiple", "ls-field-alignment", "ls-field-dimensions", "ls-field-distribute", "ls-field-footer", "ls-field-placement", "ls-field-size", "ls-icon", "ls-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-multiple":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LsFieldPropertiesMultiple);
+            }
+            break;
+        case "ls-field-alignment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ls-field-dimensions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ls-field-distribute":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ls-field-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ls-field-placement":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ls-field-size":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesMultiple as L, defineCustomElement as d };
+//# sourceMappingURL=p-ChfFmzMa.js.map
+
+//# sourceMappingURL=p-ChfFmzMa.js.map

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

@@ -0,0 +1 @@
+{"file":"p-ChfFmzMa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-document-viewer/defaultFieldIcons.ts","src/components/ls-field-properties-multiple/ls-field-properties-multiple.css?tag=ls-field-properties-multiple&encapsulation=shadow","src/components/ls-field-properties-multiple/ls-field-properties-multiple.tsx"],"sourcesContent":["import { Icon } from \"../../components\";\n\nexport const defaultFieldIcons: { [key: string]: Icon } = {\n  'signature': 'signature',\n  'text': 'text',\n  'signing date': 'auto-date',\n  'date': 'calender',\n  'initials': 'initials',\n  'checkbox': 'check',\n  'email': 'at-symbol',\n  'number': 'hashtag',\n  'image': 'photograph',\n  'dropdown': 'document-text',\n  'file': 'upload',\n  'drawn field': 'pencil',\n  'regular expression': 'code',\n};\n\nexport function getFieldIcon(key: string): Icon | undefined {\n  return defaultFieldIcons[key] || 'view-grid';\n}\n\n",":host {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n}\n\n.properties-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.ls-field-type-wrapper {\n  position: relative;\n  border-radius: 0.875rem;\n  padding: 0.25rem;\n}\n\n.ls-field-type-inner {\n  border-radius: 0.625rem;\n  background: var(--white, #fff);\n  display: flex;\n  padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n  align-items: center;\n  gap: 0.875rem;\n  align-self: stretch;\n}\n\n.ls-field-type-icon {\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  border-radius: 0.5rem;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\n.ls-field-type-name {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.5rem; /* 150% */\n  text-transform: capitalize;\n}\n\n.tabs-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  width: 100%;\n  gap: 0.125rem;\n  padding: 0.125rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  border-radius: 0.75rem;\n  background: var(--white, #ffffff);\n}\n\n.ls-tab {\n  all: unset;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  color: var(--gray-80, #6c6e73);\n}\n\n.ls-tab.active {\n  background: var(--primary-10, #eff4ff);\n  color: var(--primary-60, #4456f6);\n}\n\n.ls-tab:not(.active):hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-footer {\n  display: flex;\n  padding-top: 1rem;\n  border-top: 1px solid var(--gray-20, #f0f1f2);\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: auto;\n}\n\n.scrolling-container {\n  overflow-y: auto;\n  padding: 0 1rem;\n  margin: 0 -1rem;\n  height: calc(100% - 10.938rem);\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 36px;\n  width: 100%;\n}\n\n.input-wrapper {\n  position: relative;\n}\n\n.full-width {\n  width: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  display: flex;\n  gap: 0.5rem;\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  font-weight: 500;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.secondary {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--white, #fff);\n  color: var(--gray-90, #5e6066);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n\nbutton.secondary:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\nbutton.destructive {\n  border: 1px solid var(--red-60, #f04438);\n  background-color: white;\n  color: var(--red-60);\n}\n\nbutton.destructive:hover {\n  border: 1px solid var(--red-70, #d92d20);\n  background: var(--red-10, #fff1f0);\n}\n\n\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n}\n\n.button-group button {\n  display: flex;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  min-height: unset;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { getFieldIcon } from '../ls-document-viewer/defaultFieldIcons';\n\n@Component({\n  tag: 'ls-field-properties-multiple',\n  styleUrl: 'ls-field-properties-multiple.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesMultiple {\n  @Prop() dataItem: LSApiElement[];\n  @Prop() fieldSet: 'content' | 'placement' | 'dimensions' = 'content';\n\n  signerColor = (index: number) => {\n    return index > 200 ? defaultRolePalette[index - 200] : index > 100 ? defaultRolePalette[index - 100] : defaultRolePalette[index] || defaultRolePalette[0];\n  };\n\n  allSignersSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, signer: undefined };\n    const firstSigner = this.dataItem[0].signer;\n    const allSame = this.dataItem.every(item => item.signer === firstSigner);\n    return { isSame: allSame, signer: allSame ? firstSigner : 13 };\n  };\n\n  allLabelsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, label: undefined };\n    const firstLabel = this.dataItem[0].label;\n    const allSame = this.dataItem.every(item => item.label === firstLabel);\n    return { isSame: allSame, label: allSame ? firstLabel : undefined };\n  };\n\n  allElementsSame = () => {\n    if (!this.dataItem || this.dataItem.length === 0) return { isSame: true, elementType: 'mixed' };\n    const firstElementType = this.dataItem[0].elementType;\n    const allSame = this.dataItem.every(item => item.elementType === firstElementType);\n    return { isSame: allSame, elementType: allSame ? firstElementType : 'mixed' };\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={'tabs-container'}>\n          <button class={this.fieldSet === 'content' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'content')}>\n            Content\n          </button>\n          <button class={this.fieldSet === 'placement' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'placement')}>\n            Placement\n          </button>\n          <button class={this.fieldSet === 'dimensions' ? 'ls-tab active' : 'ls-tab'} onClick={() => (this.fieldSet = 'dimensions')}>\n            Dimensions\n          </button>\n        </div>\n        <div class={'scrolling-container'}>\n          {this.fieldSet === 'placement' ? (\n            <div class={'field-set'}>\n              <ls-field-alignment dataItem={this.dataItem} />\n              <ls-field-placement dataItem={this.dataItem} />\n              <ls-field-distribute dataItem={this.dataItem} />\n\n            </div>\n          ) : this.fieldSet === 'dimensions' ? (\n            <div class={'field-set'}>\n              <ls-field-dimensions dataItem={this.dataItem} />\n              <ls-field-size dataItem={this.dataItem} />\n            </div>\n          ) : (\n            <div class={'field-set'}>\n              <div class={'ls-field-properties-section'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Field Type</p>\n                  <p class={'ls-field-properties-section-description'}>The Fields you currently have selected</p>\n                </div>\n                <div\n                  class={'ls-field-type-wrapper'}\n                  style={{\n                    border: `1px dashed var(--${this.signerColor(this.allSignersSame().signer)}-30)`,\n                    background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n                  }}\n                >\n                  <div class={'ls-field-type-inner'}>\n                    <div\n                      class={'ls-field-type-icon'}\n                      style={{\n                        border: `1px solid var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n                        color: `var(--${this.signerColor(this.allSignersSame().signer)}-60)`,\n                        background: `var(--${this.signerColor(this.allSignersSame().signer)}-10)`,\n                      }}\n                    >\n                      <ls-icon name={getFieldIcon(this.allElementsSame().elementType)} size=\"20\" />\n                    </div>\n                    <p class={'ls-field-type-name'}>\n                      {this.dataItem.length} {this.allElementsSame().elementType} {'Fields'}\n                    </p>\n                  </div>\n                </div>\n              </div>\n              <div class={'ls-field-properties-section row'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Required Field</p>\n                </div>\n                <ls-toggle />\n              </div>\n\n              <div class={'ls-field-properties-section'}>\n                <div class={'ls-field-properties-section-text'}>\n                  <p class={'ls-field-properties-section-title'}>Field Label</p>\n                  <p class={'ls-field-properties-section-description'}>Add a label to clarify the information required from the Recipient.</p>\n                </div>\n                <input value={this.allLabelsSame().label} width=\"30\" placeholder=\"eg. Sign Here\" />\n              </div>\n            </div>\n          )}\n        </div>\n        <ls-field-footer />\n        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Ciz2QmDr.js → p-CiKsFis4.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$2 } from './p-D8LhlUeT.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$2 } from './p-C9d-OiqW.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsFieldPropertiesAutosignCss = ":host{display:block}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -12,7 +12,7 @@ const LsFieldPropertiesAutosign = /*@__PURE__*/ proxyCustomElement(class LsField
     }
     dataItem;
     render() {
-        return (h(Host, { key: 'b92e0d9344c0443598e16dfb603c8bb9c33e86f9' }, h("div", { key: 'cf3191dbbdb254d9a571e7a5a213d6ccd5fb22da', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: 'e55e1bc4078c5fa0d1697402d790e53f49ffc7e4' }, "Label: ", h("input", { key: '3d519f647bafeb12c028e199ec4f7897da82129d', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '6113d5217406e9bb172449a4c0ab93432ac3d059', dataItem: this.dataItem }), h("slot", { key: 'd1d085d0099e3d9185e677a9511e39d3d9df37b9' })));
+        return (h(Host, { key: '14e8816d8a1b469e277e7af51b2141e4338ba1e2' }, h("div", { key: '59f5e6ab5aa858f59082e36e7e74b60002e331ed', class: "ls-field-properties-section" }, "Self Sign Field"), h("div", { key: '14d7513183cbca4d203ce99b95d4e41f585d9b71' }, "Label: ", h("input", { key: '345895e5c19328992ae43a69c0b8e5eb2449b1ac', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '6b783594d4167a01a4deaf022d3f04d84a6897b7', dataItem: this.dataItem }), h("slot", { key: '5e05f3cee5def0994e9c9b7421d7ebbd34eb88e7' })));
     }
     static get style() { return lsFieldPropertiesAutosignCss; }
 }, [257, "ls-field-properties-autosign", {
@@ -44,6 +44,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldPropertiesAutosign as L, defineCustomElement as d };
-//# sourceMappingURL=p-Ciz2QmDr.js.map
+//# sourceMappingURL=p-CiKsFis4.js.map
 
-//# sourceMappingURL=p-Ciz2QmDr.js.map
+//# sourceMappingURL=p-CiKsFis4.js.map

package/dist/components/{p-Ciz2QmDr.js.map → p-CiKsFis4.js.map}

@@ -1 +1 @@
-{"file":"p-Ciz2QmDr.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B,IAAA,QAAQ;IAEf,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAuB,EAAA,iBAAA,CAAA,EAChE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAY,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAA,CAAE,CAAM,EAClE,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-autosign/ls-field-properties-autosign.css?tag=ls-field-properties-autosign&encapsulation=shadow","src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"sourcesContent":[":host {\n  display: block;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"],"version":3}
+{"file":"p-CiKsFis4.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,61IAA61I;;MCQr3I,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;;;;;;AAC5B,IAAA,QAAQ;IAEf,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,6BAA6B,EAAuB,EAAA,iBAAA,CAAA,EAChE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAY,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,EAAA,CAAE,CAAM,EAClE,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-autosign/ls-field-properties-autosign.css?tag=ls-field-properties-autosign&encapsulation=shadow","src/components/ls-field-properties-autosign/ls-field-properties-autosign.tsx"],"sourcesContent":[":host {\n  display: block;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-autosign',\n  styleUrl: 'ls-field-properties-autosign.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAutosign {\n  @Prop() dataItem: LSApiElement;\n \n   render() {\n     return (\n       <Host>\n         <div class={\"ls-field-properties-section\"}>Self Sign Field</div>\n         <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n         <ls-field-dimensions dataItem={this.dataItem} />\n         <slot></slot>\n       </Host>\n     );\n   }\n}\n"],"version":3}

package/dist/components/{p-BIp2Inn2.js → p-CixKuBuL.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$1 } from './p-BoA6mH9f.js';
+import { d as defineCustomElement$1 } from './p-BFSBsh85.js';
 
 const lsFieldFormatCss = ":host{display:flex;flex-direction:row}.ls-field-format-bar{display:flex;flex-direction:row;gap:0.5rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -27,25 +27,25 @@ const LsFieldFormat = /*@__PURE__*/ proxyCustomElement(class LsFieldFormat exten
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '919c4cad28c6c7b3b30543efe37b51f45400b012' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '1846d004c25acc29d82e29f837fd85a07c2712ed', class: 'ls-field-format-bar' }, h("div", { key: 'a0a2494dfd0bdc36e32f9c6903642318378b264c', class: " input-wrapper" }, h("ls-icon", { key: '53dfe2a957bea873366196d118298b9f0bcaf0e5', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '834ac15d653e94a400d6d4a9eb763225d552ac6a', onChange: input => {
+        return (h(Host, { key: '87a1481dfae83e9000fcd8372f5dcda740d0a8cb' }, this.dataItem && this.dataItem.length > 1 && (h("div", { key: '73e8800061971f09ce5f198de0ce20b05b643fd8', class: 'ls-field-format-bar' }, h("div", { key: 'b16b871e8399430250f1fc7782f4cbe078865bc4', class: " input-wrapper" }, h("ls-icon", { key: 'c4b2b1cb98cbeb08b4e1979899a020c56a1c17b3', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '50ed9152533733b9ac1a409f7501fba333a1773a', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '2c7001063d89465eeff4e10fed8ac98f1f6c3be9', value: "arial" }, "Arial"), h("option", { key: '1f4ba10ff6ab3de9fb4a0b812072e33b84fea2e0', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '4c16c8128051662ca84db0054016f5214f618753', value: "courier" }, "Courier"), h("option", { key: '6f5c2d1d0e264bfbd7a3199f3dc8db03445a9885', value: "helvetica" }, "Helvetica"), h("option", { key: '46b1b834980ef46daf5134ed3069118daa12a48f', value: "verdana" }, "Verdana")), h("ls-icon", { key: '8032bea8e461d25a79b6341b889a0d02f454e4c2', id: "selectorIcon", name: "selector" })), h("div", { key: '3a4a7c4e887ccc3b19879b06b5b9f205912659fc', class: "input-wrapper" }, h("ls-icon", { key: 'd99531039fdfc0030d37376eef92035dbbc76325', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '043eb9f72cf5e21dc4710c2a70dd390753d58c56', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: 'e1659f4c141d766dd7b886f0528d6600cef92a48', class: 'button-group' }, h("button", { key: '97988aa985a84bf1a6a3dd73c5aee4eead811acc', onClick: () => {
+            }, class: 'has-leading-icon' }, h("option", { key: '08f846a77f4eb52862cc8bd2af00f17d2f9ad333', value: "arial" }, "Arial"), h("option", { key: 'f414dbc7662a502af008d5924d31591d564abff5', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '9f0b044404e41e1729f8e65ab7ddff7ccce158d7', value: "courier" }, "Courier"), h("option", { key: '03772f79ca32fba7f089d75e54f2db5a6ae3199d', value: "helvetica" }, "Helvetica"), h("option", { key: '58f3bdd4a2f1b3c1e9096b547255f863b612eafa', value: "verdana" }, "Verdana")), h("ls-icon", { key: 'f815be5900f9e17614aa7ac1223d703e744d8129', id: "selectorIcon", name: "selector" })), h("div", { key: 'ae3f39557288535143ed04cc0eeba2c1f93f0218', class: "input-wrapper" }, h("ls-icon", { key: '76667415983f8e27339a54f47015b7679055fe4d', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: '5cc8c26f5540db91f2c313498a02dfc08f847d7a', width: "30", size: 4, class: 'has-leading-icon' })), h("div", { key: 'f6b34b35ee676e4e944f719d5cfedbedbbb44eca', class: 'button-group' }, h("button", { key: '68aa5ac2abcbb678914637448dc0e1286dcd9f60', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: 'ef2b471278c0891ff590b2e66f06dd3d7cc012d7', name: "menu-alt-2" })), h("button", { key: '8288c246d2d84d0dad580ff10c021316a1663561', onClick: () => {
+            } }, h("ls-icon", { key: '978c2e4fbe2e4a86f2ec30fd73e84b519d0f3ccd', name: "menu-alt-2" })), h("button", { key: 'c7a4ba74b99c9959960e8c205cd95dd24ad6d142', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '6421c04c1e4f5c478d241705056a56da87915629', name: "menu-alt-5" })), h("button", { key: '2b49820deae0b5033aded744e81ef45c82056f89', onClick: () => {
+            } }, h("ls-icon", { key: '0835c5c00ca515f011cf8a691d1d12bf39ec5156', name: "menu-alt-5" })), h("button", { key: '4cf995ffc52a47700fefb7b0bb8f93d9a2095bf4', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: '7d50e4dff96997a72edf1ec85a64ac239dbad905', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: '807a3227a4a9227d9e4b45af198c6e46bb9b6daf', class: 'ls-field-format-bar' }, h("div", { key: 'a7d35f333cf9a4880f386fdc6fbe095ea16947c2', class: "input-wrapper" }, h("ls-icon", { key: '42962ba5d95daf9d7b42026b82f324bcdb777aa7', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: '9a42df2fe45269229ca9455ddbe37f5181aac8e3', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '481857a9a964e03463f0cc01d615cb43a6241df3', onChange: input => {
+            } }, h("ls-icon", { key: '9b4a269af491ed0d34d3e7a1111d07751af0e8b6', name: "menu-alt-3" }))))), this.dataItem && this.dataItem.length === 1 && (h("div", { key: 'a1639d55878526264c0fdfc278f44584f25d532e', class: 'ls-field-format-bar' }, h("div", { key: 'a1337e8b1cc3742761188be5b4d35a395075a11c', class: "input-wrapper" }, h("ls-icon", { key: 'c1cfdbcab44f1758774abfabe9b6eb5a95572447', id: "selectorIcon", name: "selector" }), h("ls-icon", { key: 'aa586a365349e10b2c09098ffe8295fbf01f4986', id: "selectLeadingIcon", name: "typeface" }), h("select", { key: '6c2404caa119edfabbd70b9697fd779c7fe55e5e', onChange: input => {
                 this.alter({ fontName: input.target.value });
-            }, class: 'has-leading-icon' }, h("option", { key: '59291299bebaedeb4e700fd2cdf76801ae784a69', value: "arial" }, "Arial"), h("option", { key: 'c9b1e6e027bccbc7ff49209046c534b94d5b34f3', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'bf444b6ce5ae54eee08a8474528daf6a0e627b49', value: "courier" }, "Courier"), h("option", { key: '6b43f202bc8f95bf3ab118215c00cd6e02b29ca0', value: "helvetica" }, "Helvetica"), h("option", { key: 'b4269c0a064ffeb94021b0ab13518e95a8479979', value: "verdana" }, "Verdana"))), h("div", { key: 'be0735ae2af588126c503e02f0d63e772698e800', class: "input-wrapper" }, h("ls-icon", { key: 'b7854e3245f85bce705d31234d7fb0f86668f018', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'd492a2edcdd42231385e59a01688f7fbd03ae8b4', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
+            }, class: 'has-leading-icon' }, h("option", { key: '7f99c2c3ff9303d07374efbd2cbed51e840a6b07', value: "arial" }, "Arial"), h("option", { key: '33b215ab68d78df213e66a508c71326fe8f2c0df', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '74beff2c20bdb1f04c1ad493a0ab4f4b73723a5f', value: "courier" }, "Courier"), h("option", { key: 'cb71c7f9fb70efb13c899c014455296945e3f937', value: "helvetica" }, "Helvetica"), h("option", { key: '928d454bbf9015fcdcab4c3ed2f25591705304d2', value: "verdana" }, "Verdana"))), h("div", { key: 'e04d0a46ab3524a5bc3e1b2b58d351cc1e530057', class: "input-wrapper" }, h("ls-icon", { key: '34204ae09a79787e1acfaa7aec4d905b7c9f185c', id: "selectLeadingIcon", name: "typesize" }), h("input", { key: 'fa2fa5b6c915f129ec756a203f1537629873b5ff', width: "30", size: 4, value: this.dataItem[0].fontSize, onChange: input => {
                 this.alter({ fontSize: input.target.value });
-            }, class: 'has-leading-icon' })), h("div", { key: '3ae8a14a58209730a436d05c0b7a5bd82f7c4104', class: 'button-group' }, h("button", { key: '86a99f46a58011f9ed4c038a920f6985ebb5665c', onClick: () => {
+            }, class: 'has-leading-icon' })), h("div", { key: '1f979064c092b04c682fc2bde6852f3f948cda1f', class: 'button-group' }, h("button", { key: '6c41315e09d84762c74a225ca7862bc1ec17b9fa', onClick: () => {
                 this.alter({ align: 'left' });
-            } }, h("ls-icon", { key: 'a65a3d16ff909fac651795e337dba173c582932a', name: "menu-alt-2" })), h("button", { key: 'e398de9519a1f2fe5bbef293df94f4b1e26712d8', onClick: () => {
+            } }, h("ls-icon", { key: '4cccc7b7c720e60e9279455ef91bb0c3f0b7b039', name: "menu-alt-2" })), h("button", { key: '531e37c5ce4b7c4c1d58f4c70eb308818e3ac3da', onClick: () => {
                 this.alter({ align: 'center' });
-            } }, h("ls-icon", { key: '81d31a5c324e40e1c0b3a77f82a52f53ba88ae0c', name: "menu-alt-5" })), h("button", { key: '59f6ce6fd22dcaaf0d12324e72623c0bcc9f47ac', onClick: () => {
+            } }, h("ls-icon", { key: '0ed333cada71cd4916246d24f2fb14ac36b46965', name: "menu-alt-5" })), h("button", { key: '94d21c36f06d93a94aab142a56316f0f8c3c69c0', onClick: () => {
                 this.alter({ align: 'right' });
-            } }, h("ls-icon", { key: '7fd9692ef54258aba5a4a629166001b1675d7f6a', name: "menu-alt-3" })))))));
+            } }, h("ls-icon", { key: '303dd2ea923a4b0dce555b21ffbc23c3730c40ca', name: "menu-alt-3" })))))));
     }
     static get style() { return lsFieldFormatCss; }
 }, [257, "ls-field-format", {
@@ -72,6 +72,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsFieldFormat as L, defineCustomElement as d };
-//# sourceMappingURL=p-BIp2Inn2.js.map
+//# sourceMappingURL=p-CixKuBuL.js.map
 
-//# sourceMappingURL=p-BIp2Inn2.js.map
+//# sourceMappingURL=p-CixKuBuL.js.map

package/dist/components/{p-BIp2Inn2.js.map → p-CixKuBuL.js.map}

@@ -1 +1 @@
-{"file":"p-BIp2Inn2.js","mappings":"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","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='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 } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\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  // 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  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\" input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <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              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n            </div>\n            <div class=\"input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input width=\"30\" size={4} class={'has-leading-icon'} />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\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\">\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <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\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                width=\"30\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\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              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\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      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CixKuBuL.js","mappings":"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","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='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 } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\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  // 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  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 && (\n          <div class={'ls-field-format-bar'}>\n            <div class=\" input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <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              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n            </div>\n            <div class=\"input-wrapper\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input width=\"30\" size={4} class={'has-leading-icon'} />\n            </div>\n            <div class={'button-group'}>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'left' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\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\">\n              <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>\n              <ls-icon id=\"selectLeadingIcon\" name=\"typeface\"></ls-icon>\n              <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\">\n              <ls-icon id=\"selectLeadingIcon\" name=\"typesize\"></ls-icon>\n              <input\n                width=\"30\"\n                size={4}\n                value={this.dataItem[0].fontSize}\n                onChange={input => {\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              >\n                <ls-icon name=\"menu-alt-2\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'center' });\n                }}\n              >\n                <ls-icon name=\"menu-alt-5\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.alter({ align: 'right' });\n                }}\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      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-PVKJexBt.js → p-CoH616os.js}

@@ -1,10 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DjfDnBZ1.js';
-import { d as defineCustomElement$6 } from './p-DS45bzgL.js';
-import { d as defineCustomElement$5 } from './p-BuHDdmKo.js';
-import { d as defineCustomElement$4 } from './p-BIp2Inn2.js';
-import { d as defineCustomElement$3 } from './p-DKmDGdr_.js';
-import { d as defineCustomElement$2 } from './p-BoA6mH9f.js';
-import { d as defineCustomElement$1 } from './p-BBfc4kkx.js';
+import { d as defineCustomElement$3 } from './p-CixKuBuL.js';
+import { d as defineCustomElement$2 } from './p-BFSBsh85.js';
+import { d as defineCustomElement$1 } from './p-DOULSSR_.js';
 
 const lsToolbarCss = ":host{position:relative;display:flex;width:100%;align-items:center;justify-content:center}.rowbox{position:absolute;top:1rem;display:flex;padding:0.5rem;justify-content:center;align-items:center;gap:0.5rem;width:fit-content;border-radius:1rem;border:1px solid var(--gray-20, #edeff2);background:var(--white, #fff);margin-bottom:1rem;z-index:200}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active,select:active,textarea:active{border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa)}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
 
@@ -46,7 +43,7 @@ const LsToolbar = /*@__PURE__*/ proxyCustomElement(class LsToolbar extends H {
         this.update.emit(diffs);
     }
     render() {
-        return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }), h("ls-field-alignment", { dataItem: this.dataItem }), h("ls-field-distribute", { dataItem: this.dataItem }), h("ls-field-size", { dataItem: this.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: '7790e788903c493268ab783df10ebce9662afc84' })));
+        return (h(Host, { key: 'c43519161f0c44b7f06b5b4e2a14bd81d83ecfdc' }, this.dataItem && this.dataItem.length > 1 ? (h("div", { class: 'rowbox' }, h("ls-field-format", { dataItem: this?.dataItem }))) : (h("div", { class: 'rowbox' }, this.dataItem && this.dataItem.length === 1 ? (h("ls-field-format", { dataItem: this?.dataItem })) : (h("ls-participant-select", { roles: this.template?.roles, dataItem: this?.dataItem })))), h("slot", { key: 'e20ff476ede1359973876658c5e70fd6039b2e3d' })));
     }
     static get style() { return lsToolbarCss; }
 }, [257, "ls-toolbar", {
@@ -58,29 +55,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ls-toolbar", "ls-field-alignment", "ls-field-distribute", "ls-field-format", "ls-field-size", "ls-icon", "ls-participant-select"];
+    const components = ["ls-toolbar", "ls-field-format", "ls-icon", "ls-participant-select"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-toolbar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LsToolbar);
             }
             break;
-        case "ls-field-alignment":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ls-field-distribute":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
         case "ls-field-format":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ls-field-size":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
@@ -100,6 +82,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsToolbar as L, defineCustomElement as d };
-//# sourceMappingURL=p-PVKJexBt.js.map
+//# sourceMappingURL=p-CoH616os.js.map
 
-//# sourceMappingURL=p-PVKJexBt.js.map
+//# sourceMappingURL=p-CoH616os.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CoH616os.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,kqJAAkqJ;;MCQ1qJ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;AACpB;;;AAGG;AAIH,IAAA,QAAQ;AAER;;;AAGG;AACK,IAAA,QAAQ;AAEhB;;;AAGG;AACK,IAAA,MAAM;AAOd,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAKN,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,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IACxC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,QAAQ,EAAA,EAOlB,CAAA,CAAA,iBAAA,EAAA,EAAiB,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAI,CACzC,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,QAAQ,EACjB,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAC1C,CAAiB,CAAA,iBAAA,EAAA,EAAA,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAI,CAAA,KAE7C,CAAuB,CAAA,uBAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAI,CAAA,CACjF,CACG,CACP,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-toolbar/ls-toolbar.css?tag=ls-toolbar&encapsulation=shadow","src/components/ls-toolbar/ls-toolbar.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.rowbox {\n  position: absolute;\n  top: 1rem;\n  display: flex;\n  padding: 0.5rem;\n  justify-content: center;\n  align-items: center;\n  gap: 0.5rem;\n  width: fit-content;\n  border-radius: 1rem;\n  border: 1px solid var(--gray-20, #edeff2);\n  background: var(--white, #fff);\n  margin-bottom: 1rem;\n  z-index: 200;\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, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSApiTemplate, LsDocumentViewer, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-toolbar',\n  styleUrl: 'ls-toolbar.css',\n  shadow: true,\n})\nexport class LsToolbar {\n  /**\n   * The selected items information (as JSON).\n   * {LSApiElement[]}\n   */\n  @Prop({\n    mutable: true,\n  })\n  dataItem: LSApiElement[];\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\n\n  /**\n   * The base template information (as JSON).\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\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  // 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  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 ? (\n          <div class={'rowbox'}>\n            {/* <select class=\"ls-participant-select\">\n              <option value=\"0\">Sender</option>\n              {this.template.roles.map(r => (\n                <option value={r.id}>{r.name}</option>\n              ))}\n            </select> */}\n            <ls-field-format dataItem={this?.dataItem} />\n          </div>\n        ) : (\n          <div class={'rowbox'}>\n            {this.dataItem && this.dataItem.length === 1 ? (\n              <ls-field-format dataItem={this?.dataItem} />\n            ) : (\n              <ls-participant-select roles={this.template?.roles} dataItem={this?.dataItem} />\n            )}\n          </div>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}