@verdocs/web-sdk 1.1.0 → 1.2.0

package/dist/custom-elements/index.js

@@ -1,85 +1,6 @@
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
-const SearchIcon$2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.4809 20.7176L17.9111 15.2536C19.0961 13.6368 19.727 11.6926 19.7128 9.70131C19.7201 7.53345 18.9846 5.42606 17.6244 3.71753C16.2642 2.009 14.3581 0.798456 12.2123 0.280282C10.0665 -0.237892 7.80552 -0.0336342 5.79227 0.86026C3.77902 1.75415 2.13038 3.28582 1.1111 5.20931C0.0918114 7.1328 -0.238985 9.33652 0.171813 11.4666C0.582612 13.5967 1.71117 15.5296 3.37628 16.9548C5.0414 18.3801 7.14646 19.2151 9.35344 19.3257C11.5604 19.4364 13.7413 18.8162 15.5458 17.5649L21.1372 23.05L21.1563 23.0663C21.4841 23.3487 21.9039 23.507 22.3401 23.5128C22.7823 23.5125 23.2063 23.3402 23.5191 23.0337V23.0337C23.6749 22.8812 23.7979 22.6995 23.8804 22.4993C23.963 22.2991 24.0036 22.0847 23.9997 21.8688C23.9959 21.6529 23.9477 21.44 23.858 21.2428C23.7683 21.0456 23.639 20.8682 23.4778 20.7212L23.4809 20.7176ZM14.5167 14.1975C13.4564 15.2349 12.0623 15.8797 10.5719 16.022C9.08145 16.1644 7.58681 15.7955 6.34249 14.9781C5.09816 14.1608 4.18109 12.9456 3.74751 11.5395C3.31393 10.1334 3.39064 8.6233 3.96455 7.26643C4.53846 5.90955 5.57409 4.7898 6.89507 4.09787C8.21606 3.40594 9.74071 3.18461 11.2093 3.4716C12.678 3.75858 13.9998 4.53612 14.9497 5.6718C15.8996 6.80748 16.4188 8.23105 16.4189 9.7001C16.4196 10.5357 16.2519 11.3632 15.9254 12.135C15.599 12.9069 15.1202 13.6078 14.5167 14.1975V14.1975Z" fill="white"/>
-</svg>
-`;
-
-const CloseIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.0739 11.7565L19.7127 6.23228C20.0875 5.85692 20.0875 5.25309 19.7127 4.87773L19.0213 4.20046C18.6382 3.82511 18.0219 3.82511 17.6387 4.20046L12 9.72472L6.36127 4.20046C5.97814 3.82511 5.36179 3.82511 4.97866 4.20046L4.28735 4.87773C3.90422 5.25309 3.90422 5.85692 4.28735 6.23228L9.92608 11.7565L4.28735 17.2808C3.90422 17.6561 3.90422 18.26 4.28735 18.6353L4.97866 19.3126C5.36179 19.688 5.97814 19.688 6.36127 19.3126L12 13.7883L17.6387 19.3126C18.0219 19.688 18.6382 19.688 19.0213 19.3126L19.7127 18.6353C20.0958 18.26 20.0958 17.6561 19.7127 17.2808L14.0739 11.7565Z" fill="white"/>
-</svg>
-`;
-
-const searchBoxCss = "search-box{font-family:sans-serif;font-family:var(--verdocs-font)}search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:var(--verdocs-container-border-color)}search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}search-box form input:focus{outline:none}search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#50be80;text-transform:uppercase;color:#fff}search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}search-box form svg{width:12px;height:12px;margin-right:6px}search-box ::-webkit-input-placeholder{color:#aeb4bf}search-box ::-moz-placeholder{color:#aeb4bf}search-box :-ms-input-placeholder{color:#aeb4bf}search-box ::-ms-input-placeholder{color:#aeb4bf}search-box ::placeholder{color:#aeb4bf}";
-
-let SearchBox$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.searchClicked = createEvent(this, "searchClicked", 7);
-    this.typeChanged = createEvent(this, "typeChanged", 7);
-    this.queryChanged = createEvent(this, "queryChanged", 7);
-    /**
-     * The placeholder to display in the input field.
-     */
-    this.placeholder = 'search documents, templates, people...';
-    /**
-     * If set to a value other than 'all', a removeable filter indicator will be displayed.
-     */
-    this.type = 'all';
-    /**
-     * The text search string entered by the user.
-     */
-    this.query = '';
-  }
-  handleSearch(e) {
-    this.searchClicked.emit({ type: this.type, query: this.query });
-    e.preventDefault();
-    return false;
-  }
-  handleChange(e) {
-    this.queryChanged.emit(e.target.value);
-  }
-  handleClearFilter() {
-    this.typeChanged.emit('all');
-  }
-  handleKeyUp(e) {
-    if (e.key === 'Enter') {
-      this.searchClicked.emit({ type: this.type, query: this.query });
-    }
-  }
-  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$2 }), "Search"))));
-  }
-  static get style() { return searchBoxCss; }
-};
-
-const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><g><path d="M19,5v14H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3z"/></g><path d="M14,17H7v-2h7V17z M17,13H7v-2h10V13z M17,9H7V7h10V9z"/></g></svg>`;
-
-const DocumentIcon$1 = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
-
-const searchQuickFunctionsCss = "search-quick-functions{font-family:sans-serif;font-family:var(--verdocs-font)}search-quick-functions .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}search-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}search-quick-functions button{width:140px;height:40px;border:none;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;font-size:14px;font-weight:700;line-height:25px;-ms-flex-align:center;align-items:center;margin-bottom:20px;border-radius:5px;text-transform:uppercase;-ms-flex-pack:space-evenly;justify-content:space-evenly;background-color:#50be50}search-quick-functions button svg{fill:#ffffff}";
-
-let SearchQuickFunctions$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.createTemplate = createEvent(this, "createTemplate", 7);
-    this.createDocument = createEvent(this, "createDocument", 7);
-  }
-  handleCreateTemplate() {
-    this.createTemplate.emit();
-  }
-  handleCreateDocument() {
-    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$1 }, "Document"))));
-  }
-  static get style() { return searchQuickFunctionsCss; }
-};
-
 // This file provides a polyfill for managing globals in both NodeJS and browser environments. This is
 // an anti-pattern we'd hoped to avoid, but we have several projects dependending on one common library
 // (this js-sdk) and we want that library to provide a common endpoint to all callers (so authentication
@@ -1921,9 +1842,14 @@ axios_1.default = _default;
 
 var axios = axios_1;
 
+var requestLogger = function (r) {
+    // tslint:disable-next-line
+    console.debug("[JS-SDK] ".concat(r.method.toUpperCase(), " ").concat(r.baseURL).concat(r.url), r.data ? JSON.stringify(r.data) : '');
+    return r;
+};
 /**
- * A VerdocsEndpoint is a specific connection and authorization session for calling the Verdocs APIs. Where the global
- * Transport is generally used to simpliy standard-user operations, Endpoints can be used for isolated session tasks.
+ * VerdocsEndpoint is a class wrapper for a specific connection and authorization context for calling the Verdocs APIs.
+ * Endpoints can be used for isolated session tasks.
  * For instance, ephemeral signing sessions may be created independently of a caller's status as an authenticated user.
  * In that case, an Endpoint can be created and authenticated, used for calls related to signing operations, then
  * discarded once signing is complete.
@@ -1939,31 +1865,19 @@ var axios = axios_1;
  *     .setClientID('1234)
  *     .setTimeout(5000);
  * ```
