@verdocs/web-sdk 1.9.38 → 1.10.0

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.js

@@ -0,0 +1,158 @@
+import { h, Host } from '@stencil/core';
+const getTop = (el) => el.offsetTop + (el.parentElement && getTop(el.parentElement));
+const getLeft = (el) => el.offsetLeft + (el.parentElement && getLeft(el.parentElement));
+// @see https://stackoverflow.com/a/49186677/1812436
+const getScrollParent = node => {
+  const regex = /(auto|scroll)/;
+  const parents = (_node, ps) => {
+    if (_node.parentNode === null) {
+      return ps;
+    }
+    return parents(_node.parentNode, ps.concat([_node]));
+  };
+  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+  const scroll = _node => regex.test(overflow(_node));
+  const scrollParent = _node => {
+    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+      return;
+    }
+    const ps = parents(_node.parentNode, []);
+    for (let i = 0; i < ps.length; i += 1) {
+      if (scroll(ps[i])) {
+        return ps[i];
+      }
+    }
+    return document.scrollingElement || document.documentElement;
+  };
+  return scrollParent(node);
+};
+/**
+ * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
+ * `overflow-y: scroll;`. The component will detect that placement and position itself in the bottom-right corner on top of the
+ * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
+ */
+export class VerdocsFloatingMenu {
+  constructor() {
+    this.menuContainer = null;
+    this.scrollParent = null;
+    this.scrollParentParent = null;
+    this.options = [];
+  }
+  componentDidLoad() {
+    this.menuContainer = document.createElement('div');
+    this.menuContainer.id = 'verdocs-floating-menu';
+    let el = document.createElement('div');
+    el.className = 'trigger';
+    el.innerText = '+';
+    this.menuContainer.append(el);
+    el = document.createElement('div');
+    el.className = 'options';
+    this.menuContainer.append(el);
+    const localhandleSelect = this.handleSelect.bind(this);
+    this.options.forEach(option => {
+      const childEl = document.createElement('div');
+      childEl.className = 'option';
+      childEl.addEventListener('click', () => localhandleSelect(option));
+      el.append(childEl);
+      const iconEl = document.createElement('verdocs-toolbar-icon');
+      iconEl.setAttribute('icon', option.icon);
+      iconEl.setAttribute('text', option.tooltip);
+      iconEl.setAttribute('placement', 'left');
+      childEl.append(iconEl);
+    });
+    document.body.append(this.menuContainer);
+    this.scrollParent = getScrollParent(this.el);
+    if (this.scrollParent) {
+      this.scrollParentParent = this.scrollParent.parentElement;
+      this.repositionTrigger(this.scrollParent);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  handleSelect(option) {
+    var _a;
+    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+    const el = document.getElementById('verdocs-floating-menu');
+    if (el) {
+      el.className = 'force-closed';
+      setTimeout(() => {
+        el.className = '';
+      }, 100);
+    }
+  }
+  repositionTrigger(scrollParent) {
+    const scrollParentParent = scrollParent.parentElement;
+    if (scrollParentParent) {
+      const bounds = scrollParentParent.getBoundingClientRect();
+      const menu = document.getElementById('verdocs-floating-menu');
+      if (menu) {
+        menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
+        menu.style.left = `${bounds.right - 80}px`;
+      }
+    }
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "verdocs-floating-menu"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-floating-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-floating-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IOption[]",
+          "resolved": "IOption[]",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The role that this contact will be assigned to."
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "optionSelected",
+        "name": "optionSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit-html';
+// This component is heavily commented so it can be used as a reference for developing other components. Please use the comments here
+// as a guide / resource, but do not copy them to new components (so we don't create a maintenance hassle). If you copy this component
+// as a template, clean up all the comments in the copy, so this remains the "main reference".
+// We are using a custom doc generator specifically for Web Components. We use "inline docs" to get documentation out of code
+// comments rather than having to use separate README files. See https://www.npmjs.com/package/@pxtrn/storybook-addon-docs-stencil
+// for more information.
+export default {
+  // Where in Storybook this control will be listed
+  title: 'Controls/Floating Menu',
+  // Hint to help the docs addon find the component
+  component: 'verdocs-floating-menu',
+  // We can apply default args only shown in Storybook as follows
+  args: {
+    options: [
+      { id: 'attachment', tooltip: 'Attachment', icon: 'A' },
+      { id: 'checkbox', tooltip: 'Check Box', icon: 'C' },
+      { id: 'date', tooltip: 'Date', icon: 'D' },
+      { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
+      { id: 'initial', tooltip: 'Initials', icon: 'I' },
+      { id: 'payment', tooltip: 'Payment', icon: 'P' },
+      { id: 'radio', tooltip: 'Radio Button', icon: 'R' },
+      { id: 'signature', tooltip: 'Signature', icon: 'S' },
+      { id: 'textarea', tooltip: 'Text Area', icon: 'M' },
+      { id: 'textbox', tooltip: 'Text Box', icon: 'T' },
+      { id: 'timestamp', tooltip: 'Timestamp', icon: 'X' },
+    ],
+  },
+  // Here we can apply overrides to component property documentation. Note that we don't need to (and shouldn't) specify every field
+  // here. Only those that need special attention.
+  argTypes: {
+    optionSelected: {
+      action: 'optionSelected',
+      // Prevents a duplicate event entry from appearing in the properties table
+      table: {
+        disable: true,
+      },
+    },
+  },
+  layout: 'fullscreen',
+};
+export const FloatingMenu = ({ options, optionSelected }) => html `
+  <div style="width: 400px; height: 600px; overflow-y: scroll; background: white;">
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <div style="margin:10px; height: 400px; box-sizing: border-box; border:1px solid #ef99a1;">&nbsp;</div>
+    <verdocs-floating-menu .options=${options} @optionSelected=${optionSelected} />
+  </div>
+`;

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.css

@@ -20,7 +20,8 @@ verdocs-toolbar-icon .tooltip {
   font-size: 13px;
   position: relative;
   border-radius: 4px;
-  z-index: 10000;
+  z-index: 20000;
+  white-space: nowrap;
 }
 verdocs-toolbar-icon .tooltip .arrow,
 verdocs-toolbar-icon .tooltip .arrow::before {
@@ -52,4 +53,10 @@ verdocs-toolbar-icon .tooltip[data-popper-placement^=left] > .arrow {
 }
 verdocs-toolbar-icon .tooltip[data-popper-placement^=right] > .arrow {
   left: -4px;
+}
+verdocs-toolbar-icon .tooltip[data-popper-placement^=left] {
+  padding: 3px 10px;
+}
+verdocs-toolbar-icon .tooltip[data-popper-placement^=left] > .arrow {
+  right: -1px;
 }

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.js

@@ -8,13 +8,17 @@ export class VerdocsToolbarIcon {
   constructor() {
     this.text = '';
     this.icon = '';
+    this.placement = 'bottom';
     this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentDidLoad() {
     this.popperInstance = createPopper(this.iconEl, this.tooltip, {
+      placement: this.placement,
+      modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+    });
     // placement: 'top-end',
     // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
+    // });
   }
   disconnectedCallback() {
     if (this.popperInstance) {
@@ -35,7 +39,7 @@ export class VerdocsToolbarIcon {
   //   this.press?.emit();
   // }
   render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get is() { return "verdocs-toolbar-icon"; }
   static get originalStyleUrls() {
@@ -85,6 +89,29 @@ export class VerdocsToolbarIcon {
         "attribute": "icon",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core/lib/enums"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Override the Popper \"placement\" setting"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
       }
     };
   }

package/dist/collection/components/elements/verdocs-component-error/verdocs-component-error.css

@@ -0,0 +1,16 @@
+verdocs-component-error {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  display: flex;
+  padding: 15px;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-component-error .inner {
+  flex: 1;
+  height: 300px;
+  display: flex;
+  font-size: 18px;
+  background: #ffffff;
+  align-items: center;
+  justify-content: center;
+}

package/dist/collection/components/elements/verdocs-component-error/verdocs-component-error.js

@@ -0,0 +1,46 @@
+// NOTE: This component does not have a story because it's not intended for external use.
+import { h, Host } from '@stencil/core';
+/**
+ * Render a simple error message.
+ */
+export class VerdocsComponentError {
+  constructor() {
+    this.message = '';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "inner" }, this.message)));
+  }
+  static get is() { return "verdocs-component-error"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-component-error.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-component-error.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The message to display."
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

package/dist/collection/components/elements/verdocs-document-page/verdocs-document-page.js

@@ -49,7 +49,7 @@ export class VerdocsDocumentPage {
       return;
     }
     this.pageRendered.emit({
-      container: this.container,
+      // container: this.container,
       containerId: this.containerId,
       pageNumber: this.pageNumber,
       virtualWidth: this.virtualWidth,

package/dist/collection/components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar.css

@@ -0,0 +1,159 @@
+verdocs-envelope-sidebar {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  flex-direction: row;
+  display: flex;
+  flex: 0 0 56px;
+  width: 56px;
+  min-height: 400px;
+  height: 100%;
+  background: #41435e;
+  transition: 0.5s cubic-bezier(0.35, 0, 0.25, 1);
+}
+verdocs-envelope-sidebar.open {
+  flex: 0 0 400px;
+  width: 400px;
+}
+verdocs-envelope-sidebar .buttons {
+  flex-direction: column;
+  flex: 0 0 56px;
+  display: flex;
+}
+verdocs-envelope-sidebar .buttons button {
+  height: 50px;
+  outline: none;
+  border: none;
+  border-left: 2px solid transparent;
+  background: none;
+  width: 100%;
+}
+verdocs-envelope-sidebar .buttons button.active {
+  border-left: 2px solid #50bd80;
+}
+verdocs-envelope-sidebar .buttons button svg {
+  color: white;
+  width: 24px;
+  height: 24px;
+}
+verdocs-envelope-sidebar .content {
+  flex: 1;
+  display: none;
+  color: white;
+  flex-direction: column;
+  padding: 12px 16px 16px;
+}
+verdocs-envelope-sidebar.open .content {
+  display: flex;
+}
+verdocs-envelope-sidebar .title {
+  margin-bottom: 12px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  flex: 0;
+}
+verdocs-envelope-sidebar .label {
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(255, 255, 255, 0.54);
+  flex: 0;
+}
+verdocs-envelope-sidebar .value {
+  margin-bottom: 14px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #fff;
+  flex: 0;
+}
+verdocs-envelope-sidebar .recipient-detail {
+  flex: 0;
+  padding: 8px;
+  position: relative;
+  flex-direction: column;
+  border: solid 1px #979797;
+  margin-bottom: 16px;
+}
+verdocs-envelope-sidebar .recipient-header {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  place-content: center space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+verdocs-envelope-sidebar .recipient-number {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: 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 {
+  flex: 1 1 88px;
+  box-sizing: border-box;
+  max-width: 88px;
+  min-width: 88px;
+  text-transform: capitalize;
+}
+verdocs-envelope-sidebar .recipient-status {
+  flex: 1 1 100px;
+  border-radius: 5px;
+  text-align: center;
+  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 {
+  flex-direction: column;
+}
+verdocs-envelope-sidebar .history-entry {
+  display: flex;
+  align-items: center;
+  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;
+}