@verdocs/web-sdk 1.0.23 → 1.2.0

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

@@ -0,0 +1,233 @@
+import { Component, h, Host, Prop, Event, State, Method } from '@stencil/core';
+/**
+ * Display a text input field.
+ */
+export class VerdocsFieldTextbox {
+  constructor() {
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = '';
+    /**
+     * 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;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  render() {
+    return (h(Host, { class: { focused: this.focused, required: this.required } },
+      h("input", { type: "text", placeholder: this.placeholder || '', tabIndex: this.order, value: this.value, disabled: this.disabled, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+  static get is() { return "verdocs-field-textbox"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-textbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-textbox.css"]
+  }; }
+  static get properties() { return {
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A placeholder to assist the user in completing the field."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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 states() { return {
+    "focused": {}
+  }; }
+  static get events() { return [{
+      "method": "fieldFocus",
+      "name": "fieldFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field loses focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "fieldBlur",
+      "name": "fieldBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field gains focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "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": {}
+      }
+    }, {
+      "method": "fieldInput",
+      "name": "fieldInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired on every character entered into / deleted from the field."
+      },
+      "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-textbox/verdocs-field-textbox.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Document Fields/Textbox',
+  component: 'verdocs-field-textbox',
+  args: {
+    placeholder: 'Email address...',
+    order: 1,
+    value: '',
+    disabled: false,
+    required: false,
+  },
+  argTypes: {},
+};
+export const Textbox = ({ placeholder, order, value, required, disabled }) => html `<verdocs-field-textbox .placeholder="${placeholder}" .order="${order}" .required="${required}" .value="${value}" .disabled="${disabled}" />`;

package/dist/collection/components/elements/{search-quick-functions/search-quick-functions.css → verdocs-quick-functions/verdocs-quick-functions.css}

@@ -1,9 +1,9 @@
-search-quick-functions {
+verdocs-quick-functions {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
 }
-search-quick-functions .container {
+verdocs-quick-functions .container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -14,13 +14,13 @@ search-quick-functions .container {
   font-family: sans-serif;
   color: #ffffff;
 }
-search-quick-functions .title {
+verdocs-quick-functions .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
   margin: 1em 0 40px 0;
 }
-search-quick-functions button {
+verdocs-quick-functions button {
   width: 140px;
   height: 40px;
   border: none;
@@ -37,6 +37,6 @@ search-quick-functions button {
   justify-content: space-evenly;
   background-color: #50be50;
 }
-search-quick-functions button svg {
+verdocs-quick-functions button svg {
   fill: #ffffff;
 }

package/dist/collection/components/elements/{search-quick-functions/search-quick-functions.js → verdocs-quick-functions/verdocs-quick-functions.js}

@@ -1,10 +1,13 @@
-import { Component, Host, h, Event } from '@stencil/core';
+import { Component, h, Event } from '@stencil/core';
 import TemplateIcon from './template-icon.svg';
 import DocumentIcon from './document-icon.svg';
 /**
  * Display quick-function buttons for creating templates and documents.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
  */
-export class SearchQuickFunctions {
+export class VerdocsQuickFunctions {
   handleCreateTemplate() {
     this.createTemplate.emit();
   }
@@ -12,18 +15,17 @@ export class SearchQuickFunctions {
     this.createDocument.emit();
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "container" },
-        h("p", { class: "title" }, "Quick Create"),
-        h("button", { onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"),
-        h("button", { onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document"))));
+    return (h("div", { class: "container" },
+      h("p", { class: "title" }, "Quick Create"),
+      h("button", { onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"),
+      h("button", { onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
   }
-  static get is() { return "search-quick-functions"; }
+  static get is() { return "verdocs-quick-functions"; }
   static get originalStyleUrls() { return {
-    "$": ["search-quick-functions.scss"]
+    "$": ["verdocs-quick-functions.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["search-quick-functions.css"]
+    "$": ["verdocs-quick-functions.css"]
   }; }
   static get events() { return [{
       "method": "createTemplate",

package/dist/collection/components/elements/{search-quick-functions/search-quick-functions.stories.js → verdocs-quick-functions/verdocs-quick-functions.stories.js}

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export default {
   title: 'Elements/Search/Quick Functions',
-  component: 'search-quick-functions',
+  component: 'verdocs-quick-functions',
   args: {
     options: {
       title: 'Quick Create',
@@ -12,4 +12,4 @@ export default {
     createDocument: { action: 'createDocument' },
   },
 };
-export const Default = ({ options, createTemplate, createDocument }) => html `<search-quick-functions .options=${options} @createTemplate=${createTemplate} @createDocument=${createDocument} tall />`;
+export const QuickFunctions = ({ options, createTemplate, createDocument }) => html `<verdocs-quick-functions .options=${options} @createTemplate=${createTemplate} @createDocument=${createDocument} tall />`;

package/dist/collection/components/elements/{search-starred/search-starred.css → verdocs-search-activity/verdocs-search-activity.css}

@@ -1,9 +1,9 @@
-search-starred {
+verdocs-search-activity {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
 }
-search-starred .container {
+verdocs-search-activity .container {
   display: flex;
   width: 240px;
   color: #ffffff;
@@ -12,17 +12,17 @@ search-starred .container {
   padding: 10px 10px 20px 10px;
   background-color: var(--verdocs-background-dark);
 }
-search-starred .title {
+verdocs-search-activity .title {
   font-size: 22px;
   font-weight: 700;
   line-height: 30px;
 }
-search-starred .items {
+verdocs-search-activity .items {
   display: flex;
   margin-top: 20px;
   flex-direction: column;
 }
-search-starred .item {
+verdocs-search-activity .item {
   border: none;
   display: flex;
   text-align: left;
@@ -30,24 +30,24 @@ search-starred .item {
   flex-direction: row;
   background: transparent;
 }
-search-starred .item:hover {
+verdocs-search-activity .item:hover {
   cursor: pointer;
 }
-search-starred .icon {
+verdocs-search-activity .icon {
   flex: 0 0 22px;
   margin-right: 14px;
 }
-search-starred .icon svg {
+verdocs-search-activity .icon svg {
   fill: #707ae5;
   width: 22px;
   height: 22px;
 }
-search-starred .details {
+verdocs-search-activity .details {
   display: flex;
   overflow: hidden;
   flex-direction: column;
 }
-search-starred .item-title {
+verdocs-search-activity .item-title {
   font-size: 16px;
   font-weight: 400;
   color: #ffffff;
@@ -55,13 +55,13 @@ search-starred .item-title {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-search-starred .info {
+verdocs-search-activity .info {
   font-size: 14px;
   font-weight: 500;
   line-height: 23px;
   color: #aeb4bf;
 }
-search-starred .empty {
+verdocs-search-activity .empty {
   text-transform: none;
   line-height: 22px;
   color: #ccc;

package/dist/collection/components/elements/verdocs-search-activity/verdocs-search-activity.js

@@ -0,0 +1,168 @@
+import { loadSession } from '@verdocs/js-sdk/Users/Auth';
+import { getSearchHistory } from '@verdocs/js-sdk/Search/Content';
+import { getTemplates } from '@verdocs/js-sdk/Templates/Templates';
+import { Component, h, Prop, Event, State } from '@stencil/core';
+import DocumentIcon from './document-icon.svg';
+const SOURCE = 'verdocs-stage';
+/**
+ * Display a list of starred items.
+ *
+ * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth
+ * embed. This Element will reuse the same session produced by logging in via that Embed.
+ */
+export class VerdocsSearchActivity {
+  constructor() {
+    this.type = 'recent';
+    this.emptyMessage = 'You do not have any starred searches.';
+    this.authFailure = false;
+    this.title = 'Recent Searches';
+    this.recent = [];
+    this.saved = [];
+    this.starred = [];
+  }
+  componentWillLoad() {
+    loadSession(SOURCE);
+    const errorHandler = e => {
+      var _a;
+      console.warn('[Verdocs/search-activity] Error getting search data', e);
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+        this.authFailure = true;
+      }
+    };
+    switch (this.type) {
+      case 'recent':
+        this.title = 'Recent Searches';
+        this.emptyMessage = 'You do not have any recent searches.';
+        getSearchHistory()
+          .then(r => (this.recent = r.recent))
+          .catch(errorHandler);
+        break;
+      case 'saved':
+        this.title = 'Saved Searches';
+        this.emptyMessage = 'You do not have any saved searches.';
+        getSearchHistory()
+          .then(r => (this.saved = r.saved))
+          .catch(errorHandler);
+        break;
+      case 'starred':
+        this.title = 'My Starred items';
+        this.emptyMessage = 'You do not have any starred templates.';
+        getTemplates({ is_starred: true })
+          .then(r => (this.starred = r))
+          .catch(errorHandler);
+        break;
+    }
+  }
+  handleSelectEntry(entry) {
+    this.entrySelected.emit(entry);
+  }
+  computePagesText(pages) {
+    if (pages < 2) {
+      return `${pages} Page`;
+    }
+    else {
+      return `${pages} Pages`;
+    }
+  }
+  computeRecipientsText(recipients) {
+    if (typeof recipients === 'object') {
+      return recipients.join(', ');
+    }
+    else if (recipients > 1) {
+      return `${recipients} Recipients`;
+    }
+    else {
+      return `${recipients} Recipient`;
+    }
+  }
+  render() {
+    const showEmpty = this.recent.length < 1 && this.saved.length < 1 && this.starred.length < 1;
+    return (h("div", { class: "container" },
+      h("p", { class: "title" }, this.title),
+      h("div", { class: "items" },
+        this.recent.map(recent => (h("button", { class: "item", onClick: () => this.handleSelectEntry(recent) },
+          h("div", { class: "icon", innerHTML: DocumentIcon }),
+          h("div", { class: "details" },
+            h("div", { class: "item-title" }, recent.params.q),
+            h("div", { class: "info" }, "Test"))))),
+        this.saved.map(option => (h("button", { class: "item", onClick: () => this.handleSelectEntry(option) },
+          h("div", { class: "icon", innerHTML: DocumentIcon }),
+          h("div", { class: "details" },
+            h("div", { class: "item-title" }, option.params.q),
+            h("div", { class: "info" }))))),
+        showEmpty && h("div", { class: "empty" }, this.authFailure ? 'Authentication required' : this.emptyMessage))));
+  }
+  static get is() { return "verdocs-search-activity"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-search-activity.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-search-activity.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'recent' | 'saved' | 'starred'",
+        "resolved": "\"recent\" | \"saved\" | \"starred\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'recent'"
+    },
+    "options": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "options",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "emptyMessage": {},
+    "authFailure": {},
+    "title": {},
+    "recent": {},
+    "saved": {},
+    "starred": {}
+  }; }
+  static get events() { return [{
+      "method": "entrySelected",
+      "name": "entrySelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when an entry is clicked."
+      },
+      "complexType": {
+        "original": "IRecentSearch",
+        "resolved": "IRecentSearch",
+        "references": {
+          "IRecentSearch": {
+            "location": "import",
+            "path": "@verdocs/js-sdk/Search/Types"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/elements/verdocs-search-activity/verdocs-search-activity.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+/**
+ * Display a list of starred items (favorite templates).
+ */
+export default {
+  title: 'Elements/Search/Search Activity',
+  component: 'verdocs-search-activity',
+  args: {},
+  argTypes: {
+    type: { defaultValue: 'recent' },
+    entrySelected: { action: 'entrySelected' },
+  },
+};
+export const SearchActivity = ({ type, entrySelected }) => html `<verdocs-search-activity .type=${type} @entrySelected=${entrySelected} tall />`;

package/dist/collection/components/elements/{search-box/search-box.css → verdocs-search-box/verdocs-search-box.css}

@@ -1,9 +1,9 @@
-search-box {
+verdocs-search-box {
   /* Fallback font for old browsers */
   font-family: sans-serif;
   font-family: var(--verdocs-font);
 }
-search-box form {
+verdocs-search-box form {
   display: flex;
   flex-direction: row;
   height: 45px;
@@ -17,17 +17,17 @@ search-box form {
   border-style: solid;
   border-color: var(--verdocs-container-border-color);
 }
-search-box form input {
+verdocs-search-box form input {
   box-sizing: border-box;
   height: 43px;
   width: 100%;
   font-size: 18px;
   border: none;
 }
-search-box form input:focus {
+verdocs-search-box form input:focus {
   outline: none;
 }
-search-box form button.search {
+verdocs-search-box form button.search {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -44,7 +44,7 @@ search-box form button.search {
   text-transform: uppercase;
   color: #fff;
 }
-search-box form .type {
+verdocs-search-box form .type {
   background-color: #707ae5;
   height: 30px;
   display: inline-flex;
@@ -59,17 +59,17 @@ search-box form .type {
   color: #fff;
   margin-right: 10px;
 }
-search-box form .type button {
+verdocs-search-box form .type button {
   border: none;
   color: #fff;
   margin: 5px 0 0 8px;
   background: transparent;
 }
-search-box form svg {
+verdocs-search-box form svg {
   width: 12px;
   height: 12px;
   margin-right: 6px;
 }
-search-box ::placeholder {
+verdocs-search-box ::placeholder {
   color: #aeb4bf;
 }