@verdocs/web-sdk 1.5.4 → 1.6.1

package/dist/components/verdocs-auth.js

@@ -28,10 +28,6 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.authenticated = createEvent(this, "authenticated", 7);
-    /**
-     * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
-     */
-    this.endpoint = VerdocsEndpoint.getDefault();
     /**
      * 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
@@ -57,13 +53,24 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.loggingIn = false;
     this.activeSession = null;
     this.loginError = null;
+    this._endpoint = VerdocsEndpoint.getDefault();
+  }
+  componentWillLoad() {
+    if (this.endpoint) {
+      console.log('Using user-supplied endpoint', this.endpoint);
+      this._endpoint = this.endpoint;
+    }
+    else {
+      console.log('Using default endpoint', this._endpoint);
+    }
   }
   componentDidLoad() {
-    this.endpoint.loadSession();
-    if (this.endpoint.session !== null) {
+    console.log('loaded', this);
+    this._endpoint.loadSession();
+    if (this._endpoint.session) {
       this.isAuthenticated = true;
-      this.activeSession = this.endpoint.session;
-      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
+      this.activeSession = this._endpoint.session;
+      this.authenticated.emit({ authenticated: true, session: this._endpoint.session });
     }
     else {
       this.authenticated.emit({ authenticated: false, session: null });
@@ -75,13 +82,13 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   // }
   handleLogin() {
     this.loggingIn = true;
-    authenticateUser(this.endpoint, { username: this.username, password: this.password })
+    authenticateUser(this._endpoint, { username: this.username, password: this.password })
       .then(r => {
       this.loggingIn = false;
-      this.endpoint.setToken(r.accessToken);
-      this.activeSession = this.endpoint.session;
+      this._endpoint.setToken(r.accessToken);
+      this.activeSession = this._endpoint.session;
       this.isAuthenticated = true;
-      this.authenticated.emit({ authenticated: true, session: this.endpoint.session });
+      this.authenticated.emit({ authenticated: true, session: this._endpoint.session });
     })
       .catch(e => {
       var _a;
@@ -95,7 +102,7 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   handleLogout() {
-    this.endpoint.clearSession();
+    this._endpoint.clearSession();
     this.isAuthenticated = false;
     this.authenticated.emit({ authenticated: false, session: null });
   }
@@ -129,7 +136,8 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "password": [32],
     "loggingIn": [32],
     "activeSession": [32],
-    "loginError": [32]
+    "loginError": [32],
+    "_endpoint": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -165,3 +173,5 @@ const VerdocsAuth = VerdocsAuth$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsAuth, defineCustomElement };
+
+//# sourceMappingURL=verdocs-auth.js.map

package/dist/components/verdocs-auth.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-auth.js","mappings":"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","names":["VerdocsAuth","Auth.authenticateUser"],"sources":["./node_modules/@verdocs/js-sdk/Users/Auth.js","./src/components/embeds/verdocs-auth/verdocs-auth.scss?tag=verdocs-auth","./src/components/embeds/verdocs-auth/verdocs-auth.tsx"],"sourcesContent":["/**\n * Authenticate to Verdocs via user/password authentication\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.authenticateUser({ username: 'test@test.com', password: 'PASSWORD' });\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var authenticateUser = function (endpoint, params) {\n    return endpoint.api //\n        .post('/authentication/login', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * Authenticate to Verdocs via client ID / Secret authentication. **NOTE: This is only suitable for\n * NodeJS server-side applications. Never expose your Client Secret in a Web or Mobile app!** Also note\n * that access tokens may be cached by server-side apps (and this is recommended) but do expire after 2\n * hours. This expiration may change based on future security needs. Application developers are encouraged\n * to check the `exp` expiration field in the response accessToken and renew tokens after they expire.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.authenticateApp({ client_id: 'CLIENTID', client_secret: 'SECRET' });\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var authenticateApp = function (endpoint, params) {\n    return endpoint.api //\n        .post('/authentication/login_client', {}, { headers: params })\n        .then(function (r) { return r.data; });\n};\n/**\n * Validate a token. Only Verdocs tokens will be accepted. Most applications can decode tokens locally,\n * because tokens will be validated when API calls are made anyway. However, high-security applications\n * may use this endpoint to check if a token has been revoked.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {valid} = await Auth.validateToken({ token });\n * if (!valid) {\n *   window.alert('Session invalid or expired. Please re-authenticate.');\n * }\n * ```\n */\nexport var validateToken = function (endpoint, params) {\n    return endpoint.api //\n        .post('/token/isValid', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * If called before the session expires, this will refresh the caller's session and tokens.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n * import {Transport} from '@verdocs/js-sdk/HTTP';\n *\n * const {accessToken} = await Auth.refreshTokens();\n * Transport.setAuthToken(accessToken);\n * ```\n */\nexport var refreshTokens = function (endpoint) {\n    return endpoint.api //\n        .get('/token')\n        .then(function (r) { return r.data; });\n};\n/**\n * Update the caller's password. To help prevent CSRF attack vectors, the user's old password and email address are required.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {status, message} = await Auth.updatePassword({ email, oldPassword, newPassword });\n * if (status !== 'OK') {\n *   window.alert(`Password reset error: ${message}`);\n * }\n * ```\n */\nexport var updatePassword = function (endpoint, params) {\n    return endpoint.api //\n        .put('/user/update_password', params)\n        .then(function (r) { return r.data; });\n};\n/**\n * Update the caller's email address.\n *\n * ```typescript\n * import {Auth} from '@verdocs/js-sdk/Auth';\n *\n * const {profiles} = await Auth.updateEmail({ email: newEmail });\n * ```\n */\nexport var updateEmail = function (endpoint, params) {\n    return endpoint.api //\n        .put('/user/update_email', params)\n        .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-auth {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  .login-form,\n  .signup-form {\n    background: $verdocs-grey-4;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    display: flex;\n    padding: 20px;\n    width: 300px;\n    max-width: 100%;\n  }\n\n  .logo {\n    margin: 20px 0 30px;\n    width: 128px;\n    max-width: 100%;\n  }\n\n  h3 {\n    text-align: center;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 1.75;\n    margin: 0;\n  }\n\n  h4 {\n    text-align: center;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 1.43;\n    margin: 0;\n  }\n\n  .status-result {\n    display: none;\n\n    &.debug {\n      white-space: pre-wrap;\n      font-size: 14px;\n      background: #fff;\n      padding: 10px;\n      display: block;\n      flex-direction: row;\n      justify-content: center;\n    }\n  }\n\n  form {\n    width: 100%;\n  }\n\n  verdocs-text-input {\n    margin-bottom: 10px;\n  }\n}\n","import {Auth} from '@verdocs/js-sdk/Users';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {VerdocsEndpoint, TSession} from '@verdocs/js-sdk';\n\nexport interface IAuthStatus {\n  authenticated: boolean;\n  session: TSession;\n}\n\n/**\n * Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\n * occur during the process (especially successful completion). The success callback will be fired immediately if the\n * user is already authenticated with a valid session, so this component may not always display visibly.\n *\n * To simplify some types of authentication flows, a visibility flag can force this component to never display. This\n * allows you to susbcribe to notifications from the\n *\n * This embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\n * container to allow sufficient space for the required forms.\n *\n * As noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\n * the widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\n * cancels) authentication steps.\n *\n * Authentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\n * embed. This Element will reuse the same session produced by logging in via that Embed.\n *\n * ```typescript\n * interface IAuthStatus {\n *   // If true, the user is authenticated with a valid session\n *   authenticated: boolean;\n *\n *   // Details for the user's session\n *   session: IActiveSession | null;\n * }\n * ```\n */\n@Component({\n  tag: 'verdocs-auth',\n  styleUrl: 'verdocs-auth.scss',\n})\nexport class VerdocsAuth {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint;\n\n  /**\n   * Normally, if the user has a valid session, this embed will be invisible, otherwise it will display\n   * login / signup forms. If this is set to false, this embed will be invisible in both cases. Apps may\n   * use this to verify if a user has a valid session without needing a separate call to Verdocs JS SDK.\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * By default, a Verdocs logo will be displayed above the login/signup forms. This may be used to\n   * override its source. (Alternatively, you may simply hide it via CSS overrides.) Logos should be\n   * in SVG format for best results.\n   */\n  @Prop() logo: string = 'https://verdocs.com/assets/blue-logo.svg';\n\n  /**\n   * If the user is authenticated, this embed will normally render invisibly. If debug is set true, a summary\n   * if the user's session details will be displayed instead. This may be useful while debugging authentication\n   * flows in new applications.\n   */\n  @Prop() debug: boolean = false;\n\n  /**\n   * Event fired when session authentication process has completed. Check the event contents for completion status.\n   */\n  @Event({composed: true}) authenticated: EventEmitter<IAuthStatus>;\n\n  @State() isAuthenticated: boolean = false;\n  @State() displayMode: string = 'login';\n  @State() username: string = '';\n  @State() password: string = '';\n  @State() loggingIn: boolean = false;\n  @State() activeSession: TSession = null;\n  @State() loginError: string | null = null;\n  @State() _endpoint = VerdocsEndpoint.getDefault();\n\n  componentWillLoad() {\n    if (this.endpoint) {\n      console.log('Using user-supplied endpoint', this.endpoint);\n      this._endpoint = this.endpoint;\n    } else {\n      console.log('Using default endpoint', this._endpoint);\n    }\n  }\n\n  componentDidLoad() {\n    console.log('loaded', this);\n    this._endpoint.loadSession();\n    if (this._endpoint.session) {\n      this.isAuthenticated = true;\n      this.activeSession = this._endpoint.session;\n      this.authenticated.emit({authenticated: true, session: this._endpoint.session});\n    } else {\n      this.authenticated.emit({authenticated: false, session: null});\n    }\n  }\n\n  // handleSelectOption(option: IMenuOption) {\n  //   this.isAuthenticated = false;\n  //   this.authenticated.emit(option);\n  // }\n\n  handleLogin() {\n    this.loggingIn = true;\n    Auth.authenticateUser(this._endpoint, {username: this.username, password: this.password})\n      .then(r => {\n        this.loggingIn = false;\n        this._endpoint.setToken(r.accessToken);\n        this.activeSession = this._endpoint.session;\n        this.isAuthenticated = true;\n        this.authenticated.emit({authenticated: true, session: this._endpoint.session});\n      })\n      .catch(e => {\n        console.log('[VERDOCS] Login error', e.response, JSON.stringify(e));\n        this.loggingIn = false;\n        this.activeSession = null;\n        this.authenticated.emit({authenticated: false, session: null});\n\n        if (e?.response?.status === 403) {\n          this.loginError = 'Please check your username and password and try again.';\n        }\n      });\n  }\n\n  handleLogout() {\n    this._endpoint.clearSession();\n    this.isAuthenticated = false;\n    this.authenticated.emit({authenticated: false, session: null});\n  }\n\n  handleClearError() {\n    this.loginError = null;\n  }\n\n  render() {\n    if (!this.visible) {\n      return <div style={{display: 'none'}}>Verdocs Auth Placeholder</div>;\n    }\n\n    if (this.isAuthenticated) {\n      if (this.debug) {\n        return (\n          <div class=\"status-result debug\">\n            <verdocs-button label=\"Logout\" disabled={this.loggingIn} onPress={() => this.handleLogout()} />\n          </div>\n        );\n      }\n\n      return <div class=\"status-result\">Authenticated</div>;\n    }\n\n    if (this.displayMode === 'signup') {\n      return (\n        <div class=\"signup-form\">\n          <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n          <h3>Sign up for an account</h3>\n          <h4>\n            Already have an account?\n            <verdocs-button label=\"Log In\" variant=\"text\" onClick={() => (this.displayMode = 'login')} disabled={this.loggingIn} />\n          </h4>\n\n          <form onSubmit={() => this.handleLogin()}>\n            <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onFieldInput={e => (this.username = e.detail)} disabled={this.loggingIn} />\n            <verdocs-text-input\n              label=\"Password\"\n              type=\"password\"\n              autocomplete=\"current-password\"\n              value={this.password}\n              onFieldInput={e => (this.password = e.detail)}\n              disabled={this.loggingIn}\n            />\n\n            <verdocs-button\n              label=\"Signup\"\n              disabled={this.loggingIn}\n              onPress={() => this.handleLogin()}\n              style={{display: 'flex', justifyContent: 'center', margin: '30px auto 0'}}\n            />\n          </form>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"login-form\">\n        <img src={this.logo} alt=\"Verdocs Logo\" class=\"logo\" />\n\n        <h3>Log in to your account</h3>\n        <h4>\n          Don't have an account?\n          <verdocs-button label=\"Sign Up\" variant=\"text\" onClick={() => (this.displayMode = 'signup')} disabled={this.loggingIn} />\n        </h4>\n\n        <form onSubmit={() => this.handleLogin()}>\n          <verdocs-text-input label=\"Email\" autocomplete=\"username\" value={this.username} onFieldInput={e => (this.username = e.detail)} disabled={this.loggingIn} />\n          <verdocs-text-input\n            label=\"Password\"\n            type=\"password\"\n            autocomplete=\"current-password\"\n            value={this.password}\n            onFieldInput={e => (this.password = e.detail)}\n            disabled={this.loggingIn}\n          />\n\n          <verdocs-button\n            label=\"Forgot Your Password?\"\n            variant=\"text\"\n            onClick={() => (this.displayMode = 'signup')}\n            disabled={this.loggingIn}\n            style={{display: 'flex', justifyContent: 'center', margin: '10px auto 20px'}}\n          />\n\n          <verdocs-button label=\"Login\" disabled={this.loggingIn} onPress={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n        </form>\n\n        {this.loginError ? <verdocs-ok-dialog open={true} heading=\"Login Error\" message={this.loginError} onClosed={() => this.handleClearError()} /> : <div />}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-button.js

@@ -4,3 +4,5 @@ const VerdocsButton = VerdocsButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsButton, defineCustomElement };
+
+//# sourceMappingURL=verdocs-button.js.map

