@verdocs/web-sdk 1.14.5 → 1.14.8

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

@@ -1,5 +1,6 @@
 verdocs-field-textbox {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  box-sizing: border-box;
   width: 150px;
   height: 15px;
   display: block;
@@ -35,43 +36,6 @@ verdocs-field-textbox.required {
 verdocs-field-textbox.focused {
   animation: verdocs-field-pulse 0.75s 2;
 }
-verdocs-field-textbox .resizer {
-  position: absolute;
-  bottom: 1px;
-  right: 1px;
-  width: 8px;
-  height: 8px;
-  z-index: 9999;
-}
-verdocs-field-textbox .resizer:hover {
-  cursor: nwse-resize;
-}
-verdocs-field-textbox .resizer .resizer-inner {
-  position: absolute;
-  bottom: 0;
-}
-verdocs-field-textbox .resizer .resizer-inner:before {
-  position: absolute;
-  top: -4px;
-  left: -0.5px;
-  content: "";
-  display: block;
-  width: 10px;
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.32);
-  transform: rotate(-45deg);
-}
-verdocs-field-textbox .resizer .resizer-inner:after {
-  position: absolute;
-  top: -1.5px;
-  left: 4.5px;
-  content: "";
-  display: block;
-  width: 5px;
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.32);
-  transform: rotate(-45deg);
-}
 verdocs-field-textbox verdocs-button-panel {
   top: -3px;
   left: -2px;

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

@@ -2,12 +2,15 @@ import interact from 'interactjs';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 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 text input field.
  */
 export class VerdocsFieldTextbox {
   constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -36,30 +39,42 @@ export class VerdocsFieldTextbox {
   componentDidRender() {
     interact.dynamicDrop(true);
     if (this.editable) {
-      interact(this.resizeHandle).resizable({
+      interact(this.el).resizable({
+        edges: { top: false, bottom: false, left: true, right: true },
         listeners: {
-          start(event) {
-            console.log('[TEXTBOX] Resize started', event.type, event.target);
-          },
+          start: this.handleResizeStart.bind(this),
           move: this.handleResize.bind(this),
-          end(event) {
-            console.log('[TEXTBOX] Resize end', event);
-          },
+          end: this.handleResizeEnd.bind(this),
         },
       });
     }
   }
-  handleResize(event) {
-    console.log('[TEXTBOX] Resize', event.delta);
-    const oldX = +(event.target.getAttribute('resizeX') || 0);
-    const oldY = +(event.target.getAttribute('resizeY') || 0);
-    const newX = event.dx + oldX;
-    const newY = event.dy + oldY;
-    this.el.style.width = `${parseFloat(this.el.style.width || '0') + event.dx}px`;
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    console.log('resize', e);
+    const oldX = +(e.target.getAttribute('resizeX') || 0);
+    const oldY = +(e.target.getAttribute('resizeY') || 0);
+    const newX = e.dx + oldX;
+    const newY = e.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
     // Single line text fields are not resizeable in height
     // this.el.style.height = `${parseFloat(this.el.style.height || '0') + event.dy}px`;
-    event.target.setAttribute('resizeX', newX);
-    event.target.setAttribute('resizeY', newY);
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    console.log('resizeEnd', e);
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth) };
+    delete newSettings['result'];
+    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .catch(e => console.log('Field update failed', e));
   }
   render() {
     var _a, _b, _c, _d;
@@ -73,7 +88,7 @@ export class VerdocsFieldTextbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), 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("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), 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();
@@ -96,6 +111,27 @@ export class VerdocsFieldTextbox {
   }
   static get properties() {
     return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
       "templateid": {
         "type": "string",
         "mutable": false,
@@ -261,9 +297,14 @@ export class VerdocsFieldTextbox {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "deleted",

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);
     }
@@ -235,9 +236,14 @@ export class VerdocsFieldTimestamp {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "deleted",

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -110,7 +110,7 @@ export class VerdocsTemplateFieldProperties {
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -148,7 +148,7 @@ export class VerdocsTemplateFieldProperties {
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -390,9 +390,14 @@ export class VerdocsTemplateFieldProperties {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string}",
-          "resolved": "{ fieldName: string; }",
-          "references": {}
+          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "references": {
+            "ITemplateFieldSetting": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
         }
       }, {
         "method": "sdkError",

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -101,16 +101,17 @@ export class VerdocsTemplateFields {
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', () => {
+    el.addEventListener('settingsChanged', e => {
       var _a, _b, _c, _d;
+      console.log('[FIELDS] settingsChanged', e.detail);
+      Object.assign(field.setting, e.detail.settings);
       this.selectedRoleName = field.role_name;
-      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
       el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
-      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
       this.reRenderField(field, pageInfo.pageNumber);
       const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
       if (!newEl) {

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '',
+    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
   },
   argTypes: {},
   parameters: {

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';
@@ -10,7 +11,7 @@ import { d as defineCustomElement$3 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$2 } from './verdocs-envelope-recipient-summary2.js';
 import { f as format } from './index2.js';
 
-const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
+const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize;font-size:14px;padding:3px 0}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
 
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
 const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;
@@ -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{display:block;margin-left:-20px;margin-top:-17px;-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{display:block;margin-left:-33px;margin-top:-1px;-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 {