@verdocs/web-sdk 1.0.22 → 1.1.0

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} />`;

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

@@ -0,0 +1,294 @@
+.datepicker {
+  display: none;
+}
+.datepicker.active {
+  display: block;
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  padding-top: 4px;
+}
+.datepicker-dropdown.datepicker-orient-top {
+  padding-top: 0;
+  padding-bottom: 4px;
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: white;
+}
+.datepicker-dropdown .datepicker-picker {
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+}
+.datepicker-picker span {
+  display: block;
+  flex: 1;
+  border: 0;
+  border-radius: 4px;
+  cursor: default;
+  text-align: center;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
+  background-color: whitesmoke;
+}
+
+.datepicker-grid, .datepicker-view .days-of-week, .datepicker-view, .datepicker-controls {
+  display: flex;
+}
+
+.datepicker-grid {
+  flex-wrap: wrap;
+}
+
+.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
+  flex-basis: 14.2857142857%;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  flex-basis: 25%;
+}
+
+.datepicker-cell, .datepicker-view .week {
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
+  background-color: whitesmoke;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.datepicker-header .datepicker-controls {
+  padding: 2px 2px 0;
+}
+.datepicker-controls .button {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  box-shadow: none;
+  background-color: white;
+  cursor: pointer;
+  padding: calc(0.375em - 1px) 0.75em;
+  height: 2.25em;
+  vertical-align: top;
+  text-align: center;
+  line-height: 1.5;
+  white-space: nowrap;
+  color: #363636;
+  font-size: 1rem;
+}
+.datepicker-controls .button:focus, .datepicker-controls .button:active {
+  outline: none;
+}
+.datepicker-controls .button:hover {
+  border-color: #b5b5b5;
+  color: #363636;
+}
+.datepicker-controls .button:focus {
+  border-color: #3273dc;
+  color: #363636;
+}
+.datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+}
+.datepicker-controls .button:active {
+  border-color: #4a4a4a;
+  color: #363636;
+}
+.datepicker-controls .button[disabled] {
+  cursor: not-allowed;
+}
+.datepicker-header .datepicker-controls .button {
+  border-color: transparent;
+  font-weight: bold;
+}
+.datepicker-header .datepicker-controls .button:hover {
+  background-color: #f9f9f9;
+}
+.datepicker-header .datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+.datepicker-header .datepicker-controls .button:active {
+  background-color: #f2f2f2;
+}
+.datepicker-header .datepicker-controls .button[disabled] {
+  box-shadow: none;
+}
+.datepicker-footer .datepicker-controls .button {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: 2px;
+  width: 100%;
+  font-size: 0.75rem;
+}
+.datepicker-controls .view-switch {
+  flex: auto;
+}
+.datepicker-controls .prev-btn,
+.datepicker-controls .next-btn {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+  width: 2.25rem;
+}
+.datepicker-controls .prev-btn.disabled,
+.datepicker-controls .next-btn.disabled {
+  visibility: hidden;
+}
+
+.datepicker-view .dow {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.datepicker-view .week {
+  width: 2.25rem;
+  color: #b5b5b5;
+  font-size: 0.75rem;
+}
+@media (max-width: 22.5rem) {
+  .datepicker-view .week {
+    width: 1.96875rem;
+  }
+}
+
+.datepicker-grid {
+  width: 15.75rem;
+}
+@media (max-width: 22.5rem) {
+  .calendar-weeks + .days .datepicker-grid {
+    width: 13.78125rem;
+  }
+}
+
+.datepicker-cell:not(.disabled):hover {
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+.datepicker-cell.focused:not(.selected) {
+  background-color: #e8e8e8;
+}
+.datepicker-cell.selected, .datepicker-cell.selected:hover {
+  background-color: #3273dc;
+  color: #fff;
+  font-weight: 600;
+}
+.datepicker-cell.disabled {
+  color: #dbdbdb;
+}
+.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
+  color: #7a7a7a;
+}
+.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
+  color: #e6e6e6;
+}
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
+  border-radius: 0;
+  background-color: whitesmoke;
+}
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
+  background-color: #eeeeee;
+}
+.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
+  background-color: #e8e8e8;
+}
+.datepicker-cell.today:not(.selected) {
+  background-color: #00d1b2;
+}
+.datepicker-cell.today:not(.selected):not(.disabled) {
+  color: #fff;
+}
+.datepicker-cell.today.focused:not(.selected) {
+  background-color: #00c4a7;
+}
+.datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected) {
+  background-color: #b5b5b5;
+  color: #fff;
+}
+.datepicker-cell.range-end.focused:not(.selected), .datepicker-cell.range-start.focused:not(.selected) {
+  background-color: #afafaf;
+}
+.datepicker-cell.range-start {
+  border-radius: 4px 0 0 4px;
+}
+.datepicker-cell.range-end {
+  border-radius: 0 4px 4px 0;
+}
+.datepicker-cell.range {
+  border-radius: 0;
+  background-color: #dbdbdb;
+}
+.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
+  background-color: #d5d5d5;
+}
+.datepicker-cell.range.disabled {
+  color: #c2c2c2;
+}
+.datepicker-cell.range.focused {
+  background-color: #cfcfcf;
+}
+.datepicker-view.datepicker-grid .datepicker-cell {
+  height: 4.5rem;
+  line-height: 4.5rem;
+}
+
+.datepicker-input.in-edit {
+  border-color: #2366d1;
+}
+.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
+  box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
+}
+
+verdocs-field-date {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 64px;
+  height: 15px;
+  display: block;
+  font-size: 11px;
+  position: relative;
+  letter-spacing: 0.3px;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-date input {
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+  transform-origin: 0 0;
+  height: 100%;
+  width: 100%;
+  background: none;
+  font-size: 11px;
+  border: 1px solid #ccc;
+  appearance: none;
+}
+verdocs-field-date input.hide {
+  display: none;
+}
+verdocs-field-date.required input {
+  border: 1px solid var(--verdocs-required-color);
+}
+verdocs-field-date.focused {
+  animation: verdocs-field-pulse 0.75s 2;
+}