@verdocs/web-sdk 2.3.7 → 2.3.9

package/dist/components/verdocs-build.js

@@ -3,14 +3,15 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$u } from './verdocs-button2.js';
-import { d as defineCustomElement$t } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$s } from './verdocs-component-error2.js';
-import { d as defineCustomElement$r } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$q } from './verdocs-file-chooser2.js';
-import { d as defineCustomElement$p } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$o } from './verdocs-loader2.js';
-import { d as defineCustomElement$n } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$v } from './verdocs-button2.js';
+import { d as defineCustomElement$u } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$t } from './verdocs-component-error2.js';
+import { d as defineCustomElement$s } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$r } from './verdocs-file-chooser2.js';
+import { d as defineCustomElement$q } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$p } from './verdocs-loader2.js';
+import { d as defineCustomElement$o } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$n } from './verdocs-portal2.js';
 import { d as defineCustomElement$m } from './verdocs-preview2.js';
 import { d as defineCustomElement$l } from './verdocs-progress-bar2.js';
 import { d as defineCustomElement$k } from './verdocs-radio-button2.js';
@@ -143,7 +144,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "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"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "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"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -152,40 +153,45 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "verdocs-component-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "verdocs-contact-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "verdocs-file-chooser":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$n();
       }

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

@@ -5,7 +5,7 @@ import { d as convertToE164 } from './utils.js';
 import { d as defineCustomElement$2 } from './verdocs-button2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
-const verdocsContactPickerCss = "verdocs-contact-picker{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;background-color:#ffffff}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 = "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 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>';

package/dist/components/verdocs-field-dropdown.js

@@ -37,7 +37,6 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
-    console.log('will hide', settingsPanel);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }

package/dist/components/verdocs-field-textarea.js

@@ -100,11 +100,12 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     var _a, _b, _c, _d;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
+    const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, disabled: disabled, name: this.field.name, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }, value), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();

package/dist/components/verdocs-field-textbox.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/verdocs-portal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsPortal extends Components.VerdocsPortal, HTMLElement {}
+export const VerdocsPortal: {
+  prototype: VerdocsPortal;
+  new (): VerdocsPortal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-portal.js

@@ -0,0 +1,6 @@
+import { V as VerdocsPortal$1, d as defineCustomElement$1 } from './verdocs-portal2.js';
+
+const VerdocsPortal = VerdocsPortal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsPortal, defineCustomElement };

package/dist/components/verdocs-portal2.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsPortalCss = "";
+
+const Z_INDEX = '10001';
+const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.clickAway = createEvent(this, "clickAway", 7);
+    this.moved = false;
+    this.anchor = undefined;
+    this.voffset = 0;
+    this.align = 'left';
+  }
+  handleScroll() {
+    this.calculatePosition();
+  }
+  handleResize() {
+    this.calculatePosition();
+  }
+  handleClick(e) {
+    var _a;
+    if (!this.element.contains(e.target)) {
+      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+  }
+  calculateLeft() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    if (this.align === 'left') {
+      return Math.max(anchorRect.left, 0);
+    }
+    if (this.align === 'right') {
+      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+    }
+    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+  }
+  calculateTop() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    return anchorRect.bottom + this.voffset;
+  }
+  calculatePosition() {
+    this.portal.style.top = `${this.calculateTop()}px`;
+    this.portal.style.left = `${this.calculateLeft()}px`;
+  }
+  componentWillLoad() {
+    var _a;
+    const id = `${this.anchor}-portal`;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.portal = document.createElement('div');
+    this.portal.setAttribute('id', id);
+    this.portal.style.zIndex = Z_INDEX;
+    this.portal.style.position = 'absolute';
+    document.body.append(this.portal);
+  }
+  componentDidLoad() {
+    this.portal.appendChild(this.element);
+    this.calculatePosition();
+  }
+  disconnectedCallback() {
+    this.moved ? this.portal.remove() : (this.moved = true);
+  }
+  render() {
+    return (h(Host, { ref: el => (this.element = el) }, h("slot", null)));
+  }
+  static get style() { return verdocsPortalCss; }
+}, [4, "verdocs-portal", {
+    "anchor": [1],
+    "voffset": [2],
+    "align": [1]
+  }, [[11, "scroll", "handleScroll"], [11, "resize", "handleResize"], [10, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-portal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-portal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsPortal);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsPortal as V, defineCustomElement as d };

package/dist/components/verdocs-search.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { d as defineCustomElement$4 } from './verdocs-quick-functions2.js';
-import { d as defineCustomElement$3 } from './verdocs-search-activity2.js';
+import { d as defineCustomElement$3 } from './verdocs-quick-functions2.js';
 import { d as defineCustomElement$2 } from './verdocs-search-box2.js';
 
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
@@ -24,7 +23,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-activity", "verdocs-search-box"];
+  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-box"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-search":
       if (!customElements.get(tagName)) {
@@ -32,11 +31,6 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-quick-functions":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-search-activity":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-send2.js

@@ -7,8 +7,9 @@ import { g as getRGBA } from './Colors.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { b as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
-import { d as defineCustomElement$3 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$3 } from './verdocs-portal2.js';
 import { d as defineCustomElement$2 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
@@ -153,7 +154,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
-      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));
+      const elId = `verdocs-send-recipient-${role.name}`;
+      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
     })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
   }
   static get style() { return verdocsSendCss; }
