@verdocs/web-sdk 1.9.9 → 1.9.10

package/dist/verdocs-web-sdk/p-259fd8de.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as i}from"./p-629237fc.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-259fd8de.entry.js.map

package/dist/verdocs-web-sdk/p-259fd8de.entry.js.map

@@ -0,0 +1 @@
+{"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-2b822750.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-97329951.system.js"],(function(t){"use strict";var n,o;return{setters:[function(t){n=t.r;o=t.h}],execute:function(){var e='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}';var r=t("verdocs_button",function(){function t(t){n(this,t);this.label=undefined;this.startIcon=null;this.endIcon=null;this.size="normal";this.type="button";this.variant="standard";this.disabled=false}t.prototype.render=function(){return o("button",{disabled:this.disabled,type:this.type,class:"".concat(this.variant," ").concat(this.size," ").concat(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)};return t}());r.style=e}}}));
+//# sourceMappingURL=p-2b822750.system.entry.js.map

package/dist/verdocs-web-sdk/p-2b822750.system.entry.js.map

@@ -0,0 +1 @@
+{"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","exports","class_1","prototype","render","h","disabled","this","type","class","concat","variant","size","startIcon","innerHTML","label","endIcon"],"mappings":"0IAAA,IAAMA,EAAmB,0gFCyBZC,EAAaC,EAAA,iBAAA,uEASW,kBAKF,eAKuB,mBAKV,sBAKK,yBAKvB,MAE5BC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAAA,SAAA,CAAQC,SAAUC,KAAKD,SAAUE,KAAMD,KAAKC,KAAMC,MAAO,GAAAC,OAAGH,KAAKI,QAAO,KAAAD,OAAIH,KAAKK,KAAI,KAAAF,OAAIH,KAAKC,OAC3FD,KAAKM,UAAYR,EAAA,OAAA,CAAMI,MAAM,aAAaK,UAAWP,KAAKM,YAAgB,KAC3ER,EAAA,OAAA,CAAMI,MAAM,SAASF,KAAKQ,OACzBR,KAAKS,QAAUX,EAAA,OAAA,CAAMI,MAAM,WAAWK,UAAWP,KAAKS,UAAc,gBAzCnD","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"]}

