npm - @verdocs/web-sdk - Versions diffs - 6.12.1 → 6.13.0 - Mend

@verdocs/web-sdk 6.12.1 → 6.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

package/dist/cjs/verdocs-contact-picker.cjs.entry.js CHANGED Viewed

@@ -2,13 +2,15 @@
 var index = require('./index-DLmnUl1_.js');
 var jsSdk = require('@verdocs/js-sdk');
+var ScrollFade = require('./ScrollFade-DKS1cHlq.js');
 var utils = require('./utils-BtmSHO0F.js');
 require('./index-FVA5WPhX.js');
 require('./Types-DB6U9iuZ.js');
-const verdocsContactPickerCss = () => `verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{gap:12px;width:300px;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5fa}verdocs-contact-picker form .row{gap:8px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start}verdocs-contact-picker form .row .option{gap:4px;display:-ms-flexbox;display:flex;padding:5px 8px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;text-wrap:nowrap}verdocs-contact-picker form .names-row{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .names-row>input{font-size:14px;width:88px}verdocs-contact-picker form .pin-code{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .pin-code>input{-ms-flex:0 0 197px;flex:0 0 197px;font-size:14px}verdocs-contact-picker form .address{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .address>input{-ms-flex:1;flex:1;font-size:14px}verdocs-contact-picker form .zip-code{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .zip-code>input{-ms-flex:1;flex:1;font-size:14px}verdocs-contact-picker form label{display:-ms-flexbox;display:flex;-ms-flex:0 0 80px;flex:0 0 80px;font-size:13px;font-weight:500;color:#5c6575}verdocs-contact-picker form .row.message textarea{width:100%;padding:5px 7px;border-radius:4px;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-contact-picker form input{-ms-flex:1;flex:1;padding:6px;font-size:14px;border-radius:3px;border:1px solid rgba(112, 122, 229, 0.3725490196)}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}#verdocs-contact-picker-suggestions .dropdown{max-height:225px;overflow-y:scroll;background:#ffffff;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}#verdocs-contact-picker-suggestions .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-contact-picker-suggestions .dropdown .suggestion svg{width:32px;height:32px}#verdocs-contact-picker-suggestions .dropdown .suggestion .avatar{width:32px;height:32px;-ms-flex:0 0 32px;flex:0 0 32px;margin-right:8px;border-radius:100%}#verdocs-contact-picker-suggestions .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}#verdocs-contact-picker-suggestions .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}#verdocs-contact-picker-suggestions .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}#verdocs-contact-picker-suggestions .dropdown .suggestion:hover{background:#eee;cursor:pointer}`;
+const verdocsContactPickerCss = () => `verdocs-contact-picker{--picker-ink:var(--verdocs-body-color, #111827);--picker-ink-2:#374151;--picker-muted:#6b7280;--picker-faint:#9ca3af;--picker-control-border:#d1d5db;--picker-accent:var(--verdocs-link-color, #4c56cb);--picker-accent-tint:#f4f5fc;--picker-accent-tint-2:#e6e7f8;display:block;font-size:14px;color:var(--picker-ink);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-contact-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-contact-picker form{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker .form-body{position:relative;-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-contact-picker .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-contact-picker .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-contact-picker .row.names{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;position:relative}verdocs-contact-picker .row.names .field{-ms-flex:1;flex:1;min-width:0}verdocs-contact-picker .field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-contact-picker .field label{font-size:12px;font-weight:500;color:var(--picker-ink-2)}verdocs-contact-picker .field label .optional{color:var(--picker-muted);font-weight:400}verdocs-contact-picker input,verdocs-contact-picker textarea{width:100%;font-size:13px;font-family:inherit;color:var(--picker-ink);background:#ffffff;border:1px solid var(--picker-control-border);border-radius:6px;outline:none}verdocs-contact-picker input:focus,verdocs-contact-picker textarea:focus{border-color:var(--picker-accent);-webkit-box-shadow:0 0 0 2px var(--picker-accent-tint-2);box-shadow:0 0 0 2px var(--picker-accent-tint-2)}verdocs-contact-picker input::-webkit-input-placeholder,verdocs-contact-picker textarea::-webkit-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-moz-placeholder,verdocs-contact-picker textarea::-moz-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input:-ms-input-placeholder,verdocs-contact-picker textarea:-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::-ms-input-placeholder,verdocs-contact-picker textarea::-ms-input-placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input::placeholder,verdocs-contact-picker textarea::placeholder{color:var(--picker-faint);opacity:1}verdocs-contact-picker input{height:34px;padding:0 10px}verdocs-contact-picker textarea{height:56px;padding:8px 10px;resize:vertical}verdocs-contact-picker .group{margin:2px 0 12px 0}verdocs-contact-picker .group .group-label{font-size:12px;font-weight:500;color:var(--picker-ink-2);margin:0 0 6px 0}verdocs-contact-picker .pills{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px}verdocs-contact-picker .pill{all:unset;height:26px;padding:0 9px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;white-space:nowrap;border-radius:999px;color:var(--picker-ink-2);border:1px solid var(--picker-control-border)}verdocs-contact-picker .pill:focus-visible{outline:2px solid var(--picker-accent);outline-offset:2px}verdocs-contact-picker .pill.selected{color:var(--picker-accent);border-color:var(--picker-accent);background:var(--picker-accent-tint)}verdocs-contact-picker .pill.locked{opacity:0.5;cursor:not-allowed}verdocs-contact-picker .pill .pill-icon,verdocs-contact-picker .pill .pill-icon svg{width:12px;height:12px;display:block}verdocs-contact-picker .passcode{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:8px}verdocs-contact-picker .passcode input{-ms-flex:0 0 120px;flex:0 0 120px;width:120px;height:30px}verdocs-contact-picker .passcode .passcode-hint{-ms-flex:1;flex:1;min-width:0;font-size:11px;line-height:1.35;color:var(--picker-muted);-ms-flex-item-align:center;align-self:center}verdocs-contact-picker .buttons{margin-top:10px;padding-top:12px;border-top:1px solid #e5e7eb;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}verdocs-contact-picker .buttons verdocs-button:last-child{-ms-flex:1;flex:1}verdocs-contact-picker .buttons verdocs-button:last-child button{width:100%}verdocs-contact-picker .suggestions{position:absolute;top:0;left:0;right:0;z-index:20;max-height:225px;overflow-y:auto;background:#ffffff;border-radius:6px;border:1px solid #e5e7eb;-webkit-box-shadow:0 8px 24px rgba(17, 24, 39, 0.14);box-shadow:0 8px 24px rgba(17, 24, 39, 0.14)}verdocs-contact-picker .suggestions .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;cursor:pointer}verdocs-contact-picker .suggestions .suggestion svg{width:28px;height:28px}verdocs-contact-picker .suggestions .suggestion .avatar{width:28px;height:28px;-ms-flex:0 0 28px;flex:0 0 28px;margin-right:8px;border-radius:100%}verdocs-contact-picker .suggestions .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}verdocs-contact-picker .suggestions .suggestion .name{font-size:13px;font-weight:500;color:var(--picker-ink)}verdocs-contact-picker .suggestions .suggestion .destination{font-size:12px;color:var(--picker-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-contact-picker .suggestions .suggestion:hover{background:var(--picker-accent-tint)}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}`;
 const addrBookIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-user"><path d="M15 13a3 3 0 1 0-6 0"/><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><circle cx="12" cy="8" r="2"/></svg>`;
+const lockIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
 const VerdocsContactPicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -28,6 +30,10 @@ const VerdocsContactPicker = class {
          * of suggestions be limited to the 5 best matching records.
          */
         this.contactSuggestions = [];
+        /**
+         * Whether to show a Cancel button beside Done.
+         */
+        this.showCancel = true;
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
@@ -54,7 +60,7 @@ const VerdocsContactPicker = class {
             this.phone = this.templateRole.phone || '';
             // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set
             this.delegator = this.templateRole.delegator || false;
-            this.name_locked = this.delegator ? false : (this.templateRole.name_locked || false);
+            this.name_locked = this.delegator ? false : this.templateRole.name_locked || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
             this.auth_methods = this.templateRole.auth_methods || [];
@@ -69,6 +75,19 @@ const VerdocsContactPicker = class {
         this.authMethodsLoading = false;
         console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);
     }
+    // Make sure the suggestion list doesn't break the scroll region
+    componentDidRender() {
+        const body = this.el.querySelector('.form-body');
+        ScrollFade.updateScrollFade(body);
+        if (this.suggestionsEl && this.namesRowEl && body) {
+            this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;
+        }
+    }
+    handleDocumentClick(e) {
+        if (this.showSuggestions && !this.el.contains(e.target)) {
+            this.showSuggestions = false;
+        }
+    }
     handleFirstNameChange(e) {
         var _a;
         this.first_name = e.target.value;
@@ -111,71 +130,79 @@ const VerdocsContactPicker = class {
         this.phone = suggestion.phone;
         this.showSuggestions = false;
     }
+    toggleAuthMethod(method) {
+        if (this.auth_methods.includes(method)) {
+            this.auth_methods = this.auth_methods.filter(selected => selected !== method);
+        }
+        else {
+            this.auth_methods = [...this.auth_methods, method];
+        }
+    }
+    // TODO: Decide whether we want to keep these mutually-exclusive
+    setSigningOption(option) {
+        this.delegator = option === 'delegator';
+        this.name_locked = option === 'name_locked';
+    }
+    renderPill(label, selected, onClick, opts = {}) {
+        return (index.h("button", { type: "button", class: { pill: true, selected, locked: !!opts.locked }, "aria-pressed": selected ? 'true' : 'false', disabled: opts.locked && !selected, title: opts.title, onClick: onClick }, opts.locked && index.h("span", { class: "pill-icon", innerHTML: lockIcon }), label));
+    }
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) || isValidPhone(this.phone));
         const hasBasics = this.first_name && this.last_name && jsSdk.isValidEmail(this.email);
