legalesign-document-viewer 0.4.9 → 0.5.0

package/dist/components/p-w7mOEBr4.js

@@ -0,0 +1,162 @@
+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-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 LsParticipantCard = /*@__PURE__*/ proxyCustomElement(class LsParticipantCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mutate = createEvent(this, "mutate", 7);
+        this.opened = createEvent(this, "opened", 7);
+        this.addParticipant = createEvent(this, "addParticipant", 7);
+    }
+    get component() { return this; }
+    signer;
+    index;
+    editable = false;
+    template;
+    mutate;
+    opened;
+    // 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) {
+        this.signer = { ...this.signer, ...diff };
+        this.debounce(this.signer, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    deleteHandler(role) {
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.mutate.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    modeHandler(_editable) {
+        // When opened fire an event to let the parent handle closing other controls
+        if (_editable) {
+            this.opened.emit(this.signer);
+        }
+    }
+    addParticipant;
+    swapUpBtn;
+    swapDownBtn;
+    editBtn;
+    deleteParticipantBtn;
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        const participantFields = this.template.elementConnection.templateElements.filter(f => f.signer === this.signer.signerIndex) || [];
+        const child = this.template.roles.find(r => r.signerParent === this.signer.id);
+        return (h(Host, { key: '6544ccd5c1f82dbf34c009cfebd4971e5296dafe' }, h("div", { key: '94c77eb16f286db1d9f8d2ef7a221bf04803ba25', class: 'participant-card' + (child ? ' top-card' : this.signer?.signerParent ? ' bottom-card' : ' full-card'), style: {
+                background: defaultRolePalette[this.signer?.signerIndex % 100].s10,
+                border: `1px solid ${defaultRolePalette[this.signer?.signerIndex % 100].s60}`,
+                marginTop: this.signer.roleType === 'WITNESS' ? '-0.813rem' : '0',
+            }, onMouseEnter: e => e.currentTarget.querySelector('.button-set')?.classList.remove('hidden'), onMouseLeave: e => e.currentTarget.querySelector('.button-set')?.classList.add('hidden'), onDblClick: () => {
+                this.editable = true;
+            } }, h("div", { key: '210f95f85e9c270924fbeddb018f5fa1c21b72cc', class: 'participant-card-inner' }, h("div", { key: '137f2a79ce29db51973ec1bdbebc6e9fe28d3abb', class: 'participant-card-top-items' }, h("div", { key: '8874fe0285e86cf57e3c10e2848f909ca9afa87b', class: 'role-label', style: {
+                background: defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, h("ls-icon", { key: 'a06597041afdee46ec2953b8908819ce17e642f3', name: this.signer?.roleType === 'APPROVER' ? 'check-circle' : this.signer?.roleType === 'SIGNER' ? 'signature' : 'eye' }), (this.signer?.ordinal || '')), h("div", { key: '719fde9663b77fcd59a480c7549ab807111e6ca6', class: 'button-set hidden' }, this.index > 0 && this.signer.roleType !== 'WITNESS' && (h("div", { key: '988f376f318682781f5a462216bb9b95445478db', class: "innerButton", onClick: () => {
+                this.swapHandler(this.signer, this.template.roles[this.index - 1]);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Move Up" }, h("ls-icon", { key: '0d63c5756bc03f707048bf12c051fedf48efbfba', name: "arrow-up", size: "1.125rem" }))), this.signer.signerIndex !== this.template.roles.length && this.signer.roleType !== 'WITNESS' && (h("div", { key: '69a89fda199b1059bff753e4914e32f11aa9e0f3', class: "innerButton", onClick: () => {
+                this.swapHandler(this.signer, this.template.roles[this.index + 1]);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Move Down" }, h("ls-icon", { key: '8709b37acbffc8fb0044e437827c8cf549dba129', name: "arrow-down", size: "1.125rem" }))), h("div", { key: 'f92fee2c1179c0bafb1d2e03b88dfab22ec7411b', class: "innerButton", onClick: () => {
+                this.editable = !this.editable;
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            } }, h("ls-icon", { key: '0a06776685d90355af3e6a619e2bfe8e34e95196', name: this.editable ? 'check' : 'pencil-alt', size: "1.125rem", "data-tooltip": this.editable ? "Save Changes" : "Edit Participant" })), h("div", { key: '396f7f5c35c35d6def57a3562c86680d8fb004df', class: "innerButton", onClick: () => {
+                this.deleteHandler(this.signer);
+            }, style: {
+                '--default-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s40,
+                '--hover-button-colour': defaultRolePalette[this.signer?.signerIndex % 100].s60,
+            }, "data-tooltip": "Delete Participant", "data-tooltip-placement": "top-end" }, h("ls-icon", { key: 'b08c1a184b9f3e7bc13713d19de94ad1dbe89254', name: "trash", size: "1.125rem" })))), this.editable ? (h("div", { class: 'participant-card-inner' }, this.signer?.roleType !== 'WITNESS' ? (h("ls-input-wrapper", { select: true, leadingIcon: this.signer?.roleType === 'APPROVER' ? 'check-circle' : 'signature' }, h("select", { name: "roleType", id: "role-type", class: 'has-leading-icon', onChange: e => this.alter({ roleType: e.target.value }), disabled: child ? true : false }, h("option", { value: "APPROVER", selected: this.signer?.roleType === 'APPROVER' }, "Approver"), h("option", { value: "SIGNER", selected: this.signer?.roleType === 'SIGNER' }, "Signer")))) : (h("ls-input-wrapper", { leadingIcon: "eye" }, h("input", { name: "roleType", id: "role-type", class: 'has-leading-icon', disabled: true, value: "Witness" }))), h("input", { type: "text", id: "participant-description", name: "participantDescription", placeholder: "Description, eg. Tenant 1, Agent", defaultValue: this.signer.name, onInput: e => this.alter({ name: e.target.value }), onKeyUp: e => {
+                if (e.key === 'Enter' || e.keyCode === 13)
+                    this.editable = false;
+            } }), this.signer?.roleType === 'SIGNER' && !child ? (h("button", { class: 'tertiary', onClick: () => this.addParticipant.emit({ type: 'WITNESS', parent: this.signer.id }) }, h("ls-icon", { name: "plus", style: { marginRight: '0.25rem' } }), "Add Witness")) : this.signer?.roleType === 'SIGNER' && child ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(child);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : this.signer?.roleType === 'WITNESS' ? (h("button", { class: 'destructive', onClick: () => {
+                this.deleteHandler(this.signer);
+            } }, h("ls-icon", { name: "minus-sm", style: { marginRight: '0.25rem' } }), "Remove Witness")) : null)) : (h("div", { class: 'participant-card-text' }, h("p", { class: "participant-text-description", style: {
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s100,
+            } }, this.signer.name || `${this.signer.signerIndex > 100 ? 'Witness' : 'Signer'} ${this.signer.signerIndex + 1}`), h("p", { class: "participant-text-type", style: {
+                color: defaultRolePalette[this.signer?.signerIndex % 100].s80,
+                textTransform: 'capitalize',
+            } }, this.signer.roleType.toLowerCase()), this.signer?.roleType !== 'APPROVER' && (h("div", { class: 'role-label fields', style: {
+                background: participantFields.length === 0 ? defaultRolePalette[this.signer?.signerIndex % 100].s60 : defaultRolePalette[this.signer?.signerIndex % 100].s20,
+                color: participantFields.length === 0 ? 'white' : defaultRolePalette[this.signer?.signerIndex % 100].s90,
+            } }, participantFields.length === 0 && h("ls-icon", { name: "exclamation-circle", size: "1rem", style: { marginRight: '0.125rem' } }), participantFields.length === 0 ? 'Signature Required' : `${participantFields.length} ${participantFields.length === 1 ? 'Field' : 'Fields'}`)))))), h("slot", { key: '7a6f8bd6073c0d6c5ef72fe60f0316e89f9ca6eb' }), h("ls-tooltip", { key: '57ee7a3ab8577a205ac07ededa3e71c93b2fa832', id: "ls-tooltip-master" })));
+    }
+    static get watchers() { return {
+        "editable": ["modeHandler"]
+    }; }
+    static get style() { return lsParticipantCardCss(); }
+}, [769, "ls-participant-card", {
+        "signer": [16],
+        "index": [2],
+        "editable": [1028],
+        "template": [16],
+        "swapUpBtn": [32],
+        "swapDownBtn": [32],
+        "editBtn": [32],
+        "deleteParticipantBtn": [32]
+    }, undefined, {
+        "editable": ["modeHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-participant-card", "ls-icon", "ls-input-wrapper", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-participant-card":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsParticipantCard);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ls-input-wrapper":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsParticipantCard as L, defineCustomElement as d };
+//# sourceMappingURL=p-w7mOEBr4.js.map
+
+//# sourceMappingURL=p-w7mOEBr4.js.map

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

@@ -0,0 +1 @@
+{"file":"p-w7mOEBr4.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,48MAA48M,CAAC;;MCYp+M,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;;AAEpB,IAAA,MAAM;AACN,IAAA,KAAK;IACY,QAAQ,GAAY,KAAK;AAC1C,IAAA,QAAQ;AAOhB,IAAA,MAAM;AAON,IAAA,MAAM;;;;AAKN,IAAA,KAAK,CAAC,IAAY,EAAA;AAChB,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE;QACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;;AAGzB,IAAA,UAAU;IAElB,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAA;QAClB,IAAI,IAAI,CAAC,UAAU;AAAE,YAAA,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;AAElD,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAK;YAChC,MAAM,KAAK,GAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAC3D,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SACxB,EAAE,KAAK,CAAC;;AAGX,IAAA,aAAa,CAAC,IAAe,EAAA;AAC3B,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGtD,WAAW,CAAC,KAAK,EAAE,KAAK,EAAA;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;;AAInE,IAAA,WAAW,CAAC,SAAS,EAAA;;QAEnB,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;;AAQjC,IAAA,cAAc;AAEL,IAAA,SAAS;AACT,IAAA,WAAW;AACX,IAAA,OAAO;AACP,IAAA,oBAAoB;IAE7B,gBAAgB,GAAA;AACd,QAAA,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;;IAG9C,MAAM,GAAA;AACJ,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE;QAClI,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QAE9E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,kBAAkB,IAAI,KAAK,GAAG,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC,EAC7G,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAClE,gBAAA,MAAM,EAAE,CAAA,UAAA,EAAa,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,CAAE,CAAA;AAC7E,gBAAA,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,GAAG,WAAW,GAAG,GAAG;aAClE,EACD,YAAY,EAAE,CAAC,IAAK,CAAC,CAAC,aAA6B,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAC5G,YAAY,EAAE,CAAC,IAAK,CAAC,CAAC,aAA6B,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EACzG,UAAU,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;aACrB,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,wBAAwB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAClE,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aAC9D,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,UAAU,GAAG,cAAc,GAAG,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,GAAG,WAAW,GAAG,KAAK,EAAI,CAAA,GACjI,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,EAAE,EACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC5B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,KACnD,4DACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;aACnE,EACD,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACjF,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAChF,aAAA,EAAA,cAAA,EACY,SAAS,EAAA,EAEtB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAG,CAAA,CACvC,CACP,EACA,IAAI,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,KAC3F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAK;gBACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;aACnE,EACD,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACjF,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAChF,aAAA,EAAA,cAAA,EACY,WAAW,EAAA,EAExB,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,EAAG,CAAA,CACzC,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;aAC/B,EACD,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACjF,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAChF,aAAA,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,YAAY,EAAE,IAAI,EAAC,UAAU,EAAe,cAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,kBAAkB,GAAI,CAExI,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,EACD,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACjF,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAChF,aAAA,EACY,cAAA,EAAA,oBAAoB,4BACV,SAAS,EAAA,EAEhC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,CACpC,CACF,CACF,EACL,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,wBAAwB,EAAA,EACjC,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,SAAS,IAClC,CAAkB,CAAA,kBAAA,EAAA,EAAA,MAAM,EAAC,IAAA,EAAA,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,UAAU,GAAG,cAAc,GAAG,WAAW,EAAA,EACvG,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,CAAC,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,EAC9E,QAAQ,EAAE,KAAK,GAAG,IAAI,GAAG,KAAK,EAAA,EAE9B,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,UAAU,EAE9D,EAAA,UAAA,CAAA,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,EAE1D,EAAA,QAAA,CAAA,CACF,CACQ,KAEnB,CAAA,CAAA,kBAAA,EAAA,EAAkB,WAAW,EAAC,KAAK,EAAA,EACjC,CAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,WAAW,EAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAC,IAAA,EAAA,KAAK,EAAC,SAAS,EAAA,CAAG,CAC3E,CACpB,EACD,CACE,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,yBAAyB,EAC5B,IAAI,EAAC,wBAAwB,EAC7B,WAAW,EAAC,kCAAkC,EAC9C,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAC9B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EACxE,OAAO,EAAE,CAAC,IAAG;gBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;AAAE,oBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;aACjE,EACD,CAAA,EACD,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,IAC3C,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,EAAA,EAC7G,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAI,CAAA,gBAEnD,IACP,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,QAAQ,IAAI,KAAK,IAC7C,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;aAC1B,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAI,CAAA,mBAEvD,IACP,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,SAAS,IACrC,cACE,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;aAChC,EAAA,EAED,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAI,CAAA,EAEvD,gBAAA,CAAA,IACP,IAAI,CACJ,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,uBAAuB,EAAA,EACjC,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,IAAI;aAC/D,EAAA,EAEA,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,GAAG,GAAG,SAAS,GAAG,QAAQ,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,EAAE,CAC3G,EACJ,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AAC7D,gBAAA,aAAa,EAAE,YAAY;AAC5B,aAAA,EAEA,EAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,CACjC,EACH,IAAI,CAAC,MAAM,EAAE,QAAQ,KAAK,UAAU,KACnC,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;gBAC5J,KAAK,EAAE,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACzG,EAAA,EAEA,iBAAiB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAS,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAAI,CAAA,EACvH,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,oBAAoB,GAAG,CAAA,EAAG,iBAAiB,CAAC,MAAM,CAAA,CAAA,EAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,OAAO,GAAG,QAAQ,CAAE,CAAA,CACzI,CACP,CACG,CACP,CACG,CACF,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,EAAE,EAAC,mBAAmB,EAAG,CAAA,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-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  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    }, delay);\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, 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}

package/dist/esm/{index-o0lmYfXA.js → index-BwdJ-HOC.js}

@@ -1,11 +1,11 @@
 const NAMESPACE = 'ls-document-viewer';
-const BUILD = /* ls-document-viewer */ { hydratedSelectorName: "hydrated", lazyLoad: true, slotRelocation: true, updatable: true};
+const BUILD = /* ls-document-viewer */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
 const globalStyles = ":root{--font-family:'IBM Plex Sans', sans-serif;--text-xs:0.75rem;--text-xs-line-height:1rem;--text-sm:0.875rem;--text-sm-line-height:1.25rem;--text-base:1rem;--text-base-line-height:1.5rem;--text-lg:1.125rem;--text-lg-line-height:1.75rem;--text-xl:1.25rem;--text-xl-line-height:1.75rem;--text-2xl:1.5rem;--text-2xl-line-height:2rem;--text-3xl:1.875rem;--text-3xl-line-height:2.25rem;--text-4xl:2.25rem;--text-4xl-line-height:2.5rem;--text-5xl:3rem;--text-5xl-line-height:1;--text-6xl:3.75rem;--text-6xl-line-height:1;--text-7xl:4.5rem;--text-7xl-line-height:1;--text-9xl:8rem;--text-9xl-line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--white:#ffffff;--black:#000000;--pink-10:#fff0f9;--pink-20:#ffe5f5;--pink-30:#fabee2;--pink-40:#f5a2d4;--pink-50:#fa78c6;--pink-60:#f056b2;--pink-70:#e043a2;--pink-80:#cc2d8c;--pink-90:#ad2376;--pink-100:#7a1451;--red-10:#fff0f0;--red-20:#ffe1e0;--red-30:#ffc9c7;--red-40:#ffa19e;--red-50:#ff706b;--red-60:#f64a44;--red-70:#dc2721;--red-80:#c1140e;--red-90:#990500;--red-100:#7a1714;--yellow-10:#fffcef;--yellow-20:#fff3c2;--yellow-30:#fcec9d;--yellow-40:#ffe561;--yellow-50:#fad232;--yellow-60:#f0b618;--yellow-70:#cc8904;--yellow-80:#9e5913;--yellow-90:#8a3f0e;--yellow-100:#70350d;--green-10:#effff9;--green-20:#c5fde8;--green-30:#9df5d4;--green-40:#72f0c2;--green-50:#57e5b1;--green-60:#46dbaa;--green-70:#33b88c;--green-80:#15946a;--green-90:#177559;--green-100:#125241;--teal-10:#effffc;--teal-20:#c5fcf1;--teal-30:#a5fae9;--teal-40:#76f5db;--teal-50:#54ebcd;--teal-60:#46dbbd;--teal-70:#33b8a2;--teal-80:#148f7e;--teal-90:#17756c;--teal-100:#15524c;--cyan-10:#efffff;--cyan-20:#c5fcfc;--cyan-30:#a0fafa;--cyan-40:#76f5f5;--cyan-50:#54ebeb;--cyan-60:#46dbdb;--cyan-70:#33b3b8;--cyan-80:#11868f;--cyan-90:#166a70;--cyan-100:#11474d;--lightblue-10:#effbff;--lightblue-20:#c7f1ff;--lightblue-30:#9de4fc;--lightblue-40:#79dbfc;--lightblue-50:#51d3ff;--lightblue-60:#48c5f0;--lightblue-70:#20a6d6;--lightblue-80:#0b80b2;--lightblue-90:#19648a;--lightblue-100:#0c3e57;--blue-10:#f0f6ff;--blue-20:#e0ecff;--blue-30:#bed4fa;--blue-40:#a2bdf5;--blue-50:#78a3fa;--blue-60:#5684f0;--blue-70:#4368e0;--blue-80:#2d4dcc;--blue-90:#233ead;--blue-100:#14287a;--purple-10:#f4f0ff;--purple-20:#eee5ff;--purple-30:#d6befa;--purple-40:#c6a2f5;--purple-50:#b078fa;--purple-60:#9956f0;--purple-70:#8743e0;--purple-80:#722dcc;--purple-90:#5f23ad;--purple-100:#40147a;--primary-10:#eff4ff;--primary-20:#c7ddff;--primary-30:#9dc3fc;--primary-40:#79adfc;--primary-50:#5185ff;--primary-60:#4456f6;--primary-70:#2134dc;--primary-80:#0e20c1;--primary-90:#000f99;--primary-100:#0c1457;--gray-10:#f7f8fa;--gray-20:#edeff2;--gray-30:#e0e2e5;--gray-40:#d8d9dc;--gray-50:#c8c9cc;--gray-60:#afb0b2;--gray-70:#939599;--gray-80:#6f7176;--gray-90:#5e6066;--gray-100:#45484d;--gray-110:#292c33;--gray-120:#151923;--gray-130:#0c1019;--gray-140:#05080d;--aubergine-10:#fcf0ff;--aubergine-20:#fae5ff;--aubergine-30:#eebefa;--aubergine-40:#e4a2f5;--aubergine-50:#e078fa;--aubergine-60:#d156f0;--aubergine-70:#c143e0;--aubergine-80:#ac2dcc;--aubergine-90:#9223ad;--aubergine-100:#66147a;--indigo-10:#f2f0ff;--indigo-20:#e9e5ff;--indigo-30:#c6befa;--indigo-40:#ada2f5;--indigo-50:#8978fa;--indigo-60:#6b56f0;--indigo-70:#5843e0;--indigo-80:#422dcc;--indigo-90:#3523ad;--indigo-100:#21147a;--lime-10:#fafff0;--lime-20:#f6ffe5;--lime-30:#e6fabe;--lime-40:#d9f5a2;--lime-50:#cffa78;--lime-60:#bdf056;--lime-70:#ace043;--lime-80:#97cc2d;--lime-90:#7fad23;--lime-100:#587a14;--trueGreen-10:#f0fff0;--trueGreen-20:#e5ffe5;--trueGreen-30:#befabe;--trueGreen-40:#a2f5a2;--trueGreen-50:#78fa78;--trueGreen-60:#56f056;--trueGreen-70:#43e043;--trueGreen-80:#2dcc2d;--trueGreen-90:#23ad23;--trueGreen-100:#147a14;--burnt-10:#fff6f0;--burnt-20:#fff0e5;--burnt-30:#fad6be;--burnt-40:#f5c3a2;--burnt-50:#faac78;--burnt-60:#f09456;--burnt-70:#e08243;--burnt-80:#cc6d2d;--burnt-90:#ad5a23;--burnt-100:#7a3d14;--shadow-base:0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);--shadow-lg:0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);--active:0px 1px 3px rgba(0, 15, 153, 0.25), 0px 1px 2px rgba(0, 15, 153, 0.06), 0px 0px 0px 4px #9dc3fc}body{margin:0;font-family:var(--font-family)}html *{box-sizing:border-box;padding:0;margin:0;font-family:var(--font-family);font-size:var(--text-sm);text-align:left}";
 
 /*
- Stencil Client Platform v4.36.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -16,8 +16,6 @@ var __export = (target, all) => {
 // src/utils/constants.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
-
-// src/utils/es2022-rewire-class-members.ts
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -25,21 +23,31 @@ var reWireGetterSetter = (instance, hostRef) => {
   members.map(([memberName, [memberFlags]]) => {
     if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
       const ogValue = instance[memberName];
-      const ogDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(instance), memberName);
-      Object.defineProperty(instance, memberName, {
-        get() {
-          return ogDescriptor.get.call(this);
-        },
-        set(newValue) {
-          ogDescriptor.set.call(this, newValue);
-        },
-        configurable: true,
-        enumerable: true
-      });
+      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
+      if (ogDescriptor) {
+        Object.defineProperty(instance, memberName, {
+          get() {
+            return ogDescriptor.get.call(this);
+          },
+          set(newValue) {
+            ogDescriptor.set.call(this, newValue);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
       instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
     }
   });
 };
+function getPropertyDescriptor(obj, memberName) {
+  while (obj) {
+    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+    if (desc == null ? void 0 : desc.get) return desc;
+    obj = Object.getPrototypeOf(obj);
+  }
+  return void 0;
+}
 
 // src/client/client-host-ref.ts
 var getHostRef = (ref) => {
@@ -49,9 +57,10 @@ var getHostRef = (ref) => {
   return void 0;
 };
 var registerInstance = (lazyInstance, hostRef) => {
+  if (!hostRef) return;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
-  {
+  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(lazyInstance, hostRef);
   }
 };
@@ -60,7 +69,8 @@ var registerHost = (hostElement, cmpMeta) => {
     $flags$: 0,
     $hostElement$: hostElement,
     $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
+    $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map()
   };
   {
     hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
@@ -70,6 +80,9 @@ var registerHost = (hostElement, cmpMeta) => {
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
+  {
+    hostRef.$fetchedCbList$ = [];
+  }
   const ref = hostRef;
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
@@ -497,6 +510,9 @@ var attachStyles = (hostRef) => {
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
+  if (typeof nodeName === "string") {
+    nodeName = transformTag(nodeName);
+  }
   let child = null;
   let key = null;
   let slotName = null;
@@ -620,12 +636,6 @@ createSupportsRuleRe("::slotted");
 createSupportsRuleRe(":host");
 createSupportsRuleRe(":host-context");
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
-  if (typeof propValue === "string" && (propType & 16 /* Unknown */ || propType & 8 /* Any */) && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
-    try {
-      return JSON.parse(propValue);
-    } catch (e) {
-    }
-  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
       {
@@ -1167,9 +1177,11 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
   }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
@@ -1299,10 +1311,15 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
+      if (hostRef.$fetchedCbList$.length) {
+        hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
     }
     maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
@@ -1477,9 +1494,17 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
@@ -1514,8 +1539,6 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
               origSetter.apply(this, [
                 parsePropertyValue(
@@ -1530,7 +1553,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
                 setValue(this, memberName, newValue, cmpMeta);
                 if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
-                  ref.$onReadyPromise$.then(() => {
+                  ref.$fetchedCbList$.push(() => {
                     if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
                       ref.$lazyInstance$[memberName] = newValue;
                     }
@@ -1551,7 +1574,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               if (ref.$lazyInstance$) {
                 setterSetVal();
               } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
+                ref.$fetchedCbList$.push(() => {
+                  setterSetVal();
+                });
               }
             }
           }
@@ -1575,14 +1600,15 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
           if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          }
+          if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
           this[propName] == newValue) {
             return;
           } else if (propName == null) {
-            const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
               const instance = hostRef.$lazyInstance$ ;
@@ -1595,9 +1621,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             }
             return;
           }
+          const propFlags = members.find(([m]) => m === propName);
+          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+            newValue = newValue === null || newValue === "false" ? false : true;
+          }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1605,7 +1634,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
-          ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+          ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
@@ -1642,6 +1671,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr.isProxied) {
         {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
@@ -1723,7 +1754,7 @@ var connectedCallback = (elm) => {
       }
       if (cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;
@@ -1804,7 +1835,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2;
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1825,8 +1856,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
       }
-      const tagName = cmpMeta.$tagName$;
+      const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -1957,8 +1990,11 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
+function transformTag(tag) {
+  return tag;
+}
 
 export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-o0lmYfXA.js.map
+//# sourceMappingURL=index-BwdJ-HOC.js.map
 
-//# sourceMappingURL=index-o0lmYfXA.js.map
+//# sourceMappingURL=index-BwdJ-HOC.js.map