@verdocs/web-sdk 5.0.37 → 5.0.38

package/dist/cjs/{verdocs-contact-picker.cjs.entry.js → verdocs-contact-picker_2.cjs.entry.js}

@@ -3746,15 +3746,9 @@ const getFeatureFlags = () => axios$1
     throw e;
 });
 
-const verdocsContactPickerCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", 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:center;align-items:center}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 .kba-row{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 .kba-row verdocs-select-input{margin:0;-ms-flex:1;flex:1}verdocs-contact-picker form .pin-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 .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{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;padding:5px 7px;width:100%}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 form .dropdown{left:0;right:0;top:49px;z-index:1000000;max-height:225px;overflow-y:scroll;position:absolute;background:#ffffff;-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 .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 form .dropdown .suggestion svg{width:32px;height:32px}verdocs-contact-picker form .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 form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}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}";
+const verdocsContactPickerCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", 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:center;align-items:center}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 .kba-row{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 .kba-row verdocs-select-input{margin:0;-ms-flex:1;flex:1}verdocs-contact-picker form .pin-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 .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:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", 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 form .dropdown{left:0;right:0;top:49px;z-index:1000000;max-height:225px;overflow-y:scroll;position:absolute;background:#ffffff;-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 .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 form .dropdown .suggestion svg{width:32px;height:32px}verdocs-contact-picker form .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 form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}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}";
 const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
-// const messageIcon =
-//   '<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
-// const delegateIcon =
-//   '<svg focusable="false" viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
-// const kbaIcon =
-//   '<svg focusable="false" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" /></svg>';
 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 VerdocsContactPicker = class {
     constructor(hostRef) {
@@ -3778,7 +3772,7 @@ const VerdocsContactPicker = class {
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
-        this.auth_method = null;
+        this.auth_methods = [];
         this.passcode = '';
         this.firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;
         this.lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;
@@ -3801,7 +3795,7 @@ const VerdocsContactPicker = class {
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
-            this.auth_method = this.templateRole.auth_method || null;
+            this.auth_methods = this.templateRole.auth_methods || [];
             this.passcode = this.templateRole.passcode || '';
             // TODO: Allow template roles to have zip codes predefined?
         }
@@ -3847,7 +3841,7 @@ const VerdocsContactPicker = class {
             phone: this.phone,
             message: this.message,
             delegator: this.delegator,
-            auth_method: this.auth_method,
+            auth_methods: this.auth_methods,
             passcode: this.passcode,
             address: this.address,
             zip: this.zip,
@@ -3864,50 +3858,102 @@ const VerdocsContactPicker = class {
     // 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() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         // 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_method ||
-            (this.auth_method === 'passcode' && !!this.passcode) ||
-            (this.auth_method === 'kba' && !!this.first_name && !!this.last_name) ||
-            this.auth_method === 'id' ||
-            (this.auth_method === 'email' && !!this.email) ||
-            (this.auth_method === 'sms' && !!this.phone) ||
-            this.auth_method === 'kba_id';
+        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 canSubmit = hasBasics && hasAuthRequirements;
-        const verificationOptions = [{ label: 'None', value: '' }];
-        if (!!this.activeEntitlements.passcode_auth) {
-            verificationOptions.push({ label: 'Passcode', value: 'pin' });
+        const globalSMS = ((_c = (_b = (_a = this.featureFlags) === null || _a === void 0 ? void 0 : _a.toggles) === null || _b === void 0 ? void 0 : _b.find(t => t.name === 'sms')) === null || _c === void 0 ? void 0 : _c.enabled) === true;
+        const verificationOptions = [];
+        if (((_f = (_e = (_d = this.featureFlags) === null || _d === void 0 ? void 0 : _d.toggles) === null || _e === void 0 ? void 0 : _e.find(t => t.name === 'passcode-verification')) === null || _f === void 0 ? void 0 : _f.enabled) === true) {
+            verificationOptions.push({ label: 'Passcode', value: 'passcode' });
         }
-        if (((_c = (_b = (_a = this.featureFlags) === null || _a === void 0 ? void 0 : _a.toggles) === null || _b === void 0 ? void 0 : _b.find(t => t.name === 'sms-verification')) === null || _c === void 0 ? void 0 : _c.enabled) === true && !!this.activeEntitlements.sms_auth) {
+        if (((_j = (_h = (_g = this.featureFlags) === null || _g === void 0 ? void 0 : _g.toggles) === null || _h === void 0 ? void 0 : _h.find(t => t.name === 'email-verification')) === null || _j === void 0 ? void 0 : _j.enabled) === true) {
+            verificationOptions.push({ label: 'Email', value: 'email' });
+        }
+        if (globalSMS && ((_m = (_l = (_k = this.featureFlags) === null || _k === void 0 ? void 0 : _k.toggles) === null || _l === void 0 ? void 0 : _l.find(t => t.name === 'sms-verification')) === null || _m === void 0 ? void 0 : _m.enabled) === true && !!this.activeEntitlements.sms_auth) {
             verificationOptions.push({ label: 'SMS (One-Time Code)', value: 'sms' });
         }
-        if (((_f = (_e = (_d = this.featureFlags) === null || _d === void 0 ? void 0 : _d.toggles) === null || _e === void 0 ? void 0 : _e.find(t => t.name === 'kba-verification')) === null || _f === void 0 ? void 0 : _f.enabled) === true) {
+        if (((_q = (_p = (_o = this.featureFlags) === null || _o === void 0 ? void 0 : _o.toggles) === null || _p === void 0 ? void 0 : _p.find(t => t.name === 'kba-verification')) === null || _q === void 0 ? void 0 : _q.enabled) === true && !!this.activeEntitlements.kba_auth) {
             verificationOptions.push({ label: 'Knowledge-Based (KBA)', value: 'kba' });
         }
-        if (((_j = (_h = (_g = this.featureFlags) === null || _g === void 0 ? void 0 : _g.toggles) === null || _h === void 0 ? void 0 : _h.find(t => t.name === 'id-verification')) === null || _j === void 0 ? void 0 : _j.enabled) === true) {
+        if (((_t = (_s = (_r = this.featureFlags) === null || _r === void 0 ? void 0 : _r.toggles) === null || _s === void 0 ? void 0 : _s.find(t => t.name === 'id-verification')) === null || _t === void 0 ? void 0 : _t.enabled) === true && !!this.activeEntitlements.id_auth) {
             verificationOptions.push({ label: 'ID Check', value: 'id' });
-            verificationOptions.push({ label: 'KBA + ID Check', value: 'kba_id' });
         }
-        return (index.h("form", { key: '618f80a496600659af6b6c023f632f4cbed45a47', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '0693ecdfeb43e8a048bea68d1c455e90fec4336f', class: "row" }, index.h("label", { key: '7722b6e51e94833a187f4c61664bc94102c95344', htmlFor: this.firstNameFieldId }, "Name:"), index.h("div", { key: 'a6ae931ae5473b3324ca1ec4ddc19a404fbb033e', class: "names-row" }, index.h("input", { key: 'cb4167f01f07701ab9464a7c5294aebc83bbb334', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), index.h("input", { key: '0d220e73dfc026b21c7ccf313d2d3211be77e5cf', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (index.h("div", { key: 'ac1de1f3486d98a1db37c517f291d6fcc08a6493', class: "dropdown" }, this.contactSuggestions
+        return (index.h("form", { key: '2f78aea85f048c9acbe32b2ae59149a5fb0f5cb1', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '385778d2da3801cb895dc24baeab3c169e55ad1c', class: "row" }, index.h("label", { key: 'd8e5801d12514c45a420d75bb26e8f3ddb30ddfb', htmlFor: this.firstNameFieldId }, "Name:"), index.h("div", { key: '25a0c4fff91fdcd6e3fbe353ba9c20b1530e96e0', class: "names-row" }, index.h("input", { key: 'ddead4d6d7052b8eb91ee59752e2d6c64e4410e8', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.first_name, placeholder: "First...", onBlur: () => {
+                this.showSuggestions = false;
+            }, 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: '3644718e45bcf1272dc3ad232292a8424641fb86', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.last_name, placeholder: "Last...", onBlur: () => {
+                this.showSuggestions = false;
+            }, 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("div", { key: '2eb1a7cce3c4d2f02b7910ecbe5ad40e9b0cb9e9', class: "dropdown" }, this.contactSuggestions
             .filter(suggestion => !this.first_name || suggestion.first_name.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: '11dc6945c4239924d44c415e0ad28c0bdd489bfa', class: "row" }, index.h("label", { key: 'a45850710bcbd11fdc204003e9ee9b7428ab9822', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: '854d5f96c614eec0b22059fec247961c01a18386', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Invite via email...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), index.h("div", { key: '3a52b7e1de7100192f23907b788d0ebc049771e2', class: "row" }, index.h("label", { key: '41ab3d2c6736b6da24688391310a9b05e49dcb37', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: '5f89eb3ffd8da3baa3ca9a90fad418feff9d4f08', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Invite via SMS...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
-                this.phone = utils$2.convertToE164(e.target.value);
-            } })), index.h(index.Fragment, { key: '7eb87baa7743f9cdb4b0991cca1d010bbf0ab286' }, index.h("div", { key: '86f23fec37e14b1bbc430fed4a3e83f0d69a3980', class: "kba-row" }, index.h("label", { key: 'd12e7c699a0f4ca17801dc7e36ac6f8bdf0aa668' }, "Recipient Verification:"), index.h("verdocs-select-input", { key: '3faf2fdbda5a580ff7d2f0fa0ef1ef54c54756c3', value: this.auth_method, onInput: (e) => {
-                this.auth_method = e.target.value;
-                // this.zip = '';
-                // this.address = '';
-                this.passcode = '';
-            }, options: verificationOptions })), this.auth_method === 'sms' && (index.h("div", { key: '8c1c5c79fb8a9c33f4754c52f3b70ab658cf5559', class: "row" }, index.h("label", { key: '46548cbefdc0f286c32a272d0ab6796efeac46c7', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: '1b85ba03502b9123468a5d64300b79ffd9c43a0d', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Verify via SMS one-time code...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
+        })))), index.h("div", { key: '664bc6761d026a5c59b860e75ad69908dce3580c', class: "row" }, index.h("label", { key: 'f1bfcf93c0acaf6d20f975b395cf82354ea17412', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: '65d144fa46caa4dd7dee3afe591f9c4e85f88ac9', 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) })), globalSMS && (index.h("div", { key: 'bd29dbf6ef5d171e8848d584f5f33bc41a151d56', class: "row" }, index.h("label", { key: '7c818cd92ef86b9329256670626b04b5c21dd1b5', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: 'ccdf83ef82b56d01cb3adcd9aba5ac80256fa4c2', 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$2.convertToE164(e.target.value);
-            } }))), this.auth_method === 'passcode' && (index.h("div", { key: '62ca2e43b3abfcc0f080785c0c3f1fe69e4214dd', class: "row pin-code" }, index.h("label", { key: '6eecff67935d8b7e3ed23d1b3551557b0b77b6b0', htmlFor: this.phoneFieldId }, "Passcode:"), index.h("input", { key: 'f48e66e8a677f36430e4bc43b42a38309a1971d4', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.passcode, placeholder: "4-8 digits recommended...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) })))), index.h("div", { key: 'c5e3ffb1fe99930cd210132d18c7321ad305fb68', class: "row message" }, index.h("label", { key: 'dc76e9fbcf7f549241583a368c076cb37ef41a9e', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("textarea", { key: '4ee53757d5c8e12f2bda801e17fb0f2a0a747e5d', 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: '0216b8fe9c89bd6f1d5c20d280a1edaa9ff7026c', class: "buttons" }, index.h("div", { key: '7332be6810c1abd20d6b836e0c5009a97fb2e932', class: "flex-fill" }), index.h("verdocs-button", { key: 'af7951df9fac7cde828779223e8bb0907a955c23', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '3989bc2781787088e54f7784d84577924051da39', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
+            } }))), index.h(index.Fragment, { key: 'c0161034905da56d8c7adf0f9eedad6d96b6aa73' }, index.h("div", { key: '6d27c022cbf33697bce1ade5a8873d3fb55f5b6c', class: "kba-row" }, index.h("label", { key: 'b31d258d5ad8fb01f0fff549616c243fc64600dd' }, "Recipient Verification:"), index.h("verdocs-multiselect", { key: 'fb4a8de84c3a1aa7362aa9eda9fdbcdf3114c0ea', label: "", placeholder: "None", options: verificationOptions, selectedOptions: this.auth_methods, onSelectionChanged: (e) => {
+                console.log('selectedOptions changed', e.detail);
+            } })), this.auth_methods.includes('passcode') && (index.h("div", { key: '6febdcedd0d383c7a98adb5348a9b241abec1056', class: "row pin-code" }, index.h("label", { key: '64750c806061cbb37a10a8bf03fa641fb2d331f6', htmlFor: this.phoneFieldId }, "Passcode:"), index.h("input", { key: 'd83bfedf02db8a4bef83e991b6a07009502cf638', 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: '19417875f474a3c910fdd59a53aaa8dedf5b59df', class: "row message" }, index.h("label", { key: 'd89c0d9dc2a418299214f6b36f32b42711c02023', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("textarea", { key: '251cc50901679ee041622753190c23363ce82640', 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: 'b04660e6869693bf16cd560caa9ba9cb8679a09c', class: "buttons" }, index.h("div", { key: 'b7cc91c06aa66fb3a52e2ebbc08675966e802a2a', class: "flex-fill" }), index.h("verdocs-button", { key: '2722a83dc937cbb2d4c9198543b14ea4cac51ab0', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: '0c59c014ef5aefde3e4c6b01385384e465fb3c4c', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
     }
 };
 VerdocsContactPicker.style = VerdocsContactPickerStyle0;
 
+const verdocsMultiselectCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-multiselect{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-multiselect .input-wrapper{width:100%;position:relative}verdocs-multiselect .input-wrapper .icon{top:6px;right:6px;width:18px;height:18px;z-index:10;position:absolute}verdocs-multiselect.open .input-wrapper .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}verdocs-multiselect .trigger{gap:3px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;border-radius:4px;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px 32px 5px 7px;background:#ffffff;border:1px solid #707ae5}verdocs-multiselect .trigger::-webkit-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::-moz-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger:-ms-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::-ms-input-placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .trigger::placeholder{opacity:1;color:#aaaaaa}verdocs-multiselect .selected-option{color:white;font-size:12px;padding:2px 6px;border-radius:3px;display:inline-block;background:#46497d}verdocs-multiselect .input-label{display:block;font-weight:700;font-size:14px;margin:0 0 4px 0;color:#555570}#verdocs-multiselect-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;font-family:\"Inter\", \"Barlow\", sans-serif;background:#ffffff;border:1px solid #654dcb}#verdocs-multiselect-menu-items label{font-size:13px}";
+const VerdocsMultiselectStyle0 = verdocsMultiselectCss;
+
+const DownIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>`;
+const VerdocsMultiselect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
+        /**
+         * The label for the field.
+         */
+        this.label = '';
+        /**
+         * The placeholder for the input element when no options are selected.
+         */
+        this.placeholder = 'Select...';
+        /**
+         * The currently selected options.
+         */
+        this.selectedOptions = [];
+        this.showPicker = false;
+    }
+    handleToggleOption(e, option) {
+        var _a;
+        if (e.target.checked) {
+            this.selectedOptions = [...this.selectedOptions, option.value];
+        }
+        else {
+            this.selectedOptions = this.selectedOptions.filter(selected => selected !== option.value);
+        }
+        (_a = this.selectionChanged) === null || _a === void 0 ? void 0 : _a.emit({ selectedOptions: this.selectedOptions });
+    }
+    render() {
+        const elId = `verdocs-dropdown-${jsSdk.randomString(8)}`;
+        return (index.h(index.Host, { key: '757ef48a38e7c6950785c6001f0e33f1f84412bd', class: this.showPicker ? 'open' : 'closed' }, index.h("label", { key: '2c389ed08ded5b56fff19e9ee3b73588cbf58d84' }, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("div", { key: '3d5ed882e3708a960cc01d6dbea3fd6dacc91eee', class: "input-wrapper" }, index.h("button", { key: '07db0df18f6cae9bb3155d2defb4be80609f8a3a', id: elId, class: "trigger", value: "", onClick: () => (this.showPicker = true) }, this.selectedOptions.length === 0 ? (index.h("span", { class: "placeholder" }, this.placeholder)) : (this.selectedOptions.map(option => { var _a; return index.h("span", { class: "selected-option" }, ((_a = this.options.find(opt => opt.value === option)) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown'); }))), index.h("div", { key: '5fd7022a7750a1bbae834d167253a9bf73f4eca4', class: "icon", innerHTML: DownIcon }), this.showPicker && (index.h("verdocs-portal", { key: 'cf01564f24ffd3fef6d1340a47e70d9928f1d296', anchor: elId, voffset: 2, onClickAway: () => (this.showPicker = false), id: "verdocs-multiselect-menu-items" }, this.options.map((option, i) => (index.h("div", { class: "option", onClick: () => (this.showPicker = false) }, index.h("input", { id: `verdocs-multi-select-option-${i}`, type: "checkbox", value: option.value, checked: this.selectedOptions.includes(option.value), onInput: (e) => this.handleToggleOption(e, option) }), index.h("label", { htmlFor: `verdocs-multi-select-option-${i}` }, option.label))))))))));
+    }
+};
+VerdocsMultiselect.style = VerdocsMultiselectStyle0;
+
 exports.verdocs_contact_picker = VerdocsContactPicker;
+exports.verdocs_multiselect = VerdocsMultiselect;
 
-//# sourceMappingURL=verdocs-contact-picker.cjs.entry.js.map
+//# sourceMappingURL=verdocs-contact-picker_2.cjs.entry.js.map