@verdocs/web-sdk 1.9.34 → 1.9.37

package/dist/verdocs-web-sdk/p-554856fb.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as s}from"./p-ff1278ed.js";const l=`<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="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`;const e=`<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="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>`;const i=`<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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z"/></svg>`;const n=`<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n<g clip-path="url(#clip0_31553_1553)">\n<path d="M30.886 11.4917C30.8916 11.0917 30.753 10.7034 30.4962 10.3993C30.2394 10.0953 29.882 9.8964 29.4908 9.83995L29.5182 9.65005L29.4908 9.83995L21.0938 8.60261L17.3412 0.912551C17.2067 0.638179 16.9992 0.407285 16.7421 0.245866C16.485 0.0844465 16.1885 -0.00111389 15.886 -0.00111389C15.5835 -0.00111389 15.287 0.0844465 15.0299 0.245866C14.7728 0.407285 14.5653 0.638179 14.4308 0.912551L10.6781 8.60261L2.28121 9.8392C1.89206 9.89475 1.53611 10.0916 1.2796 10.3931C1.02308 10.6945 0.88348 11.08 0.886776 11.4779C0.886447 11.6961 0.929977 11.912 1.01472 12.1125C1.09946 12.3131 1.22363 12.4941 1.37968 12.6445L7.45563 18.5744L6.01943 27.0241C6.00289 27.1258 5.99449 27.2287 5.99435 27.3317C5.99313 27.7717 6.16395 28.1943 6.4695 28.5071C6.77505 28.82 7.19045 28.9976 7.62496 29.0013C7.88846 29.0008 8.14779 28.9345 8.37992 28.8083L15.8883 24.8217L23.3967 28.8114C23.6287 28.9361 23.8873 29.0015 24.15 29.002C24.5752 28.9998 24.9832 28.8318 25.2893 28.5329C25.4452 28.3832 25.5695 28.2029 25.6544 28.003C25.7392 27.8031 25.783 27.5878 25.783 27.3702C25.7827 27.2731 25.7743 27.176 25.7579 27.0803L24.3209 18.6296L30.3931 12.7022C30.7094 12.3809 30.8867 11.9454 30.886 11.4917ZM22.0759 17.53L21.9437 17.3916L22.0759 17.53C22.0072 17.5977 21.9525 17.6787 21.9152 17.7681C21.8779 17.8575 21.8587 17.9536 21.8587 18.0506L21.8693 18.1737L23.2037 26.0237L16.2164 22.3148C16.1136 22.2602 15.9994 22.2317 15.8833 22.2317C15.7673 22.2317 15.653 22.2602 15.5503 22.3148L8.57132 26.0245L9.90651 18.1745L9.91712 18.0506C9.91696 17.9536 9.89768 17.8576 9.86038 17.7682C9.82308 17.6788 9.76851 17.5978 9.6999 17.53L4.05538 11.9724L11.8576 10.8258C11.9725 10.8088 12.0816 10.7638 12.1755 10.6947C12.2695 10.6256 12.3454 10.5344 12.3969 10.429L15.886 3.27721L19.3797 10.429C19.4313 10.5344 19.5074 10.6256 19.6014 10.6948C19.6955 10.7639 19.8047 10.8088 19.9197 10.8258L27.7197 11.9747L22.0759 17.53Z" fill="#ADB6BD"/>\n</g>\n<defs>\n<clipPath id="clip0_31553_1553">\n<rect width="30" height="29" fill="white" transform="translate(0.886719)"/>\n</clipPath>\n</defs>\n</svg>\n`;const a='verdocs-template-card{font-family:"Barlow", sans-serif;width:320px;height:320px;display:-ms-flexbox;display:flex;padding:25px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05)}verdocs-template-card .thumbnail{width:272px;height:158px;-o-object-fit:cover;object-fit:cover;margin-bottom:22px;-o-object-position:-20% 0;object-position:-20% 0}verdocs-template-card .name{font-size:18px;font-weight:700;margin-bottom:7px}verdocs-template-card .org-name{font-size:14px;font-weight:700;margin-bottom:6px}verdocs-template-card hr{width:100%;margin-bottom:17px;background-color:#aeb4bf}verdocs-template-card .controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:16px}verdocs-template-card .controls .control{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;margin-right:8px;-ms-flex-align:start;align-items:flex-start;border-right:1px solid #aeb4bf}verdocs-template-card .controls .control.secondary{-ms-flex-pack:center;justify-content:center}verdocs-template-card .controls .control svg{fill:#aeb4bf;height:16px;max-width:16px;margin:0 8px -2px 0}verdocs-template-card .additional-controls svg{margin-right:0;fill:#654dcb}';const r=class{constructor(o){t(this,o);this.template=undefined}render(){var t,a,r,c,p;return o(s,null,o("img",{src:((a=(t=this.template)===null||t===void 0?void 0:t.template_document)===null||a===void 0?void 0:a.thumbnail_url)||"",alt:"Template Thumbnail",class:"thumbnail"}),o("span",{class:"name"},this.template.name),o("span",{class:"org-name"},((r=this.template.organization)===null||r===void 0?void 0:r.name)||"Public"),o("hr",null),o("div",{class:"controls"},o("div",{class:"control"},o("span",{class:"icon",innerHTML:n}),o("span",{class:"value"},this.template.star_counter)),o("div",{class:"control secondary"},o("span",{class:"icon",innerHTML:i}),o("span",{class:"value"},((p=(c=this.template)===null||c===void 0?void 0:c.template_document)===null||p===void 0?void 0:p.page_numbers)||1)),o("div",{class:"control secondary"},o("span",{class:"icon",innerHTML:e}),o("span",{class:"value"},this.template.counter)),o("span",{class:"additional-controls",innerHTML:l})))}};r.style=a;export{r as verdocs_template_card};
-//# sourceMappingURL=p-554856fb.entry.js.map

package/dist/verdocs-web-sdk/p-554856fb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-template-card/verdocs-template-card.scss?tag=verdocs-template-card","src/components/controls/verdocs-template-card/verdocs-template-card.tsx"],"names":["verdocsTemplateCardCss","VerdocsTemplateCard","[object Object]","h","Host","src","_b","_a","this","template","template_document","thumbnail_url","alt","class","name","_c","organization","innerHTML","StarIcon","star_counter","PagesIcon","_e","_d","page_numbers","EmailIcon","counter","ActionsIcon"],"mappings":"6lGAAA,MAAMA,EAAyB,g9CCelBC,EAAmB,uDAM9BC,uBACE,OACEC,EAACC,EAAI,KACHD,EAAA,MAAA,CAAKE,MAAKC,GAAAC,EAAAC,KAAKC,YAAQ,MAAAF,SAAA,OAAA,EAAAA,EAAEG,qBAAiB,MAAAJ,SAAA,OAAA,EAAAA,EAAEK,gBAAiB,GAAIC,IAAI,qBAAqBC,MAAM,cAEhGV,EAAA,OAAA,CAAMU,MAAM,QAAQL,KAAKC,SAASK,MAClCX,EAAA,OAAA,CAAMU,MAAM,cAAYE,EAAAP,KAAKC,SAASO,gBAAY,MAAAD,SAAA,OAAA,EAAAA,EAAED,OAAQ,UAE5DX,EAAA,KAAA,MAEAA,EAAA,MAAA,CAAKU,MAAM,YACTV,EAAA,MAAA,CAAKU,MAAM,WACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWC,IAC9Bf,EAAA,OAAA,CAAMU,MAAM,SAASL,KAAKC,SAASU,eAGrChB,EAAA,MAAA,CAAKU,MAAM,qBACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWG,IAC9BjB,EAAA,OAAA,CAAMU,MAAM,WAASQ,GAAAC,EAAAd,KAAKC,YAAQ,MAAAa,SAAA,OAAA,EAAAA,EAAEZ,qBAAiB,MAAAW,SAAA,OAAA,EAAAA,EAAEE,eAAgB,IAGzEpB,EAAA,MAAA,CAAKU,MAAM,qBACTV,EAAA,OAAA,CAAMU,MAAM,OAAOI,UAAWO,IAC9BrB,EAAA,OAAA,CAAMU,MAAM,SAASL,KAAKC,SAASgB,UAGrCtB,EAAA,OAAA,CAAMU,MAAM,sBAAsBI,UAAWS","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-card {\n  font-family: $primary-font;\n  width: 320px;\n  height: 320px;\n  display: flex;\n  padding: 25px;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  box-shadow: 2px 2px 5px rgba(51, 54, 75, 0.05);\n\n  .thumbnail {\n    width: 272px;\n    height: 158px;\n    object-fit: cover;\n    margin-bottom: 22px;\n    object-position: -20% 0;\n  }\n\n  .name {\n    font-size: 18px;\n    font-weight: 700;\n    margin-bottom: 7px;\n  }\n\n  .org-name {\n    font-size: 14px;\n    font-weight: 700;\n    margin-bottom: 6px;\n  }\n\n  hr {\n    width: 100%;\n    margin-bottom: 17px;\n    background-color: $icon-color;\n  }\n\n  .controls {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    text-align: center;\n    font-size: 16px;\n\n    .control {\n      flex: 1;\n      display: flex;\n      margin-right: 8px;\n      align-items: flex-start;\n      border-right: 1px solid $icon-color;\n\n      &.secondary {\n        justify-content: center;\n      }\n\n      svg {\n        fill: $icon-color;\n        height: 16px;\n        max-width: 16px;\n        margin: 0 8px -2px 0;\n      }\n    }\n  }\n\n  .additional-controls svg {\n    margin-right: 0;\n    fill: $verdocs-purple;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport ActionsIcon from './actions.svg';\nimport EmailIcon from './email.svg';\nimport PagesIcon from './pages.svg';\nimport StarIcon from './star.svg';\n\n/**\n * Displays a summary of a template\n */\n@Component({\n  tag: 'verdocs-template-card',\n  styleUrl: 'verdocs-template-card.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCard {\n  /**\n   * The template for which the card will be rendered.\n   */\n  @Prop() template: ITemplate;\n\n  render() {\n    return (\n      <Host>\n        <img src={this.template?.template_document?.thumbnail_url || ''} alt=\"Template Thumbnail\" class=\"thumbnail\" />\n\n        <span class=\"name\">{this.template.name}</span>\n        <span class=\"org-name\">{this.template.organization?.name || 'Public'}</span>\n\n        <hr />\n\n        <div class=\"controls\">\n          <div class=\"control\">\n            <span class=\"icon\" innerHTML={StarIcon} />\n            <span class=\"value\">{this.template.star_counter}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={PagesIcon} />\n            <span class=\"value\">{this.template?.template_document?.page_numbers || 1}</span>\n          </div>\n\n          <div class=\"control secondary\">\n            <span class=\"icon\" innerHTML={EmailIcon} />\n            <span class=\"value\">{this.template.counter}</span>\n          </div>\n\n          <span class=\"additional-controls\" innerHTML={ActionsIcon} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-5597170d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"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"],"names":["authenticateUser","endpoint","params","api","post","then","r","data","verdocsAuthCss","VerdocsAuth","exports","VerdocsEndpoint","getDefault","class_1","prototype","componentWillLoad","this","loadSession","session","console","log","isAuthenticated","activeSession","_a","authenticated","emit","_b","handleLogin","_this","loggingIn","Auth.authenticateUser","username","password","setToken","accessToken","catch","e","response","JSON","stringify","sdkError","SDKError","message","_c","status","_d","_e","loginError","handleLogout","clearSession","handleClearError","render","visible","h","style","display","class","displayMode","src","logo","alt","label","variant","onClick","disabled","onSubmit","autocomplete","value","onInput","target","type","justifyContent","margin","heading","onNext"],"mappings":"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","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 {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {TSession} from '@verdocs/js-sdk/Sessions/Types';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\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  shadow: false,\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 = VerdocsEndpoint.getDefault();\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   * 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  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\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\n  componentWillLoad() {\n    this.endpoint.loadSession();\n    if (this.endpoint.session) {\n      console.log('[AUTH] Authenticated');\n      this.isAuthenticated = true;\n      this.activeSession = this.endpoint.session;\n      this.authenticated?.emit({authenticated: true, session: this.endpoint.session});\n    } else {\n      console.log('[AUTH] Anonymous');\n      this.authenticated?.emit({authenticated: false, session: null});\n    }\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('[AUTH] Authentication error', e.response, JSON.stringify(e));\n        this.loggingIn = false;\n        this.activeSession = null;\n        this.authenticated?.emit({authenticated: false, session: null});\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\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      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} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n            <verdocs-text-input\n              label=\"Password\"\n              type=\"password\"\n              autocomplete=\"current-password\"\n              value={this.password}\n              onInput={(e: any) => (this.password = e.target.value)}\n              disabled={this.loggingIn}\n            />\n\n            <verdocs-button\n              label=\"Signup\"\n              disabled={this.loggingIn}\n              onClick={() => 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} onInput={(e: any) => (this.username = e.target.value)} disabled={this.loggingIn} />\n          <verdocs-text-input\n            label=\"Password\"\n            type=\"password\"\n            autocomplete=\"current-password\"\n            value={this.password}\n            onInput={(e: any) => (this.password = e.target.value)}\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} onClick={() => this.handleLogin()} style={{display: 'flex', justifyContent: 'center', margin: '10px auto 0'}} />\n        </form>\n\n        {this.loginError ? <verdocs-ok-dialog heading=\"Login Error\" message={this.loginError} onNext={() => this.handleClearError()} /> : <div />}\n      </div>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-577d46e3.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as t}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as i}from"./p-5e67c42f.js";import"./p-21603661.js";const s='verdocs-contact-picker{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;background-color:#ffffff}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:100;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}';const c='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';const a='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';const n='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';const r=class{constructor(t){e(this,t);this.searchContacts=o(this,"searchContacts",7);this.cancel=o(this,"cancel",7);this.next=o(this,"next",7);this.endpoint=i.getDefault();this.templateRole=null;this.contactSuggestions=[];this.name=undefined;this.email=undefined;this.phone=undefined;this.message=undefined;this.showSuggestions=false;this.showMessage=false;this.delegator=false}componentWillLoad(){if(this.templateRole){this.name=this.templateRole.full_name||"";this.email=this.templateRole.email||"";this.phone=this.templateRole.phone||"";this.delegator=this.templateRole.delegator||false;this.message=this.templateRole.message||"";this.showMessage=this.message!==""}}handleNameChange(e){var o;this.name=e.target.value;(o=this.searchContacts)===null||o===void 0?void 0:o.emit({query:this.name})}handleEmailChange(e){this.email=e.target.value}handlePhoneChange(e){this.phone=e.target.value}handleMessageChange(e){this.message=e.target.value}handleCancel(e){var o;e.stopPropagation();this.showSuggestions=false;(o=this.cancel)===null||o===void 0?void 0:o.emit()}handleSubmit(e){var o;e.stopPropagation();this.showSuggestions=false;(o=this.next)===null||o===void 0?void 0:o.emit({full_name:this.name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator})}handleSelectSuggestion(e,o){e.stopPropagation();this.name=o.name;this.email=o.email;this.phone=o.phone;this.showSuggestions=false}render(){return t("form",{onSubmit:e=>e.preventDefault(),onClick:e=>e.stopPropagation(),autocomplete:"off"},t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-name"},"Name:"),t("input",{id:"verdocs-contact-picker-name",name:"verdocs-contact-picker-name",type:"text","data-lpignore":"true",autocomplete:"off",value:this.name,placeholder:"Recipient Name...",onFocus:()=>{var e;return this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0},onInput:e=>this.handleNameChange(e)}),this.showSuggestions&&t("div",{class:"dropdown"},this.contactSuggestions.map((e=>{var o;return t("div",{key:(o=e.id)!==null&&o!==void 0?o:e.name,class:"suggestion",onClick:o=>this.handleSelectSuggestion(o,e)},e.avatar?t("img",{alt:"Avatar",class:"avatar",src:e.avatar}):t("div",{class:"avatar",innerHTML:n}),t("div",{class:"details"},t("div",{class:"name"},e.name),e.email&&t("div",{class:"destination"},e.email),e.phone&&t("div",{class:"destination"},e.phone)))})))),t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-email"},"Email:"),t("input",{id:"verdocs-contact-picker-email",name:"verdocs-contact-picker-email",type:"text","data-lpignore":"true",autoComplete:"off",value:this.email,placeholder:"Email Address...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handleEmailChange(e)})),t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-phone"},"Phone:"),t("input",{id:"verdocs-contact-picker-phone",name:"verdocs-contact-picker-phone",type:"text","data-lpignore":"true",autocomplete:"off",value:this.phone,placeholder:"Phone Number...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handlePhoneChange(e)})),this.showMessage&&t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-message"},"Message:"),t("input",{id:"verdocs-contact-picker-message",name:"verdocs-contact-picker-message",type:"text","data-lpignore":"true",autocomplete:"off",value:this.message,placeholder:"Invitation Message...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handleMessageChange(e)})),t("div",{class:"buttons"},t("verdocs-toggle-button",{icon:c,size:"small",active:this.showMessage,onToggle:e=>{this.showMessage=e.detail.active;this.showSuggestions=false}}),t("verdocs-toggle-button",{icon:a,size:"small",active:this.delegator,onToggle:e=>{this.delegator=e.detail.active;this.showSuggestions=false}}),t("div",{class:"flex-fill"}),t("verdocs-button",{variant:"outline",label:"Cancel",size:"small",onClick:e=>this.handleCancel(e)}),t("verdocs-button",{label:"OK",size:"small",onClick:e=>this.handleSubmit(e)})))}};r.style=s;export{r as verdocs_contact_picker};
-//# sourceMappingURL=p-577d46e3.entry.js.map

package/dist/verdocs-web-sdk/p-577d46e3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/elements/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"names":["verdocsContactPickerCss","messageIcon","delegateIcon","placeholderIcon","VerdocsContactPicker","VerdocsEndpoint","getDefault","[object Object]","this","templateRole","name","full_name","email","phone","delegator","message","showMessage","e","target","value","_a","searchContacts","emit","query","stopPropagation","showSuggestions","cancel","next","suggestion","h","onSubmit","preventDefault","onClick","autocomplete","class","htmlFor","id","type","data-lpignore","placeholder","onFocus","contactSuggestions","length","onInput","handleNameChange","map","key","handleSelectSuggestion","avatar","alt","src","innerHTML","autoComplete","handleEmailChange","handlePhoneChange","handleMessageChange","icon","size","active","onToggle","detail","variant","label","handleCancel","handleSubmit"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  font-family: $verdocs-primary-font;\n  background-color: $verdocs-grey-4;\n\n  form {\n    background-color: $verdocs-grey-3;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .row {\n      width: 300px;\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 100;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          fill: #666666;\n        }\n\n        .avatar {\n          width: 48px;\n          height: 48px;\n          flex: 0 0 48px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-5bfc608d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-ff1278ed.js";const s='verdocs-toggle{font-family:"Barlow", sans-serif}verdocs-toggle .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f5f5fa}verdocs-toggle .label{font-size:24px;font-weight:700;color:#33354c;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}verdocs-toggle .buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}verdocs-toggle .buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}verdocs-toggle .buttons button:not(:last-child){margin-right:11px}verdocs-toggle .buttons svg{width:30px;height:30px}verdocs-toggle .buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .buttons button:hover svg{fill:#f5f5fa;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}';const e=class{constructor(o){t(this,o);this.options=undefined;this.theme=undefined;this.selectedOption=0}componentWillLoad(){var t;this.selectedOption=((t=this.options)===null||t===void 0?void 0:t.defaultSelection)||0}render(){return o("div",{class:"container"},o("span",{class:"label"},`${this.options.label}:`),o("div",{class:"buttons"},this.options.buttons.map(((t,s)=>o("button",{id:t.id,key:t.id,innerHTML:t.icon,class:s===this.selectedOption?"selected":"",onClick:()=>{console.log("clicked",s);this.selectedOption=s}})))))}};e.style=s;export{e as verdocs_toggle};
-//# sourceMappingURL=p-5bfc608d.entry.js.map

package/dist/verdocs-web-sdk/p-5bfc608d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-toggle/verdocs-toggle.scss?tag=verdocs-toggle","src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"names":["verdocsToggleCss","VerdocsToggle","[object Object]","this","selectedOption","_a","options","defaultSelection","h","class","label","buttons","map","button","index","id","key","innerHTML","icon","onClick","console","log"],"mappings":"2CAAA,MAAMA,EAAmB,4lCCoBZC,EAAa,+FAWU,EAElCC,0BACEC,KAAKC,iBAAiBC,EAAAF,KAAKG,WAAO,MAAAD,SAAA,OAAA,EAAAA,EAAEE,mBAAoB,EAG1DL,SACE,OACEM,EAAA,MAAA,CAAKC,MAAM,aACTD,EAAA,OAAA,CAAMC,MAAM,SAAS,GAAGN,KAAKG,QAAQI,UACrCF,EAAA,MAAA,CAAKC,MAAM,WACRN,KAAKG,QAAQK,QAAQC,KAAI,CAACC,EAAkBC,IAC3CN,EAAA,SAAA,CACEO,GAAIF,EAAOE,GACXC,IAAKH,EAAOE,GACZE,UAAWJ,EAAOK,KAClBT,MAAOK,IAAUX,KAAKC,eAAiB,WAAa,GACpDe,QAAS,KACPC,QAAQC,IAAI,UAAWP,GACvBX,KAAKC,eAAiBU","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toggle {\n  font-family: $primary-font;\n\n  .container {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    background-color: $container-bg;\n  }\n\n  .label {\n    font-size: 24px;\n    font-weight: 700;\n    color: $medium-bg;\n    align-self: center;\n    margin-right: 27px;\n    font-family: sans-serif;\n  }\n\n  .buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n  }\n\n  .buttons button {\n    width: 60px;\n    height: 60px;\n    border: 2px solid $item-border-color;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .buttons button:not(:last-child) {\n    margin-right: 11px;\n  }\n\n  .buttons svg {\n    width: 30px;\n    height: 30px;\n  }\n\n  .buttons button:hover {\n    background-color: $item-border-color;\n    transition: 0.25s;\n  }\n\n  .buttons button:hover svg {\n    fill: $container-bg;\n    transition: 0.25s;\n  }\n\n  .selected {\n    background-color: $border-color;\n    transition: 0.25s;\n  }\n\n  .selected svg {\n    fill: #ffffff;\n    transition: 0.25s;\n  }\n}\n","import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-5c895ce6.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/elements/verdocs-document-page/verdocs-document-page.scss?tag=verdocs-document-page","src/components/elements/verdocs-document-page/verdocs-document-page.tsx","src/components/controls/verdocs-loader/verdocs-loader.scss?tag=verdocs-loader","src/components/controls/verdocs-loader/verdocs-loader.tsx"],"names":["verdocsDocumentPageCss","VerdocsDocumentPage","exports","name","type","concat","Math","random","toString","substring","this","virtualWidth","virtualHeight","class_1","prototype","componentDidLoad","_this","resizeObserver","ResizeObserver","throttle","entries","_i","entries_1","length","entry","renderedWidth","contentRect","width","renderedHeight","notifyRenderedSize","observe","container","disconnectedCallback","_a","disconnect","skipFirstNotification","pageRendered","emit","containerId","pageNumber","naturalWidth","naturalHeight","aspectRatio","xScale","yScale","render","height","h","Host","id","style","layers","map","layer","class","src","pageImageUri","alt","aria-hidden","onLoad","e","target","verdocsLoaderCss","VerdocsLoader","class_2"],"mappings":"4RAAA,IAAMA,EAAyB,2SCgBlBC,EAAmBC,EAAA,wBAAA,gGAOC,mBAMF,oBAME,uBAMgB,gBAchB,CAAC,CAACC,KAAM,OAAQC,KAAM,4BAO9B,yBAAAC,OAAyBC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,wBAEvDC,KAAKC,iCACJD,KAAKE,gCACPF,KAAKC,gCACJD,KAAKE,+BACPF,KAAKC,aAAeD,KAAKE,yCAEvB,KAEjCC,EAAAC,UAAAC,iBAAA,WAAA,IAAAC,EAAAN,KACEA,KAAKO,eAAiB,IAAIC,eACxBC,GAAS,SAAAC,GACP,IAAoB,IAAAC,EAAA,EAAAC,EAAAF,EAAAC,EAAAC,EAAAC,OAAAF,IAAS,CAAxB,IAAMG,EAAKF,EAAAD,GACd,IAAMI,EAAgBD,EAAME,YAAYC,MACxCX,EAAKS,cAAgBA,EACrBT,EAAKY,eAAiBZ,EAAKJ,eAAiBa,EAAgBT,EAAKL,cAGnEK,EAAKa,uBACJ,MAGLnB,KAAKO,eAAea,QAAQpB,KAAKqB,YAGnClB,EAAAC,UAAAkB,qBAAA,kBACEC,EAAAvB,KAAKO,kBAAc,MAAAgB,SAAA,OAAA,EAAAA,EAAEC,cASvBrB,EAAAC,UAAAe,mBAAA,WAGE,GAAInB,KAAKyB,sBAAuB,CAC9BzB,KAAKyB,sBAAwB,MAC7B,OAGFzB,KAAK0B,aAAaC,KAAK,CACrBN,UAAWrB,KAAKqB,UAChBO,YAAa5B,KAAK4B,YAClBC,WAAY7B,KAAK6B,WACjB5B,aAAcD,KAAKC,aACnBC,cAAeF,KAAKE,cACpBa,cAAef,KAAKe,cACpBG,eAAgBlB,KAAKkB,eACrBY,aAAc9B,KAAK8B,aACnBC,cAAe/B,KAAK+B,cACpBC,YAAahC,KAAKgC,YAClBC,OAAQjC,KAAKe,cAAgBf,KAAKC,aAClCiC,OAAQlC,KAAKkB,eAAiBlB,KAAKE,iBAIvCC,EAAAC,UAAA+B,OAAA,WAAA,IAAA7B,EAAAN,KACE,IAAMoC,EAAS,GAAAzC,OAAGK,KAAKkB,eAAc,MAErC,OACEmB,EAACC,EAAI,CAACC,GAAI,GAAA5C,OAAGK,KAAK4B,aAAeY,MAAO,CAACJ,OAAMA,IAC5CpC,KAAKyC,OAAOC,KAAI,SAAAC,GACf,OAAAA,EAAMjD,OAAS,MACb2C,EAAA,MAAA,CAAKO,MAAM,8BAA8BL,GAAI,GAAA5C,OAAGW,EAAKsB,YAAW,KAAAjC,OAAIgD,EAAMlD,MAAQ+C,MAAO,CAACJ,OAAMA,KAEhGC,EAAA,MAAA,CACEO,MAAM,kCACNL,GAAI,GAAA5C,OAAGW,EAAKsB,YAAW,KAAAjC,OAAIgD,EAAMlD,MACjCoD,IAAKvC,EAAKwC,aACVC,IAAK,QAAApD,OAAQW,EAAKuB,YAAYmB,cACjB,KACbC,OAAQ,SAACC,GAQP5C,EAAKwB,aAAeoB,EAAEC,OAAOrB,aAC7BxB,EAAKyB,cAAgBmB,EAAEC,OAAOpB,cAC9BzB,EAAK0B,YAAc1B,EAAKwB,aAAexB,EAAKyB,cAC5CzB,EAAKJ,cAAgBI,EAAKL,aAAeK,EAAK0B,gJApI9B,cChBhC,IAAMoB,EAAmB,gqUCUZC,EAAa7D,EAAA,iBAAA,mCACxB8D,EAAAlD,UAAA+B,OAAA,WACE,OAAOE,EAACC,EAAI,gBAFU","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-document-page',\n  styleUrl: 'verdocs-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The URL of the image to render as the page background.\n   */\n  @Prop() pageImageUri: string = '';\n\n  /**\n   * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n   * are used everywhere in document handling. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n  // componentDidRender() {\n  //   this.notifyRenderedSize();\n  // }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    this.pageRendered.emit({\n      container: this.container,\n      containerId: this.containerId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale: this.renderedWidth / this.virtualWidth,\n      yScale: this.renderedHeight / this.virtualHeight,\n    });\n  }\n\n  render() {\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : (\n            <img\n              class=\"verdocs-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageImageUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n              }}\n            />\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-loader {\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin-left: -20px;\n  margin-top: -20px;\n  font-size: 24px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  text-indent: -9999em;\n  -webkit-animation: load5 1.1s infinite ease;\n  animation: verdocs-loader-kf 1.1s infinite ease;\n  -webkit-transform: translateZ(0);\n  -ms-transform: translateZ(0);\n  transform: translateZ(0);\n}\n\n@keyframes verdocs-loader-kf {\n  0%,\n  100% {\n    box-shadow: 0em -2.6em 0em 0em $verdocs-bg-2, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.3), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4);\n  }\n  12.5% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.4), 1.8em -1.8em 0 0em $verdocs-bg-2, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3);\n  }\n  25% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.3), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.4), 2.5em 0em 0 0em $verdocs-bg-2, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n  }\n  37.5% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.3), 2.5em 0em 0 0em rgba(0, 0, 0, 0.4), 1.75em 1.75em 0 0em $verdocs-bg-2,\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n  }\n  50% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.3), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.4),\n      0em 2.5em 0 0em $verdocs-bg-2, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n  }\n  62.5% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.3),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.4), -1.8em 1.8em 0 0em $verdocs-bg-2, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n  }\n  75% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.3), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.4), -2.6em 0em 0 0em $verdocs-bg-2, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);\n  }\n  87.5% {\n    box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),\n      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.3), -2.6em 0em 0 0em rgba(0, 0, 0, 0.4), -1.8em -1.8em 0 0em $verdocs-bg-2;\n  }\n}\n","import {Component, h, Host} from '@stencil/core';\n\n/**\n * Animated loader placeholder. There are currently no configuration options for this control.\n */\n@Component({\n  tag: 'verdocs-loader',\n  styleUrl: 'verdocs-loader.scss',\n  shadow: false,\n})\nexport class VerdocsLoader {\n  render() {\n    return <Host />;\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-5e6134d8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o}from"./p-ff1278ed.js";const n='verdocs-button button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999;cursor:none}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}';const e=class{constructor(o){t(this,o);this.label=undefined;this.startIcon=null;this.endIcon=null;this.size="normal";this.type="button";this.variant="standard";this.disabled=false}render(){return o("button",{disabled:this.disabled,type:this.type,class:`${this.variant} ${this.size} ${this.type}`},this.startIcon?o("span",{class:"icon start",innerHTML:this.startIcon}):null,o("span",{class:"label"},this.label),this.endIcon?o("span",{class:"icon end",innerHTML:this.endIcon}):null)}};e.style=n;export{e as verdocs_button};
-//# sourceMappingURL=p-5e6134d8.entry.js.map

package/dist/verdocs-web-sdk/p-5e6134d8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx"],"names":["verdocsButtonCss","VerdocsButton","[object Object]","h","disabled","this","type","class","variant","size","startIcon","innerHTML","label","endIcon"],"mappings":"2CAAA,MAAMA,EAAmB,4gFCyBZC,EAAa,mEASW,kBAKF,eAKuB,mBAKV,sBAKK,yBAKvB,MAE5BC,SACE,OACEC,EAAA,SAAA,CAAQC,SAAUC,KAAKD,SAAUE,KAAMD,KAAKC,KAAMC,MAAO,GAAGF,KAAKG,WAAWH,KAAKI,QAAQJ,KAAKC,QAC3FD,KAAKK,UAAYP,EAAA,OAAA,CAAMI,MAAM,aAAaI,UAAWN,KAAKK,YAAgB,KAC3EP,EAAA,OAAA,CAAMI,MAAM,SAASF,KAAKO,OACzBP,KAAKQ,QAAUV,EAAA,OAAA,CAAMI,MAAM,WAAWI,UAAWN,KAAKQ,UAAc","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} 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 * ```html\n * <verdocs-button label=\"OK\" onClick={() => (console.log('OK clicked'))} />\n * ```\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  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} 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"]}