@verdocs/web-sdk 2.2.8 → 2.2.10

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js

@@ -1,7 +1,23 @@
 import { Host } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
 import { h } from '@stencil/core';
+const MENU_ID = 'verdocs-dropdown-menu-items';
 const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
+function debounce(func, wait, immediate) {
+  let timeout;
+  return function () {
+    const context = this, args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate)
+        func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow)
+      func.apply(context, args);
+  };
+}
 /**
  * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
  * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.
@@ -20,55 +36,56 @@ const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" vie
  */
 export class VerdocsDropdown {
   constructor() {
-    // We need to do this to reliably disconnect the click-away listener
-    this.clickListenerSymbol = new AbortController();
     this.options = [];
-    this.open = undefined;
-  }
-  componentDidLoad() {
-    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
-    window.addEventListener('click', this.clickListener.bind(this), { signal: this.clickListenerSymbol.signal });
   }
-  disconnectedCallback() {
-    this.clickListenerSymbol.abort();
-  }
-  clickListener(e) {
-    const outside = !(e.target == this.el || this.el.contains(e.target));
-    if (outside) {
-      this.hide();
-    }
+  // TODO: This isn't super efficient but it works for now
+  handleResize() {
+    debounce(this.repositionDropdown.bind(this), 100);
   }
   handleSelectOption(e, option) {
+    var _a;
     e.stopPropagation();
-    // this.isOpen = false;
-    this.optionSelected.emit(option);
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
     this.hide();
   }
+  repositionDropdown() {
+    var _a, _b;
+    const menu = document.getElementById(MENU_ID);
+    if (menu) {
+      const bodyWidth = document.body.scrollWidth;
+      const buttonRect = (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const triggerHeight = ((_b = this.dropdownButton) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 28;
+      menu.style.top = `${((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.top) || 0) + triggerHeight}px`;
+      menu.style.right = `${Math.max(0, bodyWidth - ((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.right) || 0))}px`;
+    }
+  }
   // See https://popper.js.org/docs/v2/tutorial/
   // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
   showDropdown() {
-    var _a, _b;
-    // this.isOpen = true;
-    this.open = true;
-    this.dropdownMenu.setAttribute('data-show', '');
-    this.dropdownMenu.removeAttribute('aria-hidden');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],
-    })).catch(() => { });
-    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-  }
-  handleHideDropdown(e) {
-    var _a, _b;
-    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.localName) === 'button' && ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.className) === 'arrow') {
-      // This event is fired when a menu element is clicked because the button "loses focus" then too
-      return;
-    }
     this.hide();
+    const menu = document.createElement('div');
+    menu.id = MENU_ID;
+    this.options.forEach(option => {
+      if (!option.label) {
+        const separator = document.createElement('div');
+        separator.className = 'verdocs-dropdown-menu-separator';
+        menu.appendChild(separator);
+      }
+      else {
+        const button = document.createElement('button');
+        button.className = 'verdocs-dropdown-menu-option';
+        button.disabled = option.disabled || false;
+        button.innerHTML = option.label;
+        button.addEventListener('click', e => this.handleSelectOption(e, option));
+        menu.appendChild(button);
+      }
+    });
+    document.body.appendChild(menu);
+    setTimeout(this.repositionDropdown.bind(this), 50);
   }
