@verdocs/web-sdk 5.0.39 → 5.0.41

package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js

@@ -3746,7 +3746,7 @@ 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{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 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 .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 .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:\"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-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 VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
 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>`;
@@ -3797,7 +3797,6 @@ const VerdocsContactPicker = class {
             this.showMessage = this.message !== '';
             this.auth_methods = this.templateRole.auth_methods || [];
             this.passcode = this.templateRole.passcode || '';
-            // TODO: Allow template roles to have zip codes predefined?
         }
         jsSdk.getActiveEntitlements(this.endpoint)
             .then(r => {
@@ -3827,12 +3826,14 @@ const VerdocsContactPicker = class {
     handleCancel(e) {
         var _a;
         e.stopPropagation();
+        console.log('cxl');
         this.showSuggestions = false;
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
     handleSubmit(e) {
         var _a;
         e.stopPropagation();
+        console.log('sub');
         this.showSuggestions = false;
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
             first_name: this.first_name,
@@ -3884,37 +3885,34 @@ const VerdocsContactPicker = class {
         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' });
         }
-        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: () => {
+        return (index.h("form", { key: 'b2cda11b375e553371cc05752be032dcc64fb372', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '604d484cc9c77a84a2853ddeef8255f871532cf3', class: "row" }, index.h("label", { key: '99c7c4c15a51d09b0266ebbc9688540ea068b430', htmlFor: this.firstNameFieldId }, "Name:"), index.h("div", { key: 'aeb977e092aca353119db0ff1afa258f45850e35', class: "names-row" }, index.h("input", { key: '1564f8fb970581524148889aa8a4a8d0981398a7', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.first_name, placeholder: "First...", 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: () => {
+            }, onInput: e => this.handleFirstNameChange(e) }), index.h("input", { key: '66d1d0456f24d49fe0be746c4f35c0b3a12ba841', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.last_name, placeholder: "Last...", 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
+            }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (index.h("verdocs-portal", { key: '674571611b133f76e90d07685632b7430d0eb7c4', anchor: this.firstNameFieldId, onClickAway: () => (this.showSuggestions = false), id: "verdocs-contact-picker-suggestions" }, index.h("div", { key: 'c5e53ec590fc64b092d08540ac39ca482e78a79c', 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: '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) => {
+        }))))), index.h("div", { key: '61a05720167114b362f5c2c4f6ee794e9a823059', class: "row" }, index.h("label", { key: '9432c1386e24d7f8d09dc5415958bf88e49ed83c', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: 'b5ce556ba67b26bfd09e9d6b0ea0427363355510', 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: '6bf7712b43c8b7924ff792290c723a66a1a62296', class: "row" }, index.h("label", { key: 'e3744f9b285d7624b65ad4d94909c36cd156bb2d', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: 'e249b2e1432384b95a75fc3fb9a889cefd43fb14', 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);
-            } }))), 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) => {
+            } }))), index.h(index.Fragment, { key: '202d93245182ee54519b9f58962facd0a9f524d0' }, verificationOptions.length > 0 && (index.h("div", { key: '0af26fd7633cb6f062e56be65adac2743814304e', class: "row" }, index.h("label", { key: 'ed1366652b0db48b1e2f41dc6d65348c9699887e' }, "Recipient Verification:"), index.h("verdocs-multiselect", { key: '107921cec4e2d8b7a7ea11c7451451a50216e08a', 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) }))));
+                this.auth_methods = e.detail.selectedOptions;
+            } }))), this.auth_methods.includes('passcode') && (index.h("div", { key: '2a9e0e955211846e2875661fd9408e7e58092504', class: "row pin-code" }, index.h("label", { key: '8295693a69e940d6f5a00f0972766bbf0e13a18f', htmlFor: this.phoneFieldId }, "Passcode:"), index.h("input", { key: '60e78fb22245e97efab765e3a47f112b4bb58341', 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: '47ed4c44d6f4e0f9d5d9733a47183e9c652d7a1b', class: "row message" }, index.h("label", { key: 'a471e42ac85935d711f4ff362c3f5c01b84bab82', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("textarea", { key: 'c3b3011e031f0552ad18bf3d14525b439f729b6f', 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: '02e7f7d6f8fb67ce5c301fc573a91234ac8c0a1a', class: "buttons" }, index.h("div", { key: '217bdfe57aae7db9ed38e4e0430e3fb017c2f206', class: "flex-fill" }), index.h("verdocs-button", { key: '91b7541ffaf7b2ca2b18dfb0962cde71e11669f8', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: 'd55e4aad3e7647d05e7052e9ee1176855101d598', 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 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 .option{display:-ms-flexbox;display:flex;gap:4px;padding:5px 8px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#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>`;
@@ -3948,7 +3946,7 @@ const VerdocsMultiselect = class {
     }
     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))))))))));
+        return (index.h(index.Host, { key: '7fa4d31d423894e8caa3dffd1fb46752b7b87ee5', class: this.showPicker ? 'open' : 'closed' }, index.h("label", { key: '891a7d7ee2867d598f2f3ea6609148a47a9a7166' }, this.label ? index.h("div", { class: "input-label" }, this.label + ':') : index.h("div", null), index.h("div", { key: 'c165f68315aec9d1aca6e9f2214ece090f496363', class: "input-wrapper" }, index.h("button", { key: '2297bfb9c84abd5da4c73dfcbae15fe2f5f04c1c', 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: 'e4929befc449d9be400305ee3e0aeb1c171583fd', class: "icon", innerHTML: DownIcon }), this.showPicker && (index.h("verdocs-portal", { key: '42016ae18aa4acd4c5aac8f2ea3a7d6126116aa6', 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("verdocs-checkbox", { size: "small", id: `verdocs-multi-select-opt-${i}`, 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;