@verdocs/web-sdk 1.0.23 → 1.2.0

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.css

@@ -0,0 +1,99 @@
+verdocs-upload-dialog {
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  box-sizing: border-box;
+}
+verdocs-upload-dialog div {
+  box-sizing: border-box;
+}
+verdocs-upload-dialog .background-overlay {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0000007f;
+}
+verdocs-upload-dialog .dialog {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  padding: 16px;
+  box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
+}
+verdocs-upload-dialog .heading {
+  display: flex;
+  flex-direction: row;
+  font-size: 20px;
+  font-weight: 500;
+}
+verdocs-upload-dialog .buttons {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+verdocs-upload-dialog .buttons verdocs-button {
+  margin-left: 16px;
+}
+verdocs-upload-dialog .drop-target {
+  padding: 30px 15px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  border: 2px dashed #979797;
+  min-height: 260px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.54);
+  opacity: 1;
+  margin: 20px 0;
+}
+verdocs-upload-dialog .drop-target p {
+  margin: 12px 0;
+}
+verdocs-upload-dialog .drop-target.dragging-over {
+  border: 5px solid blue;
+}
+verdocs-upload-dialog .drop-target > verdocs-button {
+  margin: 12px 0;
+  display: inline-block;
+}
+verdocs-upload-dialog .attachments {
+  height: 56px;
+  font-size: 0;
+  margin: 20px 0;
+  padding: 0 16px;
+  line-height: 56px;
+  white-space: normal;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);
+}
+verdocs-upload-dialog .attachments .attachment {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-upload-dialog .attachments .attachment .icon {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+verdocs-upload-dialog .attachments .attachment .icon.trash {
+  cursor: pointer;
+}
+verdocs-upload-dialog .attachments .attachment .name {
+  flex: 1;
+  display: flex;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 400;
+}

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js

@@ -0,0 +1,163 @@
+import { Component, Prop, h, Event, Host, State } from '@stencil/core';
+import { fileToDataUrl } from '@verdocs/js-sdk/Utils/Files';
+import Paperclip from './paperclip.svg';
+import Trash from './trash.svg';
+/**
+ * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog
+ * box with a message and optional header/title. An OK button is shown that will dismiss the message.
+ * It can also be dismissed by clicking the background overlay.
+ */
+export class VerdocsUploadDialog {
+  constructor() {
+    /**
+     * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.
+     */
+    this.open = false;
+    this.draggingOver = false;
+    this.decodedFiles = [];
+  }
+  handleCancel() {
+    this.cancel.emit();
+    this.open = false;
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleCancel();
+    }
+  }
+  handleDone() {
+    this.done.emit(this.decodedFiles);
+    this.open = false;
+  }
+  handleDragOver(e) {
+    e.preventDefault();
+    this.draggingOver = true;
+  }
+  handleDragLeave(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.draggingOver = false;
+    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
+    let droppedFiles = [];
+    if (e.dataTransfer.items) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === 'file') {
+          const file = e.dataTransfer.items[i].getAsFile();
+          droppedFiles.push(file);
+        }
+      }
+    }
+    else {
+      droppedFiles = e.dataTransfer.files;
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  handleRemoveAttachment(index) {
+    const newFiles = [...this.decodedFiles];
+    newFiles.splice(index, 1);
+    this.decodedFiles = newFiles;
+  }
+  handleSelectFile() {
+    var _a;
+    (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  async handleFileChange(e) {
+    var _a, _b, _c;
+    console.log('fileChange', e);
+    console.log('files', (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+    let droppedFiles = [];
+    for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
+      droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
+    }
+    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+  }
+  render() {
+    return (h(Host, { style: { display: this.open ? 'block' : 'none' } },
+      h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) },
+        h("div", { class: "dialog" },
+          h("div", { class: "heading" }, "Upload attachment"),
+          this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) },
+            h("p", null, "Drag and drop a file here..."),
+            h("p", null, "- or -"),
+            h("verdocs-button", { label: "Select a file...", onPress: () => this.handleSelectFile() }),
+            h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: e => this.handleFileChange(e) }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" },
+            h("div", { class: "icon", innerHTML: Paperclip }),
+            h("div", { class: "name" }, file.name),
+            h("div", { class: "icon trash", innerHTML: Trash, onClick: () => this.handleRemoveAttachment(index) })))))),
+          h("div", { class: "buttons" },
+            h("verdocs-button", { label: "Cancel", variant: "outline", onPress: () => this.handleCancel() }),
+            h("verdocs-button", { label: "Done", onPress: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+  }
+  static get is() { return "verdocs-upload-dialog"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-upload-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-upload-dialog.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "draggingOver": {},
+    "decodedFiles": {}
+  }; }
+  static get events() { return [{
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "done",
+      "name": "done",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the dialog is closed. The event data will contain the closure reason."
+      },
+      "complexType": {
+        "original": "FileWithData[]",
+        "resolved": "FileWithData[]",
+        "references": {
+          "FileWithData": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Utils/Files"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Upload Dialog',
+  component: 'verdocs-upload-dialog',
+  args: {
+    open: true,
+    message: 'Login failed. Please check your username and password and try again.',
+  },
+  argTypes: {
+    closed: {
+      action: 'closed',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const UploadDialog = ({ message, open, closed }) => html `<verdocs-upload-dialog .message=${message} .open=${open} @closed=${closed} />`;

package/dist/collection/components/elements/verdocs-field-attachment/paperclip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+</svg>

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

@@ -0,0 +1,21 @@
+verdocs-field-attachment {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 24px;
+  height: 24px;
+  display: block;
+  font-size: 11px;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-attachment span {
+  width: 20px;
+  cursor: pointer;
+}
+verdocs-field-attachment.required span {
+  border: 1px solid var(--verdocs-required-color);
+}
+verdocs-field-attachment.focused {
+  animation: verdocs-field-pulse 0.75s 2;
+}

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

@@ -0,0 +1,163 @@
+import { Component, h, Host, Prop, Event, Method } from '@stencil/core';
+import Paperclip from './paperclip.svg';
+/**
+ * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
+ * input types like text and checkbox.
+ */
+export class VerdocsFieldAttachment {
+  constructor() {
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  async focusField() {
+    this.handleShow();
+  }
+  handleShow() {
+    this.dialog = document.createElement('verdocs-upload-dialog');
+    this.dialog.open = true;
+    this.dialog.addEventListener('cancel', () => {
+      var _a;
+      console.log('cancel');
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.addEventListener('done', e => {
+      var _a;
+      console.log('done', e);
+      (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
+    });
+    document.body.append(this.dialog);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } },
+      h("span", { innerHTML: Paperclip, onClick: () => this.handleShow() })));
+  }
+  static get is() { return "verdocs-field-attachment"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-attachment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-attachment.css"]
+  }; }
+  static get properties() { return {
+    "order": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the tabIndex of the input element."
+      },
+      "attribute": "order",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the value of the input element."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true, the field will be marked required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the disabled attribute of the input element."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "fieldChange",
+      "name": "fieldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "focusField": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

package/dist/collection/components/elements/verdocs-field-attachment/verdocs-field-attachment.stories.js

@@ -0,0 +1,8 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Document Fields/Attachment',
+  component: 'verdocs-field-attachment',
+  args: {},
+  argTypes: {},
+};
+export const Attachment = ({}) => html `<verdocs-field-attachment />`;

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.css

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+verdocs-field-checkbox {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  font-size: 11px;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-checkbox label > input[type=checkbox] {
+  display: none;
+}
+verdocs-field-checkbox label > input[type=checkbox] + *::before {
+  content: "";
+  display: block;
+  vertical-align: bottom;
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
+}
+verdocs-field-checkbox label > input[type=checkbox]:checked + * {
+  color: var(--verdocs-primary-color);
+}
+verdocs-field-checkbox label > input[type=checkbox]:checked + *::before {
+  content: "✓";
+  color: white;
+  text-align: center;
+  background: var(--verdocs-primary-color);
+  border-color: var(--verdocs-primary-color);
+}
+verdocs-field-checkbox.required label > input[type=checkbox] + *::before {
+  border: 1px solid var(--verdocs-required-color);
+}
+verdocs-field-checkbox.hide {
+  display: none;
+}
+verdocs-field-checkbox.focused {
+  animation: verdocs-field-pulse 0.75s 2;
+}

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.js

@@ -0,0 +1,131 @@
+import { Component, h, Host, Prop, Event } from '@stencil/core';
+/**
+ * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
+ * input types like text and checkbox.
+ */
+export class VerdocsFieldCheckbox {
+  constructor() {
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = false;
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.checked);
+  }
+  render() {
+    return (h(Host, { class: { required: this.required } },
+      h("label", null,
+        h("input", { type: "checkbox", tabIndex: this.order, checked: this.value, disabled: this.disabled, required: this.required, onChange: e => this.handleChange(e) }),
+        h("span", null))));
+  }
+  static get is() { return "verdocs-field-checkbox"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "order": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the tabIndex of the input element."
+      },
+      "attribute": "order",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "value": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the value of the input element."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true, the field will be marked required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the disabled attribute of the input element."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "fieldChange",
+      "name": "fieldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.stories.js

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Document Fields/Checkbox',
+  component: 'verdocs-field-checkbox',
+  args: {
+    required: false,
+    value: false,
+  },
+  argTypes: {},
+};
+export const Checkbox = ({ required, value }) => html `<verdocs-field-checkbox .required=${required} .value=${value} />`;