@verdocs/web-sdk 4.2.43 → 4.2.48

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

@@ -0,0 +1,115 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-3476681c.js';
+import { c as createPopper } from './popper-0fbeff6d.js';
+import { V as VerdocsToast } from './Toast-c4843828.js';
+
+const verdocsButtonCss = "@-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 button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const VerdocsButtonStyle0 = verdocsButtonCss;
+
+const VerdocsButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = undefined;
+        this.startIcon = null;
+        this.endIcon = null;
+        this.size = 'normal';
+        this.type = 'button';
+        this.variant = 'standard';
+        this.disabled = false;
+    }
+    render() {
+        return (h("button", { key: '1b0a149ab51af95445b47bb17207bc3b44516be3', 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: '4a868a010e47d300cc9b7dd31c7665f58c3f1986', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+    }
+};
+VerdocsButton.style = VerdocsButtonStyle0;
+
+const verdocsHelpIconCss = "@-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-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const VerdocsHelpIconStyle0 = verdocsHelpIconCss;
+
+const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
+const VerdocsHelpIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.text = '';
+        this.icon = helpIcon;
+        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    show() {
+        var _a, _b;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    }
+    hide() {
+        var _a;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    render() {
+        return (h(Host, { key: 'a3461401c9c39efe1d3d4a33797c9fdb4c243cd4', class: {} }, h("div", { key: 'bab136ac563622e50b68a624b0beca62b1ee43f8', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: 'e23f6cb0bf8dfecd28ed92790eff519ea83707f3', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '2c61ce450603afa8fa608c98003e0c97b5486df5', innerHTML: this.text }), h("div", { key: 'b57ad281d928ba3b4b2ea807bd6744f88f1519c3', "data-popper-arrow": "true", class: "arrow" }))));
+    }
+};
+VerdocsHelpIcon.style = VerdocsHelpIconStyle0;
+
+const verdocsTextInputCss = "@-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-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
+const VerdocsTextInputStyle0 = verdocsTextInputCss;
+
+const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
+const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
+const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
+const VerdocsTextInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.autocomplete = '';
+        this.helpText = '';
+        this.clearable = false;
+        this.copyable = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.required = false;
+        this.showingPw = false;
+    }
+    copyToClipboard() {
+        this.inputEl.select();
+        navigator.clipboard
+            .writeText(this.value)
+            .then(() => VerdocsToast('Copied!'))
+            .catch(e => console.log('Error copying to clipboard', e));
+    }
+    render() {
+        return (h(Host, { key: '60bd27aafb8597a65b2cc433a560ae1bd2b404ad', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: 'd35b3912a2fd3d27ba1f1a454bbd0cf02710d7c2' }, this.label && (h("div", { key: '24b9dbbc47a32d2db4b1cb1a0fbfcec6e10698f6', class: "input-label" }, this.label + ':', this.required && h("span", { key: '1c2ef6df80053e6eaf9c6f6b23391b329ace0b60', class: "required" }, "*"))), h("div", { key: '563ac56ff97fad6be30eefaacc0e654e11763db6', class: "input-container" }, h("input", { key: '50d21decaff04b0bb823f33ab71eacdcc0ef1906', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '0d0e907d677492b54ff244f2f36389d474b13cda', innerHTML: ClearIcon, class: "clear", onClick: () => {
+                // We need to allow the onInput event to fire first in case
+                // the user was focused on this field before clicking clear.
+                setTimeout(() => {
+                    var _a;
+                    this.value = '';
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
+                    // We need to allow the value to "settle"
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
+                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
+                    }, 50);
+                }, 50);
+            } })), this.type === 'password' && (h("span", { key: '68df05b7d43320a87f4ede3115b20cf19b409f9e', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
+                this.showingPw = !this.showingPw;
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'f41ecf64b8fce70f74c6f938955b839a32252259', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'f8d399ed6c21bcc27e04330f6437f160e733218a', text: this.helpText }))));
+    }
+    get hostEl() { return getElement(this); }
+};
+VerdocsTextInput.style = VerdocsTextInputStyle0;
+
+export { VerdocsButton as verdocs_button, VerdocsHelpIcon as verdocs_help_icon, VerdocsTextInput as verdocs_text_input };