- *
- * @module
  */
-var requestLogger = function (r) {
-    // tslint:disable-next-line
-    console.debug("[JS-SDK] ".concat(r.method.toUpperCase(), " ").concat(r.baseURL).concat(r.url), r.data ? JSON.stringify(r.data) : '');
-    return r;
-};
 var VerdocsEndpoint = /** @class */ (function () {
     /**
-     * Create a new Endpoint to call Verdocs services.
+     * Create a new VerdocsEndpoint to call Verdocs platform services.
      *
      * ```typescript
      * import {VerdocsEndpoint} from '@verdocs/js-sdk/HTTP';
-     *
-     * console.log('Current timeout', Transport.getEndpoint().defaults.timeout);
+     * const endpoint = new VerdocsEndpoint();
      * ```
      */
-    function VerdocsEndpoint(_a) {
-        var _b = _a === void 0 ? {} : _a, baseURL = _b.baseURL, timeout = _b.timeout;
+    function VerdocsEndpoint() {
         this.requestLoggerId = null;
-        this.api = axios.create({
-            baseURL: baseURL || 'https://api.verdocs.com',
-            timeout: timeout || 6000,
-        });
+        this.api = axios.create({ baseURL: 'https://api.verdocs.com', timeout: 3000 });
     }
     /**
      * Set the timeout for API calls in milliseconds. 2000-4000ms is recommended for most purposes. 3000ms is the default.
@@ -2079,7 +1993,7 @@ var VerdocsEndpoint = /** @class */ (function () {
 // Also see globalThis for comments about why we're doing this in the first place.
 var ENDPOINT_KEY = Symbol.for('verdocs-api-endpoint');
 if (!globalThis_1[ENDPOINT_KEY]) {
-    globalThis_1[ENDPOINT_KEY] = new VerdocsEndpoint({ baseURL: 'https://api.verdocs.com/' });
+    globalThis_1[ENDPOINT_KEY] = new VerdocsEndpoint();
 }
 var globalEndpoint = globalThis_1[ENDPOINT_KEY];
 var activeEndpoint = globalEndpoint;
@@ -2114,216 +2028,6 @@ var setActiveEndpoint = function (e) {
     activeEndpoint = e || globalEndpoint;
 };
 
-/**
- * Verdocs provides a range of search functions to help find and retrieve content. This module provides generic functions intended
- * to locate items across all content types. More specific retrievals may be performed using the various "list" endpoints within
- * each collection (e.g. {@link Documents.Documents.searchDocuments} or {@link Templates.Templates.searchTemplates}).
- *
- * @module
- */
-var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator$2 = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Retrieve recent and saved searches. Note that result counts will be limited to a maximum of 20 entries for each
- * type but this may be expanded in the future. Client UI's should self-limit display counts as needed.
- *
- * ```typescript
- * import {Content} from '@verdocs/js-sdk/Search';
- *
- * const {recent, saved} = await Content.getSearchHistory();
- * ```
- */
-var getSearchHistory = function () { return __awaiter$2(void 0, void 0, void 0, function () {
-    return __generator$2(this, function (_a) {
-        return [2 /*return*/, getEndpoint()
-                .api.get('/search/history')
-                .then(function (r) { return r.data; })];
-    });
-}); };
-
-const SearchIcon$1 = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
-
-const searchRecentCss = "search-recent{font-family:sans-serif;font-family:var(--verdocs-font)}search-recent .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}search-recent .title{font-size:22px;font-weight:700;line-height:30px}search-recent .items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}search-recent .button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}search-recent .button:hover{cursor:pointer}search-recent .button:not(:last-child){margin-bottom:36px}search-recent .button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}search-recent .pill{font-size:14px;display:-ms-inline-flexbox;display:inline-flex;padding:3px 8px;border-radius:6px;margin-right:8px;background-color:#999999;color:#333}search-recent .empty{text-transform:none;line-height:22px;color:#ccc}";
-
-let SearchRecent$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.entrySelected = createEvent(this, "entrySelected", 7);
-    /**
-     * If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries
-     * that cannot currently be increased (only reduced).
-     */
-    this.limit = 10;
-    this.recent = [];
-    this.emptyMessage = 'You do not have any recent searches.';
-  }
-  componentDidLoad() {
-    getSearchHistory()
-      .then(r => {
-      this.recent = r.recent;
-      this.emptyMessage = 'You do not have any recent searches.';
-    })
-      .catch(e => {
-      var _a;
-      console.warn('[Verdocs/search-recent] Error getting reent searches', e);
-      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
-        this.emptyMessage = 'Authenticated required.';
-      }
-    });
-  }
-  handleSelectEntry(entry) {
-    this.entrySelected.emit(entry);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "container" }, h("p", { class: "title" }, "Recent Searches"), h("div", { class: "items" }, this.recent.slice(0, this.limit).map(entry => (h("button", { class: "button", innerHTML: SearchIcon$1, onClick: () => this.handleSelectEntry(entry) }, entry.params.q))), this.recent.length < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
-  }
-  static get style() { return searchRecentCss; }
-};
-
-const SearchIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
-
-const searchSavedCss = "search-saved{font-family:sans-serif;font-family:var(--verdocs-font)}search-saved .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}search-saved .title{font-size:22px;font-weight:700;line-height:30px}search-saved .items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:start;align-items:flex-start;margin-top:20px}search-saved .button{background:transparent;border:none;height:20px;font-size:16px;font-family:sans-serif;color:#ffffff;line-height:26px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}search-saved .button:hover{cursor:pointer}search-saved .button:not(:last-child){margin-bottom:36px}search-saved .button svg{fill:#707ae5;width:28px;height:28px;margin-right:26px}search-saved .empty{text-transform:none;line-height:22px;color:#ccc}";
-
-let SearchSaved$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.entrySelected = createEvent(this, "entrySelected", 7);
-    /**
-     * If set, limits the number of entries that will be shown. Note that there is a server-imposed limit of 20 entries
-     * that cannot currently be increased (only reduced).
-     */
-    this.limit = 10;
-    this.saved = [];
-    this.emptyMessage = 'You do not have any saved searches.';
-  }
-  componentDidLoad() {
-    getSearchHistory()
-      .then(r => {
-      this.saved = r.saved;
-      this.emptyMessage = 'You do not have any saved searches.';
-    })
-      .catch(e => {
-      var _a;
-      console.warn('[Verdocs/search-recent] Error getting saved searches', e);
-      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
-        this.emptyMessage = 'Authenticated required.';
-      }
-    });
-  }
-  handleSelectEntry(entry) {
-    this.entrySelected.emit(entry);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "container" }, h("p", { class: "title" }, "Saved Searches"), h("div", { class: "items" }, this.saved.slice(0, this.limit).map(entry => (h("button", { class: "button", innerHTML: SearchIcon, onClick: () => this.handleSelectEntry(entry) }, entry.name))), this.saved.length < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
-  }
-  static get style() { return searchSavedCss; }
-};
-
-const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
-
-const searchStarredCss = "search-starred{font-family:sans-serif;font-family:var(--verdocs-font)}search-starred .container{display:-ms-flexbox;display:flex;width:240px;color:#ffffff;-ms-flex-direction:column;flex-direction:column;text-transform:uppercase;padding:10px 10px 20px 10px;background-color:var(--verdocs-background-dark)}search-starred .title{font-size:22px;font-weight:700;line-height:30px}search-starred .items{display:-ms-flexbox;display:flex;margin-top:20px;-ms-flex-direction:column;flex-direction:column}search-starred .item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}search-starred .item:hover{cursor:pointer}search-starred .icon{-ms-flex:0 0 22px;flex:0 0 22px;margin-right:14px}search-starred .icon svg{fill:#707ae5;width:22px;height:22px}search-starred .details{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column}search-starred .item-title{font-size:16px;font-weight:400;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}search-starred .info{font-size:14px;font-weight:500;line-height:23px;color:#aeb4bf}search-starred .empty{text-transform:none;line-height:22px;color:#ccc}";
-
-let SearchStarred$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.entrySelected = createEvent(this, "entrySelected", 7);
-    this.emptyMessage = 'You do not have any starred searches.';
-  }
-  componentDidLoad() {
-    // TODO
-    // getStarred()
-    //   .then(r => {
-    //     this.saved = r.saved;
-    //     this.emptyMessage = 'You do not have any saved searches.';
-    //   })
-    //   .catch(e => {
-    //     console.warn('[Verdocs/search-recent] Error getting saved searches', e);
-    //     if (e?.response?.status === 401) {
-    //       this.emptyMessage = 'Authenticated required.';
-    //     }
-    //   });
-  }
-  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() {
-    var _a, _b;
-    return (h(Host, null, h("div", { class: "container" }, h("p", { class: "title" }, "My Starred Items"), h("div", { class: "items" }, (_a = this.options) === null || _a === void 0 ? void 0 :
-      _a.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" }, option.pages ? `${this.computePagesText(option.pages)} ` : '', option.recipients ? this.computeRecipientsText(option.recipients) : ''))))), (((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) || []) < 1 && h("div", { class: "empty" }, this.emptyMessage)))));
-  }
-  static get style() { return searchStarredCss; }
-};
-
-const searchTabsCss = ":host{display:block}";
-
-let SearchTabs$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.selected = 'all';
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-  static get style() { return searchTabsCss; }
-};
-
 /* tslint:disable:no-bitwise */
 var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
 // Regular expression to check formal correctness of base64 encoded strings
@@ -2456,7 +2160,7 @@ var loadSession = function (source) {
 const verdocsAuthCss = "verdocs-auth{font-family:sans-serif;font-family:var(--verdocs-font);background-color:var(--verdocs-secondary-color);padding:40px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#f2f5fa;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
 
 const BASE_URL$1 = 'https://stage-api.verdocs.com/';
-const SOURCE = 'verdocs-stage';
+const SOURCE$1 = 'verdocs-stage';
 let VerdocsAuth$1 = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -2489,13 +2193,13 @@ let VerdocsAuth$1 = class extends HTMLElement$1 {
     this.loginError = null;
   }
   componentWillLoad() {
-    const staging = new VerdocsEndpoint({ baseURL: BASE_URL$1 });
+    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL$1);
     setActiveEndpoint(staging);
     console.log('Set active endpoint', getEndpoint());
   }
   componentDidLoad() {
-    const session = loadSession(SOURCE);
-    console.log('loaded session', session, SOURCE);
+    const session = loadSession(SOURCE$1);
+    console.log('loaded session', session, SOURCE$1);
     if (session !== null) {
       this.isAuthenticated = true;
       this.activeSession = session;
@@ -2515,7 +2219,7 @@ let VerdocsAuth$1 = class extends HTMLElement$1 {
       .then(r => {
       this.loggingIn = false;
       console.log('Login result', r.accessToken);
-      const session = setSession(SOURCE, r.accessToken, true);
+      const session = setSession(SOURCE$1, r.accessToken, true);
       this.activeSession = session;
       this.isAuthenticated = true;
       console.log('set session', session);
@@ -8022,6 +7726,31 @@ let VerdocsOrganizationCard$1 = class extends HTMLElement$1 {
   static get style() { return verdocsOrganizationCardCss; }
 };
 
+const TemplateIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><g><path d="M19,5v14H5V5H19 M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3z"/></g><path d="M14,17H7v-2h7V17z M17,13H7v-2h10V13z M17,9H7V7h10V9z"/></g></svg>`;
+
+const DocumentIcon$1 = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
+
+const verdocsQuickFunctionsCss = "verdocs-quick-functions{font-family:sans-serif;font-family:var(--verdocs-font)}verdocs-quick-functions .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:var(--verdocs-background-dark);text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}verdocs-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}verdocs-quick-functions button{width:140px;height:40px;border:none;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;font-size:14px;font-weight:700;line-height:25px;-ms-flex-align:center;align-items:center;margin-bottom:20px;border-radius:5px;text-transform:uppercase;-ms-flex-pack:space-evenly;justify-content:space-evenly;background-color:#50be50}verdocs-quick-functions button svg{fill:#ffffff}";
+
+let VerdocsQuickFunctions$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.createTemplate = createEvent(this, "createTemplate", 7);
+    this.createDocument = createEvent(this, "createDocument", 7);
+  }
+  handleCreateTemplate() {
+    this.createTemplate.emit();
+  }
+  handleCreateDocument() {
+    this.createDocument.emit();
+  }
+  render() {
+    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$1 }, "Document")));
+  }
+  static get style() { return verdocsQuickFunctionsCss; }
+};
+
 const verdocsSearchCss = "verdocs-search{font-family:sans-serif;font-family:var(--verdocs-font);display:-ms-flexbox;display:flex;background-color:var(--verdocs-background-dark)}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
 
 let VerdocsSearch$1 = class extends HTMLElement$1 {
@@ -8030,11 +7759,226 @@ let VerdocsSearch$1 = class extends HTMLElement$1 {
     this.__registerHost();
   }
   render() {
-    return (h("div", { class: "container" }, h("search-box", null), h("div", { class: "boxes" }, h("search-recent", null), h("search-starred", null), h("search-saved", null), h("search-quick-functions", null))));
+    return (h("div", { class: "container" }, h("verdocs-search-box", null), h("div", { class: "boxes" }, 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 style() { return verdocsSearchCss; }
 };
 
+/**
+ * Verdocs provides a range of search functions to help find and retrieve content. This module provides generic functions intended
+ * to locate items across all content types. More specific retrievals may be performed using the various "list" endpoints within
+ * each collection (e.g. {@link Documents.Documents.searchDocuments} or {@link Templates.Templates.searchTemplates}).
+ *
+ * @module
+ */
+var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator$2 = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Retrieve recent and saved searches. Note that result counts will be limited to a maximum of 20 entries for each
+ * type but this may be expanded in the future. Client UI's should self-limit display counts as needed.
+ *
+ * ```typescript
+ * import {Content} from '@verdocs/js-sdk/Search';
+ *
+ * const {recent, saved} = await Content.getSearchHistory();
+ * ```
+ */
+var getSearchHistory = function () { return __awaiter$2(void 0, void 0, void 0, function () {
+    return __generator$2(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.get('/search/history')
+                .then(function (r) { return r.data; })];
+    });
+}); };
+
+var getTemplates = function (params) {
+    return getEndpoint()
+        .api.get('/templates/', { params: params })
+        .then(function (r) { return r.data; });
+};
+
+const DocumentIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>`;
+
+const verdocsSearchActivityCss = "verdocs-search-activity{font-family:sans-serif;font-family:var(--verdocs-font)}verdocs-search-activity .container{display:-ms-flexbox;display:flex;width:240px;color:#ffffff;-ms-flex-direction:column;flex-direction:column;text-transform:uppercase;padding:10px 10px 20px 10px;background-color:var(--verdocs-background-dark)}verdocs-search-activity .title{font-size:22px;font-weight:700;line-height:30px}verdocs-search-activity .items{display:-ms-flexbox;display:flex;margin-top:20px;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item{border:none;display:-ms-flexbox;display:flex;text-align:left;margin-bottom:20px;-ms-flex-direction:row;flex-direction:row;background:transparent}verdocs-search-activity .item:hover{cursor:pointer}verdocs-search-activity .icon{-ms-flex:0 0 22px;flex:0 0 22px;margin-right:14px}verdocs-search-activity .icon svg{fill:#707ae5;width:22px;height:22px}verdocs-search-activity .details{display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column}verdocs-search-activity .item-title{font-size:16px;font-weight:400;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-search-activity .info{font-size:14px;font-weight:500;line-height:23px;color:#aeb4bf}verdocs-search-activity .empty{text-transform:none;line-height:22px;color:#ccc}";
+
+const SOURCE = 'verdocs-stage';
+let VerdocsSearchActivity$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.entrySelected = createEvent(this, "entrySelected", 7);
+    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 style() { return verdocsSearchActivityCss; }
+};
+
+const SearchIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4809 20.7176L17.9111 15.2536C19.0961 13.6368 19.727 11.6926 19.7128 9.70131C19.7201 7.53345 18.9846 5.42606 17.6244 3.71753C16.2642 2.009 14.3581 0.798456 12.2123 0.280282C10.0665 -0.237892 7.80552 -0.0336342 5.79227 0.86026C3.77902 1.75415 2.13038 3.28582 1.1111 5.20931C0.0918114 7.1328 -0.238985 9.33652 0.171813 11.4666C0.582612 13.5967 1.71117 15.5296 3.37628 16.9548C5.0414 18.3801 7.14646 19.2151 9.35344 19.3257C11.5604 19.4364 13.7413 18.8162 15.5458 17.5649L21.1372 23.05L21.1563 23.0663C21.4841 23.3487 21.9039 23.507 22.3401 23.5128C22.7823 23.5125 23.2063 23.3402 23.5191 23.0337V23.0337C23.6749 22.8812 23.7979 22.6995 23.8804 22.4993C23.963 22.2991 24.0036 22.0847 23.9997 21.8688C23.9959 21.6529 23.9477 21.44 23.858 21.2428C23.7683 21.0456 23.639 20.8682 23.4778 20.7212L23.4809 20.7176ZM14.5167 14.1975C13.4564 15.2349 12.0623 15.8797 10.5719 16.022C9.08145 16.1644 7.58681 15.7955 6.34249 14.9781C5.09816 14.1608 4.18109 12.9456 3.74751 11.5395C3.31393 10.1334 3.39064 8.6233 3.96455 7.26643C4.53846 5.90955 5.57409 4.7898 6.89507 4.09787C8.21606 3.40594 9.74071 3.18461 11.2093 3.4716C12.678 3.75858 13.9998 4.53612 14.9497 5.6718C15.8996 6.80748 16.4188 8.23105 16.4189 9.7001C16.4196 10.5357 16.2519 11.3632 15.9254 12.135C15.599 12.9069 15.1202 13.6078 14.5167 14.1975V14.1975Z" fill="white"/>
+</svg>
+`;
+
+const CloseIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0739 11.7565L19.7127 6.23228C20.0875 5.85692 20.0875 5.25309 19.7127 4.87773L19.0213 4.20046C18.6382 3.82511 18.0219 3.82511 17.6387 4.20046L12 9.72472L6.36127 4.20046C5.97814 3.82511 5.36179 3.82511 4.97866 4.20046L4.28735 4.87773C3.90422 5.25309 3.90422 5.85692 4.28735 6.23228L9.92608 11.7565L4.28735 17.2808C3.90422 17.6561 3.90422 18.26 4.28735 18.6353L4.97866 19.3126C5.36179 19.688 5.97814 19.688 6.36127 19.3126L12 13.7883L17.6387 19.3126C18.0219 19.688 18.6382 19.688 19.0213 19.3126L19.7127 18.6353C20.0958 18.26 20.0958 17.6561 19.7127 17.2808L14.0739 11.7565Z" fill="white"/>
+</svg>
+`;
+
+const verdocsSearchBoxCss = "verdocs-search-box{font-family:sans-serif;font-family:var(--verdocs-font)}verdocs-search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:var(--verdocs-container-border-color)}verdocs-search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}verdocs-search-box form input:focus{outline:none}verdocs-search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#50be80;text-transform:uppercase;color:#fff}verdocs-search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}verdocs-search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}verdocs-search-box form svg{width:12px;height:12px;margin-right:6px}verdocs-search-box ::-webkit-input-placeholder{color:#aeb4bf}verdocs-search-box ::-moz-placeholder{color:#aeb4bf}verdocs-search-box :-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::placeholder{color:#aeb4bf}";
+
+let VerdocsSearchBox$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.searchClicked = createEvent(this, "searchClicked", 7);
+    this.typeChanged = createEvent(this, "typeChanged", 7);
+    this.queryChanged = createEvent(this, "queryChanged", 7);
+    /**
+     * The placeholder to display in the input field.
+     */
+    this.placeholder = 'search documents, templates, people...';
+    /**
+     * If set to a value other than 'all', a removeable filter indicator will be displayed.
+     */
+    this.type = 'all';
+    /**
+     * The text search string entered by the user.
+     */
+    this.query = '';
+  }
+  handleSearch(e) {
+    this.searchClicked.emit({ type: this.type, query: this.query });
+    e.preventDefault();
+    return false;
+  }
+  handleChange(e) {
+    this.queryChanged.emit(e.target.value);
+  }
+  handleClearFilter() {
+    this.typeChanged.emit('all');
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Enter') {
+      this.searchClicked.emit({ type: this.type, query: this.query });
+    }
+  }
+  render() {
+    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 style() { return verdocsSearchBoxCss; }
+};
+
+const verdocsSearchTabsCss = "verdocs-search-tabs{display:block}";
+
+let VerdocsSearchTabs$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selected = 'all';
+  }
+  render() {
+    return h("div", null, "\u00A0");
+  }
+  static get style() { return verdocsSearchTabsCss; }
+};
+
 /**
  * Given a `rgba(r,g,b,a)` string value, returns the hex equivalent, dropping the alpha channel.
  */
@@ -10218,7 +10162,7 @@ let VerdocsSign$1 = class extends HTMLElement$1 {
     this.focusedField = '';
   }
   componentWillLoad() {
-    const endpoint = new VerdocsEndpoint({ baseURL: BASE_URL });
+    const endpoint = new VerdocsEndpoint().setBaseURL(BASE_URL);
     setActiveEndpoint(endpoint);
   }
   async componentDidLoad() {
@@ -10977,8 +10921,8 @@ let VerdocsUploadDialog$1 = class extends HTMLElement$1 {
 const _nodeResolve_empty = {};
 
 const _nodeResolve_empty$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': _nodeResolve_empty
+    __proto__: null,
+    'default': _nodeResolve_empty
 });
 
 const require$$5 = /*@__PURE__*/getAugmentedNamespace(_nodeResolve_empty$1);
@@ -27062,12 +27006,6 @@ let VerdocsView$1 = class extends HTMLElement$1 {
   static get style() { return verdocsViewCss; }
 };
 
-const SearchBox = /*@__PURE__*/proxyCustomElement(SearchBox$1, [0,"search-box",{"placeholder":[1],"type":[1],"query":[1]}]);
-const SearchQuickFunctions = /*@__PURE__*/proxyCustomElement(SearchQuickFunctions$1, [0,"search-quick-functions"]);
-const SearchRecent = /*@__PURE__*/proxyCustomElement(SearchRecent$1, [0,"search-recent",{"limit":[2],"recent":[32],"emptyMessage":[32]}]);
-const SearchSaved = /*@__PURE__*/proxyCustomElement(SearchSaved$1, [0,"search-saved",{"limit":[2],"saved":[32],"emptyMessage":[32]}]);
-const SearchStarred = /*@__PURE__*/proxyCustomElement(SearchStarred$1, [0,"search-starred",{"options":[8],"emptyMessage":[32]}]);
-const SearchTabs = /*@__PURE__*/proxyCustomElement(SearchTabs$1, [4,"search-tabs",{"selected":[32]}]);
 const VerdocsAuth = /*@__PURE__*/proxyCustomElement(VerdocsAuth$1, [0,"verdocs-auth",{"visible":[4],"logo":[1],"debug":[4],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]);
 const VerdocsButton = /*@__PURE__*/proxyCustomElement(VerdocsButton$1, [0,"verdocs-button",{"label":[1],"type":[1],"variant":[1],"disabled":[4]}]);
 const VerdocsDocumentStatus = /*@__PURE__*/proxyCustomElement(VerdocsDocumentStatus$1, [0,"verdocs-document-status",{"status":[1]}]);
@@ -27086,7 +27024,11 @@ const VerdocsInitialDialog = /*@__PURE__*/proxyCustomElement(VerdocsInitialDialo
 const VerdocsLoader = /*@__PURE__*/proxyCustomElement(VerdocsLoader$1, [0,"verdocs-loader"]);
 const VerdocsOkDialog = /*@__PURE__*/proxyCustomElement(VerdocsOkDialog$1, [0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"open":[4],"cancel":[4]}]);
 const VerdocsOrganizationCard = /*@__PURE__*/proxyCustomElement(VerdocsOrganizationCard$1, [0,"verdocs-organization-card",{"organization":[16]}]);
+const VerdocsQuickFunctions = /*@__PURE__*/proxyCustomElement(VerdocsQuickFunctions$1, [0,"verdocs-quick-functions"]);
 const VerdocsSearch = /*@__PURE__*/proxyCustomElement(VerdocsSearch$1, [0,"verdocs-search"]);
+const VerdocsSearchActivity = /*@__PURE__*/proxyCustomElement(VerdocsSearchActivity$1, [0,"verdocs-search-activity",{"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}]);
+const VerdocsSearchBox = /*@__PURE__*/proxyCustomElement(VerdocsSearchBox$1, [0,"verdocs-search-box",{"placeholder":[1],"type":[1],"query":[1]}]);
+const VerdocsSearchTabs = /*@__PURE__*/proxyCustomElement(VerdocsSearchTabs$1, [0,"verdocs-search-tabs",{"selected":[32]}]);
 const VerdocsSign = /*@__PURE__*/proxyCustomElement(VerdocsSign$1, [0,"verdocs-sign",{"documentid":[1],"roleid":[1],"invitecode":[1],"endpoint":[32],"recipient":[32],"signerToken":[32],"pdfUrl":[32],"recipientIndex":[32],"document":[32],"fields":[32],"pdfPageInfo":[32],"hasSignature":[32],"nextButtonLabel":[32],"focusedField":[32]}]);
 const VerdocsSignatureDialog = /*@__PURE__*/proxyCustomElement(VerdocsSignatureDialog$1, [0,"verdocs-signature-dialog",{"fullname":[1],"open":[4],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]);
 const VerdocsTemplateCard = /*@__PURE__*/proxyCustomElement(VerdocsTemplateCard$1, [0,"verdocs-template-card",{"template":[16]}]);
@@ -27098,13 +27040,7 @@ const VerdocsView = /*@__PURE__*/proxyCustomElement(VerdocsView$1, [0,"verdocs-v
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      SearchBox,
-  SearchQuickFunctions,
-  SearchRecent,
-  SearchSaved,
-  SearchStarred,
-  SearchTabs,
-  VerdocsAuth,
+      VerdocsAuth,
   VerdocsButton,
   VerdocsDocumentStatus,
   VerdocsDropdown,
@@ -27122,7 +27058,11 @@ const defineCustomElements = (opts) => {
   VerdocsLoader,
   VerdocsOkDialog,
   VerdocsOrganizationCard,
+  VerdocsQuickFunctions,
   VerdocsSearch,
+  VerdocsSearchActivity,
+  VerdocsSearchBox,
+  VerdocsSearchTabs,
   VerdocsSign,
   VerdocsSignatureDialog,
   VerdocsTemplateCard,
@@ -27139,4 +27079,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { SearchBox, SearchQuickFunctions, SearchRecent, SearchSaved, SearchStarred, SearchTabs, VerdocsAuth, VerdocsButton, VerdocsDocumentStatus, VerdocsDropdown, VerdocsFieldAttachment, VerdocsFieldCheckbox, VerdocsFieldDate, VerdocsFieldDropdown, VerdocsFieldInitial, VerdocsFieldPayment, VerdocsFieldRadioButton, VerdocsFieldSignature, VerdocsFieldTextarea, VerdocsFieldTextbox, VerdocsInitialDialog, VerdocsLoader, VerdocsOkDialog, VerdocsOrganizationCard, VerdocsSearch, VerdocsSign, VerdocsSignatureDialog, VerdocsTemplateCard, VerdocsTemplateTags, VerdocsTextInput, VerdocsToggle, VerdocsUploadDialog, VerdocsView, defineCustomElements };
+export { VerdocsAuth, VerdocsButton, VerdocsDocumentStatus, VerdocsDropdown, VerdocsFieldAttachment, VerdocsFieldCheckbox, VerdocsFieldDate, VerdocsFieldDropdown, VerdocsFieldInitial, VerdocsFieldPayment, VerdocsFieldRadioButton, VerdocsFieldSignature, VerdocsFieldTextarea, VerdocsFieldTextbox, VerdocsInitialDialog, VerdocsLoader, VerdocsOkDialog, VerdocsOrganizationCard, VerdocsQuickFunctions, VerdocsSearch, VerdocsSearchActivity, VerdocsSearchBox, VerdocsSearchTabs, VerdocsSign, VerdocsSignatureDialog, VerdocsTemplateCard, VerdocsTemplateTags, VerdocsTextInput, VerdocsToggle, VerdocsUploadDialog, VerdocsView, defineCustomElements };