@verdocs/web-sdk 1.9.15 → 1.9.20

package/dist/collection/components/elements/verdocs-field-textbox/verdocs-field-textbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<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>';\n\n/**\n * Display a text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  handleChangeRecipient(e: any) {\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.result}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input\n                label=\"Field Name\"\n                value=\"\"\n                placeholder=\"Stored field name...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n              <verdocs-text-input\n                label=\"Placeholder\"\n                value=\"\"\n                placeholder=\"Placeholder text...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-textbox.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-textbox/verdocs-field-textbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport TemplateStore from '../../../utils/templateStore';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<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>';\n\n/**\n * Display a text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event fired if the field is configurable when the recipient has changed.\n   */\n  @Event({composed: true}) recipientChanged: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  handleChangeRecipient(e: any) {\n    this.recipientChanged?.emit(e.detail);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    let disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings?.result || '';\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled, done: this.done}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={value}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                value={TemplateStore.roleNames[this.roleindex]}\n                options={TemplateStore.roleNames.map(role => ({label: role, value: role}))}\n                onChange={e => this.handleChangeRecipient(e)}\n              />\n\n              <verdocs-text-input\n                label=\"Field Name\"\n                value=\"\"\n                placeholder=\"Stored field name...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n              <verdocs-text-input\n                label=\"Placeholder\"\n                value=\"\"\n                placeholder=\"Placeholder text...\"\n                onInput={e => {\n                  e.stopPropagation();\n                  console.log('ipt', e);\n                }}\n              />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.css

@@ -7,10 +7,11 @@ verdocs-field-timestamp {
   position: relative;
   background-color: transparent;
   transform-origin: bottom left;
-}
-verdocs-field-timestamp.disabled {
   opacity: 0.5;
 }
+verdocs-field-timestamp.done {
+  opacity: 1;
+}
 verdocs-field-timestamp input {
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);
@@ -19,7 +20,7 @@ verdocs-field-timestamp input {
   height: 100%;
   width: 100%;
   background: none;
-  font-size: 11px;
+  font-size: 10px;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 verdocs-field-timestamp input.hide {

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

@@ -1,6 +1,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 { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 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.
@@ -11,17 +12,27 @@ export class VerdocsFieldTimestamp {
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
+    this.done = false;
     this.roleindex = 0;
   }
   async focusField() {
     this.el.focus();
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const settings = getFieldSettings(this.field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: (settings === null || settings === void 0 ? void 0 : settings.value) || new Date().toLocaleDateString(), disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
+    const value = settings.value || new Date().toISOString();
+    const dt = new Date(value);
+    const formatted = format(dt, 'MMM d, y');
+    if (this.done) {
+      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", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
+      // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
+      // is encoded in a ton of existing entries in the database and is hard to change.
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
         { label: 'Buyer', value: 'Buyer' },
         { label: 'Seller', value: 'Seller' },
       ] }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
@@ -118,6 +129,24 @@ export class VerdocsFieldTimestamp {
         "reflect": false,
         "defaultValue": "false"
       },
+      "done": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
+        },
+        "attribute": "done",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "roleindex": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAC;AAErD,MAAM,YAAY,GAChB,wrCAAwrC,CAAC;AAE3rC;;GAEG;AAMH,MAAM,OAAO,qBAAqB;;iBAMwB,IAAI;oBAK/B,KAAK;oBAML,KAAK;oBAKL,KAAK;qBAKL,CAAC;;EAEpB,KAAK,CAAC,UAAU;IACxB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;EAClB,CAAC;EAED,MAAM;;IACJ,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC;MAC/E,aACE,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,WAAW,EAClC,QAAQ,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,EACzB,KAAK,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,KAAI,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,EACzD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC,GACzB;MAED,IAAI,CAAC,QAAQ,IAAI,CAChB,4BAAsB,IAAI,EAAE,YAAY;QACtC,+BAAuB;QACvB;UACE,4BACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE;cACP,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;cAChC,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;aACnC,GACD;UAEF,0BAAoB,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,sBAAsB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI;UAC1H,0BAAoB,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,qBAAqB,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAI,CACrH,CACc,CACxB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\n\nconst settingsIcon =\n  '<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>';\n\n/**\n * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          value={settings?.value || new Date().toLocaleDateString()}\n          disabled={disabled}\n          required={this.field?.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-timestamp.js","sourceRoot":"","sources":["../../../../src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":[],"mappings":"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","sourcesContent":["import {format} from 'date-fns';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<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>';\n\n/**\n * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -58,6 +58,17 @@ verdocs-sign .tools {
   flex-direction: row;
   background-color: #33354c;
 }
+verdocs-sign .tools .logo {
+  width: 77.5px;
+  margin: -6px 0 0 5px;
+}
+verdocs-sign .tools .title {
+  padding-left: 16px;
+  font-size: 18px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 verdocs-sign .cover {
   top: 0;
   left: 0;
@@ -97,4 +108,10 @@ verdocs-sign .agree .intro {
 }
 verdocs-sign .agree .header {
   flex: 0 0 56px;
+}
+
+@media print {
+  verdocs-sign .header {
+    display: none;
+  }
 }