package/dist/esm/{verdocs-checkbox_5.entry.js → verdocs-checkbox_4.entry.js}

@@ -1,10 +1,9 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-3476681c.js';
-import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, DEFAULT_FIELD_WIDTHS, DEFAULT_FIELD_HEIGHTS, updateField, deleteField } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-002f3d4c.js';
-import { g as getTemplateRoleStore } from './TemplateRoleStore-69e28e18.js';
-import { g as getTemplateStore } from './TemplateStore-c2e5147b.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore-39555cd8.js';
+import { g as getTemplateStore } from './TemplateStore-ebd8f5f6.js';
 import { S as SDKError } from './errors-887f1e88.js';
-import { V as VerdocsToast } from './Toast-c4843828.js';
 import './index-e58b15f6.js';
 import './index-7588a071.js';
 
@@ -22,7 +21,7 @@ const VerdocsCheckbox = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '02a992ff0c9365a18637ccd7b0acc34a16c95b0e', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: '897f8d9d3f3365087a00ab0bb12b741c944a66a3' }, h("input", { key: '1e82031b5febc2cea4920e2c374a5f3cbff07889', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: 'a5b8a8518301ce6866228d7a66029abdc802e092' }, this.label))));
+        return (h(Host, { key: '134ddfacbf313ed3d8aaaae104e7ceefaf8f260f', class: { disabled: this.disabled, [this.theme]: true } }, h("label", { key: 'f4c5ad61ffc32acf46e42a22c9cfdb27b44d21c9' }, h("input", { key: 'edc72dbc12bb2f93daa6bf90fe8baddeee003a0f', type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", { key: '0d3a00d372dc0a0b2de109c1ee8c484153b789a7' }, this.label))));
     }
 };
 VerdocsCheckbox.style = VerdocsCheckboxStyle0;
@@ -36,7 +35,7 @@ const VerdocsComponentError = class {
         this.message = '';
     }
     render() {
-        return (h(Host, { key: '572b854146e540ecb3fecdab0abe7a89bdc5f6e5' }, h("div", { key: 'b531eabc052b083f9a99b20d57df4dc0992a1ef0', class: "inner" }, this.message)));
+        return (h(Host, { key: '5fd53e1053d599dc955c727344dfbc48ddf13622' }, h("div", { key: 'bd877d18be032147ed72b999896f0cec3b021c95', class: "inner" }, this.message)));
     }
 };
 VerdocsComponentError.style = VerdocsComponentErrorStyle0;
@@ -53,12 +52,12 @@ const VerdocsSelectInput = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '49b233e1dcda5c8ffd51453654fa88bdec73bd82', class: "input-field" }, h("label", { key: '53ec0b8c1823a9e992c04e554bb33752ed676ad3' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: 'e7e0ef4dc4ab8aae9cc81d39010cfa335d37b291', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+        return (h(Host, { key: '4f49d2d10cf951c150b168563bcdb1d69e2385f2', class: "input-field" }, h("label", { key: 'a7329800f45797aac347e20231cc790e7ed4a91f' }, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { key: '1f66b8907f5ba4c9ecece9444ee4afc1be6a4459', class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
     }
 };
 VerdocsSelectInput.style = VerdocsSelectInputStyle0;
 
-const verdocsTemplateFieldPropertiesCss = "@-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-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "@-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-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .options-header{gap:10px;margin:0 0 5px 0;display:-ms-flexbox;display:flex;color:#ffffff;font-size:14px;padding:5px 8px;font-weight:700;text-align:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;background-color:#333333}verdocs-template-field-properties .options-header-label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;font-weight:700;font-size:14px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 1px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
@@ -84,12 +83,12 @@ const VerdocsTemplateFieldProperties = class {
         this.type = 'textbox';
         this.name = '';
         this.required = false;
+        this.multiline = false;
         this.roleName = '';
         this.group = '';
         this.fieldType = '';
         this.options = [];
         this.placeholder = '';
-        this.multiline = false;
         this.defaultValue = '';
         this.showingHelp = false;
     }
@@ -131,16 +130,17 @@ const VerdocsTemplateFieldProperties = class {
         this.type = field.type;
         this.name = field.name;
         this.label = field.label;
-        this.group = field.name;
+        this.group = field.group;
         this.roleName = field.role_name;
         this.required = field.required;
         this.fieldType = field.type;
-        this.options = field.options;
+        this.options = field.options || [];
         this.placeholder = field.placeholder || '';
         this.defaultValue = field.default || '';
         this.multiline = field.multiline || false;
         this.dirty = false;
         this.loading = false;
+        this.cleanupOptions();
     }
     handleCancel(e) {
         var _a, _b;
@@ -162,13 +162,19 @@ const VerdocsTemplateFieldProperties = class {
             default: this.defaultValue,
             options: this.options,
         };
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+        if (!newProperties.multiline && field.multiline) {
+            console.log('Switching off multiline');
+            newProperties.width = DEFAULT_FIELD_WIDTHS.textbox;
+            newProperties.height = DEFAULT_FIELD_HEIGHTS.textbox;
+        }
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
             var _a, _b, _c;
             updateStoreField(this.fieldStore, this.fieldName, updated);
             this.resetForm();
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, field: updated });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
@@ -189,6 +195,12 @@ const VerdocsTemplateFieldProperties = class {
             console.log('[FIELD PROPERTIES] Deletion error', e);
         });
     }
+    cleanupOptions() {
+        this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.value || '').trim() !== '')];
+        if (!this.options.find(opt => !opt.id && !opt.value)) {
+            this.options = [...this.options, { id: '', value: '' }];
+        }
+    }
     render() {
         var _a;
         // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
@@ -218,6 +230,12 @@ const VerdocsTemplateFieldProperties = class {
             } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
                 this.defaultValue = e.target.value;
                 this.dirty = true;
+            } }))), this.type === 'radio' && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Group", value: this.group, autocomplete: "off", helpText: "Enable exclusive selections. Only one option within the same group may be selected at a time.", placeholder: "Group...", onInput: (e) => {
+                this.group = (e.target.value || '')
+                    .trim()
+                    .toLowerCase()
+                    .replace(/[^a-z0-9]/g, '');
+                this.dirty = true;
             } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
             // helpText="Placeholder to display if the field is empty."
             placeholder: "Placeholder...", onInput: (e) => {
@@ -226,84 +244,25 @@ const VerdocsTemplateFieldProperties = class {
             } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
                 this.required = e.target.checked;
                 this.dirty = true;
-            } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
-                marginTop: '15px',
-                marginBottom: '15px',
-                textAlign: 'center',
-                fontWeight: '700',
-                fontSize: '14px',
-                justifyContent: 'center',
-                backgroundColor: '#333333',
-                padding: '5px 8px',
-                color: '#ffffff',
-            } }, "Options"), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+            } })), this.type === 'textbox' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-multline", class: "input-label" }, "Multi-Line"), h("verdocs-checkbox", { id: "verdocs-is-multiline", name: "is-multiline", checked: this.multiline, value: "on", onInput: (e) => {
+                this.multiline = e.target.checked;
+                this.dirty = true;
+            } }))), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
                 this.options[index].id = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
                 this.options[index].value = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {
                 this.options = this.options.filter(opt => opt.id !== option.id);
                 this.dirty = true;
-            } })))), h("div", { class: "row-header" }, h("button", { class: "add-option-button", onClick: () => {
-                this.options = [...this.options, { id: `option-${this.options.length + 1}`, value: `Option ${this.options.length + 1}` }];
-                this.dirty = true;
-            } }, "Add Option")))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+                this.cleanupOptions();
+            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
     }
     get el() { return getElement(this); }
 };
 VerdocsTemplateFieldProperties.style = VerdocsTemplateFieldPropertiesStyle0;
 
