@verdocs/web-sdk 1.0.22 → 1.1.0

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

@@ -0,0 +1,32 @@
+verdocs-field-textbox {
+  /* Fallback font for old browsers */
+  font-family: sans-serif;
+  font-family: var(--verdocs-font);
+  width: 150px;
+  height: 15px;
+  display: block;
+  font-size: 11px;
+  position: relative;
+  background-color: transparent;
+  transform-origin: bottom left;
+}
+verdocs-field-textbox input {
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: 500;
+  transform-origin: 0 0;
+  height: 100%;
+  width: 100%;
+  background: none;
+  font-size: 11px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+verdocs-field-textbox input.hide {
+  display: none;
+}
+verdocs-field-textbox.required {
+  border: 1px solid var(--verdocs-required-color);
+}
+verdocs-field-textbox.focused {
+  animation: verdocs-field-pulse 0.75s 2;
+}

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

@@ -0,0 +1,233 @@
+import { Component, h, Host, Prop, Event, State, Method } from '@stencil/core';
+/**
+ * Display a text input field.
+ */
+export class VerdocsFieldTextbox {
+  constructor() {
+    /**
+     * A placeholder to assist the user in completing the field.
+     */
+    this.placeholder = '';
+    /**
+     * Sets the tabIndex of the input element.
+     */
+    this.order = 1;
+    /**
+     * Sets the value of the input element.
+     */
+    this.value = '';
+    /**
+     * If true, the field will be marked required.
+     */
+    this.required = false;
+    /**
+     * Sets the disabled attribute of the input element.
+     */
+    this.disabled = false;
+    this.focused = false;
+  }
+  async focusField() {
+    this.focused = true;
+    this.el.focus();
+    this.fieldFocus.emit(true);
+  }
+  handleBlur() {
+    this.focused = false;
+    this.fieldBlur.emit(true);
+  }
+  handleFocus() {
+    this.focused = true;
+    this.fieldFocus.emit(true);
+  }
+  handleChange(e) {
+    this.fieldChange.emit(e.target.value);
+  }
+  handleInput(e) {
+    this.fieldInput.emit(e.target.value);
+  }
+  render() {
+    return (h(Host, { class: { focused: this.focused, required: this.required } },
+      h("input", { type: "text", placeholder: this.placeholder || '', tabIndex: this.order, value: this.value, disabled: this.disabled, required: this.required, ref: el => (this.el = el), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), onChange: e => this.handleChange(e), onInput: e => this.handleInput(e) })));
+  }
+  static get is() { return "verdocs-field-textbox"; }
+  static get originalStyleUrls() { return {
+    "$": ["verdocs-field-textbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["verdocs-field-textbox.css"]
+  }; }
+  static get properties() { return {
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A placeholder to assist the user in completing the field."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "order": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the tabIndex of the input element."
+      },
+      "attribute": "order",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the value of the input element."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If true, the field will be marked required."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the disabled attribute of the input element."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "focused": {}
+  }; }
+  static get events() { return [{
+      "method": "fieldFocus",
+      "name": "fieldFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field loses focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "fieldBlur",
+      "name": "fieldBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field gains focus."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "fieldChange",
+      "name": "fieldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "fieldInput",
+      "name": "fieldInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired on every character entered into / deleted from the field."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "focusField": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

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

package/dist/collection/components/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 { Component, Prop, State, h, Event } from '@stencil/core';
+import { loadSession, setSession } from '@verdocs/js-sdk/Users/Auth';
+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({ baseURL: 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("search-box", null),
+      h("div", { class: "boxes" },
+        h("search-recent", null),
+        h("search-starred", null),
+        h("search-saved", null),
+        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 />`;