package/dist/components/verdocs-button.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-button2.js

@@ -65,3 +65,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsButton as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-button2.js.map

package/dist/components/verdocs-button2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-button2.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6gFAA6gF;;MCqBzhF,aAAa;EAJ1B;;;;;;;IAaU,cAAS,GAAkB,IAAI,CAAC;;;;IAKhC,YAAO,GAAkB,IAAI,CAAC;;;;IAK9B,SAAI,GAA4C,QAAQ,CAAC;;;;IAKzD,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAoC,UAAU,CAAC;;;;IAKtD,aAAQ,GAAY,KAAK,CAAC;GAqBnC;EAdC,WAAW,CAAC,CAAM;IAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;GACnB;EAED,MAAM;IACJ,QACE,cAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,IACpI,IAAI,CAAC,SAAS,GAAG,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,EACtC,IAAI,CAAC,OAAO,GAAG,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","./src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .label {\n      padding: 0 12px;\n    }\n\n    &:disabled {\n      cursor: none;\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n        cursor: none;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        cursor: none;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Display a simple button.\n *\n * Three variants are supported. `standard` and `outline` buttons look like traditional form buttons and are ideal candidates for 'Ok' and\n * 'Cancel' options in most cases. `text` buttons are intended to be used inline in content blocks or for more subtle button options.\n * (Auth uses text buttons for the Forgot Password and Sign Up options.)\n *\n * Four sizes are also supported. Most use cases will call for the `normal` size, but a `small` size is ideal for more subtle controls, such\n * as pagination or other secondary functions. `medium` buttons are slightly larger to provide balance in forms where other items are also\n * bigger, and `large` buttons are for cases where the page has mostly white-space and the buttons need to fill more space.\n *\n * Icons may be placed either before (\"start\") or after (\"end\") the button label. Icons should be SVG objects passed as strings and will\n * be rendered as HTML inside the button label area. It is important that the root <SVG> tag contains a default `fill=\"#ffffff\"` setting\n * for the base color, and that child elements below it do not. This allows the button color to carry into the icon properly.\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event fired when the button is pressed.\n   */\n  @Event({composed: true}) press!: EventEmitter;\n\n  handleClick(e: any) {\n    e.preventDefault();\n    this.press.emit();\n  }\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} onClick={e => this.handleClick(e)} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-dropdown.js

@@ -4,3 +4,5 @@ const VerdocsDropdown = VerdocsDropdown$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsDropdown, defineCustomElement };
+
+//# sourceMappingURL=verdocs-dropdown.js.map

package/dist/components/verdocs-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-dropdown.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-dropdown2.js

@@ -92,3 +92,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsDropdown as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-dropdown2.js.map

package/dist/components/verdocs-dropdown2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-dropdown2.js","mappings":"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","names":[],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(option: IMenuOption) {\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown() {\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={() => this.toggleDropdown()}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={() => this.handleSelectOption(option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-field-attachment.js

@@ -4,3 +4,5 @@ const VerdocsFieldAttachment = VerdocsFieldAttachment$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsFieldAttachment, defineCustomElement };
+
+//# sourceMappingURL=verdocs-field-attachment.js.map