-const verdocsTextInputCss = "@-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-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
-const VerdocsTextInputStyle0 = verdocsTextInputCss;
-
-const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
-const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
-const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
-const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
-const VerdocsTextInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.value = '';
-        this.label = '';
-        this.placeholder = '';
-        this.autocomplete = '';
-        this.helpText = '';
-        this.clearable = false;
-        this.copyable = false;
-        this.type = 'text';
-        this.disabled = false;
-        this.required = false;
-        this.showingPw = false;
-    }
-    copyToClipboard() {
-        this.inputEl.select();
-        navigator.clipboard
-            .writeText(this.value)
-            .then(() => VerdocsToast('Copied!'))
-            .catch(e => console.log('Error copying to clipboard', e));
-    }
-    render() {
-        return (h(Host, { key: '39ca7e3389e89d00c1b15adcbc949f3b260ea257', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '1d6d01c8cb3b3ac3794b6dc26c96929685989089' }, this.label && (h("div", { key: '95a771234d7cdc4484c999144b655b6eacbe27d1', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'a41ddd971cd71b61eeb37464083f29a55bf8a030', class: "required" }, "*"))), h("div", { key: '4ccb0473d02f0aee9a0bc94c4a59293eef1e3eef', class: "input-container" }, h("input", { key: '614f5193c19137c5f06ccc5173299fc3db3d99ff', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '1d750d5890434d4a6dfb1faca659d442025ad515', innerHTML: ClearIcon, class: "clear", onClick: () => {
-                // We need to allow the onInput event to fire first in case
-                // the user was focused on this field before clicking clear.
-                setTimeout(() => {
-                    var _a;
-                    this.value = '';
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
-                    // We need to allow the value to "settle"
-                    setTimeout(() => {
-                        var _a, _b;
-                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
-                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
-                    }, 50);
-                }, 50);
-            } })), this.type === 'password' && (h("span", { key: 'c9c856949e5cd6675c2f723fe0434527044db36f', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
-                this.showingPw = !this.showingPw;
-            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'b95ccfa39c6d2f8ec110aa282a5ec902e015de94', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'd8b934d8038cd6f0eeb39bff7092314aed2d0029', text: this.helpText }))));
-    }
-    get hostEl() { return getElement(this); }
-};
-VerdocsTextInput.style = VerdocsTextInputStyle0;
-
-export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties, VerdocsTextInput as verdocs_text_input };
+export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { i as convertToE164 } from './utils-7d128d3c.js';
+import { f as convertToE164 } from './utils-467fcc6a.js';
+import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
@@ -22,6 +23,8 @@ const VerdocsContactPicker = class {
         this.templateRole = null;
         this.contactSuggestions = [];
         this.name = undefined;
+        this.first_name = undefined;
+        this.last_name = undefined;
         this.email = undefined;
         this.phone = undefined;
         this.message = undefined;
@@ -32,12 +35,19 @@ const VerdocsContactPicker = class {
         this.kbaMethod = '';
         this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
+        this.firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;
+        this.lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;
         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)}`;
     }
     componentWillLoad() {
         if (this.templateRole) {
+            const nameComponents = (this.templateRole.full_name || '').split(' ');
+            const firstName = nameComponents.shift() || '';
+            const lastName = nameComponents.join(' ');
             this.name = this.templateRole.full_name || '';
+            this.first_name = firstName;
+            this.last_name = lastName;
             this.email = this.templateRole.email || '';
             this.phone = this.templateRole.phone || '';
             this.delegator = this.templateRole.delegator || false;
@@ -75,6 +85,8 @@ const VerdocsContactPicker = class {
         this.showSuggestions = false;
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
             full_name: this.name,
+            first_name: this.first_name,
+            last_name: this.last_name,
             email: this.email,
             phone: this.phone,
             message: this.message,
@@ -84,6 +96,8 @@ const VerdocsContactPicker = class {
     handleSelectSuggestion(e, suggestion) {
         e.stopPropagation();
         this.name = suggestion.name;
+        this.first_name = suggestion.first_name;
+        this.last_name = suggestion.last_name;
         this.email = suggestion.email;
         this.phone = suggestion.phone;
         this.showSuggestions = false;
@@ -91,26 +105,24 @@ 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: 'd5f351153f58ec275d6bc7225db6aee53a5c54e6', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '960ec06a72d7b14c6ad4609ccba90639b746e93e', class: "row" }, h("label", { key: '0ab66bf6689aa26132718cf673d7275708945ae4', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: '25e2406d5b1ad78ada9c999fdefd3c16bccb60eb', 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: 'ec9dfb86c52a462005b00d857f2f945b6a5861a8', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+        return (h("form", { key: 'd4a74d3f95d9c13bf7b4afdc0391aafdc504b053', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '329611e08994741cc94d01d62ab563ad182243ba', class: "row" }, h("label", { key: 'fd235b92d011939bbc20cf4efbe6428d953c454d', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: 'e3531ddf8308a1be0a3fd43205fde1e99bca5dbc', style: { display: 'flex', flexDirection: 'row', gap: '8px;' } }, h("input", { key: 'b8bf71e3f6ce8e5aad6ee9cb03d1119935206f0c', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) }), h("input", { key: '9d53c8d43ed0ca4d3f17d39b6d90bece9afd68a7', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) })), this.showSuggestions && (h("div", { key: 'f53fc8a9ec12e31401afc4d22c98269ba96d0048', 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: 'e8f2ee3647ffc37a31cb4f1d8a043183ce608268', class: "row" }, h("label", { key: '99840da172556066187691124358fd64c19c466d', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'bba477caa2c14def36cf90f66bc164d58ccae999', 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: 'a3e045ec2fe78e1662c389c2fdb742165e67cbfd', class: "row" }, h("label", { key: '19257fb97c8b0163c7d3882130bb298388c57901', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'ae3bbc51bed7039b716153675e3036abdf161382', 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: 'b05e51e9e9f1abb359113bea8cbc1c61c2979dbc', class: "row" }, h("div", { key: 'a905229b77e8b7941586834d4f942530d0b3d254', class: "label-with-icon" }, h("label", { key: 'b438b090c40ef5cd4c6550cd3cd57c676ab49061' }, "KBA:"), h("verdocs-help-icon", { key: '72fd391e008444b1f55c99833cc6f6e13670f199', 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: '8af56bf9b367faaec0777d4f0d555f9a0f1f4145', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), h("div", { key: '29211a4aeccb45c1f6ce4581ce89eef56fd0efa0', class: "row" }, h("label", { key: '32fb4eaa0599ea08364af828e93dd182ee36b42b', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '9a75b49d558dab786d4cec8e74e1d4970da63467', 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: 'd5e07b3b8b24283acb158a8b44a981b1281c0964', class: "row" }, h("label", { key: '0d76a478038a18d4b16f73c14fe8ec53a014ca37', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '7c957fa5584d100e08bcb4ef808ec21ef507df32', 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: '3d48f1e8c4941700ecbc07a57fa3a8e22e866c26', class: "row" }, h("div", { key: '94f76f6449c8939dbd989507d03f8c7323b0487d', class: "label-with-icon" }, h("label", { key: '516dd082ac4cd08e881bffc1ab22d14ed3cc4c52' }, "KBA:"), h("verdocs-help-icon", { key: 'e12ca24140bbcfb1645c14c2bfcf3e7326d3033a', 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: 'eadc53ce819c1ff21a9a3c51e4771a8dd7076eee', 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: '504c018a9c8ad9087ddd6b253b794c493bb16686', 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: '0506d342d5fcbdc812498ffbf19bcd9bd2d1abca', class: "row" }, h("label", { key: 'e62684bc9178188fed71eb77954b186511a0c29d', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'b9638d6435b7d0dc8815f20e42c2b5498ab308a0', 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: 'efc4e30feb9b3c58cc39e85725a6b780d424ca6e', class: "buttons" }, h("verdocs-toggle-button", { key: '6146346933119b33a1cd494e21e0d1a0195378cc', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'db7162ba5935448fdf6b335b57c2ac91283563b6', 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: '2ff18d49d7bd4181ba6fbf1ecacb64ba458b66d2', class: "row" }, h("label", { key: '2c22e7f0c17c5e86e4c920399ba3d4b0500a495e', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'ff3a0a753f1cb6418e02cb0f4abffbe540fd4213', 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: 'cec56a872a810a5cedc49e57f3afe1ecf3c3ade6', class: "buttons" }, h("verdocs-toggle-button", { key: '6f9e177a3e8d077144b5d4382a18a95b44616d12', 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: 'ba3139369cb582ec7ca246f4ad08a58998eca1eb', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: '8d7468bdc795eff356f4636bff62b9536c0a2d59', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: '52ab10bc5857dc55244d064c20a2d59eb67bca82', class: "flex-fill" }), h("verdocs-button", { key: '4eedb7f847d8004567c24f25c7efa2ae9d6da61b', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '4b4b461f150eaf575e4b22760388ecea92f7da54', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: 'a902c45f33e944655d42f758b67c082fa57c93ca', class: "flex-fill" }), h("verdocs-button", { key: 'b24bce7779c3049c5f578cc55b2dec550258c57a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '6445645ad05e49aa28c149bed65ee95ce6889e2a', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
 };
 VerdocsContactPicker.style = VerdocsContactPickerStyle0;
@@ -139,7 +151,7 @@ const VerdocsToggleButton = class {
         (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
     }
     render() {
-        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))));
+        return (h(Host, { key: '172f6a0d3eec15a7b97ed055125defe6d7e69fcb', 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.entry.js

@@ -17,7 +17,7 @@ const VerdocsDialog = class {
         }
     }
     render() {
-        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' }))))));
+        return (h(Host, { key: '6248990033ba71022795432afa8679841450431e' }, h("div", { key: 'bdea70156c5d1776977bf7947e326ed118367f82', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '5c8cec9a24b0a892aeb2325a87a6d238ad211992', class: "dialog" }, h("slot", { key: '001678f28acc1ca78772dfa2d2f9cb56c6e1074d', name: "title" }, h("div", { key: 'b5c86535f40180659a6e21b31193c6d0cdd0c706', class: "heading" }, "Please Confirm")), h("div", { key: 'e6c8eddfe1c541d34ac2380f78564bc80b736564', class: "content" }, h("slot", { key: '6d22d23df835be6339b7629a21fe3a3a802eb9b9' }))))));
     }
 };
 VerdocsDialog.style = VerdocsDialogStyle0;

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: '3a0ecbe96fffea8c916de9a657afd891dc95fa01' }, h("button", { key: 'bf194fdde69ec6a4e9edfa897eefe57daaa847d2', class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+        return (h(Host, { key: '006ffc94bd4cdc84424e001b2ff146f44fa268be' }, h("button", { key: '77c15671bb969bd79ed476d647642fdc70909f5f', 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,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './utils-7d128d3c.js';
+import { t as throttle } from './utils-467fcc6a.js';
+import './_commonjsHelpers-bdec4bbd.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 
@@ -77,7 +78,7 @@ const VerdocsEnvelopeDocumentPage = class {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        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) => {
+        return (h(Host, { key: 'f4ffa325b8eb3f8047dbe704cfc89aeeee1aad26', 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-3476681c.js';
 import { VerdocsEndpoint, getInPersonLink, getRecipientsWithActions, recipientCanAct } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-dbec0399.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-712b9ca3.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-e58b15f6.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-3476681c.js';
 import { VerdocsEndpoint, resendInvitation, cancelEnvelope, userIsEnvelopeOwner } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-dbec0399.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-712b9ca3.js';
 import { F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
@@ -8,7 +8,7 @@ import { d as dateFns } from './index-0329eed3.js';
 import './index-e58b15f6.js';
 import './index-7588a071.js';
 
-const verdocsEnvelopeSidebarCss = "@-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-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;max-width:100%;width:400px}@media screen and (max-width: 500px){verdocs-envelope-sidebar.open{-ms-flex:0 0 300px;flex:0 0 300px;width:300px}}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar verdocs-ok-dialog .content{color:black}verdocs-envelope-sidebar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400}verdocs-envelope-sidebar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap;width:100%;margin:0 0 10px 0}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .manage-recipients-button button{width:100%}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize;font-size:14px;padding:3px 0}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}@media screen and (max-width: 500px){verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 60px;flex:1 1 60px;max-width:60px;min-width:60px}}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .recipient-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
+const verdocsEnvelopeSidebarCss = "@-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-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;max-width:100%;width:400px}@media screen and (max-width: 500px){verdocs-envelope-sidebar.open{-ms-flex:0 0 300px;flex:0 0 300px;width:300px}}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar verdocs-ok-dialog .content{color:black}verdocs-envelope-sidebar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400}verdocs-envelope-sidebar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap;width:100%;margin:0 0 10px 0}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .manage-recipients-button button{width:100%}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize;font-size:14px;padding:3px 0}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}@media screen and (max-width: 500px){verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 60px;flex:1 1 60px;max-width:60px;min-width:60px}}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .recipient-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
 const VerdocsEnvelopeSidebarStyle0 = verdocsEnvelopeSidebarCss;
 
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;