legalesign-document-viewer 0.4.8 → 0.4.10

package/dist/components/{p-CwVY532N.js → p-DoQc-O0l.js}

@@ -1,12 +1,14 @@
-import { p as proxyCustomElement, H, h } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h } from './p-BhZ5Udbm.js';
 import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-gQGwMtz0.js';
 
-const lsTooltipCss = ":host{position:absolute;pointer-events:none}*{box-sizing:border-box;margin:0;padding:0}.tooltip{position:absolute;border-radius:0.5rem;background:var(--gray-100, #45484d);color:var(--white, #fff);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;padding:0.5rem 0.75rem;max-width:200px;width:max-content;white-space:wrap;z-index:1000;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)}.tooltip-title{font-size:0.875rem;font-weight:600;line-height:1rem;margin-bottom:0.25rem}.tooltip.visible{opacity:1;visibility:block;scale:1;transition:opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out}.tooltip.hidden{opacity:0;scale:0.85;transition:opacity 0.2s ease-in, scale 0.1s 0.5s ease-in}#arrow{position:absolute;background:var(--gray-100, #45484d);width:0.625rem;height:0.625rem;transform:rotate(45deg);border-radius:0.125rem}";
+const lsTooltipCss = () => `:host{position:absolute;pointer-events:none}*{box-sizing:border-box;margin:0;padding:0}.tooltip{position:absolute;border-radius:0.5rem;background:var(--gray-100, #45484d);color:var(--white, #fff);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;padding:0.5rem 0.75rem;max-width:200px;width:max-content;white-space:wrap;z-index:1000;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -1px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)}.tooltip-title{font-size:0.875rem;font-weight:600;line-height:1rem;margin-bottom:0.25rem}.tooltip.visible{opacity:1;visibility:block;scale:1;transition:opacity 0.3s 1s ease-out, scale 0.1s 0.5s ease-out}.tooltip.hidden{opacity:0;scale:0.85;transition:opacity 0.2s ease-in, scale 0.1s 0.5s ease-in}#arrow{position:absolute;background:var(--gray-100, #45484d);width:0.625rem;height:0.625rem;transform:rotate(45deg);border-radius:0.125rem}`;
 
 const LsTooltip = /*@__PURE__*/ proxyCustomElement(class LsTooltip extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     get el() { return this; }
@@ -64,9 +66,9 @@ const LsTooltip = /*@__PURE__*/ proxyCustomElement(class LsTooltip extends H {
     static get watchers() { return {
         "referenceElement": ["updateReferenceHandler"]
     }; }
-    static get style() { return lsTooltipCss; }
-}, [257, "ls-tooltip", {
-        "referenceElement": [1040, "reference-element"],
+    static get style() { return lsTooltipCss(); }
+}, [769, "ls-tooltip", {
+        "referenceElement": [1040],
         "placement": [1025],
         "tooltipText": [1025, "tooltip-text"],
         "tooltipTitle": [1025, "tooltip-title"],
@@ -82,8 +84,8 @@ function defineCustomElement() {
     const components = ["ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsTooltip);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsTooltip);
             }
             break;
     } });
@@ -91,6 +93,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsTooltip as L, defineCustomElement as d };
-//# sourceMappingURL=p-CwVY532N.js.map
+//# sourceMappingURL=p-DoQc-O0l.js.map
 
-//# sourceMappingURL=p-CwVY532N.js.map
+//# sourceMappingURL=p-DoQc-O0l.js.map

package/dist/components/p-DoQc-O0l.js.map

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

package/dist/components/p-DsHIGb44.js

@@ -0,0 +1,110 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$2 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$1 } from './p-CJSY3-Q3.js';
+
+const lsFieldPropertiesAdvancedCss = () => `:host,.field-set{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}*{margin:0;box-sizing:border-box}.expand-fields-row{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.25rem;cursor:pointer;color:var(--gray-80, #6c6e73);font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.expand-fields-row p{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem;}.field-set{display:flex;flex-direction:column;gap:1rem;width:100%}.ls-field-properties-section{display:flex;position:relative;flex-direction:column;gap:0.5rem}.row{flex-direction:row;align-items:center;justify-content:space-between}.multi-button-group-row{display:flex;gap:0.5rem}.ls-field-properties-section-text{display:flex;flex-direction:column;gap:0.25rem;padding:0.25rem}.ls-field-properties-section-title{color:var(--gray-90, #5e6066);font-size:1rem;font-style:normal;font-weight:500;line-height:1.25rem;}.ls-field-properties-section-description{overflow:hidden;color:var(--gray-80, #6c6e73);text-overflow:ellipsis;font-size:0.75rem;font-style:normal;font-weight:400;line-height:0.75rem;}.input-row{display:flex;gap:0.5rem}.input-row .input-wrapper input{width:9.313rem;max-width:9.313rem}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem}.input-wrapper{position:relative;width:100%}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIconDisabled{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-50, #d8d9dc)}.has-leading-icon{padding-left:2.5rem}input,select,textarea{border:1px solid var(--gray-40, #d8d9dc);box-shadow:0 1px 0.125rem rgba(0, 0, 0, 0.05);padding:0.5rem 0.75rem;font-family:var(--font-family);font-size:var(--text-sm);border-radius:0.5rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #fff)}input:focus:not(:disabled),select:focus:not(:disabled),textarea:focus:not(:disabled){outline:none;box-shadow:0 0 0 0.25rem var(--primary-40, #79adfc);border-color:var(--primary-60, #4456f6);background-color:var(--white, #fff)}input:active:not(:disabled),select:active:not(:disabled),textarea:active:not(:disabled){border-color:var(--primary-50, #5185ff)}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background-color:var(--gray-10, #f7f8fa);color:var(--gray-50, #d8d9dc);box-shadow:none}input[type='checkbox']{appearance:none;position:relative;height:1rem;width:1rem;padding:0.25rem;border-radius:var(--radius-sm);border:1px solid #d1d5db;background-color:#ffffff;cursor:pointer}input[type='checkbox']:checked,input[type='checkbox'].indeterminate{background-color:var(--primary-60, #4456f6);border:none}input[type='checkbox']:checked::after{content:'';position:absolute;top:45%;left:50%;transform:translate(-50%, -50%) rotate(-45deg) scale(-1, 1);width:0.5rem;height:0.25rem;border-bottom:0.125rem solid white;border-right:0.125rem solid white}input[type='checkbox'].indeterminate::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0.5rem;height:0.125rem;background-color:white}input[type='checkbox']:checked:hover,input[type='checkbox'].indeterminate:hover{background-color:var(--primary-70, #2134dc);border:none}input[type='checkbox']:hover{border:1px solid #9ca3af}input[type='checkbox']:focus,input[type='checkbox']:active{outline:none;box-shadow:0 0 0 0.25rem var(--primary-20, #c7ddff);background-color:#f0f4f8}input[type='checkbox']:disabled{background-color:#f3f4f6;outline:none;cursor:not-allowed}input[type='checkbox']:disabled:checked{background-color:#e5e7eb;border:none;outline:none;cursor:not-allowed}.checkbox-container{display:flex;gap:0.5rem;width:100%}.checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #0c7cba)}button{border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background-color:var(--primary-60, #4456f6);color:white;text-transform:capitalize;min-height:2.25rem;min-width:2.25rem}button.tertiaryGrey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #787a80)}button.tertiaryGrey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip;width:100%}.button-group button{display:flex;width:100%;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;color:var(--gray-80, #6c6e73)}.button-group button:disabled{background:var(--gray-10, #f7f8fa);cursor:not-allowed;color:var(--gray-50, #d8d9dc)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsFieldPropertiesAdvanced = /*@__PURE__*/ proxyCustomElement(class LsFieldPropertiesAdvanced extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.update = createEvent(this, "update", 7);
+    }
+    dataItem;
+    expanded = false;
+    mutate;
+    update;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff, bounceDelay = 0) {
+        console.log('Altering advanced props:', diff);
+        let diffs = [];
+        if (this.isMultiple(this.dataItem)) {
+            this.dataItem = this.dataItem.map(di => {
+                return { ...di, ...diff };
+            });
+            diffs = this.dataItem.map(di => {
+                return { action: 'update', data: { ...di, ...diff } };
+            });
+        }
+        else if (this.isSingle(this.dataItem)) {
+            this.dataItem = { ...this.dataItem, ...diff };
+            diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
+        }
+        if (bounceDelay === 0) {
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }
+        else {
+            this.debounce(diffs, bounceDelay);
+        }
+    }
+    titletimer;
+    debounce(diffs, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.update.emit(diffs);
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return '';
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    render() {
+        return (h(Host, { key: 'adc2b87c39dbe48a990e310d319488193fa4363f' }, h("div", { key: 'afe76dc7c97f20a5d02c468749efc624f8a5bd2f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: 'd90e8d469d9e4243f28fbb98725be48589546193', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), h("p", { key: 'd856a8c15b922468197d35e4b6aee05530a08699' }, "Advanced Properties")), this.expanded && (h("div", { key: '005a9eee056ecfa5c580a719cc80515795dddefc', class: 'field-set' }, h("ls-props-section", { key: 'ffc3a6ce7ba2b75d4b1dfaf92e2a75a451f55988', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '0c0486fa164da4f0b38bebbd18d94dd53ebd9181', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+                console.log(e);
+                this.alter({ fieldOrder: e.target.value }, 100);
+            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: 'ba15bc93246434122c4fb2643b2219f3b7d34d83', sectionTitle: "Ref. Name" }, h("input", { key: 'f6863eb4dda557936717be368a3bb97aa66a743a', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '92abbd7166def72c7022722c1ce974176715002f', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '7bdcb137b35ec05b952cb20794e18805ec044285', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: 'f2d2fc0434936e4bff0f73cec02b7b691374530f', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: 'e2b51d08c8919fce07fb9c59cf8d00d7b79faa9e', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: '6d490150eaab50b67ffc5cd0f598d72da8367d1b', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: 'c08d94ebd13055167b1e1e5ae914007213cbabfc', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '22170d401110443ff1559b3b937a6e64e01ffec1', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: '3f561f9faf0924e8c4bc853dcc0cbcb41211a358', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+    }
+    static get style() { return lsFieldPropertiesAdvancedCss(); }
+}, [769, "ls-field-properties-advanced", {
+        "dataItem": [1040],
+        "expanded": [1028]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-field-properties-advanced", "ls-icon", "ls-props-section"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-field-properties-advanced":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsFieldPropertiesAdvanced);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-props-section":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsFieldPropertiesAdvanced as L, defineCustomElement as d };
+//# sourceMappingURL=p-DsHIGb44.js.map
+
+//# sourceMappingURL=p-DsHIGb44.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DsHIGb44.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-field-properties-advanced/ls-field-properties-advanced.css?tag=ls-field-properties-advanced&encapsulation=shadow","src/components/ls-field-properties-advanced/ls-field-properties-advanced.tsx"],"sourcesContent":[":host, .field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n  position: relative;\n}\n\n* {\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.expand-fields-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.25rem;\n  cursor: pointer;\n  color: var(--gray-80, #6c6e73);\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.expand-fields-row p {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem; /* 150% */\n}\n\n.field-set {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}\n\n.ls-field-properties-section {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.multi-button-group-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ls-field-properties-section-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.ls-field-properties-section-title {\n  color: var(--gray-90, #5e6066);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n}\n\n.ls-field-properties-section-description {\n  overflow: hidden;\n  color: var(--gray-80, #6c6e73);\n  text-overflow: ellipsis;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 0.75rem; /* 120% */\n}\n\n.input-row {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.input-row .input-wrapper input {\n  width: 9.313rem;\n  max-width: 9.313rem;\n}\n\n/* Global Styles */\n\np {\n  color: var(--gray-80, #6c6e73);\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n}\n\na {\n  color: var(--primary-60, #4456f6);\n  font-size: var(--text-sm);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--text-sm-line-height);\n  cursor: pointer;\n}\n\na:hover {\n  text-decoration: underline;\n  color: var(--primary-70, #2134dc);\n}\n\n.button-link,\n.button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.input-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n#selectorIcon {\n  position: absolute;\n  top: 50%;\n  right: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-80, #6c6e73);\n}\n\n#selectLeadingIconDisabled {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: var(--gray-50, #d8d9dc);\n}\n\n\n.has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);\n  padding: 0.5rem 0.75rem;\n  font-family: var(--font-family);\n  font-size: var(--text-sm);\n  border-radius: 0.5rem;\n  color: var(--gray-100, #45484d);\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: var(--gray-60, #afb0b2);\n}\n\ninput:hover:not(:disabled),\nselect:hover:not(:disabled),\ntextarea:hover:not(:disabled) {\n  border-color: var(--gray-50, #c8c9cc);\n  background-color: var(--white, #fff);\n}\n\ninput:focus:not(:disabled),\nselect:focus:not(:disabled),\ntextarea:focus:not(:disabled) {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);\n  border-color: var(--primary-60, #4456f6);\n  background-color: var(--white, #fff);\n}\n\ninput:active:not(:disabled),\nselect:active:not(:disabled),\ntextarea:active:not(:disabled) {\n  border-color: var(--primary-50, #5185ff);\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: var(--gray-10, #f7f8fa);\n  color: var(--gray-50, #d8d9dc);\n  box-shadow: none;\n}\n\ninput[type='checkbox'] {\n  appearance: none;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n  border: 1px solid #d1d5db;\n  background-color: #ffffff;\n  cursor: pointer;\n}\n\ninput[type='checkbox']:checked,\ninput[type='checkbox'].indeterminate {\n  background-color: var(--primary-60, #4456f6);\n  border: none;\n}\n\ninput[type='checkbox']:checked::after {\n  content: '';\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);\n  width: 0.5rem;\n  height: 0.25rem;\n  border-bottom: 0.125rem solid white;\n  border-right: 0.125rem solid white;\n}\n\ninput[type='checkbox'].indeterminate::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 0.125rem;\n  background-color: white;\n}\n\ninput[type='checkbox']:checked:hover,\ninput[type='checkbox'].indeterminate:hover {\n  background-color: var(--primary-70, #2134dc);\n  border: none;\n}\n\ninput[type='checkbox']:hover {\n  border: 1px solid #9ca3af;\n}\n\ninput[type='checkbox']:focus,\ninput[type='checkbox']:active {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);\n  background-color: #f0f4f8;\n}\n\ninput[type='checkbox']:disabled {\n  background-color: #f3f4f6;\n  outline: none;\n  cursor: not-allowed;\n}\n\ninput[type='checkbox']:disabled:checked {\n  background-color: #e5e7eb;\n  border: none;\n  outline: none;\n  cursor: not-allowed;\n}\n\n.checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.checkbox-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.form-label {\n  color: var(--gray-100, #45484d);\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: var(--primary-60, #0c7cba);\n}\n\nbutton {\n  border: 0;\n  appearance: button;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-lg);\n  background-color: var(--primary-60, #4456f6);\n  color: white;\n  text-transform: capitalize;\n  min-height: 2.25rem;\n  min-width: 2.25rem;\n}\n\nbutton.tertiaryGrey {\n  border: 1px solid var(--gray-40, #d8d9dc);\n  background-color: white;\n  color: var(--gray-80, #787a80);\n}\n\nbutton.tertiaryGrey:hover {\n  border: 1px solid var(--gray-50, #c8c9cc);\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group {\n  display: flex;\n  border-radius: 0.5rem;\n  border: 1px solid var(--gray-30, #e0e2e5);\n  background: var(--white, #ffffff);\n  overflow: clip;\n  width: 100%;\n}\n\n.button-group button {\n  display: flex;\n  width: 100%;\n  background: transparent;\n  border-radius: unset;\n  padding: 0.25rem 0.75rem;\n  min-width: 2.156rem;\n  color: var(--gray-80, #6c6e73);\n}\n\n.button-group button:disabled {\n  background: var(--gray-10, #f7f8fa);\n  cursor: not-allowed;\n  color: var(--gray-50, #d8d9dc);\n}\n\n.button-group button:hover {\n  background: var(--gray-10, #f7f8fa);\n}\n\n.button-group > :first-child {\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n.button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.button-group > :not(:first-child) {\n  border-left: 1px solid var(--gray-30, #e0e2e5);\n}\n","import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-field-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.update.emit(diffs);\n      this.mutate.emit(diffs);\n    }, delay);\n  }\n\n  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return '';\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key];\n    }\n    return '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"1.25rem\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Myru1I0U.js → p-Du60SSaA.js}

@@ -1,12 +1,14 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
-import { d as defineCustomElement$1 } from './p-95nSEls8.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defineCustomElement$1 } from './p-D95fiMAP.js';
 
-const lsInputWrapperCss = "*{margin:0;padding:0;box-sizing:border-box}:host{position:relative}#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)}";
+const lsInputWrapperCss = () => `*{margin:0;padding:0;box-sizing:border-box}:host{position:relative}#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)}`;
 
 const LsInputWrapper = /*@__PURE__*/ proxyCustomElement(class LsInputWrapper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     leadingIcon;
@@ -14,8 +16,8 @@ const LsInputWrapper = /*@__PURE__*/ proxyCustomElement(class LsInputWrapper ext
     render() {
         return (h(Host, { key: '80c79e120bd0d44c11cac3e8096715e59d21a793' }, h("ls-icon", { key: 'a8af28777cb9cea7294075df1714473b8310d98d', id: "selectLeadingIcon", name: this.leadingIcon }), this.select && h("ls-icon", { key: '0e68b967bcb36ea63a3bbd147c4af70916443c68', id: "selectorIcon", name: "selector" }), h("slot", { key: 'c547d8642431a3fc34e36c967bf9789e7b10921d' })));
     }
-    static get style() { return lsInputWrapperCss; }
-}, [257, "ls-input-wrapper", {
+    static get style() { return lsInputWrapperCss(); }
+}, [769, "ls-input-wrapper", {
         "leadingIcon": [1, "leading-icon"],
         "select": [4]
     }]);
@@ -26,12 +28,12 @@ function defineCustomElement() {
     const components = ["ls-input-wrapper", "ls-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-input-wrapper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsInputWrapper);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsInputWrapper);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -40,6 +42,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsInputWrapper as L, defineCustomElement as d };
-//# sourceMappingURL=p-Myru1I0U.js.map
+//# sourceMappingURL=p-Du60SSaA.js.map
 
-//# sourceMappingURL=p-Myru1I0U.js.map
+//# sourceMappingURL=p-Du60SSaA.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Du60SSaA.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,+UAA+U,CAAC;;MCQpW,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;AACjB,IAAA,WAAW;IACX,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,CAAA,EACjE,IAAI,CAAC,MAAM,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAW,CAAA,EACrE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-input-wrapper/ls-input-wrapper.css?tag=ls-input-wrapper&encapsulation=shadow","src/components/ls-input-wrapper/ls-input-wrapper.tsx"],"sourcesContent":["* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\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\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Icon } from '../../components';\n\n@Component({\n  tag: 'ls-input-wrapper',\n  styleUrl: 'ls-input-wrapper.css',\n  shadow: true,\n})\nexport class LsInputWrapper {\n  @Prop() leadingIcon: Icon;\n  @Prop() select: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <ls-icon id=\"selectLeadingIcon\" name={this.leadingIcon}></ls-icon>\n        {this.select && <ls-icon id=\"selectorIcon\" name=\"selector\"></ls-icon>}\n        <slot></slot> \n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CB2IouRT.js → p-Dz_jxFKX.js}

@@ -1,11 +1,13 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BnGihP6t.js';
+import { t as transformTag, p as proxyCustomElement, H, h, c as Host } from './p-BhZ5Udbm.js';
 
-const lsEditorTableCss = ":host{display:block;z-index:100;position:absolute;top:0px;left:0px}table{background-color:azure;border:1px solid black}td{border:1px solid black}";
+const lsEditorTableCss = () => `:host{display:block;z-index:100;position:absolute;top:0px;left:0px}table{background-color:azure;border:1px solid black}td{border:1px solid black}`;
 
 const LsEditorTable = /*@__PURE__*/ proxyCustomElement(class LsEditorTable extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     get component() { return this; }
@@ -33,8 +35,8 @@ const LsEditorTable = /*@__PURE__*/ proxyCustomElement(class LsEditorTable exten
     render() {
         return (h(Host, { key: '55c508ab25969ad8649fb15ef7a0e20d3e212bde' }, h("table", { key: '8b9154ecc83d4a09b67a83441c6e73692380c72a', id: "ls-editor-table" }), h("slot", { key: 'f3eea5f381266897fcf5df9d08959076b5ba4385' })));
     }
-    static get style() { return lsEditorTableCss; }
-}, [257, "ls-editor-table", {
+    static get style() { return lsEditorTableCss(); }
+}, [769, "ls-editor-table", {
         "editor": [16]
     }]);
 function defineCustomElement() {
@@ -44,8 +46,8 @@ function defineCustomElement() {
     const components = ["ls-editor-table"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-editor-table":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsEditorTable);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsEditorTable);
             }
             break;
     } });
@@ -53,6 +55,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsEditorTable as L, defineCustomElement as d };
-//# sourceMappingURL=p-CB2IouRT.js.map
+//# sourceMappingURL=p-Dz_jxFKX.js.map
 
-//# sourceMappingURL=p-CB2IouRT.js.map
+//# sourceMappingURL=p-Dz_jxFKX.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Dz_jxFKX.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,iJAAiJ,CAAC;;MCQrK,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAExB;;;AAGA;AACQ,IAAA,MAAM;IAEd,gBAAgB,GAAA;AACd,QAAA,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB;QAChG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAC/C,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE;AACrC,YAAA,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC;YAE/B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;YAElC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC;YAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK;AAC3C,YAAA,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC;AAElC,YAAA,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC;AAChC,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,iBAAiB,EACnB,CAAA,EACR,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-editor-table/ls-editor-table.css?tag=ls-editor-table&encapsulation=shadow","src/components/ls-editor-table/ls-editor-table.tsx"],"sourcesContent":[":host {\n  display: block;\n  z-index: 100;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}\n\ntable {\n  background-color: azure;\n  border: 1px solid black\n}\n\ntd {\n  border: 1px solid black\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Dp_6qCVD.js → p-GUP3f2W9.js}

@@ -1,16 +1,18 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BnGihP6t.js';
-import { d as defaultRolePalette } from './p-CwCWCxsI.js';
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BhZ5Udbm.js';
+import { d as defaultRolePalette } from './p-BKrsDBDB.js';
 import { a as attachAllTooltips } from './p-Cb8nDMs-.js';
-import { d as defineCustomElement$3 } from './p-95nSEls8.js';
-import { d as defineCustomElement$2 } from './p-Myru1I0U.js';
-import { d as defineCustomElement$1 } from './p-CwVY532N.js';
+import { d as defineCustomElement$3 } from './p-D95fiMAP.js';
+import { d as defineCustomElement$2 } from './p-Du60SSaA.js';
+import { d as defineCustomElement$1 } from './p-DoQc-O0l.js';
 
-const lsParticipantCardCss = ":host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch}.top-card{border-radius:1rem 1rem 0 0}.full-card{border-radius:1rem}.bottom-card{border-radius:0 0 1rem 1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){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.tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0c34b8)}button.destructive{border:1px solid var(--red-60, #f04438);background:transparent;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0);background-color:var(--red-10, #fff1f0)}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-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 lsParticipantCardCss = () => `:host{display:block}*{box-sizing:border-box;margin:0}.participant-card{display:flex;padding:0.625rem;flex-direction:column;align-items:flex-start;gap:0.5rem;align-self:stretch}.top-card{border-radius:1rem 1rem 0 0}.full-card{border-radius:1rem}.bottom-card{border-radius:0 0 1rem 1rem}.participant-card-inner{width:100%;display:flex;flex-direction:column;gap:0.5rem}.hidden{visibility:hidden;display:none}.form-button-set{display:flex;gap:0.5rem}.role-label{display:flex;padding:0.125rem 0.5rem;justify-content:center;align-items:center;gap:0.25rem;border-radius:0.5rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.role-label.fields{border-radius:1rem;margin-top:0.5rem}.innerButton{margin:0px;padding:0px;max-height:1.25rem !important;max-width:1.25rem !important;background-color:transparent;border:none;cursor:pointer;color:var(--default-button-colour)}.innerButton:hover{color:var(--hover-button-colour)}.participant-card-top-items{display:flex;width:100%;justify-content:space-between;align-items:center}.button-set{display:flex;gap:0.125rem}.participant-text-description{font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;}.participant-text-type{font-style:normal;font-weight:400;line-height:1.25rem;}.titleButton{width:100%;text-align:left;background-color:transparent;border:none}.full-width{width:100%}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:2.25rem;width:100%}.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:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){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.tertiary{border:1px solid var(--primary-60, #4456f6);background:transparent;color:var(--primary-70, #2134dc)}button.tertiary:hover{border:1px solid var(--primary-70, #2134dc);border:1px solid var(--primary-80, #0c34b8)}button.destructive{border:1px solid var(--red-60, #f04438);background:transparent;color:var(--red-60)}button.destructive:hover{border:1px solid var(--red-70, #d92d20);background:var(--red-10, #fff1f0);background-color:var(--red-10, #fff1f0)}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-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 LsParticipantCard = /*@__PURE__*/ proxyCustomElement(class LsParticipantCard extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.mutate = createEvent(this, "mutate", 7);
         this.update = createEvent(this, "update", 7);
@@ -116,8 +118,8 @@ const LsParticipantCard = /*@__PURE__*/ proxyCustomElement(class LsParticipantCa
     static get watchers() { return {
         "editable": ["modeHandler"]
     }; }
-    static get style() { return lsParticipantCardCss; }
-}, [257, "ls-participant-card", {
+    static get style() { return lsParticipantCardCss(); }
+}, [769, "ls-participant-card", {
         "signer": [16],
         "index": [2],
         "editable": [1028],
@@ -136,22 +138,22 @@ function defineCustomElement() {
     const components = ["ls-participant-card", "ls-icon", "ls-input-wrapper", "ls-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "ls-participant-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LsParticipantCard);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsParticipantCard);
             }
             break;
         case "ls-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "ls-input-wrapper":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;
         case "ls-tooltip":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -160,6 +162,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LsParticipantCard as L, defineCustomElement as d };
-//# sourceMappingURL=p-Dp_6qCVD.js.map
+//# sourceMappingURL=p-GUP3f2W9.js.map
 
-//# sourceMappingURL=p-Dp_6qCVD.js.map
+//# sourceMappingURL=p-GUP3f2W9.js.map

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

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