@@ -173,7 +175,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-spinner", "verdocs-toggle-button"];
+  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-portal", "verdocs-spinner", "verdocs-toggle-button"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-send":
       if (!customElements.get(tagName)) {
@@ -182,10 +184,15 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-contact-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-sign.js

@@ -326,6 +326,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'textarea':
       case 'date':
       case 'attachment':
+        console.log('Date-type field valid', { required, result, output: !required || result !== '' });
         return !required || result !== '';
       case 'dropdown':
         return !required || value !== '';

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-12-21T02:54:58",
+  "timestamp": "2023-12-26T19:33:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -562,6 +562,7 @@
           "verdocs-ok-dialog"
         ],
         "verdocs-send": [
+          "verdocs-portal",
           "verdocs-contact-picker",
           "verdocs-button",
           "verdocs-spinner"
@@ -5936,6 +5937,124 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/controls/verdocs-portal/verdocs-portal.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-portal",
+      "docs": "Display a child component in a \"portal\", popping it out of the main DOM tree\nto allow it to escape the bounds set by its parent.",
+      "docsTags": [
+        {
+          "name": "credit",
+          "text": "https://github.com/tomas-teston/stencil-portal for the basic\ntechnique. This has been altered in a few ways to make it more friendly\nto cases where there may be multiple portals on the page and provide more\nalignment options for the child to be displayed."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "align",
+          "type": "\"center\" | \"left\" | \"right\"",
+          "mutable": false,
+          "attr": "align",
+          "reflectToAttr": false,
+          "docs": "Horizontal alignment.",
+          "docsTags": [],
+          "default": "'left'",
+          "values": [
+            {
+              "value": "center",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "anchor",
+          "type": "string",
+          "mutable": false,
+          "attr": "anchor",
+          "reflectToAttr": false,
+          "docs": "Unique ID of the parent element to anchor to.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "voffset",
+          "type": "number",
+          "mutable": false,
+          "attr": "voffset",
+          "reflectToAttr": false,
+          "docs": "Vertical offset from the parent.",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "clickAway",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "scroll",
+          "target": "window",
+          "capture": true,
+          "passive": true
+        },
+        {
+          "event": "resize",
+          "target": "window",
+          "capture": true,
+          "passive": true
+        },
+        {
+          "event": "click",
+          "target": "window",
+          "capture": true,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [
+        "verdocs-send"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "verdocs-send": [
+          "verdocs-portal"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/embeds/verdocs-preview/verdocs-preview.tsx",
       "encapsulation": "none",
@@ -6384,110 +6503,15 @@
       "dependents": [],
       "dependencies": [
         "verdocs-search-box",
-        "verdocs-search-activity",
         "verdocs-quick-functions"
       ],
       "dependencyGraph": {
         "verdocs-search": [
           "verdocs-search-box",
-          "verdocs-search-activity",
           "verdocs-quick-functions"
         ]
       }
     },
-    {
-      "filePath": "./src/components/elements/verdocs-search-activity/verdocs-search-activity.tsx",
-      "encapsulation": "none",
-      "tag": "verdocs-search-activity",
-      "docs": "Display a list of starred items.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.",
-      "docsTags": [],
-      "usage": {},
-      "props": [
-        {
-          "name": "endpoint",
-          "type": "VerdocsEndpoint",
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
-          "docsTags": [],
-          "default": "VerdocsEndpoint.getDefault()",
-          "values": [
-            {
-              "type": "VerdocsEndpoint"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "options",
-          "type": "any",
-          "mutable": false,
-          "attr": "options",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "any"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "type",
-          "type": "\"recent\" | \"saved\" | \"starred\"",
-          "mutable": false,
-          "attr": "type",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "'recent'",
-          "values": [
-            {
-              "value": "recent",
-              "type": "string"
-            },
-            {
-              "value": "saved",
-              "type": "string"
-            },
-            {
-              "value": "starred",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [
-        {
-          "event": "entrySelected",
-          "detail": "IRecentSearch",
-          "bubbles": true,
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event fired when an entry is clicked.",
-          "docsTags": []
-        }
-      ],
-      "listeners": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "dependents": [
-        "verdocs-search"
-      ],
-      "dependencies": [],
-      "dependencyGraph": {
-        "verdocs-search": [
-          "verdocs-search-activity"
-        ]
-      }
-    },
     {
       "filePath": "./src/components/elements/verdocs-search-box/verdocs-search-box.tsx",
       "encapsulation": "none",
@@ -6901,12 +6925,14 @@
         "verdocs-build"
       ],
       "dependencies": [
+        "verdocs-portal",
         "verdocs-contact-picker",
         "verdocs-button",
         "verdocs-spinner"
       ],
       "dependencyGraph": {
         "verdocs-send": [
+          "verdocs-portal",
           "verdocs-contact-picker",
           "verdocs-button",
           "verdocs-spinner"

package/dist/esm/{TemplateStore-0ecf6e55.js → TemplateStore-14f723bf.js}

@@ -1,5 +1,5 @@
 import { c as createStore } from './index-4439b0d1.js';
-import { g as getTemplate, T as TemplateSenderTypes } from './VerdocsEndpoint-a18c0968.js';
+import { g as getTemplate, T as TemplateSenderTypes } from './VerdocsEndpoint-a59ded42.js';
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();