@verdocs/web-sdk 1.0.23 → 1.2.0

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

@@ -1,10 +1,13 @@
-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';
 /**
  * Displays a customizable input box for search queries.
+ *
+ * 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.
@@ -36,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',
+  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 Default = ({ 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,3 @@
+verdocs-search-tabs {
+  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}

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
  */
 export default {
   title: 'Elements/Search/Tabs',
-  component: 'search-tabs',
+  component: 'verdocs-search-tabs',
   args: {},
   argTypes: {},
 };
@@ -15,4 +15,4 @@ const listener = {
   },
   capture: true,
 };
-export const Default = ({ 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

@@ -0,0 +1,60 @@
+verdocs-auth {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  background-color: var(--verdocs-secondary-color);
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+verdocs-auth .login-form,
+verdocs-auth .signup-form {
+  background: #f2f5fa;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  flex-direction: column;
+  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;
+  flex-direction: row;
+  justify-content: center;
+}
+verdocs-auth form {
+  width: 100%;
+}
+verdocs-auth verdocs-text-input {
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,241 @@
+import { Auth } from '@verdocs/js-sdk/Users';
+import { Transport, VerdocsEndpoint } from '@verdocs/js-sdk/HTTP';
+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';
+/**
+ * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that
+ * occur during the process (especially successful completion). The success callback will be fired immediately if the
+ * user is already authenticated with a valid session, so this component may not always display visibly. To simplify
+ * some types of authentication flows, a visibility flag can force this component to never display.
+ *
+ * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide
+ * container to allow sufficient space for the required forms.
+ *
+ * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after
+ * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or
+ * cancels) authentication steps.
+ *
+ * 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.
+ *
+ * ```typescript
+ * interface IAuthStatus {
+ *   // If true, the user is authenticated with a valid session
+ *   authenticated: boolean;
+ *
+ *   // Details for the user's session
+ *   session: IActiveSession | null;
+ * }
+ * ```
+ */
+export class VerdocsAuth {
+  constructor() {
+    /**
+     * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display
+     * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may
+     * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.
+     */
+    this.visible = true;
+    /**
+     * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to
+     * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be
+     * in SVG format for best results.
+     */
+    this.logo = 'https://verdocs.com/assets/blue-logo.svg';
+    /**
+     * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary
+     * if the user's session details will be displayed instead. This may be useful while debugging authentication
+     * flows in new applications.
+     */
+    this.debug = false;
+    this.isAuthenticated = false;
+    this.displayMode = 'login';
+    this.username = '';
+    this.password = '';
+    this.loggingIn = false;
+    this.activeSession = null;
+    this.loginError = null;
+  }
+  componentWillLoad() {
+    const staging = new VerdocsEndpoint().setBaseURL(BASE_URL);
+    Transport.setActiveEndpoint(staging);
+    console.log('Set active endpoint', Transport.getEndpoint());
+  }
+  componentDidLoad() {
+    const session = loadSession(SOURCE);
+    console.log('loaded session', session, SOURCE);
+    if (session !== null) {
+      this.isAuthenticated = true;
+      this.activeSession = session;
+      this.authenticated.emit({ authenticated: true, session });
+    }
+    else {
+      this.authenticated.emit({ authenticated: false, session: null });
+    }
+  }
+  // handleSelectOption(option: IMenuOption) {
+  //   this.isAuthenticated = false;
+  //   this.authenticated.emit(option);
+  // }
+  handleLogin() {
+    this.loggingIn = true;
+    Auth.authenticateUser({ username: this.username, password: this.password })
+      .then(r => {
+      this.loggingIn = false;
+      console.log('Login result', r.accessToken);
+      const session = setSession(SOURCE, r.accessToken, true);
+      this.activeSession = session;
+      this.isAuthenticated = true;
+      console.log('set session', session);
+      this.authenticated.emit({ authenticated: true, session });
+    })
+      .catch(e => {
+      var _a;
+      console.log('Login error', e.response, JSON.stringify(e));
+      this.loggingIn = false;
+      this.activeSession = null;
+      this.authenticated.emit({ authenticated: false, session: null });
+      if (((_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.status) === 403) {
+        this.loginError = 'Please check your username and password and try again.';
+      }
+    });
+  }
+  handleLogout() {
+    // endSession(SOURCE);
+    this.isAuthenticated = false;
+    this.authenticated.emit({ authenticated: false, session: null });
+  }
+  handleClearError() {
+    this.loginError = null;
+  }
+  render() {
+    if (!this.visible) {
+      return h("div", { style: { display: 'none' } }, "Verdocs Auth Placeholder");
+    }
+    if (this.isAuthenticated) {
+      if (this.debug) {
+        return (h("div", { class: "status-result debug" },
+          h("verdocs-button", { label: "Logout", disabled: this.loggingIn, onPress: () => this.handleLogout() })));
+      }
+      return h("div", { class: "status-result" }, "Authenticated");
+    }
+    if (this.displayMode === 'signup') {
+      return (h("div", { class: "signup-form" },
+        h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }),
+        h("h3", null, "Sign up for an account"),
+        h("h4", null,
+          "Already have an account?",
+          h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })),
+        h("form", { onSubmit: () => this.handleLogin() },
+          h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }),
+          h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }),
+          h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+    }
+    return (h("div", { class: "login-form" },
+      h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }),
+      h("h3", null, "Log in to your account"),
+      h("h4", null,
+        "Don't have an account?",
+        h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })),
+      h("form", { onSubmit: () => this.handleLogin() },
+        h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onFieldInput: e => (this.username = e.detail), disabled: this.loggingIn }),
+        h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onFieldInput: e => (this.password = e.detail), disabled: this.loggingIn }),
+        h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }),
+        h("verdocs-button", { label: "Login", disabled: this.loggingIn, onPress: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })),
+      this.loginError ? h("verdocs-ok-dialog", { open: true, heading: "Login Error", message: this.loginError, onClosed: () => this.handleClearError() }) : h("div", null)));
+  }
+  static get is() { return "verdocs-auth"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-auth.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-auth.css"]
+  }; }
+  static get properties() { return {
+    "visible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\nlogin / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\nuse this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK."
+      },
+      "attribute": "visible",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "logo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\noverride its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\nin SVG format for best results."
+      },
+      "attribute": "logo",
+      "reflect": false,
+      "defaultValue": "'https://verdocs.com/assets/blue-logo.svg'"
+    },
+    "debug": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\nif the user's session details will be displayed instead. This may be useful while debugging authentication\nflows in new applications."
+      },
+      "attribute": "debug",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isAuthenticated": {},
+    "displayMode": {},
+    "username": {},
+    "password": {},
+    "loggingIn": {},
+    "activeSession": {},
+    "loginError": {}
+  }; }
+  static get events() { return [{
+      "method": "authenticated",
+      "name": "authenticated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when session authentication process has completed. Check the event contents for completion status."
+      },
+      "complexType": {
+        "original": "IAuthStatus",
+        "resolved": "IAuthStatus",
+        "references": {
+          "IAuthStatus": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Embeds/Auth',
+  component: 'verdocs-auth',
+  args: {
+    debug: true,
+    visible: true,
+    logo: 'https://verdocs.com/assets/blue-logo.svg',
+  },
+  argTypes: {
+    authenticated: {
+      action: 'authenticated',
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+export const Auth = ({ visible, logo, debug, authenticated }) => html `<verdocs-auth .visible=${visible} .logo=${logo} .debug=${debug} @authenticated=${authenticated} />`;

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

@@ -0,0 +1,25 @@
+verdocs-search {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  display: flex;
+  background-color: var(--verdocs-background-dark);
+}
+verdocs-search search-box {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 10px;
+}
+verdocs-search .boxes {
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
+  margin: 20px 0;
+}
+verdocs-search search-recent,
+verdocs-search search-saved,
+verdocs-search search-quick-functions,
+verdocs-search search-starred {
+  display: flex;
+  margin: 0 20px 20px 0;
+}

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

@@ -0,0 +1,19 @@
+import { Component, h } from '@stencil/core';
+export class VerdocsSearch {
+  render() {
+    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 is() { return "verdocs-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-search.css"]
+  }; }
+}

package/dist/collection/components/embeds/{search-embed/search-embed.stories.js → verdocs-search/verdocs-search.stories.js}

@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 export default {
   title: 'Embeds/Search',
-  component: 'search-embed',
+  component: 'verdocs-search',
   args: {},
   argTypes: {},
 };
@@ -12,4 +12,4 @@ const listener = {
   },
   capture: true,
 };
-export const Default = ({ options }) => html `<search-embed .options=${options} @optionSelected=${listener} tall />`;
+export const Search = ({ options }) => html `<verdocs-search .options=${options} @optionSelected=${listener} tall />`;

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

@@ -0,0 +1,125 @@
+verdocs-sign {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 600px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+verdocs-sign.storybook {
+  max-height: 600px;
+}
+verdocs-sign div {
+  box-sizing: border-box;
+}
+verdocs-sign .header {
+  flex: 0 0 115px;
+  z-index: 1000;
+  background-color: #33354c;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);
+  transition: all 0.25s;
+}
+verdocs-sign .intro {
+  background-color: #ffffff;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  max-width: 1028px;
+  color: rgba(0, 0, 0, 0.87);
+}
+verdocs-sign .toolbar {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 20px;
+  max-width: 1028px;
+  position: relative;
+}
+verdocs-sign .tools {
+  width: 100%;
+  color: #fff;
+  height: 56px;
+  padding: 4px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  flex-direction: row;
+  background-color: #33354c;
+}
+verdocs-sign .cover {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+}
+verdocs-sign .document {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow-y: scroll;
+}
+verdocs-sign .agree-checkbox {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  background: #ffffff;
+  position: relative;
+  margin: 0 10px 0 30px;
+}
+verdocs-sign .agree-checkbox label {
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  position: absolute;
+  background: #33354c;
+  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);
+}
+verdocs-sign .agree-checkbox label:after {
+  top: 2px;
+  left: 3px;
+  width: 8px;
+  opacity: 0;
+  height: 5px;
+  content: "";
+  position: absolute;
+  background: transparent;
+  filter: alpha(opacity=0);
+  transform: rotate(-45deg);
+  border: 2px solid #fcfff4;
+  border-top: none;
+  border-right: none;
+}
+verdocs-sign .agree-checkbox label:hover::after {
+  filter: alpha(opacity=30);
+  opacity: 0.3;
+}
+verdocs-sign .agree-checkbox input[type=checkbox]:checked + label:after {
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+verdocs-sign.agreed .intro {
+  display: none;
+}
+verdocs-sign.agreed .header {
+  flex: 0 0 56px;
+}
+verdocs-sign.agreed .agree-checkbox {
+  background: #ccc;
+}
+verdocs-sign.agreed .agree-checkbox label {
+  cursor: default;
+}
+verdocs-sign .page-controls {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 500;
+}