package/dist/components/verdocs-field-attachment.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-attachment.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-field-attachment2.js

@@ -86,3 +86,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsFieldAttachment as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-field-attachment2.js.map

package/dist/components/verdocs-field-attachment2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-attachment2.js","mappings":";;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,0fAA0f;;MCY/gB,sBAAsB;EALnC;;;;;;;IASU,UAAK,GAAW,CAAC,CAAC;;;;IAKlB,UAAK,GAAW,EAAE,CAAC;;;;IAKnB,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,aAAQ,GAAY,KAAK,CAAC;GAoCnC;EA3BW,MAAM,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE;;MACrC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;MACtB,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;;MACjC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;MACvB,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpC,YAAM,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3D,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  span {\n    width: 20px;\n    cursor: pointer;\n  }\n\n  &.required {\n    span {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport Paperclip from './paperclip.svg';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * Sets the tabIndex of the input element.\n   */\n  @Prop() order: number = 1;\n\n  /**\n   * Sets the value of the input element.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If true, the field will be marked required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Sets the disabled attribute of the input element.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => {\n      console.log('cancel');\n      this.dialog?.remove();\n    });\n    document.addEventListener('done', e => {\n      console.log('done', e);\n      this.dialog?.remove();\n    });\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    return (\n      <Host class={{required: this.required}}>\n        <span innerHTML={Paperclip} onClick={() => this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-field-checkbox.js

@@ -4,3 +4,5 @@ const VerdocsFieldCheckbox = VerdocsFieldCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsFieldCheckbox, defineCustomElement };
+
+//# sourceMappingURL=verdocs-field-checkbox.js.map

package/dist/components/verdocs-field-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-field-checkbox2.js

@@ -53,3 +53,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsFieldCheckbox as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-field-checkbox2.js.map

package/dist/components/verdocs-field-checkbox2.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-checkbox2.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,qkCAAqkC;;MCWxlC,oBAAoB;EALjC;;;;;;;IASU,UAAK,GAAW,CAAC,CAAC;;;;IAKlB,UAAK,GAAY,KAAK,CAAC;;;;IAKvB,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,aAAQ,GAAY,KAAK,CAAC;GAuBnC;EAdC,YAAY,CAAC,CAAM;IACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;GACzC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpC,iBACE,aAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EAC3J,eAAQ,CACF,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    display: block;\n    vertical-align: bottom;\n    width: 14px;\n    height: 14px;\n    border-radius: 2px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    flex-shrink: 0;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: var(--verdocs-primary-color);\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: var(--verdocs-primary-color);\n    border-color: var(--verdocs-primary-color);\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid var(--verdocs-required-color);\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * Sets the tabIndex of the input element.\n   */\n  @Prop() order: number = 1;\n\n  /**\n   * Sets the value of the input element.\n   */\n  @Prop() value: boolean = false;\n\n  /**\n   * If true, the field will be marked required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Sets the disabled attribute of the input element.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit(e.target.checked);\n  }\n\n  render() {\n    return (\n      <Host class={{required: this.required}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={this.order} checked={this.value} disabled={this.disabled} required={this.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-field-date.js

@@ -4,3 +4,5 @@ const VerdocsFieldDate = VerdocsFieldDate$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { VerdocsFieldDate, defineCustomElement };
+
+//# sourceMappingURL=verdocs-field-date.js.map

package/dist/components/verdocs-field-date.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-field-date.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/verdocs-field-date2.js

@@ -2773,3 +2773,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { VerdocsFieldDate as V, defineCustomElement as d };
+
+//# sourceMappingURL=verdocs-field-date2.js.map