-        const hasAuthRequirements = !this.auth_methods.length ||
-            (this.auth_methods.includes('passcode') && !!this.passcode) ||
-            (this.auth_methods.includes('kba') && !!this.first_name && !!this.last_name) ||
-            (this.auth_methods.includes('email') && !!this.email) ||
-            (this.auth_methods.includes('sms') && !!this.phone);
+        const hasAuthRequirements = this.auth_methods.every(method => {
+            switch (method) {
+                case 'passcode':
+                    return !!this.passcode;
+                case 'kba':
+                    return !!this.first_name && !!this.last_name;
+                case 'email':
+                    return !!this.email;
+                case 'sms':
+                    return !!this.phone;
+                default:
+                    return true;
+            }
+        });
         const canSubmit = hasBasics && hasAuthRequirements;
         const hasSMSAuth = !!this.activeEntitlements.sms_auth;
-        const verificationOptions = [];
-        verificationOptions.push({ label: 'Passcode', value: 'passcode' });
-        verificationOptions.push({ label: 'Email', value: 'email' });
-        if (hasSMSAuth) {
-            verificationOptions.push({ label: 'SMS (One-Time Code)', value: 'sms' });
-        }
-        if (!!this.activeEntitlements.kba_auth) {
-            verificationOptions.push({ label: 'Knowledge-Based (KBA)', value: 'kba' });
-        }
-        if (!!this.activeEntitlements.id_auth) {
-            verificationOptions.push({ label: 'ID Check', value: 'id' });
-        }
-        return (index.h("form", { key: '6709871235915b9c57af981cb4ab8560c040c29f', onSubmit: e => e.preventDefault(),
-            // onClick={e => e.stopPropagation()}
-            autocomplete: "off" }, index.h("div", { key: 'b4792f8bf7a38bd1eca0a684da63e06607b29d4a', class: "row" }, index.h("label", { key: '75f1386774dcf2dba1ae074e2ef86b9d04525763', htmlFor: this.firstNameFieldId }, "Name:"), index.h("div", { key: '36916fdd64584ef209620a6311c4db381e55ea82', class: "names-row" }, index.h("input", { key: '8ab3867864dad6e2726a09666e8c3334f6bbc713', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.first_name, placeholder: "First...", onFocus: () => {
+        // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.
+        const verificationOptions = [
+            { label: 'Email OTP', value: 'email' },
+            { label: 'Passcode', value: 'passcode' },
+            { label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth },
+            { label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth },
+            { label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth },
+        ];
+        const signingOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';
+        return (index.h("form", { onSubmit: e => e.preventDefault(), autocomplete: "off" }, index.h("div", { class: "form-body-wrap" }, index.h("div", { class: "form-body", onScroll: (e) => {
+                ScrollFade.updateScrollFade(e.target);
+                this.showSuggestions = false;
+            } }, index.h("div", { class: "row names", ref: el => (this.namesRowEl = el) }, index.h("div", { class: "field" }, index.h("label", { htmlFor: this.firstNameFieldId }, "First name"), index.h("input", { id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.first_name, onFocus: () => {
                 // Give the blur event a chance to hide it first if going between first/last
                 setTimeout(() => {
                     var _a;
                     this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0;
                 }, 100);
-            }, onInput: e => this.handleFirstNameChange(e) }), index.h("input", { key: '000acb6f26cfa8a78105b211df519ef3851dc474', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.last_name, placeholder: "Last...", onFocus: () => {
+            }, onInput: e => this.handleFirstNameChange(e) })), index.h("div", { class: "field" }, index.h("label", { htmlFor: this.lastNameFieldId }, "Last name"), index.h("input", { id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.last_name, onFocus: () => {
                 // Give the blur event a chance to hide it first if going between first/last
                 setTimeout(() => {
                     var _a;
                     this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0;
                 }, 100);
-            }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (index.h("verdocs-portal", { key: '4e9c8ee57f464fcf09578430e1fe09981e87bafc', anchor: this.firstNameFieldId, onClickAway: () => {
-                this.showSuggestions = false;
-                document.querySelectorAll(`.verdocs-portal-wrapper`).forEach(el => el.remove());
-            }, id: "verdocs-contact-picker-suggestions" }, index.h("div", { key: '5cbf60f0f1186f318f686ef6bdc8d791072e4d41', class: "dropdown" }, this.contactSuggestions
+            }, onInput: e => this.handleLastNameChange(e) }))), index.h("div", { class: "field" }, index.h("label", { htmlFor: this.emailFieldId }, "Email"), index.h("input", { id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.email, onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), hasSMSAuth && (index.h("div", { class: "field" }, index.h("label", { htmlFor: this.phoneFieldId }, "Phone ", index.h("span", { class: "optional" }, "(optional)")), index.h("input", { id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.phone, placeholder: "+1 (555) 000-0000", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
+                this.phone = utils.convertToE164(e.target.value);
+            } }))), index.h("div", { class: "group" }, index.h("div", { class: "group-label" }, "Verification"), this.authMethodsLoading ? (index.h("verdocs-spinner", { size: 10, mode: "dark" })) : (index.h("div", { class: "pills" }, verificationOptions.map(option => this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {
+            locked: option.locked,
+            title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,
+        })))), this.auth_methods.includes('passcode') && (index.h("div", { class: "passcode" }, index.h("input", { id: "verdocs-passcode", name: "verdocs-passcode", type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", "aria-label": "Passcode", value: this.passcode, placeholder: "4-8 digits", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) }), index.h("span", { class: "passcode-hint" }, "PIN or passcode shared separately with the recipient ahead of time")))), index.h("div", { class: "group" }, index.h("div", { class: "group-label" }, "Signing options"), index.h("div", { class: "pills" }, this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none')), this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator')), this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked')))), index.h("div", { class: "field" }, index.h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message ", index.h("span", { class: "optional" }, "(optional)")), index.h("textarea", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Add a message to the invitation", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message))), index.h("div", { class: "scroll-fade" }), this.showSuggestions && (index.h("div", { class: "suggestions", role: "listbox", ref: el => (this.suggestionsEl = el) }, this.contactSuggestions
             .filter(suggestion => { var _a; return !this.first_name || ((_a = suggestion.first_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.first_name.toLowerCase())); })
             .map(suggestion => {
             var _a;
             return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : index.h("div", { class: "avatar", innerHTML: addrBookIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, jsSdk.formatFullName(suggestion)), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
-        }))))), index.h("div", { key: '3d6aaa5e5bd3f0bc5681c4b788f222b6dfb45584', class: "row" }, index.h("label", { key: '67e9b6d47602d8c455a46e47b94bf008d2ac3a4e', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: 'b65569322f9a9864fe82ac3371ffcf4e769b69f1', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.email, placeholder: "Invite/verify via email...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), hasSMSAuth && (index.h("div", { key: 'defed17223c457db6eea0aff5c13598a70882157', class: "row" }, index.h("label", { key: '7a06bd13e92cd70c51f23228bbe4ed5be59919bb', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: '770012fd3d838449afa88309f7b003c600e10a1c', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.phone, placeholder: "Invite/verify via SMS...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
-                this.phone = utils.convertToE164(e.target.value);
-            } }))), index.h(index.Fragment, { key: 'e0071e7e2fb5521685c8863dab279f31089bf20e' }, verificationOptions.length > 0 && (index.h("div", { key: '7f769fdb13d206c769b813eef2c68e810bc635f3', class: "row pin-code" }, index.h("label", { key: '4ebf33f0821f3b1f2a63ac918d3d2923b8f38e38' }, "Verification Methods:"), this.authMethodsLoading ? (index.h("verdocs-spinner", { size: 10, mode: "dark", style: { margin: 'auto' } })) : (index.h("div", null, verificationOptions.map((option, i) => (index.h("div", { class: "option" }, index.h("verdocs-checkbox", { size: "small", id: `verdocs-multi-select-opt-${i}`, value: option.value, checked: this.auth_methods.includes(option.value), onInput: (e) => {
-                if (e.target.checked) {
-                    this.auth_methods = [...this.auth_methods, option.value];
-                }
-                else {
-                    this.auth_methods = this.auth_methods.filter(selected => selected !== option.value);
-                }
-            } }), index.h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label)))))))), this.auth_methods.includes('passcode') && (index.h("div", { key: '79feab0e29cbfbbb825f285a995d21576732bb8a', class: "row pin-code" }, index.h("label", { key: '7fd8dd8c3f254e9d6eba0e657f3a02f0fd47b05e', htmlFor: this.phoneFieldId }, "Passcode:"), index.h("input", { key: 'a9d0055ca2669776bc465ed4d7a1ce414bb628a4', id: "verdocs-passcode", name: "verdocs-passcode", type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.passcode, placeholder: "4-8 digits recommended...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) })))), index.h("div", { key: '71101e3ae9adab93ffde79f43431ab91657df8cd', class: "row pin-code" }, index.h("label", { key: '312a0dafe35171d1ebc61e62f868e2fdcd8a8e8d', style: { marginTop: '6px' } }, "Options:"), index.h("div", { key: '38341490838ffe88ee03800e886d46b163f1d21a' }, index.h("div", { key: '68fbb6b02029ba082da5db49687989e2d0228235', class: "option" }, index.h("verdocs-checkbox", { key: '57c933a6ebc171d8a0c86452ff26504270175463', size: "small", id: "verdocs-delegator", checked: this.delegator, disabled: this.name_locked, onInput: (e) => {
-                this.delegator = e.target.checked;
-                if (this.delegator)
-                    this.name_locked = false;
-            } }), index.h("label", { key: '8d4bbaef0ca5cea8100777fa37d520f1bd5a1d1e', htmlFor: "verdocs-delegator" }, "May delegate signing")), index.h("div", { key: 'd1278133af51917475ae1778c28da315072ca4a6', class: "option" }, index.h("verdocs-checkbox", { key: '32f6401902c5f850f52c58fb06def2d16fc65e99', size: "small", id: "verdocs-name-locked", checked: this.name_locked, disabled: this.delegator, onInput: (e) => {
-                this.name_locked = e.target.checked;
-                if (this.name_locked)
-                    this.delegator = false;
-            } }), index.h("label", { key: '82d3cb3a2c48c66e8dd4bf917e35ed85327d994d', htmlFor: "verdocs-name-locked" }, "Name locked")))), index.h("div", { key: '01f4e93445daee8493eb67f41640865753db54bb', class: "row message" }, index.h("label", { key: '499b65b9368abe5f355ece31825fdd6b92905b55', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("textarea", { key: '817c16d982edb9af18f8ebee829ed77068d431b5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Optional message to include in invitation...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message)), index.h("div", { key: '044a45c3a9ba57334c6e10f12e0b1f19ce5c3403', class: "buttons" }, index.h("div", { key: '6aa3536c73eef3852f7d483deee3773413167f5d', class: "flex-fill" }), index.h("verdocs-button", { key: '7dc65ba7bcb927c9822cc19d00b3a74278db8688', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '7f3434aa2547d87ad2a54610374bec0511aa7940', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
+        })))), index.h("div", { class: "buttons" }, this.showCancel && index.h("verdocs-button", { label: "Cancel", variant: "text", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "Done", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
     }
+    get el() { return index.getElement(this); }
 };
 VerdocsContactPicker.style = verdocsContactPickerCss();

package/dist/cjs/verdocs-contact-picker.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"verdocs-contact-picker.cjs.entry.js","mappings":"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","names":["VerdocsEndpoint","formatFullName","getActiveEntitlements","isValidEmail","h","convertToE164","Fragment"],"sources":["src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n display: block;\n border: 1px solid #ebebeb;\n background-color: $verdocs-grey-4;\n font-family: $verdocs-primary-font;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n form {\n gap: 12px;\n width: 300px;\n padding: 12px;\n display: flex;\n flex-direction: column;\n background-color: $verdocs-grey-3;\n\n .row {\n gap: 8px;\n display: flex;\n position: relative;\n flex-direction: row;\n align-items: flex-start;\n\n .option {\n gap: 4px;\n display: flex;\n padding: 5px 8px;\n align-items: center;\n flex-direction: row;\n text-wrap: nowrap;\n }\n }\n\n .names-row {\n gap: 8px;\n display: flex;\n flex-direction: row;\n\n > input {\n font-size: 14px;\n width: 88px;\n }\n }\n\n .pin-code {\n gap: 8px;\n display: flex;\n align-items: flex-start;\n flex-direction: row;\n\n > input {\n flex: 0 0 197px;\n font-size: 14px;\n //margin-left: 88px;\n }\n }\n\n .address {\n gap: 8px;\n display: flex;\n align-items: center;\n flex-direction: row;\n\n > input {\n flex: 1;\n font-size: 14px;\n //margin-left: 88px;\n }\n }\n\n .zip-code {\n gap: 8px;\n display: flex;\n align-items: center;\n flex-direction: row;\n\n > input {\n flex: 1;\n font-size: 14px;\n //margin-left: 88px;\n }\n }\n\n label {\n display: flex;\n flex: 0 0 80px;\n font-size: 13px;\n font-weight: 500;\n color: $verdocs-bg-4;\n }\n\n .row.message textarea {\n width: 100%;\n padding: 5px 7px;\n border-radius: 4px;\n font-family: $verdocs-primary-font;\n }\n\n input {\n flex: 1;\n padding: 6px;\n font-size: 14px;\n border-radius: 3px;\n //background: #00000005;\n border: 1px solid $border-color-extralight;\n\n &:focus {\n outline: none;\n }\n }\n }\n\n .buttons {\n display: flex;\n column-gap: 6px;\n margin-top: 16px;\n flex-direction: row;\n\n .flex-fill {\n flex: 1;\n }\n }\n\n ::placeholder {\n color: $verdocs-bg-2;\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n}\n\n#verdocs-contact-picker-suggestions {\n .dropdown {\n max-height: 225px;\n overflow-y: scroll;\n background: #ffffff;\n font-family: $verdocs-primary-font;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n .suggestion {\n display: flex;\n padding: 6px 12px;\n align-items: center;\n flex-direction: row;\n\n svg {\n width: 32px;\n height: 32px;\n }\n\n .avatar {\n width: 32px;\n height: 32px;\n flex: 0 0 32px;\n margin-right: 8px;\n border-radius: 100%;\n }\n\n .details {\n display: flex;\n flex-direction: column;\n }\n\n .name {\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 3px;\n color: $verdocs-grey-0;\n }\n\n .destination {\n font-size: 14px;\n margin-bottom: 3px;\n color: $verdocs-grey-1;\n }\n\n &:hover {\n background: #eee;\n cursor: pointer;\n }\n }\n }\n}\n","import {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {convertToE164} from '../../../utils/utils';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nexport interface IContactSearchEvent {\n query: string;\n}\n\nexport interface IContactSelectEvent {\n first_name: string;\n last_name: string;\n email: string;\n phone: string;\n message: string;\n delegator: boolean;\n name_locked: boolean;\n auth_methods: TRecipientAuthMethod[];\n passcode: string;\n address: string;\n zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/*\n Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\n \n This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n \n ```ts\n * <verdocs-contact-picker\n * templateRole={role}\n * contactSuggestions={[]}\n * onNext={e => console.log('Contact completed', e.detail)}\n * />\n * ```\n /\n@Component({\n tag: 'verdocs-contact-picker',\n styleUrl: 'verdocs-contact-picker.scss',\n shadow: false,\n})\nexport class VerdocsContactPicker {\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The role that this contact will be assigned to.\n /\n @Prop() templateRole: Partial<IRecipient> \| null = null;\n\n /\n If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n * of suggestions be limited to the 5 best matching records.\n /\n @Prop() contactSuggestions: TPickerContact[] = [];\n\n /\n Event fired when the user enters text in the search field. The calling application may use this to update\n * the `contactSuggestions` property.\n /\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n /\n Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n /\n @Event({composed: true}) exit: EventEmitter;\n\n /\n Event fired when the user changes the type.\n */\n @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n @State() first_name: string;\n @State() last_name: string;\n @State() email: string;\n @State() phone: string;\n @State() zip: string;\n @State() address: string;\n @State() message: string;\n @State() showSuggestions: boolean = false;\n @State() showMessage: boolean = false;\n @State() delegator: boolean = false;\n @State() name_locked: boolean = false;\n @State() auth_methods: TRecipientAuthMethod[] = [];\n @State() passcode: string = '';\n\n @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n @State() authMethodsLoading: boolean = true\n\n async componentWillLoad() {\n this.endpoint.loadSession();\n\n if (this.templateRole) {\n const fullName = formatFullName(this.templateRole);\n const nameComponents = fullName.split(' ');\n const firstName = this.templateRole.first_name \|\| nameComponents.shift() \|\| '';\n const lastName = this.templateRole.last_name \|\| nameComponents.join(' ') \|\| '';\n this.first_name = firstName;\n this.last_name = lastName;\n\n this.email = this.templateRole.email \|\| '';\n this.phone = this.templateRole.phone \|\| '';\n // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n this.delegator = this.templateRole.delegator \|\| false;\n this.name_locked = this.delegator ? false : (this.templateRole.name_locked \|\| false);\n this.message = this.templateRole.message \|\| '';\n this.showMessage = this.message !== '';\n this.auth_methods = this.templateRole.auth_methods \|\| [];\n this.passcode = this.templateRole.passcode \|\| '';\n }\n\n // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n // call fails or we stay loading forever.\n this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n return {} as Partial<Record<TEntitlement, IEntitlement>>;\n });\n\n this.authMethodsLoading = false;\n console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n }\n\n handleFirstNameChange(e: any) {\n this.first_name = e.target.value;\n this.searchContacts?.emit({query: this.first_name});\n }\n\n handleLastNameChange(e: any) {\n this.last_name = e.target.value;\n this.searchContacts?.emit({query: this.last_name});\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n this.showSuggestions = false;\n this.exit?.emit();\n }\n\n handleSubmit(e: any) {\n e.stopPropagation();\n\n this.showSuggestions = false;\n this.next?.emit({\n first_name: this.first_name,\n last_name: this.last_name,\n email: this.email,\n phone: this.phone,\n message: this.message,\n delegator: this.delegator,\n name_locked: this.name_locked,\n auth_methods: this.auth_methods,\n passcode: this.passcode,\n address: this.address,\n zip: this.zip,\n });\n }\n\n handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n e.stopPropagation();\n\n this.first_name = suggestion.first_name;\n this.last_name = suggestion.last_name;\n this.email = suggestion.email;\n this.phone = suggestion.phone;\n this.showSuggestions = false;\n }\n\n // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n // and show a duplicate autocomplete picker on top of our own.\n render() {\n // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) \|\| isValidPhone(this.phone));\n const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n const hasAuthRequirements =\n !this.auth_methods.length \|\|\n (this.auth_methods.includes('passcode') && !!this.passcode) \|\|\n (this.auth_methods.includes('kba') && !!this.first_name && !!this.last_name) \|\|\n (this.auth_methods.includes('email') && !!this.email) \|\|\n (this.auth_methods.includes('sms') && !!this.phone);\n const canSubmit = hasBasics && hasAuthRequirements;\n const hasSMSAuth = !!this.activeEntitlements.sms_auth\n\n const verificationOptions = [];\n\n verificationOptions.push({label: 'Passcode', value: 'passcode'});\n verificationOptions.push({label: 'Email', value: 'email'});\n\n if (hasSMSAuth) {\n verificationOptions.push({label: 'SMS (One-Time Code)', value: 'sms'});\n }\n\n if (!!this.activeEntitlements.kba_auth) {\n verificationOptions.push({label: 'Knowledge-Based (KBA)', value: 'kba'});\n }\n\n if (!!this.activeEntitlements.id_auth) {\n verificationOptions.push({label: 'ID Check', value: 'id'});\n }\n\n return (\n <form\n onSubmit={e => e.preventDefault()}\n // onClick={e => e.stopPropagation()}\n autocomplete=\"off\"\n >\n <div class=\"row\">\n <label htmlFor={this.firstNameFieldId}>Name:</label>\n <div class=\"names-row\">\n <input\n id={this.firstNameFieldId}\n name={this.firstNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.first_name}\n placeholder=\"First...\"\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleFirstNameChange(e)}\n />\n <input\n id={this.lastNameFieldId}\n name={this.lastNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.last_name}\n placeholder=\"Last...\"\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleLastNameChange(e)}\n />\n </div>\n\n {this.showSuggestions && (\n <verdocs-portal\n anchor={this.firstNameFieldId}\n onClickAway={() => {\n this.showSuggestions = false;\n document.querySelectorAll(`.verdocs-portal-wrapper`).forEach(el => el.remove());\n }}\n id=\"verdocs-contact-picker-suggestions\"\n >\n <div class=\"dropdown\">\n {this.contactSuggestions\n .filter(suggestion => !this.first_name \|\| suggestion.first_name?.toLowerCase().includes(this.first_name.toLowerCase()))\n .map(suggestion => (\n <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n <div class=\"details\">\n <div class=\"name\">{formatFullName(suggestion)}</div>\n {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n </div>\n </div>\n ))}\n </div>\n </verdocs-portal>\n )}\n </div>\n\n <div class=\"row\">\n <label htmlFor={this.emailFieldId}>Email:</label>\n <input\n id={this.emailFieldId}\n name={this.emailFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.email}\n placeholder=\"Invite/verify via email...\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.email = e.target.value)}\n />\n </div>\n\n {hasSMSAuth && (\n <div class=\"row\">\n <label htmlFor={this.phoneFieldId}>Phone:</label>\n <input\n id={this.phoneFieldId}\n name={this.phoneFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.phone}\n placeholder=\"Invite/verify via SMS...\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => {\n this.phone = convertToE164(e.target.value);\n }}\n />\n </div>\n )}\n\n <Fragment>\n {verificationOptions.length > 0 && (\n <div class=\"row pin-code\">\n <label>Verification Methods:</label>\n {this.authMethodsLoading ? (\n <verdocs-spinner size={10} mode=\"dark\" style={{margin: 'auto'}} />\n ) : (\n <div>\n {verificationOptions.map((option, i) => (\n <div class=\"option\">\n <verdocs-checkbox\n size=\"small\"\n id={`verdocs-multi-select-opt-${i}`}\n value={option.value}\n checked={this.auth_methods.includes(option.value)}\n onInput={(e: any) => {\n if (e.target.checked) {\n this.auth_methods = [...this.auth_methods, option.value];\n } else {\n this.auth_methods = this.auth_methods.filter(selected => selected !== option.value);\n }\n }}\n />\n <label htmlFor={`verdocs-multi-select-option-${i}`}>{option.label}</label>\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {this.auth_methods.includes('passcode') && (\n <div class=\"row pin-code\">\n <label htmlFor={this.phoneFieldId}>Passcode:</label>\n <input\n id=\"verdocs-passcode\"\n name=\"verdocs-passcode\"\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.passcode}\n placeholder=\"4-8 digits recommended...\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.passcode = e.target.value)}\n />\n </div>\n )}\n </Fragment>\n\n <div class=\"row pin-code\">\n <label style={{marginTop: '6px'}}>Options:</label>\n <div>\n <div class=\"option\">\n <verdocs-checkbox\n size=\"small\"\n id=\"verdocs-delegator\"\n checked={this.delegator}\n disabled={this.name_locked}\n onInput={(e: any) => {\n this.delegator = e.target.checked;\n if (this.delegator) this.name_locked = false;\n }}\n />\n <label htmlFor=\"verdocs-delegator\">May delegate signing</label>\n </div>\n <div class=\"option\">\n <verdocs-checkbox\n size=\"small\"\n id=\"verdocs-name-locked\"\n checked={this.name_locked}\n disabled={this.delegator}\n onInput={(e: any) => {\n this.name_locked = e.target.checked;\n if (this.name_locked) this.delegator = false;\n }}\n />\n <label htmlFor=\"verdocs-name-locked\">Name locked</label>\n </div>\n </div>\n </div>\n\n <div class=\"row message\">\n <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n <textarea\n id=\"verdocs-contact-picker-message\"\n name=\"verdocs-contact-picker-message\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n placeholder=\"Optional message to include in invitation...\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.message = e.target.value)}\n >\n {this.message}\n </textarea>\n </div>\n\n <div class=\"buttons\">\n <div class=\"flex-fill\" />\n\n <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n <verdocs-button label=\"OK\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"verdocs-contact-picker.cjs.entry.js","mappings":"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","names":["VerdocsEndpoint","formatFullName","getActiveEntitlements","updateScrollFade","h","isValidEmail","convertToE164"],"sources":["src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n --picker-ink: var(--verdocs-body-color, #111827);\n --picker-ink-2: #374151;\n --picker-muted: #6b7280;\n --picker-faint: #9ca3af;\n --picker-control-border: #d1d5db;\n --picker-accent: var(--verdocs-link-color, #{$secondary-color});\n --picker-accent-tint: #f4f5fc;\n --picker-accent-tint-2: #e6e7f8;\n\n display: block;\n font-size: 14px;\n color: var(--picker-ink);\n font-family: $verdocs-primary-font;\n\n * {\n box-sizing: border-box;\n }\n\n form {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n // Fields scroll above a pinned Done button when the host constrains the picker's height; with\n // no constraint the body simply grows and the fade never shows.\n .form-body-wrap {\n position: relative;\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n .form-body {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n }\n\n .scroll-fade {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 36px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease-out;\n background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n }\n\n .scrollable:not(.at-end) > .scroll-fade {\n opacity: 1;\n }\n\n .row.names {\n display: flex;\n column-gap: 8px;\n position: relative;\n\n .field {\n flex: 1;\n min-width: 0;\n }\n }\n\n .field {\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n margin: 0 0 10px 0;\n\n label {\n font-size: 12px;\n font-weight: 500;\n color: var(--picker-ink-2);\n\n .optional {\n color: var(--picker-muted);\n font-weight: 400;\n }\n }\n }\n\n input,\n textarea {\n width: 100%;\n font-size: 13px;\n font-family: inherit;\n color: var(--picker-ink);\n background: #ffffff;\n border: 1px solid var(--picker-control-border);\n border-radius: 6px;\n outline: none;\n\n &:focus {\n border-color: var(--picker-accent);\n box-shadow: 0 0 0 2px var(--picker-accent-tint-2);\n }\n\n &::placeholder {\n color: var(--picker-faint);\n opacity: 1;\n }\n }\n\n input {\n height: 34px;\n padding: 0 10px;\n }\n\n textarea {\n height: 56px;\n padding: 8px 10px;\n resize: vertical;\n }\n\n .group {\n margin: 2px 0 12px 0;\n\n .group-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--picker-ink-2);\n margin: 0 0 6px 0;\n }\n }\n\n .pills {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n\n .pill {\n all: unset;\n height: 26px;\n padding: 0 9px;\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n font-family: inherit;\n white-space: nowrap;\n border-radius: 999px;\n color: var(--picker-ink-2);\n border: 1px solid var(--picker-control-border);\n\n &:focus-visible {\n outline: 2px solid var(--picker-accent);\n outline-offset: 2px;\n }\n\n &.selected {\n color: var(--picker-accent);\n border-color: var(--picker-accent);\n background: var(--picker-accent-tint);\n }\n\n &.locked {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .pill-icon,\n .pill-icon svg {\n width: 12px;\n height: 12px;\n display: block;\n }\n }\n\n .passcode {\n display: flex;\n align-items: center;\n column-gap: 8px;\n margin-top: 8px;\n\n input {\n flex: 0 0 120px;\n width: 120px;\n height: 30px;\n }\n\n .passcode-hint {\n flex: 1;\n min-width: 0;\n font-size: 11px;\n line-height: 1.35;\n color: var(--picker-muted);\n align-self: center;\n }\n }\n\n .buttons {\n margin-top: 10px;\n padding-top: 12px;\n border-top: 1px solid #e5e7eb;\n flex: none;\n display: flex;\n column-gap: 10px;\n\n verdocs-button:last-child {\n flex: 1;\n }\n\n verdocs-button:last-child button {\n width: 100%;\n }\n }\n\n .suggestions {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 20;\n max-height: 225px;\n overflow-y: auto;\n background: #ffffff;\n border-radius: 6px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);\n\n .suggestion {\n display: flex;\n padding: 6px 12px;\n align-items: center;\n flex-direction: row;\n cursor: pointer;\n\n svg {\n width: 28px;\n height: 28px;\n }\n\n .avatar {\n width: 28px;\n height: 28px;\n flex: 0 0 28px;\n margin-right: 8px;\n border-radius: 100%;\n }\n\n .details {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .name {\n font-size: 13px;\n font-weight: 500;\n color: var(--picker-ink);\n }\n\n .destination {\n font-size: 12px;\n color: var(--picker-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &:hover {\n background: var(--picker-accent-tint);\n }\n }\n }\n\n // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n // LastPass is ignoring the data-lpignore attribute in some cases\n [data-lastpass-icon-root] {\n display: none !important;\n }\n}\n","import {Component, Element, h, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {convertToE164} from '../../../utils/utils';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nconst lockIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></svg>`;\n\ntype TSigningOption = 'none' \| 'delegator' \| 'name_locked';\n\nexport interface IContactSearchEvent {\n query: string;\n}\n\nexport interface IContactSelectEvent {\n first_name: string;\n last_name: string;\n email: string;\n phone: string;\n message: string;\n delegator: boolean;\n name_locked: boolean;\n auth_methods: TRecipientAuthMethod[];\n passcode: string;\n address: string;\n zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/*\n Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\n \n This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n \n ```ts\n * <verdocs-contact-picker\n * templateRole={role}\n * contactSuggestions={[]}\n * onNext={e => console.log('Contact completed', e.detail)}\n * />\n * ```\n /\n@Component({\n tag: 'verdocs-contact-picker',\n styleUrl: 'verdocs-contact-picker.scss',\n shadow: false,\n})\nexport class VerdocsContactPicker {\n @Element() el: HTMLElement;\n\n private namesRowEl: HTMLElement;\n private suggestionsEl: HTMLElement;\n\n /\n The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n /\n @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n /\n The role that this contact will be assigned to.\n /\n @Prop() templateRole: Partial<IRecipient> \| null = null;\n\n /\n If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n * of suggestions be limited to the 5 best matching records.\n /\n @Prop() contactSuggestions: TPickerContact[] = [];\n\n /\n Whether to show a Cancel button beside Done.\n /\n @Prop() showCancel = true;\n\n /\n Event fired when the user enters text in the search field. The calling application may use this to update\n * the `contactSuggestions` property.\n /\n @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n /\n Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n /\n @Event({composed: true}) exit: EventEmitter;\n\n /\n Event fired when the user changes the type.\n */\n @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n @State() first_name: string;\n @State() last_name: string;\n @State() email: string;\n @State() phone: string;\n @State() zip: string;\n @State() address: string;\n @State() message: string;\n @State() showSuggestions: boolean = false;\n @State() showMessage: boolean = false;\n @State() delegator: boolean = false;\n @State() name_locked: boolean = false;\n @State() auth_methods: TRecipientAuthMethod[] = [];\n @State() passcode: string = '';\n\n @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n @State() authMethodsLoading: boolean = true;\n\n async componentWillLoad() {\n this.endpoint.loadSession();\n\n if (this.templateRole) {\n const fullName = formatFullName(this.templateRole);\n const nameComponents = fullName.split(' ');\n const firstName = this.templateRole.first_name \|\| nameComponents.shift() \|\| '';\n const lastName = this.templateRole.last_name \|\| nameComponents.join(' ') \|\| '';\n this.first_name = firstName;\n this.last_name = lastName;\n\n this.email = this.templateRole.email \|\| '';\n this.phone = this.templateRole.phone \|\| '';\n // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n this.delegator = this.templateRole.delegator \|\| false;\n this.name_locked = this.delegator ? false : this.templateRole.name_locked \|\| false;\n this.message = this.templateRole.message \|\| '';\n this.showMessage = this.message !== '';\n this.auth_methods = this.templateRole.auth_methods \|\| [];\n this.passcode = this.templateRole.passcode \|\| '';\n }\n\n // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n // call fails or we stay loading forever.\n this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n return {} as Partial<Record<TEntitlement, IEntitlement>>;\n });\n\n this.authMethodsLoading = false;\n console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n }\n\n // Make sure the suggestion list doesn't break the scroll region\n componentDidRender() {\n const body = this.el.querySelector('.form-body') as HTMLElement \| null;\n updateScrollFade(body);\n if (this.suggestionsEl && this.namesRowEl && body) {\n this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;\n }\n }\n\n @Listen('click', {target: 'document'})\n handleDocumentClick(e: MouseEvent) {\n if (this.showSuggestions && !this.el.contains(e.target as Node)) {\n this.showSuggestions = false;\n }\n }\n\n handleFirstNameChange(e: any) {\n this.first_name = e.target.value;\n this.searchContacts?.emit({query: this.first_name});\n }\n\n handleLastNameChange(e: any) {\n this.last_name = e.target.value;\n this.searchContacts?.emit({query: this.last_name});\n }\n\n handleCancel(e: any) {\n e.stopPropagation();\n this.showSuggestions = false;\n this.exit?.emit();\n }\n\n handleSubmit(e: any) {\n e.stopPropagation();\n\n this.showSuggestions = false;\n this.next?.emit({\n first_name: this.first_name,\n last_name: this.last_name,\n email: this.email,\n phone: this.phone,\n message: this.message,\n delegator: this.delegator,\n name_locked: this.name_locked,\n auth_methods: this.auth_methods,\n passcode: this.passcode,\n address: this.address,\n zip: this.zip,\n });\n }\n\n handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n e.stopPropagation();\n\n this.first_name = suggestion.first_name;\n this.last_name = suggestion.last_name;\n this.email = suggestion.email;\n this.phone = suggestion.phone;\n this.showSuggestions = false;\n }\n\n toggleAuthMethod(method: TRecipientAuthMethod) {\n if (this.auth_methods.includes(method)) {\n this.auth_methods = this.auth_methods.filter(selected => selected !== method);\n } else {\n this.auth_methods = [...this.auth_methods, method];\n }\n }\n\n // TODO: Decide whether we want to keep these mutually-exclusive\n setSigningOption(option: TSigningOption) {\n this.delegator = option === 'delegator';\n this.name_locked = option === 'name_locked';\n }\n\n renderPill(label: string, selected: boolean, onClick: () => void, opts: {locked?: boolean; title?: string} = {}) {\n return (\n <button\n type=\"button\"\n class={{pill: true, selected, locked: !!opts.locked}}\n aria-pressed={selected ? 'true' : 'false'}\n disabled={opts.locked && !selected}\n title={opts.title}\n onClick={onClick}\n >\n {opts.locked && <span class=\"pill-icon\" innerHTML={lockIcon} />}\n {label}\n </button>\n );\n }\n\n // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n // and show a duplicate autocomplete picker on top of our own.\n render() {\n const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n\n const hasAuthRequirements = this.auth_methods.every(method => {\n switch (method) {\n case 'passcode':\n return !!this.passcode;\n case 'kba':\n return !!this.first_name && !!this.last_name;\n case 'email':\n return !!this.email;\n case 'sms':\n return !!this.phone;\n default:\n return true;\n }\n });\n\n const canSubmit = hasBasics && hasAuthRequirements;\n const hasSMSAuth = !!this.activeEntitlements.sms_auth;\n\n // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.\n const verificationOptions: {label: string; value: TRecipientAuthMethod; locked?: boolean}[] = [\n {label: 'Email OTP', value: 'email'},\n {label: 'Passcode', value: 'passcode'},\n {label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth},\n {label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth},\n {label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth},\n ];\n\n const signingOption: TSigningOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';\n\n return (\n <form onSubmit={e => e.preventDefault()} autocomplete=\"off\">\n <div class=\"form-body-wrap\">\n <div\n class=\"form-body\"\n onScroll={(e: any) => {\n updateScrollFade(e.target);\n this.showSuggestions = false;\n }}\n >\n <div class=\"row names\" ref={el => (this.namesRowEl = el)}>\n <div class=\"field\">\n <label htmlFor={this.firstNameFieldId}>First name</label>\n <input\n id={this.firstNameFieldId}\n name={this.firstNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.first_name}\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleFirstNameChange(e)}\n />\n </div>\n <div class=\"field\">\n <label htmlFor={this.lastNameFieldId}>Last name</label>\n <input\n id={this.lastNameFieldId}\n name={this.lastNameFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.last_name}\n onFocus={() => {\n // Give the blur event a chance to hide it first if going between first/last\n setTimeout(() => {\n this.showSuggestions = this.contactSuggestions?.length > 0;\n }, 100);\n }}\n onInput={e => this.handleLastNameChange(e)}\n />\n </div>\n </div>\n\n <div class=\"field\">\n <label htmlFor={this.emailFieldId}>Email</label>\n <input\n id={this.emailFieldId}\n name={this.emailFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.email}\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.email = e.target.value)}\n />\n </div>\n\n {hasSMSAuth && (\n <div class=\"field\">\n <label htmlFor={this.phoneFieldId}>\n Phone <span class=\"optional\">(optional)</span>\n </label>\n <input\n id={this.phoneFieldId}\n name={this.phoneFieldId}\n type=\"text\"\n data-lpignore=\"true\"\n autoComplete=\"blocked\"\n aria-autocomplete=\"none\"\n value={this.phone}\n placeholder=\"+1 (555) 000-0000\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => {\n this.phone = convertToE164(e.target.value);\n }}\n />\n </div>\n )}\n\n <div class=\"group\">\n <div class=\"group-label\">Verification</div>\n {this.authMethodsLoading ? (\n <verdocs-spinner size={10} mode=\"dark\" />\n ) : (\n <div class=\"pills\">\n {verificationOptions.map(option =>\n this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {\n locked: option.locked,\n title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,\n }),\n )}\n </div>\n )}\n\n {this.auth_methods.includes('passcode') && (\n <div class=\"passcode\">\n <input\n id=\"verdocs-passcode\"\n name=\"verdocs-passcode\"\n type=\"text\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n aria-autocomplete=\"none\"\n aria-label=\"Passcode\"\n value={this.passcode}\n placeholder=\"4-8 digits\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.passcode = e.target.value)}\n />\n <span class=\"passcode-hint\">PIN or passcode shared separately with the recipient ahead of time</span>\n </div>\n )}\n </div>\n\n <div class=\"group\">\n <div class=\"group-label\">Signing options</div>\n <div class=\"pills\">\n {this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none'))}\n {this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator'))}\n {this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked'))}\n </div>\n </div>\n\n <div class=\"field\">\n <label htmlFor=\"verdocs-contact-picker-message\">\n Message <span class=\"optional\">(optional)</span>\n </label>\n <textarea\n id=\"verdocs-contact-picker-message\"\n name=\"verdocs-contact-picker-message\"\n data-lpignore=\"true\"\n autocomplete=\"blocked\"\n placeholder=\"Add a message to the invitation\"\n onFocus={() => (this.showSuggestions = false)}\n onInput={(e: any) => (this.message = e.target.value)}\n >\n {this.message}\n </textarea>\n </div>\n </div>\n <div class=\"scroll-fade\" />\n {this.showSuggestions && (\n <div class=\"suggestions\" role=\"listbox\" ref={el => (this.suggestionsEl = el)}>\n {this.contactSuggestions\n .filter(suggestion => !this.first_name \|\| suggestion.first_name?.toLowerCase().includes(this.first_name.toLowerCase()))\n .map(suggestion => (\n <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n <div class=\"details\">\n <div class=\"name\">{formatFullName(suggestion)}</div>\n {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n\n <div class=\"buttons\">\n {this.showCancel && <verdocs-button label=\"Cancel\" variant=\"text\" size=\"small\" onClick={e => this.handleCancel(e)} />}\n <verdocs-button label=\"Done\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n </div>\n </form>\n );\n }\n}\n"],"version":3}

package/dist/cjs/verdocs-date-input.cjs.entry.js CHANGED Viewed

@@ -69,9 +69,9 @@ const VerdocsDateInput = class {
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (index.h(index.Host, { key: '71a719ba8d6e681242c6c49b55b9d55604d2f415', class: `input-field` }, index.h("label", { key: '9d74d99af32d008f7f17e43dca1b14b4ce5bcb51' }, this.label && (index.h("div", { key: '1f923573cbe777fe7240e6f220b7d558153242c8', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: '1930dc54e03d55760a4bd6820b1dbf072ede0e6d', class: "required" }, "*"))), index.h("div", { key: '8973217a4cbf29ebbde547f613cb968d9528ecdd', class: "input-container" }, index.h("input", { key: '7a59319f4259754c278ab25cd7e5a8989075ff0b', type: "text", value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", id: this.containerId, disabled: this.disabled, placeholder: this.placeholder,
+        return (index.h(index.Host, { key: 'b7a48a0bb7d89d60e232ec355700c776b38f0b7a', class: `input-field` }, index.h("label", { key: 'dd2e1e2c8cd4568b638b5d30a55fb56ab8c39a86' }, this.label && (index.h("div", { key: '2ade0c8add9622c686975c8cb49535eef677c579', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: 'e1e4e44842132ff842fd3c2ba170a4a818ab2fcd', class: "required" }, "*"))), index.h("div", { key: 'd3f5ca8892baf9174ae0de3262c968072db6ba98', class: "input-container" }, index.h("input", { key: '701878e19b0e27a6b331bb5b5bf51315f44359af', type: "text", value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", id: this.containerId, disabled: this.disabled, placeholder: this.placeholder,
             // onBlur={(e: any) => this.blur?.emit(e.target.value)}
-            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) })), this.helpText && index.h("verdocs-help-icon", { key: 'a743687d05a8c5d660bb045ba06265b3de6a63d4', text: this.helpText }))));
+            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) })), this.helpText && index.h("verdocs-help-icon", { key: '7d46ca401eb706e231f82b12f721c32df8b8bb17', text: this.helpText }))));
     }
     get hostEl() { return index.getElement(this); }
 };

package/dist/cjs/verdocs-dialog.cjs.entry.js CHANGED Viewed

@@ -26,7 +26,7 @@ const VerdocsDialog = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '256bf5ae3c3dd9a32e099d61849767a5ec35d9bc' }, index.h("div", { key: '41b3f2987146ca53e1a5973ef932d694813dd5eb', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '8c4e99a7a5125d847bfccd58ee986781bf473626', class: "dialog" }, index.h("div", { key: 'f0b983cf410d640fe5658220abe8b1f895d97737', class: "close-button", onClick: () => this.exit.emit() }, index.h("svg", { key: '498f98a2717ac6995d2faee73edffebe09d9556c', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'b317dee6bea04356af9ae30cfc9240376c438bb7', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '6103918ccc4e7edc95a2e28a65efbd07367aad31', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("slot", { key: '8cf86492ab827d0dee66fff1ea4396e4341ab428', name: "heading" }, index.h("div", { key: 'c04a9b12794347ec6001d8fd2f7741a94b54b527', class: "heading" })), index.h("slot", { key: '7909012e1431937c9ae319e3ee9d639f7e6292e8', name: "content" }, index.h("div", { key: '27112bcd33ec15e815661b30120d34868a177114', class: "content" })), index.h("slot", { key: 'ffcd7f6871f33ad13cac8708d5f2d9367dbccd51', name: "footer" }, index.h("div", { key: '0c24d84bfa1c20a90e593ec737d8ffc8468fb84b', class: "footer" }))))));
+        return (index.h(index.Host, { key: 'dad441bb5383b12d47e28fa3ad2fa04885366dfa' }, index.h("div", { key: '4fd288e634119a8291df5920d1676d73e88510ff', class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { key: '2ce2ec9ba9d39a6ec702f7cc27878041acd12f0c', class: "dialog" }, index.h("div", { key: '89002868b375dab2dfa4479ac03ce903e68fc8a8', class: "close-button", onClick: () => this.exit.emit() }, index.h("svg", { key: '0adbf812e101275fefaba9a127abb3c9ea851c8a', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a6c99474936a6d7fb37165abf6d37079a7c29850', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '5163975de7748c891db0abd9b27110349b5fb632', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("slot", { key: '5193280dad3d16eee0c278262ee7404ea73d39a8', name: "heading" }, index.h("div", { key: '79b21525fb2845e0740664678bd8a73a0cf81d17', class: "heading" })), index.h("slot", { key: '8c69f375d7a1cb3ebf4243b085f1255f58b53e7b', name: "content" }, index.h("div", { key: '5b538a2841c319473bcd680de3021cfe591acd84', class: "content" })), index.h("slot", { key: '3b3704771341b8198a37daf4051c9ab1010d76a5', name: "footer" }, index.h("div", { key: 'ea085dd29c37714c43474086a69ca7145dfb613f', class: "footer" }))))));
     }
 };
 VerdocsDialog.style = verdocsDialogCss();

package/dist/cjs/verdocs-download-dialog_4.cjs.entry.js CHANGED Viewed

@@ -55,8 +55,8 @@ const VerdocsDownloadDialog = class {
         const allDone = !this.polling && certReady;
         const isCombinedReady = allDone && !!(certificateDocument === null || certificateDocument === void 0 ? void 0 : certificateDocument.id);
         const attachmentBusy = !this.signed;
-        return (index.h("verdocs-dialog", { key: '1952e8adf6f2aaefa179c3f0e5906b0afc072599', onExit: () => this.exit.emit() }, index.h("div", { key: '3a93ac39222d81bbc81df671a4ccc215e7f7518d', slot: "heading", class: "heading-container" }, index.h("h3", { key: 'ac1b12b0b361546ae9ac6fc14003de691a310d9a', style: { margin: '0', fontSize: '1.25rem', fontWeight: '600', padding: '16px 24px' } }, "Download")), index.h("div", { key: '97277621bf0491b69592660e032bcdeb842fe284', slot: "content", class: "content" }, attachments.length <= 2 &&
-            attachments.map(doc => (index.h("div", { class: "download-option", onClick: () => this.handleOptionClick(Types.DownloadAction.document, doc.id) }, index.h("div", { class: "icon-container", innerHTML: DocumentIcon }), index.h("div", { class: "text-container" }, index.h("div", { class: "label" }, doc.name), index.h("div", { class: "description" }, "Download the document")), attachmentBusy ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon }))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Signed")))))), attachments.length > 2 && index.h("div", { key: 'dfb9c675a97b0c1aaf1a94b8f1fb9250fb130261', class: "info-message" }, "Multiple documents attached. Please use the ZIP option below to download all files."), index.h("div", { key: '11054b7a0339bcb5dc8e1eeaad10247f1968dedc', class: { 'download-option': true, 'disabled': !certReady }, onClick: () => this.handleOptionClick(Types.DownloadAction.certificate), title: !certReady ? 'Certificate not yet available' : '' }, index.h("div", { key: 'dfc913fc428eaea8c1f57ad46d81a049f86def99', class: "icon-container", innerHTML: CertificateIcon }), index.h("div", { key: 'bd41bae1011b0983dab5f931e9ebc896df36c3c8', class: "text-container" }, index.h("div", { key: '597257702259a7a1d8056b1eaaedd964ea55f036', class: "label" }, "Certificate"), index.h("div", { key: '7568f095f1a1906852955d451ede9f8cc6856b33', class: "description" }, "Download the certificate")), certReady ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon })))), index.h("div", { key: '64509a06d0937876aa048d8c3233c391fedc441f', class: { 'download-option': true, 'disabled': !isCombinedReady }, onClick: () => this.handleOptionClick(Types.DownloadAction.combined, certificateDocument === null || certificateDocument === void 0 ? void 0 : certificateDocument.id), title: !isCombinedReady ? 'Waiting for all documents to be ready' : '' }, index.h("div", { key: '64d59f0495451b84cfef5ba81be4916792c644fa', class: "icon-container", innerHTML: ZipIcon }), index.h("div", { key: '4ab1a3e2978ed2e4ae0b9140850cb760682e7c38', class: "text-container" }, index.h("div", { key: 'bd7525c81b76c151848e0a7e4a405a3194159f18', class: "label" }, "Combined"), index.h("div", { key: 'c47fedf0d52fb79cb8b8d9b0d28c8fdacca4c747', class: "description" }, "Merge envelopes & certificate into a single PDF")), isCombinedReady ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon })))), index.h("div", { key: '339c391d3f2c5173d4bed5a84d925b4e654a8fa7', class: { 'download-option': true, 'disabled': !allDone }, onClick: () => this.handleOptionClick(Types.DownloadAction.zip), title: !allDone ? 'Waiting for all documents to be ready' : '' }, index.h("div", { key: 'd6c1380627984de8527a80ba8411e56f2c395d8b', class: "icon-container", innerHTML: ZipIcon }), index.h("div", { key: '5eb7200cb95fa8bb9b6f306d8de67fdaa49f5325', class: "text-container" }, index.h("div", { key: '99f3b98ef33901a83089869777302209194209c4', class: "label" }, "All Files"), index.h("div", { key: '2977524b2fcbadd6e73ff7616d5305b4c35da75b', class: "description" }, "Download everything as a ZIP file")), allDone ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon }))))), index.h("div", { key: 'ff7df2304f8a5a3b5c8018779d9e1cc4127c7d51', slot: "footer", style: { display: 'none' } })));
+        return (index.h("verdocs-dialog", { key: 'e81c1d9afcfd7d0d562ed46b446ad58b7179e6e6', onExit: () => this.exit.emit() }, index.h("div", { key: '261deacdab44f0e1171368b88e7a8d302f944cb7', slot: "heading", class: "heading-container" }, index.h("h3", { key: '820864e938baac9dd0c3d52c8cbac8fdb53d5df0', style: { margin: '0', fontSize: '1.25rem', fontWeight: '600', padding: '16px 24px' } }, "Download")), index.h("div", { key: '80dd159ca7f87f2211b05e999d82835b888812f3', slot: "content", class: "content" }, attachments.length <= 2 &&
+            attachments.map(doc => (index.h("div", { class: "download-option", onClick: () => this.handleOptionClick(Types.DownloadAction.document, doc.id) }, index.h("div", { class: "icon-container", innerHTML: DocumentIcon }), index.h("div", { class: "text-container" }, index.h("div", { class: "label" }, doc.name), index.h("div", { class: "description" }, "Download the document")), attachmentBusy ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon }))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Signed")))))), attachments.length > 2 && index.h("div", { key: '45858f7f05b76b709a4553adc4145e256aaa7f77', class: "info-message" }, "Multiple documents attached. Please use the ZIP option below to download all files."), index.h("div", { key: '31de335c65785eb002e25aefc06215ab77ff5a15', class: { 'download-option': true, 'disabled': !certReady }, onClick: () => this.handleOptionClick(Types.DownloadAction.certificate), title: !certReady ? 'Certificate not yet available' : '' }, index.h("div", { key: 'a8bf0227b447652e1d5689be0da2113180dcb0d5', class: "icon-container", innerHTML: CertificateIcon }), index.h("div", { key: '97479d13b9097ee075407f75e859cfcd6c9a8984', class: "text-container" }, index.h("div", { key: '084d60ec1880909d47b4c7f465a247d8a0bf2cba', class: "label" }, "Certificate"), index.h("div", { key: '89e9d255ef65cb30bbff1474e1412fae16f0b352', class: "description" }, "Download the certificate")), certReady ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon })))), index.h("div", { key: '4d0f64c6149d8fdac06a871bbb23671c517a6cde', class: { 'download-option': true, 'disabled': !isCombinedReady }, onClick: () => this.handleOptionClick(Types.DownloadAction.combined, certificateDocument === null || certificateDocument === void 0 ? void 0 : certificateDocument.id), title: !isCombinedReady ? 'Waiting for all documents to be ready' : '' }, index.h("div", { key: 'ce3091bebdcf99c55b0af1ad509f42f8a2ff5503', class: "icon-container", innerHTML: ZipIcon }), index.h("div", { key: '42097a1e59fb74ee85515620b13ba5dd13a15dbd', class: "text-container" }, index.h("div", { key: 'b1198c4edb5fdf1139684d77a9e151d5dcb522e3', class: "label" }, "Combined"), index.h("div", { key: '1017a16375215e825a8ee88d36c3033315fd155a', class: "description" }, "Merge envelopes & certificate into a single PDF")), isCombinedReady ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon })))), index.h("div", { key: 'e8b69ca68a7f061032cd59f4bd556e60f01e7d11', class: { 'download-option': true, 'disabled': !allDone }, onClick: () => this.handleOptionClick(Types.DownloadAction.zip), title: !allDone ? 'Waiting for all documents to be ready' : '' }, index.h("div", { key: '14b857365e6546ec8c8cee34849476010d3a73af', class: "icon-container", innerHTML: ZipIcon }), index.h("div", { key: 'e5167c1dacd9457baeed1034a4a2edf28645e78e', class: "text-container" }, index.h("div", { key: '0e7329d541e4241e7dfafd8489f225dca5bbf067', class: "label" }, "All Files"), index.h("div", { key: 'ddbd16ecc68cb370d2a69ef11099269f03bbdba0', class: "description" }, "Download everything as a ZIP file")), allDone ? (index.h("div", { class: "status-indicator" }, index.h("div", { class: "signed", innerHTML: CheckIcon }), index.h("span", null, "Ready"))) : (index.h("div", { class: "status-indicator" }, index.h("div", { class: "spinner-inline", innerHTML: RefreshIcon }))))), index.h("div", { key: '164f6fbc5591d04c9f757deb46e06914509fe38b', slot: "footer", style: { display: 'none' } })));
     }
 };
 VerdocsDownloadDialog.style = verdocsDownloadDialogCss();
@@ -164,7 +164,7 @@ const VerdocsEnvelopeDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (index.h(index.Host, { key: 'e1ed1cbfa15b69eb5b8fcfd0ee949ef00507241a', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (index.h(index.Host, { key: '9f4eed5e187a1b37822c7e7d4ba69f4be519ad6d', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
@@ -209,7 +209,7 @@ const VerdocsQuestionDialog = class {
         }
     }
     render() {
-        return (index.h("verdocs-dialog", { key: '2c1b3c815f184f6ee9527f1f9dab16eca21c4ebd', onExit: e => this.handleDismiss(e) }, index.h("div", { key: '9fcabd034942bb8bf355cd7e004418593a132b10', slot: "heading", class: "heading" }, index.h("div", { key: '6c46127f7faf9c52551e6c768577863149266fad', class: "icon", innerHTML: QuestionIcon$1 }), index.h("div", { key: 'd63a278314c7a93d06f0c68600dcefcb1a1e39da', class: "title" }, "Ask the Sender a Question")), index.h("div", { key: '1b839d9bfbac96c58c56b3188939d2f5018e9b03', slot: "content", class: "content" }, index.h("textarea", { key: '3b1af1af06d0577baf6936772c0fe65bbc28e32f', name: "question", rows: 6, placeholder: "Enter your question...", onInput: (e) => (this.question = e.target.value) }, this.question)), index.h("div", { key: '6559352004d8d847bb1c86089aa6d094cd49b87e', class: "footer", slot: "footer" }, index.h("div", { key: 'a111d072ed7a39231ca4adb4e05ed3bf00b5d0b7', class: "buttons" }, index.h("button", { key: '1ae6d7c9169acb2422aa4559c21d3a70fda4778e', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), index.h("button", { key: 'facaad4ed10e2032a4f60c3f614856e6e82b3454', class: 'ok', onClick: () => this.handleOk() }, "OK")))));
+        return (index.h("verdocs-dialog", { key: '0414d528934d806570c21d2d2c977ff2fcf14fec', onExit: e => this.handleDismiss(e) }, index.h("div", { key: '39fc22581c93ae2b651f8e3fb7459c115f6170b2', slot: "heading", class: "heading" }, index.h("div", { key: '2c0ef9e1125eb00355f22ce4a72faf36e02994e7', class: "icon", innerHTML: QuestionIcon$1 }), index.h("div", { key: '56421198555e6827968ab37ef94b2a4526ac6626', class: "title" }, "Ask the Sender a Question")), index.h("div", { key: '251815c6f9571e0abee3256ebc3c7bef9d0b1f8c', slot: "content", class: "content" }, index.h("textarea", { key: 'bac7bcc37c8c80d817ecf8a59f27e7129373509c', name: "question", rows: 6, placeholder: "Enter your question...", onInput: (e) => (this.question = e.target.value) }, this.question)), index.h("div", { key: '1d2b0cbe22317f3fe77e4a783d0fec830313bddb', class: "footer", slot: "footer" }, index.h("div", { key: 'c8c7c1800fddfe38101a9189238bbac69be2a09a', class: "buttons" }, index.h("button", { key: 'a6223053635fa089f3052c897699276b64a73fb9', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), index.h("button", { key: '5897511c092259879316bfcda03d27b5ce0f1fd5', class: 'ok', onClick: () => this.handleOk() }, "OK")))));
     }
 };
 VerdocsQuestionDialog.style = verdocsQuestionDialogCss();
@@ -355,7 +355,7 @@ const VerdocsSignFooter = class {
         const hasPoweredBy = !!((_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.powered_by_label);
         const hasLinks = !!((_d = (_c = this.envelope) === null || _c === void 0 ? void 0 : _c.organization) === null || _d === void 0 ? void 0 : _d.terms_use_url) || !!((_f = (_e = this.envelope) === null || _e === void 0 ? void 0 : _e.organization) === null || _f === void 0 ? void 0 : _f.privacy_policy_url);
         const hasButtons = !this.isDone;
-        return (index.h(index.Host, { key: '392793877c562271deaad894a49594bcbd6b4f00', class: { 'has-buttons': hasButtons, 'no-buttons': !hasButtons, 'has-powered-by': hasPoweredBy, 'has-links': hasLinks, 'just-buttons': !hasPoweredBy && !hasLinks } }, ((_h = (_g = this.envelope) === null || _g === void 0 ? void 0 : _g.organization) === null || _h === void 0 ? void 0 : _h.powered_by_label) && (index.h("div", { key: '7a9eabdcdce3df6f720e9c208733b14e953d3476', class: "powered-by" }, ((_k = (_j = this.envelope) === null || _j === void 0 ? void 0 : _j.organization) === null || _k === void 0 ? void 0 : _k.powered_by_url) ? (index.h("a", { href: (_m = (_l = this.envelope) === null || _l === void 0 ? void 0 : _l.organization) === null || _m === void 0 ? void 0 : _m.powered_by_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", null, (_p = (_o = this.envelope) === null || _o === void 0 ? void 0 : _o.organization) === null || _p === void 0 ? void 0 : _p.powered_by_label))) : (index.h("span", null, (_r = (_q = this.envelope) === null || _q === void 0 ? void 0 : _q.organization) === null || _r === void 0 ? void 0 : _r.powered_by_label)))), !this.isDone && (index.h("div", { key: '441abbdabad0b9e572a482582c395cfa00ffd6a3', class: "buttons" }, index.h("button", { key: 'ff132a5c23e4b039dda1e227e4dbe965f44d15e4', onClick: () => (this.askingQuestion = true) }, index.h("span", { key: 'd72c8d9fd302004177d1d453e916c69c477363f8', innerHTML: QuestionIcon }), "Ask Sender a Question"), index.h("button", { key: '0225fb65c44231a02fcd1feb59d8bcf7f2ba9746', onClick: () => { var _a; return (_a = this.decline) === null || _a === void 0 ? void 0 : _a.emit(); } }, index.h("span", { key: '1883128ba17421576e7d852883a59b5bb39e1ad8', innerHTML: DeclineIcon }), "Decline Signing"), index.h("button", { key: '4ea68ce82bfb6077b7457b8097a1e0cfda76b765', onClick: () => { var _a; return (_a = this.finishLater) === null || _a === void 0 ? void 0 : _a.emit(); } }, index.h("span", { key: 'fc27d56c8eafd7889ef05ece863828be081a1c6f', innerHTML: SaveIcon }), "Finish Later"))), index.h("div", { key: '0071154605492997e432510fb64d5846c966374c', class: "links" }, ((_t = (_s = this.envelope) === null || _s === void 0 ? void 0 : _s.organization) === null || _t === void 0 ? void 0 : _t.terms_use_url) && (index.h("a", { key: 'ff8a8dc5e86451040bb9fd157b9e6b660915fcd5', href: (_v = (_u = this.envelope) === null || _u === void 0 ? void 0 : _u.organization) === null || _v === void 0 ? void 0 : _v.terms_use_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", { key: '7d28044ef7e27dab7b5c5c4234007c965bd1b493' }, "Terms of Use"))), ((_x = (_w = this.envelope) === null || _w === void 0 ? void 0 : _w.organization) === null || _x === void 0 ? void 0 : _x.privacy_policy_url) && (index.h("a", { key: '1f85a77d8f3e06cb38c7ff853224ca1d7ece1d82', href: (_z = (_y = this.envelope) === null || _y === void 0 ? void 0 : _y.organization) === null || _z === void 0 ? void 0 : _z.privacy_policy_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", { key: '9ffba93662229904a3a6dd5105a55aa5b07a2855' }, "Privacy Policy")))), this.askingQuestion && (index.h("verdocs-question-dialog", { key: '40e3521535f656f162f7d3ae35eb1fb04ccd758b', onNext: e => {
+        return (index.h(index.Host, { key: '25254ae03c8006c1c78a317a17ddac1e78d41eef', class: { 'has-buttons': hasButtons, 'no-buttons': !hasButtons, 'has-powered-by': hasPoweredBy, 'has-links': hasLinks, 'just-buttons': !hasPoweredBy && !hasLinks } }, ((_h = (_g = this.envelope) === null || _g === void 0 ? void 0 : _g.organization) === null || _h === void 0 ? void 0 : _h.powered_by_label) && (index.h("div", { key: '7a1687edb9c9c9f4cb055429d1fbe9d02acea2de', class: "powered-by" }, ((_k = (_j = this.envelope) === null || _j === void 0 ? void 0 : _j.organization) === null || _k === void 0 ? void 0 : _k.powered_by_url) ? (index.h("a", { href: (_m = (_l = this.envelope) === null || _l === void 0 ? void 0 : _l.organization) === null || _m === void 0 ? void 0 : _m.powered_by_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", null, (_p = (_o = this.envelope) === null || _o === void 0 ? void 0 : _o.organization) === null || _p === void 0 ? void 0 : _p.powered_by_label))) : (index.h("span", null, (_r = (_q = this.envelope) === null || _q === void 0 ? void 0 : _q.organization) === null || _r === void 0 ? void 0 : _r.powered_by_label)))), !this.isDone && (index.h("div", { key: '37d14a5b539fad2999ac7a9fd8377c3a3b37d929', class: "buttons" }, index.h("button", { key: '0a49dedb4d514f2c172dd5c969d3e59f445bd293', onClick: () => (this.askingQuestion = true) }, index.h("span", { key: 'ab1949843bcc1af9ebdb22451f82ef682a70def2', innerHTML: QuestionIcon }), "Ask Sender a Question"), index.h("button", { key: 'e77ba7f5b720a1fcd2549d6d04cd313a81f5fe08', onClick: () => { var _a; return (_a = this.decline) === null || _a === void 0 ? void 0 : _a.emit(); } }, index.h("span", { key: '0041dcc1b0092e33c4c1cf5ca8bcf2a510c3c64e', innerHTML: DeclineIcon }), "Decline Signing"), index.h("button", { key: 'c6c9ebd4480f810c14a301b879ec313a8eec340b', onClick: () => { var _a; return (_a = this.finishLater) === null || _a === void 0 ? void 0 : _a.emit(); } }, index.h("span", { key: '02fab42090a858fb2e7cc6d1f5535dd9efacbda4', innerHTML: SaveIcon }), "Finish Later"))), index.h("div", { key: 'a9b765ad18b6b9521495e08a7e94727c3ef89163', class: "links" }, ((_t = (_s = this.envelope) === null || _s === void 0 ? void 0 : _s.organization) === null || _t === void 0 ? void 0 : _t.terms_use_url) && (index.h("a", { key: '29c7fda43eee3ac14b3f05d80c370ffe014a29a0', href: (_v = (_u = this.envelope) === null || _u === void 0 ? void 0 : _u.organization) === null || _v === void 0 ? void 0 : _v.terms_use_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", { key: '182d6eb92ef630c241a41b096893427a6108ab10' }, "Terms of Use"))), ((_x = (_w = this.envelope) === null || _w === void 0 ? void 0 : _w.organization) === null || _x === void 0 ? void 0 : _x.privacy_policy_url) && (index.h("a", { key: '078bb0c0505e61b64d6c8b570c1d0c6568db1155', href: (_z = (_y = this.envelope) === null || _y === void 0 ? void 0 : _y.organization) === null || _z === void 0 ? void 0 : _z.privacy_policy_url, target: "_blank", rel: "noopener noreferrer" }, index.h("span", { key: 'c234b147c7c35b6eaf74747bfcbad1efef298266' }, "Privacy Policy")))), this.askingQuestion && (index.h("verdocs-question-dialog", { key: '6b50774f79849f481036dbdef04db7f9ee953f4b', onNext: e => {
                 var _a;
                 (_a = this.askQuestion) === null || _a === void 0 ? void 0 : _a.emit({ question: e.detail.question });
                 this.askingQuestion = false;

package/dist/cjs/verdocs-dropdown.cjs.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ const VerdocsDropdown = class {
     }
     render() {
         const elId = `verdocs-dropdown-${jsSdk.randomString(8)}`;
-        return (index.h(index.Host, { key: 'c6bef6cbf6bf5ea11060ee051288e0a9169c59f5' }, index.h("button", { key: '494f34e8cce26292a27180e00f1bdf5b050b4166', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", id: elId, onClick: () => (this.showPicker = !this.showPicker) }), this.showPicker && (index.h("verdocs-portal", { key: '529dff704b16259e98ed8693173621a39da97d21', anchor: elId, onClickAway: () => (this.showPicker = false), id: "verdocs-dropdown-menu-items" }, this.options.map(option => {
+        return (index.h(index.Host, { key: '7781cbb15b6de138ccd08cad1ab5f3a2de21e02e' }, index.h("button", { key: '310f51b00b33819ef9e8b7eafdf703ec7f28b0b4', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", id: elId, onClick: () => (this.showPicker = !this.showPicker) }), this.showPicker && (index.h("verdocs-portal", { key: '7910fde21648139663ce2e8a98aec24d59d87649', anchor: elId, onClickAway: () => (this.showPicker = false), id: "verdocs-dropdown-menu-items" }, this.options.map(option => {
             if (!option.label) {
                 return index.h("div", { class: "verdocs-dropdown-menu-separator" });
             }