@verdocs/web-sdk 1.14.5 → 1.14.7

package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.css

@@ -1,28 +1,34 @@
 @charset "UTF-8";
 verdocs-field-checkbox {
-  line-height: 18px;
+  width: 16px;
+  height: 16px;
+  padding: 1px;
+  box-sizing: border-box;
   transform-origin: bottom left;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-field-checkbox.disabled {
   opacity: 0.5;
 }
+verdocs-field-checkbox label {
+  width: 14px;
+  height: 14px;
+  display: block;
+  box-sizing: border-box;
+}
 verdocs-field-checkbox label > input[type=checkbox] {
   display: none;
 }
 verdocs-field-checkbox label > input[type=checkbox] + *::before {
+  margin: 0;
   content: "";
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  line-height: 18px;
+  width: 14px;
+  height: 14px;
+  display: block;
+  line-height: 14px;
   border-radius: 2px;
-  border-style: solid;
-  margin-right: 0.5rem;
-  border-width: 0.1rem;
-  display: inline-block;
-  vertical-align: bottom;
-  border-color: #aeb4bf;
+  box-sizing: border-box;
+  border: 1px solid #aeb4bf;
 }
 verdocs-field-checkbox label > input[type=checkbox]:checked + * {
   color: #55bc81;
@@ -30,6 +36,7 @@ verdocs-field-checkbox label > input[type=checkbox]:checked + * {
 verdocs-field-checkbox label > input[type=checkbox]:checked + *::before {
   content: "✓";
   color: white;
+  font-size: 12px;
   text-align: center;
   background: #55bc81;
   border-color: #55bc81;

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js

@@ -2,6 +2,7 @@ import flatpickr from 'flatpickr';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { FORMAT_DATE } from '../../../utils/Types';
 import { format } from 'date-fns';
 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>';
 /**
@@ -26,7 +27,9 @@ export class VerdocsFieldDate {
     const { result } = getFieldSettings(this.field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
-      dateFormat: 'M j, Y',
+      // NOTE: This uses different tokens from date-fns::format().
+      // See https://flatpickr.js.org/formatting/.
+      dateFormat: 'Y-m-d',
       defaultDate: result,
       onChange: selectedDate => {
         // console.log('Selected', selectedDate, dateStr, instance);
@@ -59,7 +62,7 @@ export class VerdocsFieldDate {
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
-      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'MMM d, y') : '';
+      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = 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: () => {

package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.css

@@ -14,7 +14,7 @@ verdocs-field-dropdown.disabled {
 verdocs-field-dropdown select {
   position: absolute;
   background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);
-  background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;
+  background-position: calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;
   background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
   background-repeat: no-repeat;
   appearance: none;
@@ -26,6 +26,7 @@ verdocs-field-dropdown select {
   width: 100%;
   font-size: 11px;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 5px;
 }
 verdocs-field-dropdown select:focus {
   outline: none;

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -2,6 +2,7 @@ import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import { FORMAT_TIMESTAMP } from '../../../utils/Types';
 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>';
 /**
  * Display a timestamp field.
@@ -40,7 +41,7 @@ export class VerdocsFieldTimestamp {
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
-    const formatted = format(dt, 'PPpp');
+    const formatted = format(dt, FORMAT_TIMESTAMP);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, formatted);
     }

package/dist/collection/utils/Types.js

@@ -1 +1,2 @@
-export {};
+export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+export const FORMAT_DATE = 'Y-MM-dd';

package/dist/collection/utils/utils.js

@@ -3,6 +3,7 @@ import { format } from 'date-fns';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
 import { rescale } from '@verdocs/js-sdk/Utils/Fields';
 import { downloadBlob } from '@verdocs/js-sdk/Utils/Files';
+import { FORMAT_DATE } from './Types';
 export const defaultWidth = (type) => {
   // checkbox was a legacy field type
   switch (type) {
@@ -11,9 +12,9 @@ export const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 120;
+      return 105;
     case 'date':
-      return 84;
+      return 64;
     case 'dropdown':
       return 85;
     case 'attachment':
@@ -265,31 +266,26 @@ export const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 export const updateCssTransform = (el, key, value) => {
-  // console.log('update', key, value, el.style.transform);
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  // console.log('now', el.style.transform);
 };
-export const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
-const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));
 export const saveAttachment = async (endpoint, envelope, documentId) => {
   // e.g. "Colorado-Motor-Vehicle-Bill-of-Sale.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}.pdf`;
   const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
 export const saveCertificate = async (endpoint, envelope, documentId) => {
   // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}_certificate.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
   const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
@@ -297,7 +293,8 @@ export const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   const zip = new jszip();
   for await (let envelope of envelopes) {
     // e.g. "98a13bc0-8861-4408-86fc-8f9af51e867a-TheSwanBrothers Phase 1 Agreement - 11-02-22"
-    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${formatEnvelopeDate(envelope)}`) : null;
+    const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${date}`) : null;
     for await (let document of envelope.documents) {
       // TODO: When attachments are added to envelopes, add a field that reflects the full, original filename (including extension)
       const documentFileName = document.type === 'certificate' ? `${envelope.name}_certificate.pdf` : `${document.name}.pdf`;
@@ -319,7 +316,8 @@ export const saveEnvelopesAsZip = async (endpoint, envelopes) => {
     }
   }
   // e.g. "Colorado Motor Vehicle Bill of Sale - 01-18-23.zip" or "Verdocs-Envelopes-02-13-23.zip"
-  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formatEnvelopeDate(envelopes[0])}.zip` : `Verdocs-Envelopes-${formatLocalDate(new Date())}`;
+  const formattedDate = format(envelopes.length === 1 ? new Date(envelopes[0].updated_at) : new Date(), FORMAT_DATE);
+  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formattedDate}.zip` : `Verdocs-Envelopes-${formattedDate}`;
   const zipped = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
   downloadBlob(zipped, zipFileName);
 };

package/dist/components/Types2.js

@@ -0,0 +1,4 @@
+const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+const FORMAT_DATE = 'Y-MM-dd';
+
+export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };

package/dist/components/utils.js

@@ -2,6 +2,7 @@ import { a as createCommonjsModule, c as commonjsGlobal, b as commonjsRequire }
 import { f as getEnvelopeFile, h as getFieldAttachment } from './Envelopes.js';
 import './Types.js';
 import { d as downloadBlob } from './Files.js';
+import { a as FORMAT_DATE } from './Types2.js';
 import { f as format } from './index2.js';
 
 function rescale(r, n) {
@@ -32,9 +33,9 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 120;
+      return 105;
     case 'date':
-      return 84;
+      return 64;
     case 'dropdown':
       return 85;
     case 'attachment':
@@ -286,31 +287,26 @@ const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 const updateCssTransform = (el, key, value) => {
-  // console.log('update', key, value, el.style.transform);
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  // console.log('now', el.style.transform);
 };
-const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
-const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));
 const saveAttachment = async (endpoint, envelope, documentId) => {
   // e.g. "Colorado-Motor-Vehicle-Bill-of-Sale.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}.pdf`;
   const data = await getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
 const saveCertificate = async (endpoint, envelope, documentId) => {
   // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}_certificate.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
   const data = await getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
@@ -318,7 +314,8 @@ const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   const zip = new jszip_min();
   for await (let envelope of envelopes) {
     // e.g. "98a13bc0-8861-4408-86fc-8f9af51e867a-TheSwanBrothers Phase 1 Agreement - 11-02-22"
-    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${formatEnvelopeDate(envelope)}`) : null;
+    const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${date}`) : null;
     for await (let document of envelope.documents) {
       // TODO: When attachments are added to envelopes, add a field that reflects the full, original filename (including extension)
       const documentFileName = document.type === 'certificate' ? `${envelope.name}_certificate.pdf` : `${document.name}.pdf`;
@@ -340,7 +337,8 @@ const saveEnvelopesAsZip = async (endpoint, envelopes) => {
     }
   }
   // e.g. "Colorado Motor Vehicle Bill of Sale - 01-18-23.zip" or "Verdocs-Envelopes-02-13-23.zip"
-  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formatEnvelopeDate(envelopes[0])}.zip` : `Verdocs-Envelopes-${formatLocalDate(new Date())}`;
+  const formattedDate = format(envelopes.length === 1 ? new Date(envelopes[0].updated_at) : new Date(), FORMAT_DATE);
+  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formattedDate}.zip` : `Verdocs-Envelopes-${formattedDate}`;
   const zipped = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
   downloadBlob(zipped, zipFileName);
 };

package/dist/components/verdocs-envelope-sidebar.js

@@ -3,6 +3,7 @@ import { t as throttledGetEnvelope } from './Envelopes.js';
 import { u as userIsEnvelopeOwner } from './Permissions.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { F as FORMAT_TIMESTAMP } from './Types2.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
@@ -232,14 +233,14 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = userIsEnvelopeOwner(session, this.envelope);
     const historyEntries = this.prepareHistoryEntries();
-    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = this.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), this.sortedRecipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
         { id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient) },
         // TODO: Details dialog
         // {id:'details',label: 'View Details'},
-      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, 'PP pp')))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
         var _a;
         this.showManageDialog = false;
         (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });

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

@@ -10,7 +10,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 verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{line-height:18px;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 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 VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getFieldSettings } from './utils.js';
 import { g as getRGBA } from './Colors.js';
+import { a as FORMAT_DATE } from './Types2.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -2587,7 +2588,9 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     const { result } = getFieldSettings(this.field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
-      dateFormat: 'M j, Y',
+      // NOTE: This uses different tokens from date-fns::format().
+      // See https://flatpickr.js.org/formatting/.
+      dateFormat: 'Y-m-d',
       defaultDate: result,
       onChange: selectedDate => {
         // console.log('Selected', selectedDate, dateStr, instance);
@@ -2620,7 +2623,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
-      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'MMM d, y') : '';
+      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = 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: () => {

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

@@ -10,7 +10,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 verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 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 VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
+import { F as FORMAT_TIMESTAMP } from './Types2.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -52,7 +53,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
-    const formatted = format(dt, 'PPpp');
+    const formatted = format(dt, FORMAT_TIMESTAMP);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, formatted);
     }

package/dist/components/verdocs-sign.js

@@ -6,6 +6,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
 import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
+import { a as FORMAT_DATE } from './Types2.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -271,7 +272,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'date':
         const iso = e.target.getAttribute('iso');
         console.log('Formatting date for save', iso);
-        const formatted = format(new Date(iso), 'PP');
+        const formatted = format(new Date(iso), FORMAT_DATE);
         console.log('Formatted', formatted);
         return this.saveFieldChange(field.name, { prepared: false, value: formatted });
       case 'timestamp':

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-10T20:15:33",
+  "timestamp": "2023-05-11T15:15:15",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",

package/dist/esm/Types-de18e225.js

@@ -0,0 +1,4 @@
+const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
+const FORMAT_DATE = 'Y-MM-dd';
+
+export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };

package/dist/esm/{utils-888f9f20.js → utils-9da23ba1.js}

@@ -2,6 +2,7 @@ import { c as createCommonjsModule, a as commonjsGlobal, b as commonjsRequire }
 import { g as getEnvelopeFile, a as getFieldAttachment } from './Envelopes-c3d471e5.js';
 import './Types-5f31149e.js';
 import { d as downloadBlob } from './Files-70a192df.js';
+import { a as FORMAT_DATE } from './Types-de18e225.js';
 import { f as format } from './index-d264c496.js';
 
 function rescale(r, n) {
@@ -32,9 +33,9 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 120;
+      return 105;
     case 'date':
-      return 84;
+      return 64;
     case 'dropdown':
       return 85;
     case 'attachment':
@@ -286,31 +287,26 @@ const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 const updateCssTransform = (el, key, value) => {
-  // console.log('update', key, value, el.style.transform);
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  // console.log('now', el.style.transform);
 };
-const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
-const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));
 const saveAttachment = async (endpoint, envelope, documentId) => {
   // e.g. "Colorado-Motor-Vehicle-Bill-of-Sale.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}.pdf`;
   const data = await getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
 const saveCertificate = async (endpoint, envelope, documentId) => {
   // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const fileName = `${envelope.name} - ${formatEnvelopeDate(envelope)}_certificate.pdf`;
+  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
   const data = await getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
@@ -318,7 +314,8 @@ const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   const zip = new jszip_min();
   for await (let envelope of envelopes) {
     // e.g. "98a13bc0-8861-4408-86fc-8f9af51e867a-TheSwanBrothers Phase 1 Agreement - 11-02-22"
-    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${formatEnvelopeDate(envelope)}`) : null;
+    const date = format(new Date(envelope.updated_at), FORMAT_DATE);
+    const subFolder = envelopes.length > 0 ? zip.folder(`${envelope.id} - ${envelope.name} - ${date}`) : null;
     for await (let document of envelope.documents) {
       // TODO: When attachments are added to envelopes, add a field that reflects the full, original filename (including extension)
       const documentFileName = document.type === 'certificate' ? `${envelope.name}_certificate.pdf` : `${document.name}.pdf`;
@@ -340,7 +337,8 @@ const saveEnvelopesAsZip = async (endpoint, envelopes) => {
     }
   }
   // e.g. "Colorado Motor Vehicle Bill of Sale - 01-18-23.zip" or "Verdocs-Envelopes-02-13-23.zip"
-  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formatEnvelopeDate(envelopes[0])}.zip` : `Verdocs-Envelopes-${formatLocalDate(new Date())}`;
+  const formattedDate = format(envelopes.length === 1 ? new Date(envelopes[0].updated_at) : new Date(), FORMAT_DATE);
+  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formattedDate}.zip` : `Verdocs-Envelopes-${formattedDate}`;
   const zipped = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE' });
   downloadBlob(zipped, zipFileName);
 };

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

@@ -3,9 +3,10 @@ import { c as createPopper } from './popper-bfa25c7f.js';
 import { h as getEnvelopeDocumentPageDisplayUri } from './Envelopes-c3d471e5.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
-import { t as throttle } from './utils-888f9f20.js';
+import { t as throttle } from './utils-9da23ba1.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Files-70a192df.js';
+import './Types-de18e225.js';
 import './index-d264c496.js';
 
 const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Inter\", \"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown .separator{border-top:1px solid #ffffff5f;height:1px;padding-top:5px;margin-top:5px}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";

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

@@ -3,6 +3,7 @@ import { t as throttledGetEnvelope } from './Envelopes-c3d471e5.js';
 import { u as userIsEnvelopeOwner } from './Permissions-7192ef7c.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-5b92f115.js';
+import { F as FORMAT_TIMESTAMP } from './Types-de18e225.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import { f as format } from './index-d264c496.js';
@@ -228,14 +229,14 @@ const VerdocsEnvelopeSidebar = class {
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = userIsEnvelopeOwner(session, this.envelope);
     const historyEntries = this.prepareHistoryEntries();
-    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = this.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), this.sortedRecipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
         { id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient) },
         // TODO: Details dialog
         // {id:'details',label: 'View Details'},
-      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, 'PP pp')))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
         var _a;
         this.showManageDialog = false;
         (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.envelope });

package/dist/esm/verdocs-field-checkbox.entry.js

@@ -1,13 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-888f9f20.js';
+import { g as getFieldSettings } from './utils-9da23ba1.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-c3d471e5.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
+import './Types-de18e225.js';
 import './index-d264c496.js';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{line-height:18px;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 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 VerdocsFieldCheckbox = class {