@verdocs/web-sdk 4.0.9 → 4.1.2

package/dist/components/verdocs-build.js

@@ -2,7 +2,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$J } from './verdocs-button2.js';
+import { d as defineCustomElement$K } from './verdocs-button2.js';
+import { d as defineCustomElement$J } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$I } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$H } from './verdocs-component-error2.js';
 import { d as defineCustomElement$G } from './verdocs-contact-picker2.js';
@@ -63,45 +64,51 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.store = null;
+        this.templateStore = null;
     }
-    onTemplateIdChanged(newTemplateId) {
-        console.log('Template ID changed', newTemplateId);
+    onTemplateIdChanged(newTemplateId, oldTemplateId) {
+        if (!oldTemplateId && newTemplateId && this.step === 'attachments') {
+            this.step = 'preview';
+        }
         this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
     }
-    onStepChanged(newStep) {
-        console.log('Step changed', newStep);
+    onStepChanged() {
+        // We reload the template here even if only the step changed in case
+        // we were out of sync before
         this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[BUILD] Unable to start builder session, must be authenticated');
+                return;
+            }
             if (!this.templateId) {
                 console.log(`[BUILD] No template ID, activating upload mode`);
                 this.step = 'attachments';
                 return;
             }
-            if (!this.endpoint.session) {
-                console.log('[BUILD] Unable to start builder session, must be authenticated');
-                return;
+            try {
+                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+            }
+            catch (e) {
+                console.log('[BUILD] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
             }
-            this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
         }
         catch (e) {
-            console.log('[BUILD] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            console.log('[BUILD] Error with builder session', e);
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
     async loadTemplate(templateId) {
         if (templateId) {
-            console.log('Loading store', templateId);
-            this.store = await getTemplateStore(this.endpoint, templateId, false);
-            // forceUpdate(this.el);
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
         }
     }
-    handleCancel(e) {
-        console.log('Cancel', e.detail);
+    handleCancel() {
         this.step = 'preview';
     }
     async handleTemplateCreated(templateId) {
@@ -131,7 +138,6 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
     }
     handleStepChanged(step) {
         var _a;
-        console.log('osc', step);
         this.step = step;
         (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
     }
@@ -139,12 +145,12 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (!this.store) {
+        if (!this.templateStore) {
             console.log('[BUILD] No template ID, rendering created view');
-            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+            return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
         }
         console.log('[BUILD] Rendering build view', this.templateId, this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
-        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -156,7 +162,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
         "endpoint": [16],
         "templateId": [1537, "template-id"],
         "step": [1537],
-        "store": [32]
+        "templateStore": [32]
     }, undefined, {
         "templateId": ["onTemplateIdChanged"],
         "step": ["onStepChanged"]
@@ -165,7 +171,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio-button", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
+    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio-button", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-build":
             if (!customElements.get(tagName)) {
@@ -173,6 +179,11 @@ function defineCustomElement$1() {
             }
             break;
         case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$K();
+            }
+            break;
+        case "verdocs-button-panel":
             if (!customElements.get(tagName)) {
                 defineCustomElement$J();
             }

package/dist/components/verdocs-button-panel.js

@@ -1,97 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
-
-const verdocsButtonPanelCss = "@-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-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
-const VerdocsButtonPanelStyle0 = verdocsButtonPanelCss;
-
-const VerdocsButtonPanel$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsButtonPanel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        // Not marked as @State because it's not the thing that controls our rendering
-        this.showing = false;
-        this.icon = '';
-    }
-    componentDidRender() {
-        document.body.appendChild(this.panelEl);
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
-        // placement: 'top-end',
-        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-        });
-    }
-    disconnectedCallback() {
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-            this.popperInstance = null;
-        }
-        if (this.panelEl) {
-            this.panelEl.remove();
-        }
-    }
-    async showPanel() {
-        var _a, _b;
-        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-        this.showing = true;
-        this.hiderEl = document.createElement('div');
-        this.hiderEl.id = 'verdocs-button-panel-hider';
-        this.hiderEl.style.zIndex = '100';
-        this.hiderEl.style.position = 'absolute';
-        this.hiderEl.style.top = '0px';
-        this.hiderEl.style.left = '0px';
-        this.hiderEl.style.right = '0px';
-        this.hiderEl.style.bottom = '0px';
-        this.hiderEl.onclick = (e) => {
-            e.stopPropagation();
-            this.toggle();
-        };
-        document.body.appendChild(this.hiderEl);
-    }
-    async hidePanel() {
-        var _a;
-        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
-            el.removeAttribute('data-show');
-        });
-        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
-        this.showing = false;
-    }
-    async toggle() {
-        if (this.showing) {
-            await this.hidePanel();
-        }
-        else {
-            await this.showPanel();
-        }
-    }
-    render() {
-        return (h(Host, { key: 'cbf8d72d05c0a1461d0fb99e78879c42bd737336' }, h("div", { key: '87dec92b073c1dee35b40f08db6752e663b6249e', class: "icon", innerHTML: this.icon, onClick: (e) => {
-                e.stopPropagation();
-                return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '86911772f264252db5527655d5ac459c20813f1c', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '0b4286031122fafe3927da086fd0b826bad6c388', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '0644253791590daa7faf9de9e8be9cd599c2f9cc' }))));
-    }
-    static get style() { return VerdocsButtonPanelStyle0; }
-}, [4, "verdocs-button-panel", {
-        "icon": [1],
-        "showPanel": [64],
-        "hidePanel": [64],
-        "toggle": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["verdocs-button-panel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "verdocs-button-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VerdocsButtonPanel$1);
-            }
-            break;
-    } });
-}
+import { V as VerdocsButtonPanel$1, d as defineCustomElement$1 } from './verdocs-button-panel2.js';
 
 const VerdocsButtonPanel = VerdocsButtonPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-button-panel2.js

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './popper.js';
+
+const verdocsButtonPanelCss = "@-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-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
+const VerdocsButtonPanelStyle0 = verdocsButtonPanelCss;
+
+const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class VerdocsButtonPanel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        // Not marked as @State because it's not the thing that controls our rendering
+        this.showing = false;
+        this.icon = '';
+    }
+    componentDidRender() {
+        document.body.appendChild(this.panelEl);
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+        if (this.panelEl) {
+            this.panelEl.remove();
+        }
+    }
+    async showPanel() {
+        var _a, _b;
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+        this.showing = true;
+        this.hiderEl = document.createElement('div');
+        this.hiderEl.id = 'verdocs-button-panel-hider';
+        this.hiderEl.style.zIndex = '100';
+        this.hiderEl.style.position = 'absolute';
+        this.hiderEl.style.top = '0px';
+        this.hiderEl.style.left = '0px';
+        this.hiderEl.style.right = '0px';
+        this.hiderEl.style.bottom = '0px';
+        this.hiderEl.onclick = (e) => {
+            e.stopPropagation();
+            this.toggle();
+        };
+        document.body.appendChild(this.hiderEl);
+    }
+    async hidePanel() {
+        var _a;
+        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+            el.removeAttribute('data-show');
+        });
+        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
+        this.showing = false;
+    }
+    async toggle() {
+        if (this.showing) {
+            await this.hidePanel();
+        }
+        else {
+            await this.showPanel();
+        }
+    }
+    render() {
+        return (h(Host, { key: '37ce9f8d7615e703a4a41396d1bba667f25adb97' }, h("div", { key: 'a9f1795df2e640d053361325b2096fdba15f2b1d', class: "icon", innerHTML: this.icon, onClick: (e) => {
+                e.stopPropagation();
+                return this.toggle();
+            }, ref: el => (this.iconEl = el) }), h("div", { key: 'fa63de96387644fab4ef5e6047a0687edaec52cc', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '8224a9993d6acca9c0ccfbd4ace02eda803c41bf', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: '3f3d910f4779e90dd5dd4b8b9c553ee09edc3625' }))));
+    }
+    static get style() { return VerdocsButtonPanelStyle0; }
+}, [4, "verdocs-button-panel", {
+        "icon": [1],
+        "showPanel": [64],
+        "hidePanel": [64],
+        "toggle": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-button-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-button-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsButtonPanel);
+            }
+            break;
+    } });
+}
+
+export { VerdocsButtonPanel as V, defineCustomElement as d };

package/dist/components/verdocs-button2.js

@@ -16,7 +16,7 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class VerdocsButton exten
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '92cd9d2b91cd0c950ae687af05496c2edc095e95', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '916c32a365115a8e4c1eaeb9a641acf376ff3f1c', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '822e0773075831cc4ab6a0c5a9fd3fc89c4cef43', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '8ef9ac40620d885dd37fc776929224ea2e6cf596', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
     static get style() { return VerdocsButtonStyle0; }
 }, [0, "verdocs-button", {

package/dist/components/verdocs-checkbox2.js

@@ -15,7 +15,7 @@ const VerdocsCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsCheckbox e
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '419474760206bae27e0ad8f578a0fb0d97702791', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '4cb5190cdc28bec1528637bfeeb130d392ce4347' }, h("input", { key: 'f032febf516c10b0540094f058a59031ce2c706b', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: 'c089f80a6a1060d775c1a13d8cbe8a577287f329' }, this.label))));
+        return (h(Host, { key: 'cddf35bef85cc89a90ac6e724e1953cbad96753b', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '0d5466a742992b5bf88b6931276f941015254afa' }, h("input", { key: '6fed5b64b0095d8977581e6d30b412fa9622b5ff', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: '6e56f6f607c883e5eb6a7eabe4de64a98878b101' }, this.label))));
     }
     static get style() { return VerdocsCheckboxStyle0; }
 }, [0, "verdocs-checkbox", {

package/dist/components/verdocs-component-error2.js

@@ -10,7 +10,7 @@ const VerdocsComponentError = /*@__PURE__*/ proxyCustomElement(class VerdocsComp
         this.message = '';
     }
     render() {
-        return (h(Host, { key: 'af86792a4a2d09d2242645a1a8db657c5cd984bf' }, h("div", { key: '52096cd84877537d50bea3e0e7a424e5d352c566', class: "inner" }, this.message)));
+        return (h(Host, { key: '24ef80b6da0d6be6cef8fc877f0d8f6c758870dd' }, h("div", { key: '869e285731c0531dbb1032d5bcb6ae851ae97289', class: "inner" }, this.message)));
     }
     static get style() { return VerdocsComponentErrorStyle0; }
 }, [0, "verdocs-component-error", {

package/dist/components/verdocs-contact-picker2.js

@@ -1,15 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { c as convertToE164 } from './utils.js';
-import { d as defineCustomElement$2 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.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 = /*@__PURE__*/ proxyCustomElement(class VerdocsContactPicker extends HTMLElement {
     constructor() {
         super();
@@ -27,6 +30,9 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         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)}`;
@@ -39,6 +45,10 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
             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) {
@@ -83,18 +93,29 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     // 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) }))));
     }
     static get style() { return VerdocsContactPickerStyle0; }
 }, [0, "verdocs-contact-picker", {
@@ -108,6 +129,9 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         "showSuggestions": [32],
         "showMessage": [32],
         "delegator": [32],
+        "showKba": [32],
+        "kbaMethod": [32],
+        "pinCode": [32],
         "nameFieldId": [32],
         "emailFieldId": [32],
         "phoneFieldId": [32]
@@ -116,7 +140,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-contact-picker", "verdocs-button", "verdocs-toggle-button"];
+    const components = ["verdocs-contact-picker", "verdocs-button", "verdocs-help-icon", "verdocs-select-input", "verdocs-toggle-button"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
@@ -124,6 +148,16 @@ function defineCustomElement() {
             }
             break;
         case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-select-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/verdocs-dialog2.js

@@ -18,7 +18,7 @@ const VerdocsDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsDialog exten
         }
     }
     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' }))))));
     }
     static get style() { return VerdocsDialogStyle0; }
 }, [4, "verdocs-dialog"]);

package/dist/components/verdocs-dropdown2.js

@@ -88,7 +88,7 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsDropdown e
         (_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/components/verdocs-envelope-document-page2.js

@@ -76,7 +76,7 @@ const VerdocsEnvelopeDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
     }
     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/components/verdocs-envelopes-list.js

@@ -202,18 +202,18 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
         });
     }
     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);
@@ -254,7 +254,7 @@ const VerdocsEnvelopesList$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnv
                             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))));
     }