@verdocs/web-sdk 1.1.0 → 1.4.2

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

@@ -1,9 +1,7 @@
-search-quick-functions {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+verdocs-quick-functions {
+  font-family: "Barlow", sans-serif;
 }
-search-quick-functions .container {
+verdocs-quick-functions .container {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -14,13 +12,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 +35,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,4 +1,4 @@
-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';
 /**
@@ -7,7 +7,7 @@ import DocumentIcon from './document-icon.svg';
  * 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();
   }
@@ -15,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',
+  title: 'Search/Quick Functions',
+  component: 'verdocs-quick-functions',
   args: {
     options: {
       title: 'Quick Create',
@@ -12,4 +12,4 @@ export default {
     createDocument: { action: 'createDocument' },
   },
 };
-export const QuickFunctions = ({ 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,7 @@
-search-starred {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+verdocs-search-activity {
+  font-family: "Barlow", sans-serif;
 }
-search-starred .container {
+verdocs-search-activity .container {
   display: flex;
   width: 240px;
   color: #ffffff;
@@ -12,17 +10,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 +28,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 +53,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: '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,7 @@
-search-box {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+verdocs-search-box {
+  font-family: "Barlow", sans-serif;
 }
-search-box form {
+verdocs-search-box form {
   display: flex;
   flex-direction: row;
   height: 45px;
@@ -17,17 +15,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 +42,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 +57,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;
 }

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

@@ -1,4 +1,4 @@
-import { Component, Host, h, Event, Prop } from '@stencil/core';
+import { Component, h, Event, Prop } from '@stencil/core';
 import SearchIcon from './search.svg';
 import CloseIcon from './close.svg';
 /**
@@ -7,7 +7,7 @@ import CloseIcon from './close.svg';
  * 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 SearchBox {
+export class VerdocsSearchBox {
   constructor() {
     /**
      * The placeholder to display in the input field.
@@ -39,23 +39,22 @@ export class SearchBox {
     }
   }
   render() {
-    return (h(Host, null,
-      h("form", { onSubmit: e => this.handleSearch(e) },
-        this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" },
-          this.type,
-          "s ",
-          h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))),
-        h("input", { type: "text", placeholder: this.placeholder, value: this.query, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e) }),
-        h("button", { onClick: e => this.handleSearch(e), class: "search" },
-          h("span", { innerHTML: SearchIcon }),
-          "Search"))));
+    return (h("form", { onSubmit: e => this.handleSearch(e) },
+      this.type !== undefined && this.type !== 'all' && (h("span", { class: "type" },
+        this.type,
+        "s ",
+        h("button", { class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))),
+      h("input", { type: "text", placeholder: this.placeholder, value: this.query, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e) }),
+      h("button", { onClick: e => this.handleSearch(e), class: "search" },
+        h("span", { innerHTML: SearchIcon }),
+        "Search")));
   }
-  static get is() { return "search-box"; }
+  static get is() { return "verdocs-search-box"; }
   static get originalStyleUrls() { return {
-    "$": ["search-box.scss"]
+    "$": ["verdocs-search-box.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["search-box.css"]
+    "$": ["verdocs-search-box.css"]
   }; }
   static get properties() { return {
     "placeholder": {

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

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Elements/Search/Search Box',
-  component: 'search-box',
+  title: 'Search/Search Box',
+  component: 'verdocs-search-box',
   args: {
     type: 'all',
   },
@@ -12,4 +12,4 @@ export default {
     type: { type: 'string', control: 'radio', options: ['all', 'document', 'template', 'organization'] },
   },
 };
-export const SearchBox = ({ type, searchClicked, typeChanged, queryChanged }) => html `<search-box .type=${type} @searchClicked=${searchClicked} @typeChanged=${typeChanged} @queryChanged=${queryChanged} />`;
+export const SearchBox = ({ type, searchClicked, typeChanged, queryChanged }) => html `<verdocs-search-box .type=${type} @searchClicked=${searchClicked} @typeChanged=${typeChanged} @queryChanged=${queryChanged} />`;

package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.css

@@ -0,0 +1,4 @@
+verdocs-search-tabs {
+  font-family: "Barlow", sans-serif;
+  display: block;
+}

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

@@ -0,0 +1,19 @@
+import { Component, h, State } from '@stencil/core';
+export class VerdocsSearchTabs {
+  constructor() {
+    this.selected = 'all';
+  }
+  render() {
+    return h("div", null, "\u00A0");
+  }
+  static get is() { return "verdocs-search-tabs"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-search-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-search-tabs.css"]
+  }; }
+  static get states() { return {
+    "selected": {}
+  }; }
+}

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

@@ -4,8 +4,8 @@ import { action } from '@storybook/addon-actions';
  * Display a set of tabs to filter by searchable content types.
  */
 export default {
-  title: 'Elements/Search/Tabs',
-  component: 'search-tabs',
+  title: 'Search/Tabs',
+  component: 'verdocs-search-tabs',
   args: {},
   argTypes: {},
 };
@@ -15,4 +15,4 @@ const listener = {
   },
   capture: true,
 };
-export const Tabs = ({ options }) => html `<search-tabs .options=${options} @optionSelected=${listener} tall />`;
+export const Tabs = ({ options }) => html `<verdocs-search-tabs .options=${options} @optionSelected=${listener} tall />`;

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

@@ -1,8 +1,6 @@
 verdocs-auth {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
-  background-color: var(--verdocs-secondary-color);
+  font-family: "Barlow", sans-serif;
+  background-color: #4c56cb;
   padding: 40px;
   display: flex;
   flex-direction: column;
@@ -11,7 +9,7 @@ verdocs-auth {
 }
 verdocs-auth .login-form,
 verdocs-auth .signup-form {
-  background: #f2f5fa;
+  background: #f5f5fa;
   align-items: center;
   justify-content: center;
   border-radius: 8px;

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -1,7 +1,7 @@
 import { Auth } from '@verdocs/js-sdk/Users';
 import { Transport, VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
-import { Component, Prop, State, h, Event } from '@stencil/core';
 import { loadSession, setSession } from '@verdocs/js-sdk/Users/Auth';
+import { Component, Prop, State, h, Event } from '@stencil/core';
 const BASE_URL = 'https://stage-api.verdocs.com/';
 const SOURCE = 'verdocs-stage';
 /**
@@ -59,7 +59,7 @@ export class VerdocsAuth {
     this.loginError = null;
   }
   componentWillLoad() {
-    const staging = new VerdocsEndpoint({ baseURL: BASE_URL });
+    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
     Transport.setActiveEndpoint(staging);
     console.log('Set active endpoint', Transport.getEndpoint());
   }

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

@@ -1,9 +1,7 @@
 verdocs-search {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   display: flex;
-  background-color: var(--verdocs-background-dark);
+  background-color: #1e2031;
 }
 verdocs-search search-box {
   display: flex;

package/dist/collection/components/embeds/verdocs-search/verdocs-search.js

@@ -2,11 +2,11 @@ import { Component, h } from '@stencil/core';
 export class VerdocsSearch {
   render() {
     return (h("div", { class: "container" },
-      h("search-box", null),
+      h("verdocs-search-box", null),
       h("div", { class: "boxes" },
-        h("search-recent", null),
-        h("search-starred", null),
-        h("search-saved", null),
+        h("verdocs-search-activity", { type: "recent" }),
+        h("verdocs-search-activity", { type: "saved" }),
+        h("verdocs-search-activity", { type: "starred" }),
         h("search-quick-functions", null))));
   }
   static get is() { return "verdocs-search"; }

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

@@ -1,7 +1,5 @@
 verdocs-sign {
-  /* Fallback font for old browsers */
-  font-family: sans-serif;
-  font-family: var(--verdocs-font);
+  font-family: "Barlow", sans-serif;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -65,6 +63,7 @@ verdocs-sign .document {
 }
 verdocs-sign .agree-checkbox {
   flex: 0 0 20px;
+  display: flex;
   width: 20px;
   height: 20px;
   border-radius: 3px;