legalesign-document-viewer 0.10.2 → 0.10.4

package/dist/components/p-DdsRqtRd.js

@@ -0,0 +1,176 @@
+import { t as transformTag, p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DffaAVW4.js';
+import { d as defaultRolePalette } from './p-BKrsDBDB.js';
+import { d as dvI18n } from './p-Bp8hmhrC.js';
+import { d as defineCustomElement$2 } from './p-BT5rCW3w.js';
+import { d as defineCustomElement$1 } from './p-DZP-fvPJ.js';
+
+const lsParticipantSelectCss = () => `:host{display:inline-block}*{margin:0}.ls-dv-dropdown{display:flex;align-items:center;position:relative}.ls-dv-dropdown-header{border-radius:0.75rem;border:1px solid var(--gray-20, #edeff2);background:var(--gray-10, #f7f8fa);display:flex;padding:0.125rem 0.125rem 0.125rem 0.5rem;align-items:center;gap:0.5rem}.ls-dv-placing-fields-text{color:var(--gray-90, #5e6066);text-align:center;font-size:0.875rem;font-style:normal;font-weight:500;margin:0}.ls-dv-selected-role-label{display:flex;padding:0.125rem 0.375rem;align-items:center;gap:0.25rem;border-radius:0.25rem;font-size:0.875rem;font-style:normal;font-weight:500;line-height:1.25rem;max-width:10rem}.ls-dv-selected-role-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-dropdown-list{position:absolute;top:3rem;left:50%;transform:translateX(-50%);display:flex;width:18.5625rem;padding:0.25rem;flex-direction:column;gap:0.25rem;border-radius:1rem;border:1px solid var(--gray-30, #e0e2e5);background:white;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);max-height:40vh}.ls-dv-dropdown-list-items{display:flex;flex-direction:column;gap:0.25rem;overflow-y:auto;min-height:0}.ls-dv-dropdown-item{display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.75rem}.ls-dv-dropdown-item.ls-dv-selected,.ls-dv-dropdown-item.ls-dv-selected:hover{background:var(--background-selected, #e0e2e5)}.ls-dv-dropdown-item:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-add-participant-row{all:unset;flex-shrink:0;display:flex;padding:0.5rem 0.875rem 0.5rem 0.5rem;align-items:center;gap:0.75rem;align-self:stretch;border-radius:0.75rem;border:1px dashed var(--gray-30, #e0e2e5);cursor:pointer}.ls-dv-add-participant-row:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-plus-icon{color:var(--gray-40, #d8d9dc)}.ls-dv-role-icon{display:flex;padding:0.5rem;border-radius:0.625rem}.ls-dv-add-participant-icon{display:flex;padding:0.5rem;border-radius:0.625rem;color:white;background:var(--primary-60, #4456f6)}.ls-dv-role-text{display:flex;flex-direction:column;width:100%;min-width:0}.ls-dv-dropdown-item .ls-dv-check-icon{color:var(--gray-40, #d8d9dc)}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-check-icon{color:var(--check-icon-selected)}.ls-dv-role-name{color:var(--gray-100, #45484d);font-size:0.75rem;font-style:normal;font-weight:500;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ls-dv-role-type{color:var(--gray-80, #6f7176);font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem;}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-name{color:var(--role-name-selected)}.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-type{color:var(--role-type-selected)}p{color:var(--gray-80, #6f7176);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)}.ls-dv-button-link,.ls-dv-button-link:hover{all:unset}select{appearance:none;height:2.25rem}.ls-dv-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, #6f7176)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6f7176)}.ls-dv-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.625rem;color:var(--gray-100, #45484d);font-weight:400}input::placeholder,select::placeholder,textarea::placeholder{color:var(--gray-60, #afb0b2)}input:hover,select:hover,textarea:hover{border-color:var(--gray-50, #c8c9cc);background-color:var(--white, #ffffff)}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, #ffffff)}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].ls-dv-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].ls-dv-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].ls-dv-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}.ls-dv-checkbox-container{display:flex;gap:0.5rem;width:100%}.ls-dv-checkbox-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}.ls-dv-form-label{color:var(--gray-100, #45484d);font-size:1rem;font-style:normal;font-weight:500;line-height:1.5rem}.ls-dv-form-field{display:flex;flex-direction:column;gap:0.25rem;width:100%}.ls-dv-loading-box{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;color:var(--primary-60, #4456f6)}.ls-dv-expand-button{border:0;cursor:pointer;display:inline-flex;align-items:center;border-radius:0.625rem;justify-content:center;text-transform:capitalize;min-height:2rem;min-width:2rem;max-height:2rem;max-width:2rem}button.ls-dv-tertiary-grey{border:1px solid var(--gray-40, #d8d9dc);background-color:white;color:var(--gray-80, #6f7176)}button.ls-dv-tertiary-grey:hover{border:1px solid var(--gray-50, #c8c9cc);background:var(--gray-10, #f7f8fa)}.ls-dv-button-group{display:flex;border-radius:0.625rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.ls-dv-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, #6f7176)}.ls-dv-button-group button:hover{background:var(--gray-10, #f7f8fa)}.ls-dv-button-group>:first-child{border-radius:0.625rem 0 0 0.625rem}.ls-dv-button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.ls-dv-button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}`;
+
+const LsParticipantSelect = /*@__PURE__*/ proxyCustomElement(class LsParticipantSelect extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.roleChange = createEvent(this, "roleChange", 7);
+        this.addParticipant = createEvent(this, "addParticipant", 7);
+    }
+    get el() { return this; }
+    /**
+   * The id of the currently selected role.
+   * {string}
+   */
+    selected;
+    /**
+     * The currently active signer index (controlled externally).
+     * {number}
+     */
+    signer;
+    /**
+     * The currently selected role.
+     * {number}
+     */
+    selectedRole = { signerIndex: 1, name: '', roleType: 'SIGNER', default: true };
+    handleSignerChange(newSigner) {
+        this.syncSelectedRole(newSigner);
+    }
+    scrollToBottom = false;
+    handleRoleLoad() {
+        this.syncSelectedRole(this.signer);
+        if (this.scrollToBottom) {
+            this.scrollToBottom = false;
+            requestAnimationFrame(() => {
+                const list = this.el.shadowRoot?.querySelector('.ls-dv-dropdown-list-items');
+                if (list)
+                    list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
+            });
+        }
+    }
+    componentWillLoad() {
+        this.syncSelectedRole(this.signer);
+    }
+    syncSelectedRole(signerIndex) {
+        if (signerIndex === 0) {
+            this.selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: false };
+        }
+        else if (this.roles?.length > 0) {
+            const role = this.roles.find(r => r.signerIndex === signerIndex);
+            if (role) {
+                this.selectedRole = { ...role, default: false };
+            }
+        }
+    }
+    /**
+     * The current template roles.
+     * {LSApiRole}
+     */
+    roles = [];
+    isOpen = false;
+    handleWindowClick(event) {
+        if (this.isOpen && !this.el.shadowRoot.contains(event.composedPath()[0])) {
+            this.isOpen = false;
+        }
+    }
+    toggleDropdown = () => {
+        this.isOpen = !this.isOpen;
+    };
+    roleChange;
+    addParticipant;
+    selectRole(role) {
+        this.selectedRole = { ...role, default: false };
+        this.isOpen = false;
+        this.roleChange.emit(role.signerIndex);
+    }
+    createHandler() {
+        this.scrollToBottom = true;
+        this.addParticipant.emit({ type: 'SIGNER' });
+    }
+    render() {
+        return (h(Host, { key: '715ad6d83d2687486b0af6c2f77316a3d841e0f3' }, h("div", { key: 'c445f9cfdd30737253dd50b45083b61386a44f02', class: "ls-dv-dropdown" }, h("div", { key: 'cdd7fad732aeacbd13f708e8cc2047b4f52d5835', class: "ls-dv-dropdown-header", onClick: this.toggleDropdown }, h("svg", { key: 'c4065804696ff8122ef4411c83b277936835a8b9', width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3e616a7efe1ca94b8a0c876c2feb5be543856c62', d: "M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z", fill: "#78A3FA", stroke: "#F7F8FA" }), h("path", { key: 'cf7e6d467774f4e61ab4aac511ecc17e8df0ed38', d: "M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z", fill: "#46DBAA", stroke: "#F7F8FA" }), h("path", { key: '4b434b62aefcfa45f81beec86c885657a621d835', d: "M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z", fill: "#FAD232", stroke: "#F7F8FA" }), h("path", { key: '6bf79aed9318c81a444ad9bc9f51b1e6c5ca5c5a', d: "M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75", stroke: "#939599", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", { key: '2439ea59800ed645f14d8e1342d7c8a14ba18936', class: 'ls-dv-placing-fields-text' }, dvI18n.t('toolbar.placingfieldsfor')), h("div", { key: '189b52c4d538b5b779c4cdeedca3b151226fa254', class: 'ls-dv-selected-role-label', style: {
+                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,
+                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,
+            } }, h("ls-icon", { key: '65c00386603794bc5c192c910c336c663bb85e1e', size: 18, name: this.selectedRole?.roleType === 'SENDER'
+                ? 'user-icon'
+                : this.selectedRole?.roleType === 'APPROVER'
+                    ? 'check-circle-icon'
+                    : this.selectedRole?.roleType === 'WITNESS'
+                        ? 'eye-icon'
+                        : 'signature-icon' }), h("span", { key: '979904cc0fbb58c52dea958ba4c45f52e6fa1109', class: "ls-dv-selected-role-text" }, this.selectedRole.name ||
+            (this.selectedRole.roleType === 'WITNESS' ? dvI18n.t('participants.witness') : dvI18n.t('participants.participant', { index: this.selectedRole.signerIndex })))), h("button", { key: 'b309af4daf7e76a0bf42dfa046b3e3ae02bc689a', class: 'ls-dv-tertiary-grey ls-dv-expand-button', "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("ls-icon", { key: 'c13d87fcaf93cee424d76e03cc03649c9fc459f6', name: "chevron-down-icon" }))), this.isOpen && (h("div", { key: 'b01ddd170bd9a31e7499514120a399ce35811b59', class: "ls-dv-dropdown-list" }, h("div", { key: 'a50fab07069425eb97fe3d5ca2c22e9a70c774a6', class: "ls-dv-dropdown-list-items" }, h("div", { key: '72d781a71c60d346c4bf50e3bad096d3c605bd6e', class: this.selectedRole?.signerIndex === 0 ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
+                '--background-selected': defaultRolePalette[0].s10,
+                '--check-icon-selected': defaultRolePalette[0].s50,
+            }, onClick: () => this.selectRole({ signerIndex: 0, name: dvI18n.t('toolbar.sender'), roleType: 'SENDER' }), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon'), onMouseLeave: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle-icon' : 'check-circle-icon') }, h("div", { key: '4dc75a50eb63539d69274f0196b32c2e2b4ff772', class: 'ls-dv-role-icon', style: {
+                background: defaultRolePalette[0].s50,
+                color: defaultRolePalette[0].s80,
+            } }, h("ls-icon", { key: '8fd37877b5ebf279131681f3a025c43e9fa0afe4', name: "user-icon" })), h("div", { key: '06213acb7e1a8e4f600677c555967897ae79ff24', class: 'ls-dv-role-text' }, h("p", { key: 'dfa59392dbc88567edfd9266bf894b646a8c94da', class: 'ls-dv-role-name', style: {
+                '--role-name-selected': defaultRolePalette[0].s80,
+            } }, dvI18n.t('toolbar.sender')), h("p", { key: 'fcb40e6af7d85ee4ad9e4648e0d5a6789527b3d4', class: 'ls-dv-role-type', style: {
+                '--role-type-selected': defaultRolePalette[0].s80,
+            } }, dvI18n.t('toolbar.you'))), h("ls-icon", { key: '0a8263bdf3471c875df8f0c3eb4f3a0d2cc61f3b', class: 'ls-dv-check-icon', name: this.selectedRole?.signerIndex === 0 ? 'check-circle-icon' : 'base-circle-icon', solid: this.selectedRole?.signerIndex === 0 })), this.roles.map(r => (h("div", { class: r.signerIndex === this.selectedRole?.signerIndex ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item', style: {
+                '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,
+                '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,
+            }, onClick: () => this.selectRole(r), onMouseEnter: e => e.currentTarget.querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon'), onMouseLeave: e => e.currentTarget
+                .querySelector('.ls-dv-check-icon')
+                ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle-icon' : 'check-circle-icon') }, h("div", { class: 'ls-dv-role-icon', style: {
+                background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,
+                color: defaultRolePalette[r?.signerIndex % 100].s90,
+            } }, h("ls-icon", { name: r.roleType === 'WITNESS' ? 'eye-icon' : r.roleType === 'APPROVER' ? 'check-circle-icon' : 'signature-icon' })), h("div", { class: 'ls-dv-role-text' }, h("p", { class: 'ls-dv-role-name', style: {
+                '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,
+            }, "data-tooltip-id": "ls-dv-select-tooltip", "data-tooltip-html": `<span style="white-space:normal;word-break:break-word">${r.name || (r.signerIndex > 100 ? dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : dvI18n.t('participants.participant', { index: r.signerIndex }))}</span>`, onMouseEnter: (e) => {
+                const el = e.currentTarget;
+                if (el.scrollWidth <= el.clientWidth) {
+                    el.removeAttribute('data-tooltip-html');
+                }
+            } }, r.name || (r.signerIndex > 100 ? dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : dvI18n.t('participants.participant', { index: r.signerIndex }))), h("p", { class: 'ls-dv-role-type', style: {
+                '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,
+            } }, r.roleType === 'WITNESS' ? dvI18n.t('participants.witness') : r.roleType === 'APPROVER' ? dvI18n.t('participants.approver') : dvI18n.t('participants.signer'))), h("ls-icon", { class: 'ls-dv-check-icon', name: r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle-icon' : 'base-circle-icon', solid: r.signerIndex === this.selectedRole?.signerIndex }))))), h("button", { key: 'dbb7667dff39421ae6de4f5c86e9384e0ad68495', onClick: () => this.createHandler(), class: 'ls-dv-add-participant-row', style: {
+                '--background-selected': defaultRolePalette[1].s10,
+                '--check-icon-selected': defaultRolePalette[1].s50,
+            } }, h("div", { key: '320a0b771f6ed42e4f7feef9b60d347278fa2b7a', class: 'ls-dv-add-participant-icon' }, h("ls-icon", { key: '2e6c337d525a91ab395fc9dcdb62e5626a913df4', name: "user-add-icon" })), h("div", { key: 'b11077d92cb2665eef9367ab69a8fe3409fd985c', class: 'ls-dv-role-text' }, h("p", { key: '84458606a8cf3dc8951741c94772f1d552a33d74', class: 'ls-dv-role-name' }, dvI18n.t('participants.addparticipant')), h("p", { key: '0cda26ceca7a559cbbb5a48d702fa6eb217f3c5f', class: 'ls-dv-role-type' }, dvI18n.t('toolbar.addnewsigner'))), h("ls-icon", { key: '2ea312b7791fd854f05d0308483d66177e7fd23a', class: 'ls-dv-plus-icon', name: "plus-icon" }))))), h("ls-tooltip", { key: 'ad5797a69bf593c3450e1401c0632a023315c9be', tooltipId: "ls-dv-select-tooltip" }), h("slot", { key: '2e5587b444beb13388b9841b9e97b95b39188fad' })));
+    }
+    static get watchers() { return {
+        "signer": ["handleSignerChange"],
+        "roles": ["handleRoleLoad"]
+    }; }
+    static get style() { return lsParticipantSelectCss(); }
+}, [769, "ls-participant-select", {
+        "selected": [1025],
+        "signer": [2],
+        "roles": [16],
+        "selectedRole": [32],
+        "scrollToBottom": [32],
+        "isOpen": [32]
+    }, [[8, "click", "handleWindowClick"]], {
+        "signer": ["handleSignerChange"],
+        "roles": ["handleRoleLoad"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ls-participant-select", "ls-icon", "ls-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ls-participant-select":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), LsParticipantSelect);
+            }
+            break;
+        case "ls-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ls-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LsParticipantSelect as L, defineCustomElement as d };
+//# sourceMappingURL=p-DdsRqtRd.js.map
+
+//# sourceMappingURL=p-DdsRqtRd.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DdsRqtRd.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,4kOAA4kO,CAAC;;MCUtmO,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;AAG9B;;;AAGC;AACuB,IAAA,QAAQ;AAEhC;;;AAGG;AACK,IAAA,MAAM;AAEd;;;AAGG;AACM,IAAA,YAAY,GAA+E,EAAE,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE;AAGnK,IAAA,kBAAkB,CAAC,SAAiB,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;;IAGzB,cAAc,GAAY,KAAK;IAGxC,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;AAClC,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;YAC3B,qBAAqB,CAAC,MAAK;AACzB,gBAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,4BAA4B,CAAC;AAC5E,gBAAA,IAAI,IAAI;AAAE,oBAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACzE,aAAC,CAAC;;;IAIN,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;;AAG5B,IAAA,gBAAgB,CAAC,WAAmB,EAAA;AAC1C,QAAA,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB,IAAI,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;;aACrF,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE;AACjC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC;YAChE,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;;;;AAIrD;;;AAGG;IACK,KAAK,GAAiB,EAAE;IAEvB,MAAM,GAAY,KAAK;AAGhC,IAAA,iBAAiB,CAAC,KAAiB,EAAA;QACjC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAS,CAAC,EAAE;AAChF,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;;IAKvB,cAAc,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,KAAC;AAEQ,IAAA,UAAU;AAKhB,IAAA,cAAc;AAGjB,IAAA,UAAU,CAAC,IAA8D,EAAA;QACvE,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;AAC/C,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGxC,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC;;IAG5C,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAA,EAC7D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,2HAA2H,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAG,CAAA,EACtK,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,yIAAyI,EAC3I,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,SAAS,EAChB,CAAA,EACF,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,qIAAqI,EACvI,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,SAAS,EAChB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,oFAAoF,EACtF,MAAM,EAAC,SAAS,EACH,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACN,iBAAA,EAAA,OAAO,GACvB,CACE,EACN,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,2BAA2B,EAAG,EAAA,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAK,EACjF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACxE,gBAAA,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACpE,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,EAAE,EACR,IAAI,EACF,IAAI,CAAC,YAAY,EAAE,QAAQ,KAAK;AAC9B,kBAAE;AACF,kBAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,KAAK;AAChC,sBAAE;AACF,sBAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,KAAK;AAChC,0BAAE;0BACA,gBAAgB,EAE1B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,IAAI,CAAC,YAAY,CAAC,IAAI;AACrB,aAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,KAAK,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,0BAA0B,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CAAC,CAC3J,CACH,EACN,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yCAAyC,EAAA,eAAA,EAAgB,SAAS,EAAgB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAA,EAC1G,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,mBAAmB,EAAA,CAAW,CACrC,CACL,EACL,IAAI,CAAC,MAAM,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,GAAG,oCAAoC,GAAG,qBAAqB,EAC1G,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;AAClD,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;aACnD,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EACxG,YAAY,EAAE,CAAC,IAAK,CAAC,CAAC,aAA6B,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACjI,YAAY,EAAE,CAAC,IACZ,CAAC,CAAC,aAA6B,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,GAAG,kBAAkB,GAAG,mBAAmB,CAAC,EAAA,EAG5K,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;AACrC,gBAAA,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;aACjC,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,WAAW,EAAA,CAAG,CACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,iBAAiB,EAAA,EAC3B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;aAClD,EAAA,EAEA,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CACzB,EACJ,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;AAClD,aAAA,EAAA,EAEA,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CACtB,CACA,EAEN,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,GAAG,mBAAmB,GAAG,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,KAAK,CAAC,GAAI,CACtK,EACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KACf,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,oCAAoC,GAAG,qBAAqB,EACtH,KAAK,EAAE;gBACL,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;gBACrE,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;AACtE,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,IAAK,CAAC,CAAC,aAA6B,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,YAAY,CAAC,MAAM,EAAE,mBAAmB,CAAC,EACjI,YAAY,EAAE,CAAC,IACZ,CAAC,CAAC;iBACA,aAAa,CAAC,mBAAmB;AAClC,kBAAE,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,kBAAkB,GAAG,mBAAmB,CAAC,EAAA,EAGvH,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,CAAC,CAAC,WAAW,GAAG,GAAG,GAAG,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;gBAC7H,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACpD,EAAA,EAED,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,CAAC,CAAC,QAAQ,KAAK,SAAS,GAAG,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,UAAU,GAAG,mBAAmB,GAAG,gBAAgB,EAAA,CAAI,CACzH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,iBAAiB,EAAA,EAC3B,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;gBACL,sBAAsB,EAAE,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,IAAI;AACtE,aAAA,EACe,iBAAA,EAAA,sBAAsB,EACnB,mBAAA,EAAA,CAA0D,uDAAA,EAAA,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,WAAW,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,0BAA0B,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAS,OAAA,CAAA,EACpQ,YAAY,EAAE,CAAC,CAAa,KAAI;AAC9B,gBAAA,MAAM,EAAE,GAAG,CAAC,CAAC,aAA4B;gBACzC,IAAI,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,WAAW,EAAE;AACpC,oBAAA,EAAE,CAAC,eAAe,CAAC,mBAAmB,CAAC;;AAE3C,aAAC,EAAA,EAEA,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,WAAW,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,iCAAiC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,0BAA0B,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAC7K,EACJ,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAE,iBAAiB,EACxB,KAAK,EAAE;gBACL,sBAAsB,EAAE,kBAAkB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG;aACrE,EAAA,EAEA,CAAC,CAAC,QAAQ,KAAK,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,QAAQ,KAAK,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAC5J,CACA,EACN,CAAA,CAAA,SAAA,EAAA,EACE,KAAK,EAAE,kBAAkB,EACzB,IAAI,EAAE,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,mBAAmB,GAAG,kBAAkB,EACjG,KAAK,EAAE,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,WAAW,GACvD,CACE,CACP,CAAC,CACI,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;AAClD,gBAAA,uBAAuB,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG;AACnD,aAAA,EAAA,EAED,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EAEnC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,eAAe,EAAA,CAAG,CAC5B,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,iBAAiB,EAAA,EAC3B,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,iBAAiB,EAAG,EAAA,MAAM,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAK,EAC1E,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,iBAAiB,EAAG,EAAA,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAK,CAC/D,EACN,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAC,WAAW,EAAG,CAAA,CAC/C,CACL,CACP,CACG,EACN,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,sBAAsB,EAAG,CAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ls-participant-select/ls-participant-select.scss?tag=ls-participant-select&encapsulation=shadow","src/components/ls-participant-select/ls-participant-select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n* {\n  margin: 0;\n}\n\n.ls-dv-dropdown {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.ls-dv-dropdown-header {\n  border-radius: 0.75rem;\n  border: 1px solid $gray-20;\n  background: $gray-10;\n  display: flex;\n  padding: 0.125rem 0.125rem 0.125rem 0.5rem;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.ls-dv-placing-fields-text {\n  color: $gray-90;\n  text-align: center;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  margin: 0;\n}\n\n.ls-dv-selected-role-label {\n  display: flex;\n  padding: 0.125rem 0.375rem;\n  align-items: center;\n  gap: 0.25rem;\n  border-radius: 0.25rem;\n  font-size: 0.875rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.25rem; /* 142.857% */\n  max-width: 10rem;\n}\n\n.ls-dv-selected-role-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ls-dv-dropdown-list {\n  position: absolute;\n  top: 3rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  width: 18.5625rem;\n  padding: 0.25rem;\n  flex-direction: column;\n  gap: 0.25rem;\n  border-radius: 1rem;\n  border: 1px solid $gray-30;\n  background: white;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  max-height: 40vh;\n}\n\n.ls-dv-dropdown-list-items {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.ls-dv-dropdown-item {\n  display: flex;\n  padding: 0.5rem 0.875rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  align-self: stretch;\n  border-radius: 0.75rem;\n}\n\n.ls-dv-dropdown-item.ls-dv-selected,\n.ls-dv-dropdown-item.ls-dv-selected:hover {\n  background: var(--background-selected, #e0e2e5);\n}\n\n.ls-dv-dropdown-item:hover {\n  background: $gray-10;\n}\n\n.ls-dv-add-participant-row {\n  all: unset;\n  flex-shrink: 0;\n  display: flex;\n  padding: 0.5rem 0.875rem 0.5rem 0.5rem;\n  align-items: center;\n  gap: 0.75rem;\n  align-self: stretch;\n  border-radius: 0.75rem;\n  border: 1px dashed $gray-30;\n  cursor: pointer;\n}\n\n.ls-dv-add-participant-row:hover {\n  background: $gray-10;\n}\n\n.ls-dv-plus-icon {\n  color: $gray-40;\n}\n\n.ls-dv-role-icon {\n  display: flex;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n}\n\n.ls-dv-add-participant-icon {\n  display: flex;\n  padding: 0.5rem;\n  border-radius: 0.625rem;\n  color: white;\n  background: $primary-60;\n}\n\n.ls-dv-role-text {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n}\n\n.ls-dv-dropdown-item .ls-dv-check-icon {\n  color: $gray-40;\n}\n\n.ls-dv-dropdown-item.ls-dv-selected .ls-dv-check-icon {\n  color: var(--check-icon-selected);\n}\n\n.ls-dv-role-name {\n  color: $gray-100;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1rem; /* 133.333% */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ls-dv-role-type {\n  color: $gray-80;\n  font-size: 0.75rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem; /* 133.333% */\n}\n\n.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-name {\n  color: var(--role-name-selected);\n}\n\n.ls-dv-dropdown-item.ls-dv-selected .ls-dv-role-type {\n  color: var(--role-type-selected);\n}\n\n/* Global Styles */\n\np {\n  color: $gray-80;\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: $primary-60;\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: $primary-70;\n}\n\n.ls-dv-button-link,\n.ls-dv-button-link:hover {\n  all: unset;\n}\n\nselect {\n  appearance: none;\n  height: 2.25rem;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n#selectLeadingIcon {\n  position: absolute;\n  top: 50%;\n  left: 0.675rem;\n  transform: translateY(-50%);\n  pointer-events: none;\n  color: $gray-80;\n}\n\n.ls-dv-has-leading-icon {\n  padding-left: 2.5rem;\n}\n\ninput,\nselect,\ntextarea {\n  border: 1px solid $gray-40;\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.625rem;\n  color: $gray-100;\n  font-weight: 400;\n}\n\ninput::placeholder,\nselect::placeholder,\ntextarea::placeholder {\n  color: $gray-60;\n}\n\ninput:hover,\nselect:hover,\ntextarea:hover {\n  border-color: $gray-50;\n  background-color: $white;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  outline: none;\n  box-shadow: 0 0 0 0.25rem $primary-40;\n  border-color: $primary-60;\n  background-color: $white;\n}\n\ninput:active,\nselect:active,\ntextarea:active {\n  border-color: $primary-50;\n}\n\ninput:disabled,\nselect:disabled,\ntextarea:disabled {\n  cursor: not-allowed;\n  background-color: $gray-10;\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'].ls-dv-indeterminate {\n  background-color: $primary-60;\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'].ls-dv-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'].ls-dv-indeterminate:hover {\n  background-color: $primary-70;\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 $primary-20;\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.ls-dv-checkbox-container {\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n}\n\n.ls-dv-checkbox-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1rem;\n}\n\n.ls-dv-form-label {\n  color: $gray-100;\n  font-size: 1rem;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 1.5rem;\n}\n\n.ls-dv-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  width: 100%;\n}\n\n.ls-dv-loading-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  color: $primary-60;\n}\n\n.ls-dv-expand-button {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  border-radius: 0.625rem;\n  justify-content: center;\n  text-transform: capitalize;\n  min-height: 2rem;\n  min-width: 2rem;\n  max-height: 2rem;\n  max-width: 2rem;\n}\n\nbutton.ls-dv-tertiary-grey {\n  border: 1px solid $gray-40;\n  background-color: white;\n  color: $gray-80;\n}\n\nbutton.ls-dv-tertiary-grey:hover {\n  border: 1px solid $gray-50;\n  background: $gray-10;\n}\n\n.ls-dv-button-group {\n  display: flex;\n  border-radius: 0.625rem;\n  border: 1px solid $gray-30;\n  background: $white;\n  overflow: clip;\n}\n\n.ls-dv-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: $gray-80;\n}\n\n.ls-dv-button-group button:hover {\n  background: $gray-10;\n}\n\n.ls-dv-button-group > :first-child {\n  border-radius: 0.625rem 0 0 0.625rem;\n}\n\n.ls-dv-button-group > :last-child {\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n\n.ls-dv-button-group > :not(:first-child) {\n  border-left: 1px solid $gray-30;\n}\n","import { Component, Element, Host, Listen, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { defaultRolePalette } from '../ls-document-viewer/defaultPalette';\nimport { dvI18n } from '../../i18n/i18n';\n\n@Component({\n  tag: 'ls-participant-select',\n  styleUrl: 'ls-participant-select.scss',\n  shadow: true,\n})\nexport class LsParticipantSelect {\n  @Element() el: HTMLElement;\n\n  /**\n * The id of the currently selected role.\n * {string}\n */\n  @Prop({ mutable: true}) selected: string;\n\n  /**\n   * The currently active signer index (controlled externally).\n   * {number}\n   */\n  @Prop() signer: number;\n  \n  /**\n   * The currently selected role.\n   * {number}\n   */\n  @State() selectedRole: { signerIndex: number; name: string; roleType?: string; default: boolean } = { signerIndex: 1, name: '', roleType: 'SIGNER', default: true };\n\n  @Watch('signer')\n  handleSignerChange(newSigner: number) {\n    this.syncSelectedRole(newSigner);\n  }\n\n  @State() scrollToBottom: boolean = false;\n\n  @Watch('roles')\n  handleRoleLoad() {\n    this.syncSelectedRole(this.signer);\n    if (this.scrollToBottom) {\n      this.scrollToBottom = false;\n      requestAnimationFrame(() => {\n        const list = this.el.shadowRoot?.querySelector('.ls-dv-dropdown-list-items');\n        if (list) list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.syncSelectedRole(this.signer);\n  }\n\n  private syncSelectedRole(signerIndex: number) {\n    if (signerIndex === 0) {\n      this.selectedRole = { signerIndex: 0, name: 'Sender', roleType: 'SENDER', default: false };\n    } else if (this.roles?.length > 0) {\n      const role = this.roles.find(r => r.signerIndex === signerIndex);\n      if (role) {\n        this.selectedRole = { ...role, default: false };\n      }\n    }\n  }\n  /**\n   * The current template roles.\n   * {LSApiRole}\n   */\n  @Prop() roles?: LSApiRole[] = [];\n\n  @State() isOpen: boolean = false;\n\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.el.shadowRoot.contains(event.composedPath()[0] as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n\n  toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  @Event() roleChange: EventEmitter<number>;\n\n  @Event({\n    bubbles: true,\n    composed: true,\n  }) addParticipant: EventEmitter<{type: LSApiRoleType, parent?: string | null}>;\n\n\n  selectRole(role: { signerIndex: number; name: string; roleType?: string }) {\n    this.selectedRole = { ...role, default: false };\n    this.isOpen = false;\n    this.roleChange.emit(role.signerIndex);\n  }\n\n  createHandler() {\n    this.scrollToBottom = true;\n    this.addParticipant.emit({type: 'SIGNER'});\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-dv-dropdown\">\n          <div class=\"ls-dv-dropdown-header\" onClick={this.toggleDropdown}>\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 0.5H6.5C8.433 0.5 10 2.067 10 4V6.5C10 8.433 8.433 10 6.5 10H4C2.067 10 0.5 8.433 0.5 6.5V4C0.5 2.067 2.067 0.5 4 0.5Z\" fill=\"#78A3FA\" stroke=\"#F7F8FA\" />\n              <path\n                d=\"M13.5 0.5H16C17.933 0.5 19.5 2.067 19.5 4V6.5C19.5 8.433 17.933 10 16 10H13.5C11.567 10 10 8.433 10 6.5V4C10 2.067 11.567 0.5 13.5 0.5Z\"\n                fill=\"#46DBAA\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M4 10H6.5C8.433 10 10 11.567 10 13.5V16C10 17.933 8.433 19.5 6.5 19.5H4C2.067 19.5 0.5 17.933 0.5 16V13.5C0.5 11.567 2.067 10 4 10Z\"\n                fill=\"#FAD232\"\n                stroke=\"#F7F8FA\"\n              />\n              <path\n                d=\"M14.75 12.125V14.75M14.75 14.75V17.375M14.75 14.75H17.375M14.75 14.75L12.125 14.75\"\n                stroke=\"#939599\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n            <p class={'ls-dv-placing-fields-text'}>{dvI18n.t('toolbar.placingfieldsfor')}</p>\n            <div\n              class={'ls-dv-selected-role-label'}\n              style={{\n                background: defaultRolePalette[this.selectedRole?.signerIndex % 100].s20,\n                color: defaultRolePalette[this.selectedRole?.signerIndex % 100].s80,\n              }}\n            >\n              <ls-icon\n                size={18}\n                name={\n                  this.selectedRole?.roleType === 'SENDER'\n                    ? 'user-icon'\n                    : this.selectedRole?.roleType === 'APPROVER'\n                      ? 'check-circle-icon'\n                      : this.selectedRole?.roleType === 'WITNESS'\n                        ? 'eye-icon'\n                        : 'signature-icon'\n                }\n              />\n              <span class=\"ls-dv-selected-role-text\">\n                {this.selectedRole.name ||\n                  (this.selectedRole.roleType === 'WITNESS' ? dvI18n.t('participants.witness') : dvI18n.t('participants.participant', { index: this.selectedRole.signerIndex }))}\n              </span>\n            </div>\n            <button class={'ls-dv-tertiary-grey ls-dv-expand-button'} aria-haspopup=\"listbox\" aria-expanded={this.isOpen}>\n              <ls-icon name=\"chevron-down-icon\"></ls-icon>\n            </button>\n          </div>\n          {this.isOpen && (\n            <div class=\"ls-dv-dropdown-list\">\n              <div class=\"ls-dv-dropdown-list-items\">\n              <div\n                class={this.selectedRole?.signerIndex === 0 ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item'}\n                style={{\n                  '--background-selected': defaultRolePalette[0].s10,\n                  '--check-icon-selected': defaultRolePalette[0].s50,\n                }}\n                onClick={() => this.selectRole({ signerIndex: 0, name: dvI18n.t('toolbar.sender'), roleType: 'SENDER' })}\n                onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon')}\n                onMouseLeave={e =>\n                  (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', this.selectedRole?.signerIndex !== 0 ? 'base-circle-icon' : 'check-circle-icon')\n                }\n              >\n                <div\n                  class={'ls-dv-role-icon'}\n                  style={{\n                    background: defaultRolePalette[0].s50,\n                    color: defaultRolePalette[0].s80,\n                  }}\n                >\n                  <ls-icon name=\"user-icon\" />\n                </div>\n                <div class={'ls-dv-role-text'}>\n                  <p\n                    class={'ls-dv-role-name'}\n                    style={{\n                      '--role-name-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {dvI18n.t('toolbar.sender')}\n                  </p>\n                  <p\n                    class={'ls-dv-role-type'}\n                    style={{\n                      '--role-type-selected': defaultRolePalette[0].s80,\n                    }}\n                  >\n                    {dvI18n.t('toolbar.you')}\n                  </p>\n                </div>\n\n                <ls-icon class={'ls-dv-check-icon'} name={this.selectedRole?.signerIndex === 0 ? 'check-circle-icon' : 'base-circle-icon'} solid={this.selectedRole?.signerIndex === 0} />\n              </div>\n              {this.roles.map(r => (\n                <div\n                  class={r.signerIndex === this.selectedRole?.signerIndex ? 'ls-dv-dropdown-item ls-dv-selected' : 'ls-dv-dropdown-item'}\n                  style={{\n                    '--background-selected': defaultRolePalette[r?.signerIndex % 100].s10,\n                    '--check-icon-selected': defaultRolePalette[r?.signerIndex % 100].s50,\n                  }}\n                  onClick={() => this.selectRole(r)}\n                  onMouseEnter={e => (e.currentTarget as HTMLElement).querySelector('.ls-dv-check-icon')?.setAttribute('name', 'check-circle-icon')}\n                  onMouseLeave={e =>\n                    (e.currentTarget as HTMLElement)\n                      .querySelector('.ls-dv-check-icon')\n                      ?.setAttribute('name', r.signerIndex !== this.selectedRole?.signerIndex ? 'base-circle-icon' : 'check-circle-icon')\n                  }\n                >\n                  <div\n                    class={'ls-dv-role-icon'}\n                    style={{\n                      background: r.signerIndex > 100 ? defaultRolePalette[r?.signerIndex % 100].s30 : defaultRolePalette[r?.signerIndex % 100].s40,\n                      color: defaultRolePalette[r?.signerIndex % 100].s90,\n                    }}\n                  >\n                    <ls-icon name={r.roleType === 'WITNESS' ? 'eye-icon' : r.roleType === 'APPROVER' ? 'check-circle-icon' : 'signature-icon'} />\n                  </div>\n                  <div class={'ls-dv-role-text'}>\n                    <p\n                      class={'ls-dv-role-name'}\n                      style={{\n                        '--role-name-selected': defaultRolePalette[r?.signerIndex % 100].s100,\n                      }}\n                      data-tooltip-id=\"ls-dv-select-tooltip\"\n                      data-tooltip-html={`<span style=\"white-space:normal;word-break:break-word\">${r.name || (r.signerIndex > 100 ? dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : dvI18n.t('participants.participant', { index: r.signerIndex }))}</span>`}\n                      onMouseEnter={(e: MouseEvent) => {\n                        const el = e.currentTarget as HTMLElement;\n                        if (el.scrollWidth <= el.clientWidth) {\n                          el.removeAttribute('data-tooltip-html');\n                        }\n                      }}\n                    >\n                      {r.name || (r.signerIndex > 100 ? dvI18n.t('participants.participantwitness', { index: r.signerIndex - 100 }) : dvI18n.t('participants.participant', { index: r.signerIndex }))}\n                    </p>\n                    <p\n                      class={'ls-dv-role-type'}\n                      style={{\n                        '--role-type-selected': defaultRolePalette[r?.signerIndex % 100].s80,\n                      }}\n                    >\n                      {r.roleType === 'WITNESS' ? dvI18n.t('participants.witness') : r.roleType === 'APPROVER' ? dvI18n.t('participants.approver') : dvI18n.t('participants.signer')}\n                    </p>\n                  </div>\n                  <ls-icon\n                    class={'ls-dv-check-icon'}\n                    name={r.signerIndex === this.selectedRole?.signerIndex ? 'check-circle-icon' : 'base-circle-icon'}\n                    solid={r.signerIndex === this.selectedRole?.signerIndex}\n                  />\n                </div>\n              ))}\n              </div>\n              <button\n                onClick={() => this.createHandler()}\n                class={'ls-dv-add-participant-row'}\n                style={{\n                  '--background-selected': defaultRolePalette[1].s10,\n                  '--check-icon-selected': defaultRolePalette[1].s50,\n                }}\n              >\n                <div\n                  class={'ls-dv-add-participant-icon'}\n                >\n                  <ls-icon name=\"user-add-icon\" />\n                </div>\n                <div class={'ls-dv-role-text'}>\n                  <p class={'ls-dv-role-name'}>{dvI18n.t('participants.addparticipant')}</p>\n                  <p class={'ls-dv-role-type'}>{dvI18n.t('toolbar.addnewsigner')}</p>\n                </div>\n                <ls-icon class={'ls-dv-plus-icon'} name=\"plus-icon\" />\n              </button>\n            </div>\n          )}\n        </div>\n        <ls-tooltip tooltipId=\"ls-dv-select-tooltip\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CLbfAJ0X.js → p-DffaAVW4.js}

@@ -1745,9 +1745,6 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (doc, elm, flags) => {
-  if (flags & 4 /* TargetDocument */) {
-    return doc;
-  }
   if (flags & 8 /* TargetWindow */) {
     return win;
   }
@@ -1781,6 +1778,6 @@ function transformTag(tag) {
 }
 
 export { H, setNonce as a, setPlatformOptions as b, Host as c, createEvent as d, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t };
-//# sourceMappingURL=p-CLbfAJ0X.js.map
+//# sourceMappingURL=p-DffaAVW4.js.map
 
-//# sourceMappingURL=p-CLbfAJ0X.js.map
+//# sourceMappingURL=p-DffaAVW4.js.map