@verdocs/web-sdk 4.0.9 → 4.1.2

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

@@ -1,15 +1,16 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { i as convertToE164 } from './utils-61c1093b.js';
+import { i as convertToE164 } from './utils-d1c95309.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
-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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;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{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;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:8px;-moz-column-gap:8px;column-gap:8px;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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;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{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;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 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" 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 class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><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 placeholderIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
+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 placeholderIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';
 const VerdocsContactPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -26,6 +27,9 @@ const VerdocsContactPicker = class {
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
+        this.showKba = false;
+        this.kbaMethod = '';
+        this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
         this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
         this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
@@ -38,6 +42,10 @@ const VerdocsContactPicker = class {
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
+            this.kbaMethod = this.templateRole.kba_method || '';
+            this.showKba = !!this.kbaMethod;
+            // TODO
+            this.pinCode = '';
         }
     }
     handleNameChange(e) {
@@ -82,18 +90,29 @@ 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() {
-        return (h("form", { key: '45acdba47c2999d3d4aa88c72e4451c5565b222e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '96b525fe36cb094bbd4492841cb095e62b4358b8', class: "row" }, h("label", { key: 'f264a4b8cc6da4ef82f78a1841d5b3bce0ae4fef', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: '15898561eeff05ad20dd73787f39702ab862d295', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+        return (h("form", { key: 'b4c1d548719a9e43b09e9632078efecf461728fd', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '010bfa4a4802cdf165f4a837d52143296eeb9615', class: "row" }, h("label", { key: 'baadc6a3159a5e9fe58c91d944269fa5f2319fc5', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: 'e570c3218970843b9acfb276349a7b9b2cc0d4fc', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
             // onBlur={() => (this.showSuggestions = false)}
-            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'ad28ba30382a2d2a40ac1992352368b883097553', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'a99e1d83a4292c1f7d978529526f49622ab8a18e', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '7a7d4b6df5eab37ede0b87f9d10ba8b8e4e8254f', class: "row" }, h("label", { key: '2058494eeac07248115323afe529bcaf681afed1', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'd1c41d7b356190b4705e7d255103534bd1a47cd2', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '5f9668b15bfb2e1e06cc03e2f1ea051b893307f6', class: "row" }, h("label", { key: '54b40e4aa240e2c6fb2364fbe59707d25dbfdb65', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'dc20e317c4dbeae41bc9454685a0bf97f57db2bb', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { key: '85fb931022f96a0916c162e335a1ea91a11a9590', class: "row" }, h("label", { key: '45c30e86e0038b8159c417bb59fb88885e309853', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'edd7b070c3fa83fe93e3305d70182a63b8a273b5', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '0cfb64faed1d1bfa9d712811ac7c05412b135a8c', class: "buttons" }, h("verdocs-toggle-button", { key: '6fe54edfc3e822f4863c8e2ad8109ea7cde8be94', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+        })))), h("div", { key: 'c1973698147b613df52fa2b8895fb6f7c6eda1e5', class: "row" }, h("label", { key: 'd9211e7aa931b9e270746be2e3a983e346d14f35', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '4e6e978b03cb2bb7f642ef9472ccb8914021561b', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '79fd52114dc907678d3f97fcf50502401c7c7cc6', class: "row" }, h("label", { key: '5f044851b4fd341162ac27308a53ef3ae9f87d9e', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '6b9e582317bf57617f3ef03771dc208d7a85d20a', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: 'ee0a3a7bb56ad26f9c6bfad38b1575999b6b1f1a', class: "row" }, h("div", { key: '7aaa78abd9f934b59862e94c6c657cbccc0ec587', class: "label-with-icon" }, h("label", { key: '3b5625726464e64f2a2089828f8efed86d3e6fac' }, "KBA:"), h("verdocs-help-icon", { key: 'e3ae8688cb0a3ee0f5673de35de911930b5c1264', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: '25f9fe8483ce98ba0984edbe40ea71432bfa0803', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+                { label: 'None', value: '' },
+                { label: 'PIN Code', value: 'pin' },
+                { label: 'Full Verification', value: 'kba' },
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'c73d9196e00f0d8e2ef2372b4c7eec6521e1a8c4', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '8501cd90265ade56a8491226b3fe4f6fd27cab96', class: "row" }, h("label", { key: 'ed86374d406062b31923a3b70dd8a65454b147e2', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'f8c01b1dc7ee18729db4578b490e4e6caeaba006', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '127c1bae45f6b5e01bb6ea7304c543550cb87074', class: "buttons" }, h("verdocs-toggle-button", { key: '7c1fc2e0955cd33d5e8b9778a104120685b9cafd', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+                this.showKba = e.detail.active;
+                if (!e.detail.active) {
+                    this.pinCode = '';
+                    this.kbaMethod = '';
+                }
+                this.showSuggestions = false;
+            } }), h("verdocs-toggle-button", { key: '60d536d5c030075158d2f237251cdc9045a7c7e6', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: '56941f96e455fa978d664cfecd6c015c0c133127', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: '6d634b2fc96412b136fa55074349f85ad2ae0a99', icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
                 this.delegator = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: 'ec687a638006d9902d5041b57de14a0d6fbb4ff3', class: "flex-fill" }), h("verdocs-button", { key: 'e984e3783aa6483ab20873254dd96998e0d505e8', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '1b997aede29f9e8576c0739e089d879ba05ce123', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: 'c798509d79008ba083e028ad4ca78170ac7659d3', class: "flex-fill" }), h("verdocs-button", { key: '4f0355a6ebae37fa80d451918e1572a9fe900861', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'ec6df05fb07868162f6d641e6b7a7d1dc80e5e5d', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
 };
 VerdocsContactPicker.style = VerdocsContactPickerStyle0;
@@ -122,7 +141,7 @@ const VerdocsToggleButton = class {
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        return (h(Host, { key: '20e488d05d44870dcc7dd9ab4bf14b49d99b8d97', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
+        return (h(Host, { key: '19b820fa8c54c87afebe8fbd24d70282eab6922c', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
     }
 };
 VerdocsToggleButton.style = VerdocsToggleButtonStyle0;

package/dist/esm/verdocs-dialog_2.entry.js

@@ -17,7 +17,7 @@ const VerdocsDialog = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a70ef89e55b032e0e35b32ca7bd73143579ed719' }, h("div", { key: '956e60df02c25de5bc30bf022bded3d4474254a3', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'f786312d515007e9e5b338eea7180d73127bf68c', class: "dialog" }, h("slot", { key: '6be94a4f4a45cf06eca5d6fdf5c1534a1993bddc', name: "title" }, h("div", { key: 'f398bb3152b46748e3e498ece109c127771e5257', class: "heading" }, "Please Confirm")), h("slot", { key: '9f3fe959c07e129394cd539080738e2636061634' }, h("div", { key: '6b85e230be87e43bd67a0cfc951400752a0efe06', class: "content" }))))));
+        return (h(Host, { key: '952c27946d1eb8552949ac29d9ffaa05222baaba' }, h("div", { key: '4721082da97c31ddb4e29b05922749b42ab38845', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '80e01d2ee87fd7ffbdd789068587d11ab4323644', class: "dialog" }, h("slot", { key: 'f55b17d75983192918a7c8b5b7df87ca22259b7b', name: "title" }, h("div", { key: '0ebb27bff2de5a06232e419cf9eeff67abddbb3a', class: "heading" }, "Please Confirm")), h("div", { key: 'c93aa214cf8f4c034611f1638dff493a9b2066e2', class: "content" }, h("slot", { key: '7473721bf10ed5dfe388e3d17aec8ee67a5e193f' }))))));
     }
 };
 VerdocsDialog.style = VerdocsDialogStyle0;
@@ -34,12 +34,10 @@ const VerdocsTable = class {
         this.data = [];
     }
     render() {
-        return (h(Host, { key: 'd048ed4b7942038c96da6873520ecaa2a83014f0', class: "table-wrapper" }, h("table", { key: '4328cdcb8da0670fff20f175c9a12deba009e85d', class: "table" }, h("thead", { key: 'c94cbef7c8b3e05d9ee71c812525f1599529bcd1' }, h("tr", { key: 'd27169ab0901fef379fd2001953c944915d9cd5e', class: "row header-row" }, this.columns.map((col, i) => {
+        return (h(Host, { key: 'efe778730c2c95e24dffa2043e1b16e93a964612', class: "table-wrapper" }, h("table", { key: '18b29a87f943123886ce6191e8d2cfc4f2c76b85', class: "table" }, h("thead", { key: '5152847a22a948d8fa0abd8b4ecc5ecdd7014f50' }, h("tr", { key: 'db88562938a289ea701291926b6d221c62fcd78c', class: "row header-row" }, this.columns.map((col, i) => {
             return (h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
-        }))), h("tbody", { key: '5ecf556cd6c25d1f47220c0a22793d0a6ba8ff3e' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
-            var _a;
-            return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
-            // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
+        }))), h("tbody", { key: 'f8fd817f153e1e1067bebed5ca5b3ee40590e1eb' }, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
+            return col.renderCell ? (h("td", { class: `col data-col col-${i} col-${col.id}`, innerHTML: col.renderCell(col, row) })) : (h("td", { class: `col data-col col-${i} col-${col.id}` }, row[col.id]));
         }))))))));
     }
 };

package/dist/esm/verdocs-dropdown.entry.js

@@ -87,7 +87,7 @@ const VerdocsDropdown = class {
         (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
     }
     render() {
-        return (h(Host, { key: 'ba41da3a28f1fb5b36c6918967fad5297cedf8dd' }, h("button", { key: '8f10c96d7e108f79115c8b4b309c7e02ab5f37f6', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '747b2358b38f0f0290936973c4aaf2ec08a1a846' }, h("button", { key: '733cdd06681a5324c4598d2a11e93b78e7ade53b', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
             // onBlur={() => this.hide()}
             ref: el => (this.dropdownButton = el) })));
     }

package/dist/esm/verdocs-envelope-document-page.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './utils-61c1093b.js';
+import { t as throttle } from './utils-d1c95309.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
@@ -77,7 +77,7 @@ const VerdocsEnvelopeDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'a8a29647c914fafe6361029943ae43a5819fdbcb', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: '1626cbea713462254f8d518479181a39156fd599', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

package/dist/esm/verdocs-envelope-recipient-link_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, getInPersonLink, getRecipientsWithActions, recipientCanAct } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-fefba6fd.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-9df042b5.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-296aabaf.js';

package/dist/esm/verdocs-envelope-sidebar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, resendInvitation, cancelEnvelope, userIsEnvelopeOwner } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-fefba6fd.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-9df042b5.js';
 import { F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';

package/dist/esm/verdocs-envelopes-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
 import { VerdocsEndpoint, listEnvelopes, integerSequence, getRecipientsWithActions, userCanCancelEnvelope, userCanAct, cancelEnvelope } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './utils-61c1093b.js';
+import { s as saveEnvelopesAsZip } from './utils-d1c95309.js';
 import { V as VerdocsToast } from './Toast-b71de686.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './Types-e4a6eba5.js';
@@ -194,18 +194,18 @@ const VerdocsEnvelopesList = class {
         });
     }
     render() {
-        return (h(Host, { key: '1533851ebdceca1b689aec246de482f547817585' }, h("div", { key: 'a33685ad776d4ad2282a794fc08a6928c2a2c2c6', class: "header" }, h("div", { key: '774df81f4db58154c20b5aa6d00585cf70f2c0be', class: "filter" }, h("verdocs-text-input", { key: 'd279867c1693c181d115ed9380263f7ca33cf54e', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
+        return (h(Host, { key: '6edaa0dc845957fdc3c41c5b12769acbec99e5ef' }, h("div", { key: 'd8bfa9ca32548c14f58f8de9e07f74f56b59bcf5', class: "header" }, h("div", { key: '77c565abd59956f38530c62f206be1c32e19ac62', class: "filter" }, h("verdocs-text-input", { key: 'c723b51faa1634f944d2034342038b5748515c36', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
                 var _a;
                 // We don't locally filter envelopes because there are too many fields to match against efficiently.
                 this.match = e.target.value.trim();
                 (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
-            } })), h("verdocs-quick-filter", { key: '0e24f54710055db16f106c43419ae8c7d60a137a', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: 'd09efd430424bbf73065c159a1ddae88906943c7', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
                 this.view = e.detail.value;
-            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'd94ade343fe8dfabb11cc6995960c2a221e3fdc4', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'ede4a4258b0c7fbe48ab89a8d97f092dad407cf4', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
                 this.status = e.detail.value;
-            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '5b7e637fb7621c1e3b8c52888fd9fabc5b56e27e', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
+            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: 'e904efda70b7a06111a877ccfd35f5f8addda438', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
                 this.sort = e.detail.value;
-            } })), this.loading && h("verdocs-spinner", { key: '2c1a05c9c04cd61733816141c6811ba52229056c', mode: "dark", size: 24 }), h("div", { key: '5af2c9f56ba9bb21cba28637b925dc011613bd05', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '06bc8e1fd09692bdaf9e56268a8592d97ff10cce', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+            } })), this.loading && h("verdocs-spinner", { key: '69b2b8fab8cd3e24c6d42c0f0232478da387c537', mode: "dark", size: 24 }), h("div", { key: '2dab430f1de35a2c969f9a86e999a01b97685165', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'dc829e57afc61fcef27f21d55b1241dcfa148bc0', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
             var _a;
             const recipientsWithActions = getRecipientsWithActions(envelope);
             const userCanCancel = userCanCancelEnvelope(this.endpoint.session, envelope);
@@ -246,7 +246,7 @@ const VerdocsEnvelopesList = class {
                             break;
                     }
                 } }))));
-        }), !this.initiallyLoaded && (h("div", { key: 'ff38c547cc65bd2559dc9f2fb5be237384f56be5', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: 'bd666277c44235c7ef9855b1b7985860b8d8f0da', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (h("div", { key: 'fbb26beda8dbe6eade806f9440281c04c1fc94c3', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '406dda17fe96ef1494cd5ee17399098f7a322134', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
             } }))) : (h("div", null))));
     }