-  toggleDropdown(e) {
+  toggle(e) {
     e.stopPropagation();
-    if (this.open) {
+    if (document.getElementById(MENU_ID)) {
       this.hide();
     }
     else {
@@ -77,17 +94,12 @@ export class VerdocsDropdown {
   }
   hide() {
     var _a;
-    this.open = false;
-    this.dropdownMenu.removeAttribute('data-show');
-    this.dropdownMenu.setAttribute('aria-hidden', 'true');
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
-      ...options,
-      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],
-    })).catch(() => { });
+    (_a = document.getElementById(MENU_ID)) === null || _a === void 0 ? void 0 : _a.remove();
   }
   render() {
-    var _a;
-    return (h(Host, { class: { open: !!this.open } }, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => option.label ? (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label)) : (h("div", { class: "separator" }))))));
+    return (h(Host, null, h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggle(e),
+      // onBlur={() => this.hide()}
+      ref: el => (this.dropdownButton = el) })));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {
@@ -124,11 +136,6 @@ export class VerdocsDropdown {
       }
     };
   }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
   static get events() {
     return [{
         "method": "optionSelected",
@@ -152,4 +159,13 @@ export class VerdocsDropdown {
       }];
   }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.stories.js

@@ -12,7 +12,7 @@ export default {
   component: 'verdocs-dropdown',
   // We can apply default args only shown in Storybook as follows
   args: {
-    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { lable: '' }, { label: 'Option 2' }],
+    options: [{ label: 'Option 1' }, { label: 'Disabled Option', disabled: true }, { label: '' }, { label: 'Option 2' }],
   },
   // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
   // here. Only those that need special attention.

package/dist/collection/components/controls/verdocs-table/verdocs-table.js

@@ -10,8 +10,8 @@ export class VerdocsTable {
   }
   render() {
     return (h(Host, { class: "table-wrapper" }, h("table", { class: "table" }, h("thead", null, h("tr", { class: "row header-row" }, this.columns.map((col, i) => {
-      return h("th", { class: `col header-col col-${i} col-${col.id}`, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id });
-    }))), h("tbody", null, this.data.map(row => (h("tr", { class: "row data-row" }, this.columns.map((col, i) => {
+      return (h("th", { class: `col header-col col-${i} col-${col.id}`, onClick: () => { var _a; return (_a = this.colHeaderClick) === null || _a === void 0 ? void 0 : _a.emit({ col }); }, innerHTML: col.renderHeader ? col.renderHeader(col) : col.header || col.id }));
+    }))), h("tbody", null, this.data.map(row => (h("tr", { class: "row data-row", onClick: () => { var _a; return (_a = this.rowClick) === null || _a === void 0 ? void 0 : _a.emit({ row }); } }, this.columns.map((col, i) => {
       var _a;
       return h("td", { class: `col data-col col-${i} col-${col.id}` }, ((_a = col.renderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, row)) || row[col.id]);
       // return <td class={`col data-col col-${i} col-${col.id}`} innerHTML={col.renderCell?.(col, row) || row[col.id]} />;
@@ -68,4 +68,41 @@ export class VerdocsTable {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "colHeaderClick",
+        "name": "colHeaderClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks a column header. This may be used to manage sorting options."
+        },
+        "complexType": {
+          "original": "{col: IColumn}",
+          "resolved": "{ col: IColumn; }",
+          "references": {
+            "IColumn": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "rowClick",
+        "name": "rowClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user clicks a row."
+        },
+        "complexType": {
+          "original": "{row: any}",
+          "resolved": "{ row: any; }",
+          "references": {}
+        }
+      }];
+  }
 }

package/dist/collection/components/embeds/verdocs-build/verdocs-build.css

@@ -1,6 +1,50 @@
 verdocs-build {
   display: flex;
+  flex-direction: column;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}
+verdocs-build .steps {
+  flex: 0;
+  display: flex;
+  padding: 0 20px;
+  align-items: center;
+  flex-direction: row;
+  background-color: #46497d;
+}
+verdocs-build .steps .step {
+  height: 50px;
+  padding: 0 20px;
+  opacity: 0.6;
+  display: flex;
+  color: #ffffff;
+  cursor: pointer;
+  align-items: center;
   justify-content: center;
+}
+verdocs-build .steps .step.active {
+  opacity: 1;
+  background-color: #707ae5;
+}
+verdocs-build .content {
+  flex: 1;
+  display: flex;
   align-items: center;
+  flex-direction: column;
+}
+verdocs-build verdocs-template-attachments,
+verdocs-build verdocs-template-roles {
+  margin: 20px;
+}
+verdocs-build verdocs-template-fields {
+  border-top: 1px solid #777777;
+}
+verdocs-build verdocs-template-attachments {
+  padding: 20px;
+  background: #ffffff;
+}
+verdocs-build verdocs-template-fields {
+  width: 100%;
+}
+verdocs-build verdocs-preview {
+  flex: 1;
 }

package/dist/collection/components/embeds/verdocs-build/verdocs-build.js

@@ -39,15 +39,13 @@ export class VerdocsBuild {
     this.step = 'preview';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('');
   }
-  handleTemplateCreated(e) {
+  handleAttachmentsNext() {
     var _a;
-    console.log('Created', e.detail);
     this.step = 'roles';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
   }
-  handleRolesDone(e) {
+  handleRolesNext() {
     var _a;
-    console.log('Roles', e.detail);
     this.step = 'fields';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
   }
@@ -55,7 +53,7 @@ export class VerdocsBuild {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h(Host, null, this.step === 'create' && h("verdocs-template-create", { onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) })), this.step === 'roles' && h("verdocs-template-roles", { onExit: e => this.handleCancel(e), onNext: e => this.handleTemplateCreated(e) }), this.step === 'settings' && h("verdocs-template-settings", { templateId: this.templateId }), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId }), this.step === 'preview' && h("verdocs-template-preview", null)));
+    return (h(Host, null, h("div", { class: "steps" }, h("div", { class: `step ${this.step === 'attachments' ? 'active' : ''}`, onClick: () => (this.step = 'attachments') }, "Attachments"), h("div", { class: `step ${this.step === 'roles' ? 'active' : ''}`, onClick: () => (this.step = 'roles') }, "Roles"), h("div", { class: `step ${this.step === 'settings' ? 'active' : ''}`, onClick: () => (this.step = 'settings') }, "Settings"), h("div", { class: `step ${this.step === 'fields' ? 'active' : ''}`, onClick: () => (this.step = 'fields') }, "Fields"), h("div", { class: `step ${this.step === 'preview' ? 'active' : ''}`, onClick: () => (this.step = 'preview') }, "Preview/Send")), h("div", { class: "content" }, this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext() })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext() })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint }), this.step === 'preview' && (h("div", { style: { flexDirection: 'row', display: 'flex', width: '100%' } }, h("div", { style: { display: 'flex', flex: '0' } }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint })), h("div", { style: { display: 'flex', flex: '1' } }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint })))))));
   }
   static get is() { return "verdocs-build"; }
   static get originalStyleUrls() {
@@ -113,8 +111,8 @@ export class VerdocsBuild {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'create' | 'attachments' | 'roles' | 'settings' | 'fields' | 'preview'",
-          "resolved": "\"attachments\" | \"create\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
+          "original": "'attachments' | 'roles' | 'settings' | 'fields' | 'preview'",
+          "resolved": "\"attachments\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/embeds/verdocs-build/verdocs-build.stories.js

@@ -2,8 +2,12 @@ import { html } from 'lit-html';
 export default {
   title: 'Embeds/Build',
   component: 'verdocs-build',
+  args: {
+    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    step: 'preview',
+  },
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const Build = ({}) => html `<verdocs-build />`;
+export const Build = ({ templateId, step }) => html `<verdocs-build .step=${step} .templateId=${templateId} />`;

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.css

@@ -8,6 +8,11 @@ verdocs-envelopes-list {
   flex-direction: column;
   font-family: "Inter", "Barlow", sans-serif;
 }
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list {
+    font-size: 14px;
+  }
+}
 verdocs-envelopes-list .envelope-placeholder {
   height: 48px;
   flex: 0 0 48px;
@@ -47,12 +52,13 @@ verdocs-envelopes-list .envelope:hover {
   background: #f5f5fa;
 }
 verdocs-envelopes-list .envelope .inner {
-  gap: 14px;
+  gap: 12px;
   display: flex;
-  padding: 8px 20px;
-  border-radius: 6px;
+  padding: 8px 14px;
+  border-radius: 5px;
   flex-direction: row;
   align-items: center;
+  container-type: inline-size;
 }
 verdocs-envelopes-list .envelope .inner svg {
   width: 24px;
@@ -64,20 +70,38 @@ verdocs-envelopes-list .vert-spacer {
   flex: 0 0 1px;
   border-right: 1px solid #dad8dd;
 }
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list .vert-spacer {
+    display: none;
+  }
+}
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list .envelope-icon {
+    display: none;
+  }
+}
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list verdocs-checkbox {
+    display: none;
+  }
+}
 verdocs-envelopes-list .last-modified {
   color: #444;
   display: flex;
   flex: 0 0 180px;
-  font-size: 16px;
   flex-direction: row;
   align-items: center;
   white-space: nowrap;
 }
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list .last-modified {
+    display: none;
+  }
+}
 verdocs-envelopes-list .envelope-name {
   flex: 1;
   display: flex;
   color: #000000;
-  font-size: 18px;
   line-height: 28px;
   overflow: hidden;
   white-space: nowrap;
@@ -91,7 +115,6 @@ verdocs-envelopes-list .envelope-recipients {
   text-overflow: ellipsis;
 }
 verdocs-envelopes-list .empty-text {
-  font-size: 20px;
   text-align: center;
   margin: 16px 0 0 0;
   padding: 80px 80px;
@@ -102,4 +125,9 @@ verdocs-envelopes-list .containing {
   display: flex;
   align-items: center;
   flex-direction: row;
+}
+@media screen and (max-width: 800px) {
+  verdocs-envelopes-list verdocs-status-indicator {
+    font-size: 14px;
+  }
 }

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js

@@ -223,7 +223,7 @@ export class VerdocsEnvelopesList {
           else {
             this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);
           }
-        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
+        } }), h("div", { class: "vert-spacer" }), h("span", { innerHTML: DocumentIcon, class: "envelope-icon" }), h("div", { class: "envelope-name" }, envelope.name, ":\u00A0 ", h("div", { class: "envelope-recipients" }, envelope.recipients.map(r => r.full_name).join(', '))), h("div", { class: "vert-spacer" }), h("verdocs-status-indicator", { envelope: envelope, style: { width: '125px' } }), h("div", { class: "vert-spacer" }), h("div", { class: "last-modified" }, new Date(envelope.updated_at).toLocaleString()), h("div", { class: "vert-spacer" }), h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => {
           var _a, _b;
           switch (e.detail.id) {
             case 'view':

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.css

@@ -12,7 +12,7 @@ verdocs-template-roles > form {
 verdocs-template-roles > form h5 {
   font-size: 16px;
   font-weight: bold;
-  color: #4c56cb;
+  color: #46497d;
   margin: 0 0 10px 0;
 }
 verdocs-template-roles > form .participants {

package/dist/collection/components/templates/verdocs-templates-list/verdocs-templates-list.css

@@ -39,7 +39,7 @@ verdocs-templates-list .template-placeholder {
 }
 verdocs-templates-list .template {
   width: 100%;
-  margin: 3px 0;
+  margin: 2px 0;
   border: 1px solid #ffffff;
   background: #ffffff;
 }
@@ -49,12 +49,13 @@ verdocs-templates-list .template:hover {
   border: 1px solid #a7a7f5;
 }
 verdocs-templates-list .template .inner {
-  gap: 10px;
+  gap: 12px;
   display: flex;
   padding: 8px 14px;
   border-radius: 5px;
   flex-direction: row;
   align-items: center;
+  container-type: inline-size;
 }
 verdocs-templates-list .template .inner svg {
   width: 24px;
@@ -65,7 +66,6 @@ verdocs-templates-list .name {
   display: flex;
   color: black;
   font-size: 16px;
-  margin-left: 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -84,9 +84,7 @@ verdocs-templates-list .spacer {
 }
 @media screen and (max-width: 800px) {
   verdocs-templates-list .spacer {
-    margin: 12px 0;
-    border-top: 1px solid #dad8dd;
-    border-right: none;
+    display: none;
   }
 }
 verdocs-templates-list .empty-text {
@@ -124,10 +122,15 @@ verdocs-templates-list .ownership span,
 verdocs-templates-list .last-used span {
   display: block;
 }
+@media screen and (max-width: 700px) {
+  verdocs-templates-list verdocs-template-star {
+    display: none;
+  }
+}
 verdocs-templates-list .ownership {
   flex: 0 0 100px;
 }
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 700px) {
   verdocs-templates-list .ownership {
     display: none;
   }
@@ -137,4 +140,32 @@ verdocs-templates-list .last-used {
 }
 verdocs-templates-list .usage {
   flex: 0 0 60px;
+}
+verdocs-templates-list .header-row {
+  display: none;
+}
+verdocs-templates-list table {
+  container-type: size;
+  max-width: 100%;
+  overflow: hidden;
+  table-layout: fixed;
+}
+verdocs-templates-list .data-row {
+  cursor: pointer;
+  background: #ededff;
+  border: 1px solid #a7a7f5;
+}
+verdocs-templates-list .data-col svg {
+  width: 24px;
+  height: 24px;
+}
+verdocs-templates-list .col-name {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+@container (max-width:700 px) {
+  verdocs-templates-list verdocs-templates-list .col-starred {
+    display: none;
+  }
 }

package/dist/components/Validators.js

@@ -13,4 +13,4 @@ var isValidEmail = function (email) { return !!email && EMAIL_REGEX.test(email);
 var PHONE_REGEX = /((?:\+|00)[17](?: |\-)?|(?:\+|00)[1-9]\d{0,2}(?: |\-)?|(?:\+|00)1\-\d{3}(?: |\-)?)?(0\d|\([0-9]{3}\)|[1-9]{0,3})(?:((?: |\-)[0-9]{2}){4}|((?:[0-9]{2}){4})|((?: |\-)[0-9]{3}(?: |\-)[0-9]{4})|([0-9]{7}))/;
 var isValidPhone = function (phone) { return !!phone && PHONE_REGEX.test(phone); };
 
-export { isValidPhone as a, isValidEmail as i };
+export { isValidEmail as a, isValidPhone as i };

package/dist/components/utils.js

@@ -385,4 +385,4 @@ const convertToE164 = (input) => {
   return `+1${temp}`;
 };
 
-export { getRoleIndex as a, saveAttachment as b, getFieldId as c, convertToE164 as d, renderedTextWidth as e, updateCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, saveCertificate as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, getRoleIndex as b, getFieldId as c, convertToE164 as d, renderedTextWidth as e, updateCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, saveCertificate as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };