@verdocs/web-sdk 2.3.54 → 2.3.56

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

@@ -1,5 +1,6 @@
 import { format } from 'date-fns';
-import flatpickr from 'flatpickr';
+import AirDatepicker from 'air-datepicker';
+import localeEn from 'air-datepicker/locale/en';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
 import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
@@ -22,6 +23,7 @@ export class VerdocsFieldDate {
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
+    this.field = undefined;
     this.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
     this.showingProperties = false;
   }
@@ -29,28 +31,24 @@ export class VerdocsFieldDate {
     this.el.focus();
   }
   async componentWillLoad() {
+    if (this.field) {
+      const ts = getTemplateFieldStore(this.templateid);
+      ts.set('fields', [...ts.get('fields'), this.field]);
+    }
     this.fieldStore = getTemplateFieldStore(this.templateid);
     this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidLoad() {
-    const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const { result } = getFieldSettings(field);
-    flatpickr('#' + this.containerId, {
-      positionElement: this.el,
-      // 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 date', selectedDate[0]);
-        this.el.setAttribute('iso', selectedDate[0].toISOString());
+    new AirDatepicker(`#${this.containerId}`, {
+      locale: localeEn,
+      isMobile: true,
+      autoClose: true,
+      onSelect: ({ date, formattedDate }) => {
+        console.log('Selected date', formattedDate, date);
         const event = new window.Event('input');
         this.el.dispatchEvent(event);
       },
     });
-    // this.el.addEventListener('changeDate', (e: any) => {
-    //   console.log('changeDate', e.detail.date.toISOString());
-    // });
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -68,24 +66,20 @@ export class VerdocsFieldDate {
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-    console.log('role index', roleIndex, field, backgroundColor);
-    if (!field) {
-      return h(Fragment, null);
-    }
+    const roleIndex = getRoleIndex(this.roleStore, field === null || field === void 0 ? void 0 : field.role_name);
+    const backgroundColor = (field === null || field === void 0 ? void 0 : field['rgba']) || getRGBA(roleIndex);
     const settings = getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     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), FORMAT_DATE) : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { name: field.name, class: "input-el", type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { name: field === null || field === void 0 ? void 0 : field.name, class: "input-el", type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
         e.stopPropagation();
         this.showingProperties = !this.showingProperties;
-      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+      } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field === null || field === void 0 ? void 0 : field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
         var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field === null || field === void 0 ? void 0 : field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
@@ -249,6 +243,26 @@ export class VerdocsFieldDate {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
+      },
+      "field": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ITemplateField",
+          "resolved": "ITemplateField",
+          "references": {
+            "ITemplateField": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled vertically by this factor."
+        }
       }
     };
   }

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

@@ -1,17 +1,27 @@
 import { html } from 'lit-html';
+const templateId = 'd501d2df-b604-455d-a2fc-953d947cf79d';
 export default {
   title: 'Fields/Date',
   component: 'verdocs-field-date',
   args: {
     field: {
-      settings: {
-        x: 0,
-        y: 0,
-        required: true,
-      },
+      template_id: templateId,
+      document_id: templateId,
+      type: 'date',
+      required: true,
+      page_sequence: 1,
+      tabindex: 0,
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 50,
+      role_name: 'storybook',
+      name: 'date',
+      setting: { x: 0, y: 0, required: true },
     },
     disabled: false,
+    roles: [{ template_id: templateId, name: 'date', type: 'signer', sequence: 1, order: 1 }],
   },
   argTypes: {},
 };
-export const Date = ({ field, disabled }) => html `<verdocs-field-date .field="${field}" .disabled="${disabled}" />`;
+export const Date = ({ field, roles, disabled }) => html `<verdocs-field-date .templateid="${templateId}" .field="${field}" .roles="${roles}" .disabled="${disabled}" />`;

package/dist/collection/utils/TemplateRoleStore.js

@@ -31,5 +31,7 @@ export const deleteStoreRole = (store, name) => {
   const newRoles = [...store.get('roles').filter(field => field.name !== name)];
   store.set('roles', newRoles);
 };
-export const getRoleNames = (store) => store.get('roles').map(role => role.name);
-export const getRoleIndex = (store, name) => getRoleNames(store).findIndex(roleName => roleName === name);
+export const getRoleNames = (store) => (store.get('roles') || []).map(role => role.name);
+export const getRoleIndex = (store, name) => {
+  return Math.max(getRoleNames(store).findIndex(roleName => roleName === name), 0);
+};

package/dist/collection/utils/utils.js

@@ -250,10 +250,10 @@ export const renderDocumentField = (field, docPage, fieldOptions) => {
 // TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
 //   but then merge the SDK types to encourage developers to use just `settings`.
 export const getFieldSettings = (field) => {
-  if (field.setting) {
+  if (field && field.setting) {
     return field.setting;
   }
-  if (field.settings) {
+  if (field && field.settings) {
     return field.settings;
   }
   return { x: 0, y: 0, required: false, disabled: false, result: '', value: '' };

package/dist/components/TemplateRoleStore.js

@@ -32,7 +32,9 @@ const deleteStoreRole = (store, name) => {
   const newRoles = [...store.get('roles').filter(field => field.name !== name)];
   store.set('roles', newRoles);
 };
-const getRoleNames = (store) => store.get('roles').map(role => role.name);
-const getRoleIndex = (store, name) => getRoleNames(store).findIndex(roleName => roleName === name);
+const getRoleNames = (store) => (store.get('roles') || []).map(role => role.name);
+const getRoleIndex = (store, name) => {
+  return Math.max(getRoleNames(store).findIndex(roleName => roleName === name), 0);
+};
 
 export { getRoleIndex as a, getRoleNames as b, createTemplateRoleStore as c, deleteStoreRole as d, getTemplateRoleStore as g, updateStoreRole as u };

package/dist/components/_commonjsHelpers.js

@@ -1,5 +1,9 @@
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
@@ -14,4 +18,4 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { createCommonjsModule as a, commonjsRequire as b, commonjsGlobal as c };
+export { commonjsGlobal as a, commonjsRequire as b, createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/components/interact.min.js

@@ -1,4 +1,4 @@
-import { a as createCommonjsModule, c as commonjsGlobal } from './_commonjsHelpers.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
 
 var interact_min = createCommonjsModule(function (module, exports) {
 /* interact.js 1.10.26 | https://raw.github.com/taye/interact.js/main/LICENSE */

package/dist/components/utils.js

@@ -1,4 +1,4 @@
-import { a as createCommonjsModule, c as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
+import { c as createCommonjsModule, a as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
 import { k as getEnvelopeFile, m as getFieldAttachment } from './Envelopes.js';
 import './Types.js';
 import { d as downloadBlob } from './Files.js';
@@ -271,10 +271,10 @@ const renderDocumentField = (field, docPage, fieldOptions) => {
 // TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
 //   but then merge the SDK types to encourage developers to use just `settings`.
 const getFieldSettings = (field) => {
-  if (field.setting) {
+  if (field && field.setting) {
     return field.setting;
   }
-  if (field.settings) {
+  if (field && field.settings) {
     return field.settings;
   }
   return { x: 0, y: 0, required: false, disabled: false, result: '', value: '' };

package/dist/components/verdocs-build.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getTemplateStore } from './TemplateStore.js';
@@ -83,7 +83,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (templateId) {
       console.log('Loading store', templateId);
       this.store = await getTemplateStore(this.endpoint, templateId, false);
-      forceUpdate(this.el);
+      // forceUpdate(this.el);
     }
   }
   handleCancel(e) {