package/dist/verdocs-web-sdk/p-2bb98709.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-97329951.system.js","./p-a7433630.system.js","./p-6e1ada33.system.js"],(function(e){"use strict";var t,o,n,a;return{setters:[function(e){t=e.r;o=e.c;n=e.h},function(){},function(e){a=e.V}],execute:function(){var 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}';var i='<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>';var c='<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>';var r='<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>';var l=e("verdocs_contact_picker",function(){function e(e){t(this,e);this.searchContacts=o(this,"searchContacts",7);this.cancel=o(this,"cancel",7);this.next=o(this,"next",7);this.endpoint=a.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}e.prototype.componentWillLoad=function(){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!==""}};e.prototype.handleNameChange=function(e){var t;this.name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.name})};e.prototype.handleEmailChange=function(e){this.email=e.target.value};e.prototype.handlePhoneChange=function(e){this.phone=e.target.value};e.prototype.handleMessageChange=function(e){this.message=e.target.value};e.prototype.handleCancel=function(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.cancel)===null||t===void 0?void 0:t.emit()};e.prototype.handleSubmit=function(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.next)===null||t===void 0?void 0:t.emit({full_name:this.name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator})};e.prototype.handleSelectSuggestion=function(e,t){e.stopPropagation();this.name=t.name;this.email=t.email;this.phone=t.phone;this.showSuggestions=false};e.prototype.render=function(){var e=this;return n("form",{onSubmit:function(e){return e.preventDefault()},onClick:function(e){return e.stopPropagation()},autocomplete:"off"},n("div",{class:"row"},n("label",{htmlFor:"verdocs-contact-picker-name"},"Name:"),n("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:function(){var t;return e.showSuggestions=((t=e.contactSuggestions)===null||t===void 0?void 0:t.length)>0},onInput:function(t){return e.handleNameChange(t)}}),this.showSuggestions&&n("div",{class:"dropdown"},this.contactSuggestions.map((function(t){var o;return n("div",{key:(o=t.id)!==null&&o!==void 0?o:t.name,class:"suggestion",onClick:function(o){return e.handleSelectSuggestion(o,t)}},t.avatar?n("img",{alt:"Avatar",class:"avatar",src:t.avatar}):n("div",{class:"avatar",innerHTML:r}),n("div",{class:"details"},n("div",{class:"name"},t.name),t.email&&n("div",{class:"destination"},t.email),t.phone&&n("div",{class:"destination"},t.phone)))})))),n("div",{class:"row"},n("label",{htmlFor:"verdocs-contact-picker-email"},"Email:"),n("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:function(){return e.showSuggestions=false},onInput:function(t){return e.handleEmailChange(t)}})),n("div",{class:"row"},n("label",{htmlFor:"verdocs-contact-picker-phone"},"Phone:"),n("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:function(){return e.showSuggestions=false},onInput:function(t){return e.handlePhoneChange(t)}})),this.showMessage&&n("div",{class:"row"},n("label",{htmlFor:"verdocs-contact-picker-message"},"Message:"),n("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:function(){return e.showSuggestions=false},onInput:function(t){return e.handleMessageChange(t)}})),n("div",{class:"buttons"},n("verdocs-toggle-button",{icon:i,size:"small",active:this.showMessage,onToggle:function(t){e.showMessage=t.detail.active;e.showSuggestions=false}}),n("verdocs-toggle-button",{icon:c,size:"small",active:this.delegator,onToggle:function(t){e.delegator=t.detail.active;e.showSuggestions=false}}),n("div",{class:"flex-fill"}),n("verdocs-button",{variant:"outline",label:"Cancel",size:"small",onClick:function(t){return e.handleCancel(t)}}),n("verdocs-button",{label:"OK",size:"small",onClick:function(t){return e.handleSubmit(t)}})))};return e}());l.style=s}}}));
+//# sourceMappingURL=p-2bb98709.system.entry.js.map

package/dist/verdocs-web-sdk/p-2bb98709.system.entry.js.map

@@ -0,0 +1 @@
+{"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","exports","VerdocsEndpoint","getDefault","class_1","prototype","componentWillLoad","this","templateRole","name","full_name","email","phone","delegator","message","showMessage","handleNameChange","e","target","value","_a","searchContacts","emit","query","handleEmailChange","handlePhoneChange","handleMessageChange","handleCancel","stopPropagation","showSuggestions","cancel","handleSubmit","next","handleSelectSuggestion","suggestion","render","_this","h","onSubmit","preventDefault","onClick","autocomplete","class","htmlFor","id","type","data-lpignore","placeholder","onFocus","contactSuggestions","length","onInput","map","key","avatar","alt","src","innerHTML","autoComplete","icon","size","active","onToggle","detail","variant","label"],"mappings":"sOAAA,IAAMA,EAA0B,42ECIhC,IAAMC,EACJ,yRAEF,IAAMC,EACJ,yhBAEF,IAAMC,EACJ,wfAuEWC,EAAoBC,EAAA,yBAAA,0JAIKC,EAAgBC,+BAKf,6BAM2B,6GAsB5B,uBACJ,qBACF,MAE9BC,EAAAC,UAAAC,kBAAA,WACE,GAAIC,KAAKC,aAAc,CACrBD,KAAKE,KAAOF,KAAKC,aAAaE,WAAa,GAC3CH,KAAKI,MAAQJ,KAAKC,aAAaG,OAAS,GACxCJ,KAAKK,MAAQL,KAAKC,aAAaI,OAAS,GACxCL,KAAKM,UAAYN,KAAKC,aAAaK,WAAa,MAChDN,KAAKO,QAAUP,KAAKC,aAAaM,SAAW,GAC5CP,KAAKQ,YAAcR,KAAKO,UAAY,KAIxCV,EAAAC,UAAAW,iBAAA,SAAiBC,SACfV,KAAKE,KAAOQ,EAAEC,OAAOC,OACrBC,EAAAb,KAAKc,kBAAc,MAAAD,SAAA,OAAA,EAAAA,EAAEE,KAAK,CAACC,MAAOhB,KAAKE,QAGzCL,EAAAC,UAAAmB,kBAAA,SAAkBP,GAChBV,KAAKI,MAAQM,EAAEC,OAAOC,OAGxBf,EAAAC,UAAAoB,kBAAA,SAAkBR,GAChBV,KAAKK,MAAQK,EAAEC,OAAOC,OAGxBf,EAAAC,UAAAqB,oBAAA,SAAoBT,GAClBV,KAAKO,QAAUG,EAAEC,OAAOC,OAG1Bf,EAAAC,UAAAsB,aAAA,SAAaV,SACXA,EAAEW,kBACFrB,KAAKsB,gBAAkB,OACvBT,EAAAb,KAAKuB,UAAM,MAAAV,SAAA,OAAA,EAAAA,EAAEE,QAGflB,EAAAC,UAAA0B,aAAA,SAAad,SACXA,EAAEW,kBAEFrB,KAAKsB,gBAAkB,OACvBT,EAAAb,KAAKyB,QAAI,MAAAZ,SAAA,OAAA,EAAAA,EAAEE,KAAK,CACdZ,UAAWH,KAAKE,KAChBE,MAAOJ,KAAKI,MACZC,MAAOL,KAAKK,MACZE,QAASP,KAAKO,QACdD,UAAWN,KAAKM,aAIpBT,EAAAC,UAAA4B,uBAAA,SAAuBhB,EAAQiB,GAC7BjB,EAAEW,kBAEFrB,KAAKE,KAAOyB,EAAWzB,KACvBF,KAAKI,MAAQuB,EAAWvB,MACxBJ,KAAKK,MAAQsB,EAAWtB,MACxBL,KAAKsB,gBAAkB,OAGzBzB,EAAAC,UAAA8B,OAAA,WAAA,IAAAC,EAAA7B,KACE,OACE8B,EAAA,OAAA,CAAMC,SAAU,SAAArB,GAAK,OAAAA,EAAEsB,kBAAkBC,QAAS,SAAAvB,GAAK,OAAAA,EAAEW,mBAAmBa,aAAa,OACvFJ,EAAA,MAAA,CAAKK,MAAM,OACTL,EAAA,QAAA,CAAOM,QAAQ,+BAA6B,SAC5CN,EAAA,QAAA,CACEO,GAAG,8BACHnC,KAAK,8BACLoC,KAAK,OAAMC,gBACG,OACdL,aAAa,MACbtB,MAAOZ,KAAKE,KACZsC,YAAY,oBACZC,QAAS,WAAA,IAAA5B,EAAM,OAACgB,EAAKP,kBAAkBT,EAAAgB,EAAKa,sBAAkB,MAAA7B,SAAA,OAAA,EAAAA,EAAE8B,QAAS,GAEzEC,QAAS,SAAAlC,GAAK,OAAAmB,EAAKpB,iBAAiBC,MAGrCV,KAAKsB,iBACJQ,EAAA,MAAA,CAAKK,MAAM,YACRnC,KAAK0C,mBAAmBG,KAAI,SAAAlB,SAAc,OACzCG,EAAA,MAAA,CAAKgB,KAAKjC,EAAAc,EAAWU,MAAE,MAAAxB,SAAA,EAAAA,EAAIc,EAAWzB,KAAMiC,MAAM,aAAaF,QAAS,SAAAvB,GAAK,OAAAmB,EAAKH,uBAAuBhB,EAAGiB,KACzGA,EAAWoB,OAASjB,EAAA,MAAA,CAAKkB,IAAI,SAASb,MAAM,SAASc,IAAKtB,EAAWoB,SAAajB,EAAA,MAAA,CAAKK,MAAM,SAASe,UAAW1D,IAClHsC,EAAA,MAAA,CAAKK,MAAM,WACTL,EAAA,MAAA,CAAKK,MAAM,QAAQR,EAAWzB,MAC7ByB,EAAWvB,OAAS0B,EAAA,MAAA,CAAKK,MAAM,eAAeR,EAAWvB,OACzDuB,EAAWtB,OAASyB,EAAA,MAAA,CAAKK,MAAM,eAAeR,EAAWtB,cAQtEyB,EAAA,MAAA,CAAKK,MAAM,OACTL,EAAA,QAAA,CAAOM,QAAQ,gCAA8B,UAC7CN,EAAA,QAAA,CACEO,GAAG,+BACHnC,KAAK,+BACLoC,KAAK,OAAMC,gBACG,OACdY,aAAa,MACbvC,MAAOZ,KAAKI,MACZoC,YAAY,mBACZC,QAAS,WAAA,OAAOZ,EAAKP,gBAAkB,OACvCsB,QAAS,SAAAlC,GAAK,OAAAmB,EAAKZ,kBAAkBP,OAIzCoB,EAAA,MAAA,CAAKK,MAAM,OACTL,EAAA,QAAA,CAAOM,QAAQ,gCAA8B,UAC7CN,EAAA,QAAA,CACEO,GAAG,+BACHnC,KAAK,+BACLoC,KAAK,OAAMC,gBACG,OACdL,aAAa,MACbtB,MAAOZ,KAAKK,MACZmC,YAAY,kBACZC,QAAS,WAAA,OAAOZ,EAAKP,gBAAkB,OACvCsB,QAAS,SAAAlC,GAAK,OAAAmB,EAAKX,kBAAkBR,OAIxCV,KAAKQ,aACJsB,EAAA,MAAA,CAAKK,MAAM,OACTL,EAAA,QAAA,CAAOM,QAAQ,kCAAgC,YAC/CN,EAAA,QAAA,CACEO,GAAG,iCACHnC,KAAK,iCACLoC,KAAK,OAAMC,gBACG,OACdL,aAAa,MACbtB,MAAOZ,KAAKO,QACZiC,YAAY,wBACZC,QAAS,WAAA,OAAOZ,EAAKP,gBAAkB,OACvCsB,QAAS,SAAAlC,GAAK,OAAAmB,EAAKV,oBAAoBT,OAK7CoB,EAAA,MAAA,CAAKK,MAAM,WACTL,EAAA,wBAAA,CACEsB,KAAM9D,EACN+D,KAAK,QACLC,OAAQtD,KAAKQ,YACb+C,SAAU,SAAA7C,GACRmB,EAAKrB,YAAcE,EAAE8C,OAAOF,OAC5BzB,EAAKP,gBAAkB,SAG3BQ,EAAA,wBAAA,CACEsB,KAAM7D,EACN8D,KAAK,QACLC,OAAQtD,KAAKM,UACbiD,SAAU,SAAA7C,GACRmB,EAAKvB,UAAYI,EAAE8C,OAAOF,OAC1BzB,EAAKP,gBAAkB,SAI3BQ,EAAA,MAAA,CAAKK,MAAM,cAEXL,EAAA,iBAAA,CAAgB2B,QAAQ,UAAUC,MAAM,SAASL,KAAK,QAAQpB,QAAS,SAAAvB,GAAK,OAAAmB,EAAKT,aAAaV,MAC9FoB,EAAA,iBAAA,CAAgB4B,MAAM,KAAKL,KAAK,QAAQpB,QAAS,SAAAvB,GAAK,OAAAmB,EAAKL,aAAad,kBAzMjD","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-7a476918.entry.js → p-2fbd4e25.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as o,H as t}from"./p-ff1278ed.js";import{g as n,a as s,b as r,u as l}from"./p-6f1440dd.js";import"./p-8efc9749.js";import{a,i as d}from"./p-e662f81b.js";import{g as c}from"./p-6de76553.js";import{s as u,b as h,c as p}from"./p-7ce27ce2.js";import{V as f}from"./p-629237fc.js";import{S as v}from"./p-7a1b2643.js";var x=undefined&&undefined.__assign||function(){x=Object.assign||function(e){for(var i,o=1,t=arguments.length;o<t;o++){i=arguments[o];for(var n in i)if(Object.prototype.hasOwnProperty.call(i,n))e[n]=i[n]}return e};return x.apply(this,arguments)};var g=undefined&&undefined.__awaiter||function(e,i,o,t){function n(e){return e instanceof o?e:new o((function(i){i(e)}))}return new(o||(o=Promise))((function(o,s){function r(e){try{a(t.next(e))}catch(e){s(e)}}function l(e){try{a(t["throw"](e))}catch(e){s(e)}}function a(e){e.done?o(e.value):n(e.value).then(r,l)}a((t=t.apply(e,i||[])).next())}))};var b=undefined&&undefined.__generator||function(e,i){var o={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},t,n,s,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(e){return function(i){return a([e,i])}}function a(r){if(t)throw new TypeError("Generator is already executing.");while(o)try{if(t=1,n&&(s=r[0]&2?n["return"]:r[0]?n["throw"]||((s=n["return"])&&s.call(n),0):n.next)&&!(s=s.call(n,r[1])).done)return s;if(n=0,s)r=[r[0]&2,s.value];switch(r[0]){case 0:case 1:s=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(s=o.trys,s=s.length>0&&s[s.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!s||r[1]>s[0]&&r[1]<s[3])){o.label=r[1];break}if(r[0]===6&&o.label<s[1]){o.label=s[1];s=r;break}if(s&&o.label<s[2]){o.label=s[2];o.ops.push(r);break}if(s[2])o.ops.pop();o.trys.pop();continue}r=i.call(e,o)}catch(e){r=[6,e];n=0}finally{t=s=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var m=function(e,i,o,t,n){return g(void 0,void 0,void 0,(function(){return b(this,(function(s){return[2,e.api.put("/envelopes/".concat(i,"/recipients/").concat(o),x({role_name:o,action:t},n||{})).then((function(e){return e.data}))]}))}))};const w='verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:10px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree .agree-checkbox{background:#ccc;-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;position:relative;margin:0 10px 0 14px}verdocs-sign .agree .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign .agree .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree .agree-checkbox label .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:"";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}';const k=class{constructor(o){e(this,o);this.sdkError=i(this,"sdkError",7);this.endpoint=f.getDefault();this.envelopeId=null;this.roleId=null;this.inviteCode=null;this.recipient=null;this.signerToken=null;this.pdfUrl=null;this.recipientIndex=-1;this.envelope=null;this.fields=[];this.hasSignature=false;this.nextButtonLabel="Start";this.focusedField=""}async componentDidLoad(){var e,i,o;try{console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.envelopeId}`);const{session:e,recipient:i,signerToken:o}=await n(this.endpoint,{envelopeId:this.envelopeId,roleId:this.roleId,inviteCode:this.inviteCode});console.log(`[SIGN] Got signing session ${e.email} / ${e.profile_id}`);this.recipient=i;this.signerToken=o;this.endpoint.setToken(o);if(this.recipient.agreed){this.nextButtonLabel="Next"}const t=await s(this.endpoint,this.envelopeId);this.envelope=t;console.log("[SIGN] Signing document",document);this.pdfUrl=`${this.endpoint.getBaseURL()}/documents/${this.envelopeId}/envelope_documents/${t.envelope_document_id}?file=true`;this.recipientIndex=this.envelope.recipients.findIndex((e=>e.role_name==this.roleId));if(this.recipientIndex>-1){console.log("Found recipient",this.envelope.recipients[this.recipientIndex])}this.fields=this.envelope.fields.filter((e=>e.recipient_role===this.roleId));console.log("Loaded fields",this.fields)}catch(t){console.log("Error with signing session",t);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new v(t.message,(i=t.response)===null||i===void 0?void 0:i.status,(o=t.response)===null||o===void 0?void 0:o.data))}}handleClickAgree(){console.log("agree clicked");m(this.endpoint,this.envelopeId,this.roleId,"update",{agreed:true}).then((e=>{console.log("update result",e);this.nextButtonLabel="Next";this.recipient=e})).catch((e=>{var i,o,t;console.log("update failure",e);(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data))}))}async savePDF(){const e=`${this.envelope.name} - ${this.envelope.updated_at.split("T")[0]}.pdf`;const i=await r(this.endpoint,this.envelopeId,this.envelope.envelope_document_id);let o=new XMLHttpRequest;o.responseType="blob";o.onload=function(){let i=document.createElement("a");i.href=window.URL.createObjectURL(o.response);i.download=e;i.style.display="none";document.body.appendChild(i);i.click();i.remove()};const t=`data:application/pdf;base64,${i}`;console.log("url",t.length,t);o.open("GET",`data:application/pdf;base64,${i}`);o.send()}async handleOptionSelected(e){switch(e.detail.id){case"later":if(!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"])){window.alert("User intends to sign later.")}break;case"claim":break;case"decline":break;case"print":break;case"download":this.savePDF().catch((()=>{}));break}}async handleFieldChange(e,i,o){console.log("fieldChange",e,i.detail);switch(e.type){case"textbox":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:i.detail}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t,n,s,r;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));if(((n=e.response)===null||n===void 0?void 0:n.status)===401&&((r=(s=e.response)===null||s===void 0?void 0:s.data)===null||r===void 0?void 0:r.error)==="jwt expired"){console.log("jwt expired")}console.log("Error updating",e)}));break;case"checkbox_group":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:{options:[{id:o,checked:i.detail}]}}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"radio_button_group":const t=e.settings.options.map((e=>({id:e.id,selected:o===e.id})));l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:{options:t}}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"dropdown":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:i.detail}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"initial":console.log("Got initial",i.detail);break;case"signature":console.log("Got signature",i.detail);break}}renderCheckboxGroupOption(e,i,t){const n=p(e.xScale,t.x);const s=p(e.yScale,t.y);const r={left:`${n}px`,bottom:`${s}px`,position:"absolute",transform:`scale(${e.xScale}, ${e.yScale})`,backgroundColor:c(this.recipientIndex)};return o("verdocs-field-checkbox",{style:r,field:i,onFieldChange:e=>this.handleFieldChange(i,e,t.id)})}renderRadioGroupOption(e,i,t){const n=p(e.xScale,t.x);const s=p(e.yScale,t.y);const r={left:`${n}px`,bottom:`${s}px`,position:"absolute",transform:`scale(${e.xScale}, ${e.yScale})`,backgroundColor:c(this.recipientIndex)};return o("verdocs-field-radio-button",{style:r,field:i,onFieldChange:e=>this.handleFieldChange(i,e,t.id)})}isFieldValid(e){var i,o,t,n,s,r,l,c,u,h,p,f;switch(e.type){case"textbox":switch(((i=e.settings)===null||i===void 0?void 0:i.validator)||""){case"email":return d(((o=e.settings)===null||o===void 0?void 0:o.result)||"");case"phone":return a(((t=e.settings)===null||t===void 0?void 0:t.result)||"");default:return!!((n=e.settings)===null||n===void 0?void 0:n.result)}case"signature":case"initial":case"textarea":case"date":case"timestamp":case"attachment":return!!((s=e.settings)===null||s===void 0?void 0:s.result);case"dropdown":return!!((r=e.settings)===null||r===void 0?void 0:r.value);case"checkbox_group":const v=(((c=(l=e.settings)===null||l===void 0?void 0:l.options)===null||c===void 0?void 0:c.filter((e=>e.checked)))||[]).length;return v>=(((u=e.settings)===null||u===void 0?void 0:u.minimum_checked)||0)&&v<=(((h=e.settings)===null||h===void 0?void 0:h.maximum_checked)||999);case"radio_button_group":return(((f=(p=e.settings)===null||p===void 0?void 0:p.options)===null||f===void 0?void 0:f.filter((e=>e.selected)))||[]).length>0;default:return false}}handleNext(){const e=this.fields.filter((e=>e.required));console.log("required Fields",e);const i=e.findIndex((e=>e.name===this.focusedField));console.log("focused Index",i);let o=i+1;if(o>=e.length){o=0}const t=e[o];console.log("next required field",t);if(t){const e=h(t);const i=document.getElementById(e);console.log("focusing",e,i);i===null||i===void 0?void 0:i.focusField();this.focusedField=t.name}}renderField(e,i){const o=document.getElementById(i.containerId+"-controls");if(!o){return}const t=h(e);const n=document.getElementById(t);if(n){u(n,e,i.xScale,i.yScale,this.recipientIndex);return}let s;switch(e.type){case"attachment":case"checkbox_group":case"date":case"dropdown":case"initial":case"payment":case"signature":case"timestamp":case"textarea":case"textbox":s=document.createElement(`verdocs-field-${e.type}`);break;case"radio_button_group":break;default:console.log("[SIGN] Skipping unsupported field type",e)}if(s){s.field=e;s.recipient=this.recipient;s.setAttribute("id",t);s.setAttribute("roleindex",this.recipientIndex);s.addEventListener("fieldChange",(i=>this.handleFieldChange(e,i)));u(n,e,i.xScale,i.yScale,this.recipientIndex);o.appendChild(s)}}handlePageRendered(e){const i=e.detail;console.log("[SIGN] Page rendered",i);const o=this.fields.filter((e=>e.page===i.renderedPage.pageNumber));console.log("[SIGN] Fields on page",o);o.forEach((e=>this.renderField(e,i.renderedPage)))}render(){var e,i,n,s;const r=[{id:"later",label:"Finish Later"},{id:"claim",label:"Claim the Document",disabled:true},{id:"decline",label:"Decline to Sign"},{id:"print",label:"Print Without Signing"},{id:"download",label:"Download"}];return o(t,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),agreed:(e=this.recipient)===null||e===void 0?void 0:e.agreed}},o("div",{class:"intro"},o("div",{class:"inner"},"Please review and act on these documents.")),o("div",{class:"header"},o("div",{class:"inner"},o("div",{class:"toolbar"},o("div",{class:"tools"},o("verdocs-dropdown",{options:r,onOptionSelected:e=>this.handleOptionSelected(e)}),!((i=this.recipient)===null||i===void 0?void 0:i.agreed)?o("div",{class:"agree"},o("div",{class:"agree-checkbox"},o("input",{type:"checkbox",value:"None",id:"agree-checkbox-element",name:"agree",onChange:()=>this.handleClickAgree()}),o("label",{htmlFor:"agree-checkbox-element"})),o("span",null,"I agree to use electronic records and signatures.")):o("div",{style:{flex:"1"}}),o("verdocs-button",{size:"small",label:this.nextButtonLabel,disabled:!((n=this.recipient)===null||n===void 0?void 0:n.agreed),onClick:()=>this.handleNext()}))))),!((s=this.recipient)===null||s===void 0?void 0:s.agreed)?o("div",{class:"cover"}):o("div",{style:{display:"none"}}),o("div",{class:"document"},this.pdfUrl?o("div",{class:"inner"},o("verdocs-view",{envelopeId:this.envelopeId,endpoint:this.endpoint,onPageRendered:e=>this.handlePageRendered(e),pageLayers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})):o("verdocs-loader",null)))}};k.style=w;export{k as verdocs_sign};
-//# sourceMappingURL=p-7a476918.entry.js.map
+import{r as e,c as i,h as o,H as t}from"./p-ff1278ed.js";import{g as n,a as s,b as r,u as l}from"./p-6f1440dd.js";import"./p-8efc9749.js";import{a,i as d}from"./p-e662f81b.js";import{g as c}from"./p-6de76553.js";import{s as u,b as h,c as p}from"./p-7ce27ce2.js";import{V as f}from"./p-629237fc.js";import{S as v}from"./p-7a1b2643.js";var x=undefined&&undefined.__assign||function(){x=Object.assign||function(e){for(var i,o=1,t=arguments.length;o<t;o++){i=arguments[o];for(var n in i)if(Object.prototype.hasOwnProperty.call(i,n))e[n]=i[n]}return e};return x.apply(this,arguments)};var g=undefined&&undefined.__awaiter||function(e,i,o,t){function n(e){return e instanceof o?e:new o((function(i){i(e)}))}return new(o||(o=Promise))((function(o,s){function r(e){try{a(t.next(e))}catch(e){s(e)}}function l(e){try{a(t["throw"](e))}catch(e){s(e)}}function a(e){e.done?o(e.value):n(e.value).then(r,l)}a((t=t.apply(e,i||[])).next())}))};var b=undefined&&undefined.__generator||function(e,i){var o={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},t,n,s,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(e){return function(i){return a([e,i])}}function a(r){if(t)throw new TypeError("Generator is already executing.");while(o)try{if(t=1,n&&(s=r[0]&2?n["return"]:r[0]?n["throw"]||((s=n["return"])&&s.call(n),0):n.next)&&!(s=s.call(n,r[1])).done)return s;if(n=0,s)r=[r[0]&2,s.value];switch(r[0]){case 0:case 1:s=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(s=o.trys,s=s.length>0&&s[s.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!s||r[1]>s[0]&&r[1]<s[3])){o.label=r[1];break}if(r[0]===6&&o.label<s[1]){o.label=s[1];s=r;break}if(s&&o.label<s[2]){o.label=s[2];o.ops.push(r);break}if(s[2])o.ops.pop();o.trys.pop();continue}r=i.call(e,o)}catch(e){r=[6,e];n=0}finally{t=s=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var m=function(e,i,o,t,n){return g(void 0,void 0,void 0,(function(){return b(this,(function(s){return[2,e.api.put("/envelopes/".concat(i,"/recipients/").concat(o),x({role_name:o,action:t},n||{})).then((function(e){return e.data}))]}))}))};const w='verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:10px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree .agree-checkbox{background:#ccc;-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;position:relative;margin:0 10px 0 14px}verdocs-sign .agree .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign .agree .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree .agree-checkbox label .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:"";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}';const k=class{constructor(o){e(this,o);this.sdkError=i(this,"sdkError",7);this.endpoint=f.getDefault();this.envelopeId=null;this.roleId=null;this.inviteCode=null;this.recipient=null;this.signerToken=null;this.pdfUrl=null;this.recipientIndex=-1;this.envelope=null;this.fields=[];this.hasSignature=false;this.nextButtonLabel="Start";this.focusedField=""}async componentDidLoad(){var e,i,o;try{console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.envelopeId}`);const{session:e,recipient:i,signerToken:o}=await n(this.endpoint,{envelopeId:this.envelopeId,roleId:this.roleId,inviteCode:this.inviteCode});console.log(`[SIGN] Got signing session ${e.email} / ${e.profile_id}`);this.recipient=i;this.signerToken=o;this.endpoint.setToken(o);if(this.recipient.agreed){this.nextButtonLabel="Next"}const t=await s(this.endpoint,this.envelopeId);this.envelope=t;console.log("[SIGN] Signing document",document);this.pdfUrl=`${this.endpoint.getBaseURL()}/documents/${this.envelopeId}/envelope_documents/${t.envelope_document_id}?file=true`;this.recipientIndex=this.envelope.recipients.findIndex((e=>e.role_name==this.roleId));if(this.recipientIndex>-1){console.log("Found recipient",this.envelope.recipients[this.recipientIndex])}this.fields=this.envelope.fields.filter((e=>e.recipient_role===this.roleId));console.log("Loaded fields",this.fields)}catch(t){console.log("Error with signing session",t);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new v(t.message,(i=t.response)===null||i===void 0?void 0:i.status,(o=t.response)===null||o===void 0?void 0:o.data))}}handleClickAgree(){console.log("agree clicked");m(this.endpoint,this.envelopeId,this.roleId,"update",{agreed:true}).then((e=>{console.log("update result",e);this.nextButtonLabel="Next";this.recipient=e})).catch((e=>{var i,o,t;console.log("update failure",e);(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data))}))}async savePDF(){const e=`${this.envelope.name} - ${this.envelope.updated_at.split("T")[0]}.pdf`;const i=await r(this.endpoint,this.envelopeId,this.envelope.envelope_document_id);let o=new XMLHttpRequest;o.responseType="blob";o.onload=function(){let i=document.createElement("a");i.href=window.URL.createObjectURL(o.response);i.download=e;i.style.display="none";document.body.appendChild(i);i.click();i.remove()};const t=`data:application/pdf;base64,${i}`;console.log("url",t.length,t);o.open("GET",`data:application/pdf;base64,${i}`);o.send()}async handleOptionSelected(e){switch(e.detail.id){case"later":if(!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"])){window.alert("User intends to sign later.")}break;case"claim":break;case"decline":break;case"print":break;case"download":this.savePDF().catch((()=>{}));break}}async handleFieldChange(e,i,o){console.log("fieldChange",e,i);switch(e.type){case"textbox":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:i.detail}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t,n,s,r;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));if(((n=e.response)===null||n===void 0?void 0:n.status)===401&&((r=(s=e.response)===null||s===void 0?void 0:s.data)===null||r===void 0?void 0:r.error)==="jwt expired"){console.log("jwt expired")}console.log("Error updating",e)}));break;case"checkbox_group":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:{options:[{id:o,checked:i.detail}]}}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"radio_button_group":const t=e.settings.options.map((e=>({id:e.id,selected:o===e.id})));l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:{options:t}}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"dropdown":l(this.endpoint,this.envelopeId,e.name,{prepared:false,value:i.detail}).then((e=>console.log("Update result",e))).catch((e=>{var i,o,t;(i=this.sdkError)===null||i===void 0?void 0:i.emit(new v(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(t=e.response)===null||t===void 0?void 0:t.data));console.log("Error updating",e)}));break;case"initial":console.log("Got initial",i.detail);break;case"signature":console.log("Got signature",i.detail);break}}renderCheckboxGroupOption(e,i,t){const n=p(e.xScale,t.x);const s=p(e.yScale,t.y);const r={left:`${n}px`,bottom:`${s}px`,position:"absolute",transform:`scale(${e.xScale}, ${e.yScale})`,backgroundColor:c(this.recipientIndex)};return o("verdocs-field-checkbox",{style:r,field:i,onChange:e=>this.handleFieldChange(i,e,t.id)})}renderRadioGroupOption(e,i,t){const n=p(e.xScale,t.x);const s=p(e.yScale,t.y);const r={left:`${n}px`,bottom:`${s}px`,position:"absolute",transform:`scale(${e.xScale}, ${e.yScale})`,backgroundColor:c(this.recipientIndex)};return o("verdocs-field-radio-button",{style:r,field:i,onFieldChange:e=>this.handleFieldChange(i,e,t.id)})}isFieldValid(e){var i,o,t,n,s,r,l,c,u,h,p,f;switch(e.type){case"textbox":switch(((i=e.settings)===null||i===void 0?void 0:i.validator)||""){case"email":return d(((o=e.settings)===null||o===void 0?void 0:o.result)||"");case"phone":return a(((t=e.settings)===null||t===void 0?void 0:t.result)||"");default:return!!((n=e.settings)===null||n===void 0?void 0:n.result)}case"signature":case"initial":case"textarea":case"date":case"timestamp":case"attachment":return!!((s=e.settings)===null||s===void 0?void 0:s.result);case"dropdown":return!!((r=e.settings)===null||r===void 0?void 0:r.value);case"checkbox_group":const v=(((c=(l=e.settings)===null||l===void 0?void 0:l.options)===null||c===void 0?void 0:c.filter((e=>e.checked)))||[]).length;return v>=(((u=e.settings)===null||u===void 0?void 0:u.minimum_checked)||0)&&v<=(((h=e.settings)===null||h===void 0?void 0:h.maximum_checked)||999);case"radio_button_group":return(((f=(p=e.settings)===null||p===void 0?void 0:p.options)===null||f===void 0?void 0:f.filter((e=>e.selected)))||[]).length>0;default:return false}}handleNext(){const e=this.fields.filter((e=>e.required));console.log("required Fields",e);const i=e.findIndex((e=>e.name===this.focusedField));console.log("focused Index",i);let o=i+1;if(o>=e.length){o=0}const t=e[o];console.log("next required field",t);if(t){const e=h(t);const i=document.getElementById(e);console.log("focusing",e,i);i===null||i===void 0?void 0:i.focusField();this.focusedField=t.name}}renderField(e,i){const o=document.getElementById(i.containerId+"-controls");if(!o){return}const t=h(e);const n=document.getElementById(t);if(n){u(n,e,i.xScale,i.yScale,this.recipientIndex);return}let s;switch(e.type){case"attachment":case"checkbox_group":case"date":case"dropdown":case"initial":case"payment":case"signature":case"timestamp":case"textarea":case"textbox":s=document.createElement(`verdocs-field-${e.type}`);break;case"radio_button_group":break;default:console.log("[SIGN] Skipping unsupported field type",e)}if(s){s.field=e;s.recipient=this.recipient;s.setAttribute("id",t);s.setAttribute("roleindex",this.recipientIndex);s.addEventListener("fieldChange",(i=>this.handleFieldChange(e,i)));u(n,e,i.xScale,i.yScale,this.recipientIndex);o.appendChild(s)}}handlePageRendered(e){const i=e.detail;console.log("[SIGN] Page rendered",i);const o=this.fields.filter((e=>e.page===i.renderedPage.pageNumber));console.log("[SIGN] Fields on page",o);o.forEach((e=>this.renderField(e,i.renderedPage)))}render(){var e,i,n,s;const r=[{id:"later",label:"Finish Later"},{id:"claim",label:"Claim the Document",disabled:true},{id:"decline",label:"Decline to Sign"},{id:"print",label:"Print Without Signing"},{id:"download",label:"Download"}];return o(t,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),agreed:(e=this.recipient)===null||e===void 0?void 0:e.agreed}},o("div",{class:"intro"},o("div",{class:"inner"},"Please review and act on these documents.")),o("div",{class:"header"},o("div",{class:"inner"},o("div",{class:"toolbar"},o("div",{class:"tools"},o("verdocs-dropdown",{options:r,onOptionSelected:e=>this.handleOptionSelected(e)}),!((i=this.recipient)===null||i===void 0?void 0:i.agreed)?o("div",{class:"agree"},o("div",{class:"agree-checkbox"},o("input",{type:"checkbox",value:"None",id:"agree-checkbox-element",name:"agree",onChange:()=>this.handleClickAgree()}),o("label",{htmlFor:"agree-checkbox-element"})),o("span",null,"I agree to use electronic records and signatures.")):o("div",{style:{flex:"1"}}),o("verdocs-button",{size:"small",label:this.nextButtonLabel,disabled:!((n=this.recipient)===null||n===void 0?void 0:n.agreed),onClick:()=>this.handleNext()}))))),!((s=this.recipient)===null||s===void 0?void 0:s.agreed)?o("div",{class:"cover"}):o("div",{style:{display:"none"}}),o("div",{class:"document"},this.pdfUrl?o("div",{class:"inner"},o("verdocs-view",{envelopeId:this.envelopeId,endpoint:this.endpoint,onPageRendered:e=>this.handlePageRendered(e),pageLayers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})):o("verdocs-loader",null)))}};k.style=w;export{k as verdocs_sign};
+//# sourceMappingURL=p-2fbd4e25.entry.js.map

package/dist/verdocs-web-sdk/p-2fbd4e25.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@verdocs/js-sdk/Envelopes/Recipients.js","src/components/embeds/verdocs-sign/verdocs-sign.scss?tag=verdocs-sign","src/components/embeds/verdocs-sign/verdocs-sign.tsx"],"names":["__assign","this","Object","assign","t","s","i","n","arguments","length","p","prototype","hasOwnProperty","call","apply","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","Promise","reject","fulfilled","step","next","e","rejected","result","done","then","__generator","body","_","label","sent","trys","ops","f","y","g","verb","throw","return","Symbol","iterator","v","op","TypeError","pop","push","updateRecipientStatus","endpoint","envelopeId","roleName","action","params","_a","api","put","concat","role_name","r","data","verdocsSignCss","VerdocsSign","VerdocsEndpoint","getDefault","[object Object]","console","log","session","recipient","signerToken","Envelopes.getSigningSession","roleId","inviteCode","email","profile_id","setToken","agreed","nextButtonLabel","envelope","Envelopes.getEnvelope","document","pdfUrl","getBaseURL","envelope_document_id","recipientIndex","recipients","findIndex","fields","filter","field","recipient_role","sdkError","emit","SDKError","message","_b","response","status","_c","catch","fileName","name","updated_at","split","Envelopes.getEnvelopeFile","xhr","XMLHttpRequest","responseType","onload","a","createElement","href","window","URL","createObjectURL","download","style","display","appendChild","click","remove","url","open","send","detail","id","alert","savePDF","optionId","type","Envelopes.updateEnvelopeField","prepared","_d","_f","_e","error","options","checked","settings","map","option","selected","page","left","rescale","xScale","x","bottom","yScale","position","transform","backgroundColor","getRGBA","h","onChange","handleFieldChange","onFieldChange","validator","isValidEmail","isValidPhone","_h","_g","_j","minimum_checked","_k","maximum_checked","_m","_l","requiredFields","required","focusedIndex","focusedField","nextFocusedIndex","nextRequiredField","getFieldId","el","getElementById","focusField","docPage","controlsDiv","containerId","existingField","setControlStyles","setAttribute","addEventListener","pageInfo","renderedPage","pageNumber","forEach","renderField","menuOptions","disabled","Host","class","storybook","onOptionSelected","handleOptionSelected","handleClickAgree","htmlFor","flex","size","onClick","handleNext","onPageRendered","handlePageRendered","pageLayers"],"mappings":"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","sourcesContent":["var __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\n/**\n * Update a recipient's status block\n */\nexport var updateRecipientStatus = function (endpoint, envelopeId, roleName, action, params) { return __awaiter(void 0, void 0, void 0, function () {\n    return __generator(this, function (_a) {\n        return [2 /*return*/, endpoint.api //\n                .put(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))\n                .then(function (r) { return r.data; })];\n    });\n}); };\nexport var getSignerToken = function (endpoint, envelopeId, roleName) {\n    return endpoint.api //\n        .get(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(encodeURIComponent(roleName), \"/signer-token\"))\n        .then(function (r) { return r.data; });\n};\nexport var getInPersonLink = function (endpoint, envelopeId, roleName) {\n    return endpoint.api //\n        .get(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(encodeURIComponent(roleName), \"?in_person_link=true\"))\n        .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-sign {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .intro {\n    width: 100%;\n    height: 60px;\n    display: flex;\n    background: #ffffff;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      color: #111111;\n      padding: 0 14px;\n      font-size: 20px;\n      font-weight: 500;\n      line-height: 28px;\n      max-width: 1024px;\n    }\n  }\n\n  &.agreed {\n    .intro {\n      //display: none;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n  }\n\n  .cover {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999;\n    position: absolute;\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .agree {\n    flex: 1;\n    flex-direction: row;\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n\n    .intro {\n      display: none;\n    }\n\n    .header {\n      flex: 0 0 56px;\n    }\n\n    .agree-checkbox {\n      background: #ccc;\n      flex: 0 0 20px;\n      display: flex;\n      width: 20px;\n      height: 20px;\n      border-radius: 3px;\n      position: relative;\n      margin: 0 10px 0 14px;\n\n      input[type='checkbox']:checked + label:after {\n        filter: alpha(opacity=100);\n        opacity: 1;\n      }\n\n      label {\n        left: 2px;\n        top: 2px;\n        width: 16px;\n        height: 16px;\n        cursor: pointer;\n        position: absolute;\n        background: #33354c;\n        box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);\n\n        .agree-checkbox label:hover::after {\n          filter: alpha(opacity=30);\n          opacity: 0.3;\n        }\n\n        &:after {\n          top: 2px;\n          left: 3px;\n          width: 8px;\n          opacity: 0;\n          height: 5px;\n          content: '';\n          position: absolute;\n          background: transparent;\n          filter: alpha(opacity=0);\n          transform: rotate(-45deg);\n          border: 2px solid #fcfff4;\n          border-top: none;\n          border-right: none;\n        }\n      }\n    }\n  }\n}\n","import {Event, EventEmitter, Host} from '@stencil/core';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Envelopes} from '@verdocs/js-sdk/Envelopes';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\nimport {Component, Prop, State, h} from '@stencil/core';\nimport {updateRecipientStatus} from '@verdocs/js-sdk/Envelopes/Recipients';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {IEnvelope, IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {IPageRenderEvent} from '../verdocs-view/verdocs-view';\nimport {getFieldId, setControlStyles} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Display a document signing experience.\n *\n * ***NOTE: This sample document will reset every 10 minutes...***\n */\n@Component({\n  tag: 'verdocs-sign',\n  styleUrl: 'verdocs-sign.scss',\n  shadow: false,\n})\nexport class VerdocsSign {\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 ID of the envelope to sign.\n   */\n  @Prop() envelopeId: string | null = null;\n\n  /**\n   * The name of the role that will be signing.\n   */\n  @Prop() roleId: string | null = null;\n\n  /**\n   * The invite code for the signer.\n   */\n  @Prop() inviteCode: string | null = null;\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() recipient: IRecipient | null = null;\n\n  @State() signerToken = null;\n  @State() pdfUrl = null;\n  @State() recipientIndex: number = -1;\n  @State() envelope: IEnvelope | null = null;\n  @State() fields: IDocumentField[] = [];\n\n  @State() hasSignature = false;\n\n  @State() nextButtonLabel = 'Start';\n\n  @State() focusedField = '';\n\n  async componentDidLoad() {\n    try {\n      console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.envelopeId}`);\n      const {session, recipient, signerToken} = await Envelopes.getSigningSession(this.endpoint, {\n        envelopeId: this.envelopeId,\n        roleId: this.roleId,\n        inviteCode: this.inviteCode,\n      });\n\n      console.log(`[SIGN] Got signing session ${session.email} / ${session.profile_id}`);\n\n      this.recipient = recipient;\n      this.signerToken = signerToken;\n      this.endpoint.setToken(signerToken);\n\n      if (this.recipient.agreed) {\n        this.nextButtonLabel = 'Next';\n      }\n\n      const envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);\n      this.envelope = envelope;\n      console.log('[SIGN] Signing document', document);\n\n      this.pdfUrl = `${this.endpoint.getBaseURL()}/documents/${this.envelopeId}/envelope_documents/${envelope.envelope_document_id}?file=true`;\n\n      this.recipientIndex = this.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);\n      if (this.recipientIndex > -1) {\n        console.log('Found recipient', this.envelope.recipients[this.recipientIndex]);\n      }\n\n      this.fields = this.envelope.fields.filter(field => field.recipient_role === this.roleId);\n      console.log('Loaded fields', this.fields);\n\n      // TODO: Fix service to allow this?\n      // const sigs = await getSignatures();\n      // console.log('sigs', sigs);\n    } catch (e) {\n      console.log('Error with signing session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleClickAgree() {\n    console.log('agree clicked');\n    updateRecipientStatus(this.endpoint, this.envelopeId, this.roleId, 'update', {agreed: true})\n      .then(r => {\n        console.log('update result', r);\n        this.nextButtonLabel = 'Next';\n        this.recipient = r;\n      })\n      .catch(e => {\n        console.log('update failure', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      });\n  }\n\n  async savePDF() {\n    const fileName = `${this.envelope.name} - ${this.envelope.updated_at.split('T')[0]}.pdf`;\n    const data = await Envelopes.getEnvelopeFile(this.endpoint, this.envelopeId, this.envelope.envelope_document_id);\n\n    // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique\n    // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image\n    let xhr = new XMLHttpRequest();\n    xhr.responseType = 'blob';\n    xhr.onload = function () {\n      let a = document.createElement('a');\n      a.href = window.URL.createObjectURL(xhr.response);\n      a.download = fileName;\n      a.style.display = 'none';\n      document.body.appendChild(a);\n      a.click();\n      a.remove();\n    };\n\n    const url = `data:application/pdf;base64,${data}`;\n    console.log('url', url.length, url);\n    xhr.open('GET', `data:application/pdf;base64,${data}`);\n    xhr.send();\n  }\n\n  async handleOptionSelected(e) {\n    switch (e.detail.id) {\n      case 'later':\n        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);\n        if (!window?.['STORYBOOK_ENV']) {\n          window.alert('User intends to sign later.');\n        }\n        break;\n      case 'claim':\n        break;\n      case 'decline':\n        break;\n      case 'print':\n        break;\n      case 'download':\n        this.savePDF().catch(() => {});\n        break;\n    }\n  }\n\n  async handleFieldChange(field: IDocumentField, e: any, optionId?: string) {\n    console.log('fieldChange', field, e);\n    switch (field.type) {\n      case 'textbox':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            if (e.response?.status === 401 && e.response?.data?.error === 'jwt expired') {\n              console.log('jwt expired');\n            }\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'checkbox_group':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options: [{id: optionId, checked: e.detail}]}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'radio_button_group':\n        const options = field.settings.options.map(option => ({id: option.id, selected: optionId === option.id}));\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: {options}})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'dropdown':\n        Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => {\n            this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n            console.log('Error updating', e);\n          });\n        break;\n\n      case 'initial':\n        console.log('Got initial', e.detail);\n        break;\n\n      case 'signature':\n        console.log('Got signature', e.detail);\n        break;\n    }\n  }\n\n  renderCheckboxGroupOption(page: IDocumentPageInfo, field: IDocumentField, option: any) {\n    const left = rescale(page.xScale, option.x);\n    const bottom = rescale(page.yScale, option.y);\n\n    const style = {\n      left: `${left}px`,\n      bottom: `${bottom}px`,\n      position: 'absolute',\n      transform: `scale(${page.xScale}, ${page.yScale})`,\n      backgroundColor: getRGBA(this.recipientIndex),\n    } as any;\n\n    return <verdocs-field-checkbox style={style} field={field} onChange={e => this.handleFieldChange(field, e, option.id)} />;\n  }\n\n  renderRadioGroupOption(page: IDocumentPageInfo, field: IDocumentField, option: any) {\n    const left = rescale(page.xScale, option.x);\n    const bottom = rescale(page.yScale, option.y);\n\n    const style = {\n      left: `${left}px`,\n      bottom: `${bottom}px`,\n      position: 'absolute',\n      transform: `scale(${page.xScale}, ${page.yScale})`,\n      backgroundColor: getRGBA(this.recipientIndex),\n    } as any;\n\n    return <verdocs-field-radio-button style={style} field={field} onFieldChange={e => this.handleFieldChange(field, e, option.id)} />;\n  }\n\n  isFieldValid(field: IDocumentField) {\n    switch (field.type) {\n      case 'textbox':\n        switch (field.settings?.validator || '') {\n          case 'email':\n            return isValidEmail(field.settings?.result || '');\n          case 'phone':\n            return isValidPhone(field.settings?.result || '');\n          default:\n            return !!field.settings?.result;\n        }\n\n      case 'signature':\n      case 'initial':\n      case 'textarea':\n      case 'date':\n      case 'timestamp':\n      case 'attachment':\n        return !!field.settings?.result;\n      case 'dropdown':\n        return !!field.settings?.value;\n      case 'checkbox_group':\n        const checked = (field.settings?.options?.filter(option => option.checked) || []).length;\n        return checked >= (field.settings?.minimum_checked || 0) && checked <= (field.settings?.maximum_checked || 999);\n      case 'radio_button_group':\n        return (field.settings?.options?.filter(option => option.selected) || []).length > 0;\n      // TODO\n      // case 'checkbox':\n      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;\n      // case 'payment':\n      //   return <verdocs-field-payment style={style} field={field} id={id} />;\n      default:\n        return false;\n    }\n  }\n\n  // (async () => {\n  //   await customElements.whenDefined('verdocs-field-signature');\n  //   const els = document.getElementById('verdocs-field-signature');\n  //   await els.focusField();\n  // })();\n\n  handleNext() {\n    // Find and focus the next incomplete required field\n    const requiredFields = this.fields.filter(field => field.required);\n    console.log('required Fields', requiredFields);\n\n    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);\n    console.log('focused Index', focusedIndex);\n\n    let nextFocusedIndex = focusedIndex + 1;\n    if (nextFocusedIndex >= requiredFields.length) {\n      nextFocusedIndex = 0;\n    }\n\n    const nextRequiredField = requiredFields[nextFocusedIndex];\n    console.log('next required field', nextRequiredField);\n\n    if (nextRequiredField) {\n      const id = getFieldId(nextRequiredField);\n      const el = document.getElementById(id) as any;\n      console.log('focusing', id, el);\n      el?.focusField();\n      this.focusedField = nextRequiredField.name;\n    }\n  }\n\n  renderField(field: IDocumentField, docPage: IDocumentPageInfo /*, index: number*/) {\n    const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n    if (!controlsDiv) {\n      return;\n    }\n\n    const id = getFieldId(field);\n    const existingField = document.getElementById(id);\n    if (existingField) {\n      setControlStyles(existingField, field, docPage.xScale, docPage.yScale, this.recipientIndex);\n      return;\n    }\n\n    let el;\n    switch (field.type) {\n      case 'attachment':\n      case 'checkbox_group':\n      case 'date':\n      case 'dropdown':\n      case 'initial':\n      case 'payment':\n      case 'signature':\n      case 'timestamp':\n      case 'textarea':\n      case 'textbox':\n        el = document.createElement(`verdocs-field-${field.type}`);\n        break;\n      //   return field.settings.options.map((option: any, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));\n      case 'radio_button_group':\n        //   el = document.createElement('verdocs-field-signature');\n        //   el.setAttribute('value', base64);\n        break;\n      //   return field.settings.options.map((option: any, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));\n      // case 'attachment':\n      //   el = document.createElement('verdocs-field-attachment');\n      //   el.setAttribute('value', result || '');\n      //   break;\n      // case 'payment':\n      //   el = document.createElement('verdocs-field-payment');\n      //   break;\n      default:\n        console.log('[SIGN] Skipping unsupported field type', field);\n    }\n\n    if (el) {\n      el.field = field;\n      el.recipient = this.recipient;\n      el.setAttribute('id', id);\n      el.setAttribute('roleindex', this.recipientIndex);\n      el.addEventListener('fieldChange', e => this.handleFieldChange(field, e));\n      setControlStyles(existingField, field, docPage.xScale, docPage.yScale, this.recipientIndex);\n      controlsDiv.appendChild(el);\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[SIGN] Page rendered', pageInfo);\n\n    const fields = this.fields.filter(field => field.page === pageInfo.renderedPage.pageNumber);\n    console.log('[SIGN] Fields on page', fields);\n    fields.forEach(field => this.renderField(field, pageInfo.renderedPage));\n    // .map((field, index) => this.renderField(field, index));\n    // this.pdfPageInfo = e.detail;\n  }\n\n  render() {\n    const menuOptions = [\n      {id: 'later', label: 'Finish Later'}, //\n      {id: 'claim', label: 'Claim the Document', disabled: true},\n      {id: 'decline', label: 'Decline to Sign'},\n      {id: 'print', label: 'Print Without Signing'},\n      {id: 'download', label: 'Download'},\n    ];\n\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], agreed: this.recipient?.agreed}}>\n        <div class=\"intro\">\n          <div class=\"inner\">Please review and act on these documents.</div>\n        </div>\n\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <verdocs-dropdown options={menuOptions} onOptionSelected={e => this.handleOptionSelected(e)} />\n\n                {!this.recipient?.agreed ? (\n                  <div class=\"agree\">\n                    <div class=\"agree-checkbox\">\n                      <input type=\"checkbox\" value=\"None\" id=\"agree-checkbox-element\" name=\"agree\" onChange={() => this.handleClickAgree()} />\n                      <label htmlFor=\"agree-checkbox-element\" />\n                    </div>\n                    <span>I agree to use electronic records and signatures.</span>\n                  </div>\n                ) : (\n                  <div style={{flex: '1'}} />\n                )}\n                <verdocs-button size=\"small\" label={this.nextButtonLabel} disabled={!this.recipient?.agreed} onClick={() => this.handleNext()} />\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {!this.recipient?.agreed ? <div class=\"cover\" /> : <div style={{display: 'none'}} />}\n\n        <div class=\"document\">\n          {this.pdfUrl ? (\n            <div class=\"inner\">\n              <verdocs-view\n                envelopeId={this.envelopeId}\n                endpoint={this.endpoint}\n                onPageRendered={e => this.handlePageRendered(e)}\n                pageLayers={[\n                  {name: 'page', type: 'canvas'},\n                  {name: 'controls', type: 'div'},\n                ]}\n              />\n            </div>\n          ) : (\n            <verdocs-loader />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-36700fe4.js

@@ -0,0 +1,2 @@
+import{g as o}from"./p-d534fffb.js";import{s as t}from"./p-8fd9dc5a.js";const e=async(e,a)=>{t.template=null;if(!a){console.log(`[TEMPLATES] Missing required template ID`);return}t.loading=true;try{console.log(`[TEMPLATES] Loading template ${a}`);const r=await o(e,a);if(!r){console.log("[TEMPLATES] Unable to load template");return}t.template=r;t.loading=false}catch(o){console.log("[TEMPLATES] Error loading template",o);throw o}};export{e as l};
+//# sourceMappingURL=p-36700fe4.js.map

package/dist/verdocs-web-sdk/p-36700fe4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/Templates.ts"],"names":["loadTemplate","async","endpoint","templateId","TemplateStore","template","console","log","loading","getTemplate","e"],"mappings":"8EAIaA,EAAeC,MAAOC,EAA2BC,KAC5DC,EAAcC,SAAW,KAEzB,IAAKF,EAAY,CACfG,QAAQC,IAAI,4CACZ,OAGFH,EAAcI,QAAU,KAExB,IACEF,QAAQC,IAAI,gCAAgCJ,KAC5C,MAAME,QAAiBI,EAAYP,EAAUC,GAC7C,IAAKE,EAAU,CACbC,QAAQC,IAAI,uCACZ,OAGFH,EAAcC,SAAWA,EACzBD,EAAcI,QAAU,MACxB,MAAOE,GACPJ,QAAQC,IAAI,qCAAsCG,GAClD,MAAMA","sourcesContent":["import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport TemplateStore from './templateStore';\n\nexport const loadTemplate = async (endpoint: VerdocsEndpoint, templateId: string) => {\n  TemplateStore.template = null;\n\n  if (!templateId) {\n    console.log(`[TEMPLATES] Missing required template ID`);\n    return;\n  }\n\n  TemplateStore.loading = true;\n\n  try {\n    console.log(`[TEMPLATES] Loading template ${templateId}`);\n    const template = await getTemplate(endpoint, templateId);\n    if (!template) {\n      console.log('[TEMPLATES] Unable to load template');\n      return;\n    }\n\n    TemplateStore.template = template;\n    TemplateStore.loading = false;\n  } catch (e) {\n    console.log('[TEMPLATES] Error loading template', e);\n    throw e;\n  }\n};\n"]}

package/dist/verdocs-web-sdk/p-37a75b0e.system.entry.js.map

@@ -1 +1 @@
-{"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","exports","class_1","prototype","componentWillLoad","this","selectedOption","_a","options","defaultSelection","render","_this","h","class","concat","label","buttons","map","button","index","id","key","innerHTML","icon","onClick","console","log"],"mappings":"0IAAA,IAAMA,EAAmB,0lCCwBZC,EAAaC,EAAA,iBAAA,mGAWU,EAElCC,EAAAC,UAAAC,kBAAA,iBACEC,KAAKC,iBAAiBC,EAAAF,KAAKG,WAAO,MAAAD,SAAA,OAAA,EAAAA,EAAEE,mBAAoB,GA0B1DP,EAAAC,UAAAO,OAAA,WAAA,IAAAC,EAAAN,KACE,OACEO,EAAA,MAAA,CAAKC,MAAM,aACTD,EAAA,OAAA,CAAMC,MAAM,SAAS,GAAAC,OAAGT,KAAKG,QAAQO,MAAK,MAC1CH,EAAA,MAAA,CAAKC,MAAM,WACRR,KAAKG,QAAQQ,QAAQC,KAAI,SAACC,EAAkBC,GAAa,OACxDP,EAAA,SAAA,CACEQ,GAAIF,EAAOE,GACXC,IAAKH,EAAOE,GACZE,UAAWJ,EAAOK,KAClBV,MAAOM,IAAUR,EAAKL,eAAiB,WAAa,GACpDkB,QAAS,WACPC,QAAQC,IAAI,UAAWP,GACvBR,EAAKL,eAAiBa,oBArDZ","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 * ```typescript\n *\n * ```\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  // @Listen('click', {\n  //   target: 'document',\n  //   capture: true,\n  //   passive: false,\n  // })\n  // handleClick(event) {\n  //   event.preventDefault();\n  //   let container = event.target;\n  //   if (container.matches('toggle-icon-buttons')) {\n  //     container = event.target.shadowRoot;\n  //     const element = container.activeElement;\n  //     const siblings = Array.from(element.parentElement.children).filter(child => {\n  //       return child !== element;\n  //     });\n  //     siblings.map((sibling: any) => {\n  //       return sibling.classList.remove('selected');\n  //     });\n  //     if (!element.classList.contains('selected')) {\n  //       element.classList.add('selected');\n  //     }\n  //   }\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"]}
+{"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","exports","class_1","prototype","componentWillLoad","this","selectedOption","_a","options","defaultSelection","render","_this","h","class","concat","label","buttons","map","button","index","id","key","innerHTML","icon","onClick","console","log"],"mappings":"0IAAA,IAAMA,EAAmB,0lCCoBZC,EAAaC,EAAA,iBAAA,mGAWU,EAElCC,EAAAC,UAAAC,kBAAA,iBACEC,KAAKC,iBAAiBC,EAAAF,KAAKG,WAAO,MAAAD,SAAA,OAAA,EAAAA,EAAEE,mBAAoB,GAG1DP,EAAAC,UAAAO,OAAA,WAAA,IAAAC,EAAAN,KACE,OACEO,EAAA,MAAA,CAAKC,MAAM,aACTD,EAAA,OAAA,CAAMC,MAAM,SAAS,GAAAC,OAAGT,KAAKG,QAAQO,MAAK,MAC1CH,EAAA,MAAA,CAAKC,MAAM,WACRR,KAAKG,QAAQQ,QAAQC,KAAI,SAACC,EAAkBC,GAAa,OACxDP,EAAA,SAAA,CACEQ,GAAIF,EAAOE,GACXC,IAAKH,EAAOE,GACZE,UAAWJ,EAAOK,KAClBV,MAAOM,IAAUR,EAAKL,eAAiB,WAAa,GACpDkB,QAAS,WACPC,QAAQC,IAAI,UAAWP,GACvBR,EAAKL,eAAiBa,oBA9BZ","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"]}