@verdocs/web-sdk 6.12.1 → 6.13.1

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css

@@ -1,151 +1,240 @@
 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;
-  border: 1px solid #ebebeb;
-  background-color: #ffffff;
+  font-size: 14px;
+  color: var(--picker-ink);
   font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+}
+verdocs-contact-picker * {
+  box-sizing: border-box;
 }
 verdocs-contact-picker form {
-  gap: 12px;
-  width: 300px;
-  padding: 12px;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  background-color: #f5f5fa;
 }
-verdocs-contact-picker form .row {
-  gap: 8px;
-  display: flex;
+verdocs-contact-picker .form-body-wrap {
   position: relative;
-  flex-direction: row;
-  align-items: flex-start;
-}
-verdocs-contact-picker form .row .option {
-  gap: 4px;
+  flex: 1;
+  min-height: 0;
   display: flex;
-  padding: 5px 8px;
-  align-items: center;
-  flex-direction: row;
-  text-wrap: nowrap;
+  flex-direction: column;
 }
-verdocs-contact-picker form .names-row {
-  gap: 8px;
+verdocs-contact-picker .form-body {
+  position: relative;
+  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;
+  transition: opacity 150ms ease-out;
+  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: flex;
-  flex-direction: row;
+  column-gap: 8px;
+  position: relative;
 }
-verdocs-contact-picker form .names-row > input {
-  font-size: 14px;
-  width: 88px;
+verdocs-contact-picker .row.names .field {
+  flex: 1;
+  min-width: 0;
 }
-verdocs-contact-picker form .pin-code {
-  gap: 8px;
+verdocs-contact-picker .field {
   display: flex;
-  align-items: flex-start;
-  flex-direction: row;
+  flex-direction: column;
+  row-gap: 4px;
+  margin: 0 0 10px 0;
 }
-verdocs-contact-picker form .pin-code > input {
-  flex: 0 0 197px;
-  font-size: 14px;
+verdocs-contact-picker .field label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--picker-ink-2);
 }
-verdocs-contact-picker form .address {
-  gap: 8px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
+verdocs-contact-picker .field label .optional {
+  color: var(--picker-muted);
+  font-weight: 400;
 }
-verdocs-contact-picker form .address > input {
-  flex: 1;
-  font-size: 14px;
+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 form .zip-code {
-  gap: 8px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
+verdocs-contact-picker input:focus,
+verdocs-contact-picker textarea:focus {
+  border-color: var(--picker-accent);
+  box-shadow: 0 0 0 2px var(--picker-accent-tint-2);
 }
-verdocs-contact-picker form .zip-code > input {
-  flex: 1;
-  font-size: 14px;
+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 form label {
+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: flex;
-  flex: 0 0 80px;
-  font-size: 13px;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+verdocs-contact-picker .pill {
+  all: unset;
+  height: 26px;
+  padding: 0 9px;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 4px;
+  cursor: pointer;
+  font-size: 12px;
   font-weight: 500;
-  color: #5c6575;
+  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 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 .passcode {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  margin-top: 8px;
 }
-verdocs-contact-picker form input {
-  flex: 1;
-  padding: 6px;
-  font-size: 14px;
-  border-radius: 3px;
-  border: 1px solid rgba(112, 122, 229, 0.3725490196);
+verdocs-contact-picker .passcode input {
+  flex: 0 0 120px;
+  width: 120px;
+  height: 30px;
 }
-verdocs-contact-picker form input:focus {
-  outline: none;
+verdocs-contact-picker .passcode .passcode-hint {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--picker-muted);
+  align-self: center;
 }
 verdocs-contact-picker .buttons {
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+  flex: none;
   display: flex;
-  column-gap: 6px;
-  margin-top: 16px;
-  flex-direction: row;
+  column-gap: 10px;
 }
-verdocs-contact-picker .buttons .flex-fill {
+verdocs-contact-picker .buttons verdocs-button:last-child {
   flex: 1;
 }
-verdocs-contact-picker ::placeholder {
-  color: #aaaaaa;
-}
-verdocs-contact-picker [data-lastpass-icon-root] {
-  display: none !important;
+verdocs-contact-picker .buttons verdocs-button:last-child button {
+  width: 100%;
 }
-
-#verdocs-contact-picker-suggestions .dropdown {
+verdocs-contact-picker .suggestions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
   max-height: 225px;
-  overflow-y: scroll;
+  overflow-y: auto;
   background: #ffffff;
-  font-family: var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion {
+verdocs-contact-picker .suggestions .suggestion {
   display: flex;
   padding: 6px 12px;
   align-items: center;
   flex-direction: row;
+  cursor: pointer;
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion svg {
-  width: 32px;
-  height: 32px;
+verdocs-contact-picker .suggestions .suggestion svg {
+  width: 28px;
+  height: 28px;
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion .avatar {
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
+verdocs-contact-picker .suggestions .suggestion .avatar {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
   margin-right: 8px;
   border-radius: 100%;
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion .details {
+verdocs-contact-picker .suggestions .suggestion .details {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion .name {
-  font-size: 16px;
+verdocs-contact-picker .suggestions .suggestion .name {
+  font-size: 13px;
   font-weight: 500;
-  margin-bottom: 3px;
-  color: #092c4c;
+  color: var(--picker-ink);
 }
-#verdocs-contact-picker-suggestions .dropdown .suggestion .destination {
-  font-size: 14px;
-  margin-bottom: 3px;
-  color: #33364b;
+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 .dropdown .suggestion:hover {
-  background: #eee;
-  cursor: pointer;
+verdocs-contact-picker .suggestions .suggestion:hover {
+  background: var(--picker-accent-tint);
+}
+verdocs-contact-picker [data-lastpass-icon-root] {
+  display: none !important;
 }

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.js

@@ -1,7 +1,9 @@
-import { h, Fragment } from "@stencil/core";
+import { h } from "@stencil/core";
 import { formatFullName, getActiveEntitlements, isValidEmail, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { updateScrollFade } from "../../../utils/ScrollFade";
 import { convertToE164 } from "../../../utils/utils";
 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>`;
 /**
  * Display a contact picker suitable for filling out Recipient objects when sending Envelopes.
  *
@@ -34,6 +36,10 @@ export class VerdocsContactPicker {
          * 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;
@@ -60,7 +66,7 @@ export class VerdocsContactPicker {
             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 || [];
@@ -75,6 +81,19 @@ export class VerdocsContactPicker {
         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');
+        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;
@@ -117,70 +136,77 @@ export class VerdocsContactPicker {
         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 (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 && 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 && 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 (h("form", { key: '6709871235915b9c57af981cb4ab8560c040c29f', onSubmit: e => e.preventDefault(),
-            // onClick={e => e.stopPropagation()}
-            autocomplete: "off" }, h("div", { key: 'b4792f8bf7a38bd1eca0a684da63e06607b29d4a', class: "row" }, h("label", { key: '75f1386774dcf2dba1ae074e2ef86b9d04525763', htmlFor: this.firstNameFieldId }, "Name:"), h("div", { key: '36916fdd64584ef209620a6311c4db381e55ea82', class: "names-row" }, 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 (h("form", { onSubmit: e => e.preventDefault(), autocomplete: "off" }, h("div", { class: "form-body-wrap" }, h("div", { class: "form-body", onScroll: (e) => {
+                updateScrollFade(e.target);
+                this.showSuggestions = false;
+            } }, h("div", { class: "row names", ref: el => (this.namesRowEl = el) }, h("div", { class: "field" }, h("label", { htmlFor: this.firstNameFieldId }, "First name"), 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) }), 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) })), h("div", { class: "field" }, h("label", { htmlFor: this.lastNameFieldId }, "Last name"), 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 && (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" }, h("div", { key: '5cbf60f0f1186f318f686ef6bdc8d791072e4d41', class: "dropdown" }, this.contactSuggestions
+            }, onInput: e => this.handleLastNameChange(e) }))), h("div", { class: "field" }, h("label", { htmlFor: this.emailFieldId }, "Email"), 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 && (h("div", { class: "field" }, h("label", { htmlFor: this.phoneFieldId }, "Phone ", h("span", { class: "optional" }, "(optional)")), 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 = convertToE164(e.target.value);
+            } }))), h("div", { class: "group" }, h("div", { class: "group-label" }, "Verification"), this.authMethodsLoading ? (h("verdocs-spinner", { size: 10, mode: "dark" })) : (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') && (h("div", { class: "passcode" }, 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) }), h("span", { class: "passcode-hint" }, "PIN or passcode shared separately with the recipient ahead of time")))), h("div", { class: "group" }, h("div", { class: "group-label" }, "Signing options"), 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')))), h("div", { class: "field" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message ", h("span", { class: "optional" }, "(optional)")), 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))), h("div", { class: "scroll-fade" }), this.showSuggestions && (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 (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : h("div", { class: "avatar", innerHTML: addrBookIcon }), h("div", { class: "details" }, h("div", { class: "name" }, formatFullName(suggestion)), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        }))))), h("div", { key: '3d6aaa5e5bd3f0bc5681c4b788f222b6dfb45584', class: "row" }, h("label", { key: '67e9b6d47602d8c455a46e47b94bf008d2ac3a4e', htmlFor: this.emailFieldId }, "Email:"), 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 && (h("div", { key: 'defed17223c457db6eea0aff5c13598a70882157', class: "row" }, h("label", { key: '7a06bd13e92cd70c51f23228bbe4ed5be59919bb', htmlFor: this.phoneFieldId }, "Phone:"), 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 = convertToE164(e.target.value);
-            } }))), h(Fragment, { key: 'e0071e7e2fb5521685c8863dab279f31089bf20e' }, verificationOptions.length > 0 && (h("div", { key: '7f769fdb13d206c769b813eef2c68e810bc635f3', class: "row pin-code" }, h("label", { key: '4ebf33f0821f3b1f2a63ac918d3d2923b8f38e38' }, "Verification Methods:"), this.authMethodsLoading ? (h("verdocs-spinner", { size: 10, mode: "dark", style: { margin: 'auto' } })) : (h("div", null, verificationOptions.map((option, i) => (h("div", { class: "option" }, 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);
-                }
-            } }), h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label)))))))), this.auth_methods.includes('passcode') && (h("div", { key: '79feab0e29cbfbbb825f285a995d21576732bb8a', class: "row pin-code" }, h("label", { key: '7fd8dd8c3f254e9d6eba0e657f3a02f0fd47b05e', htmlFor: this.phoneFieldId }, "Passcode:"), 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) })))), h("div", { key: '71101e3ae9adab93ffde79f43431ab91657df8cd', class: "row pin-code" }, h("label", { key: '312a0dafe35171d1ebc61e62f868e2fdcd8a8e8d', style: { marginTop: '6px' } }, "Options:"), h("div", { key: '38341490838ffe88ee03800e886d46b163f1d21a' }, h("div", { key: '68fbb6b02029ba082da5db49687989e2d0228235', class: "option" }, 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;
-            } }), h("label", { key: '8d4bbaef0ca5cea8100777fa37d520f1bd5a1d1e', htmlFor: "verdocs-delegator" }, "May delegate signing")), h("div", { key: 'd1278133af51917475ae1778c28da315072ca4a6', class: "option" }, 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;
-            } }), h("label", { key: '82d3cb3a2c48c66e8dd4bf917e35ed85327d994d', htmlFor: "verdocs-name-locked" }, "Name locked")))), h("div", { key: '01f4e93445daee8493eb67f41640865753db54bb', class: "row message" }, h("label", { key: '499b65b9368abe5f355ece31825fdd6b92905b55', htmlFor: "verdocs-contact-picker-message" }, "Message:"), 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)), h("div", { key: '044a45c3a9ba57334c6e10f12e0b1f19ce5c3403', class: "buttons" }, h("div", { key: '6aa3536c73eef3852f7d483deee3773413167f5d', class: "flex-fill" }), h("verdocs-button", { key: '7dc65ba7bcb927c9822cc19d00b3a74278db8688', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '7f3434aa2547d87ad2a54610374bec0511aa7940', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
+        })))), h("div", { class: "buttons" }, this.showCancel && h("verdocs-button", { label: "Cancel", variant: "text", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Done", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
     }
     static get is() { return "verdocs-contact-picker"; }
     static get originalStyleUrls() {
@@ -272,6 +298,26 @@ export class VerdocsContactPicker {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "showCancel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a Cancel button beside Done."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-cancel",
+                "defaultValue": "true"
             }
         };
     }
@@ -358,5 +404,15 @@ export class VerdocsContactPicker {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=verdocs-contact-picker.js.map