@verdocs/web-sdk 5.0.32 → 5.0.34

package/dist/components/{p-27548ebd.js.map → p-a443bd3a.js.map}

@@ -1 +1 @@
-{"file":"p-27548ebd.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  display: block;\n  border: 1px solid #ebebeb;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n  form {\n    gap: 12px;\n    width: 300px;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n    background-color: $verdocs-grey-3;\n\n    .row {\n      gap: 8px;\n      display: flex;\n      position: relative;\n      flex-direction: row;\n      align-items: center;\n\n      &.message {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n    }\n\n    .names-row {\n      gap: 8px;\n      display: flex;\n      flex-direction: row;\n\n      > input {\n        font-size: 14px;\n        width: 103px;\n      }\n    }\n\n    .kba-row {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      verdocs-select-input {\n        margin: 0;\n      }\n    }\n\n    .pin-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 0;\n        width: 133px;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .address {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .zip-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    label {\n      display: flex;\n      flex: 0 0 50px;\n      font-size: 14px;\n      font-weight: 500;\n      color: $verdocs-bg-4;\n    }\n\n    .row.message label {\n      flex: 0;\n    }\n\n    .row.message input {\n      width: 100%;\n    }\n\n    input {\n      flex: 1;\n      padding: 6px;\n      font-size: 14px;\n      border-radius: 3px;\n      background: #00000005;\n      border: 1px solid $border-color-extralight;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 1000000;\n      max-height: 225px;\n      overflow-y: scroll;\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          width: 32px;\n          height: 32px;\n        }\n\n        .avatar {\n          width: 32px;\n          height: 32px;\n          flex: 0 0 32px;\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: 6px;\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 {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {formatFullName, IProfile, IRecipient, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {convertToE164} from '../../../utils/utils';\n\nconst messageIcon =\n  '<svg focusable=\"false\" 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\n// const delegateIcon =\n//   '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><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 kbaIcon =\n  '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z\" clip-rule=\"evenodd\" /></svg>';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nexport interface IContactSearchEvent {\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  first_name: string;\n  last_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n  kba_method: string;\n  kba_pin: string;\n  address: string;\n  zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/**\n * Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\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 fields 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 * ```ts\n * <verdocs-contact-picker\n *   templateRole={role}\n *   contactSuggestions={[]}\n *   onNext={e => console.log('Contact completed', e.detail)}\n *   />\n * ```\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: Partial<IRecipient> | 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: TPickerContact[] = [];\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 step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() first_name: string;\n  @State() last_name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() zip: string;\n  @State() address: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() showKba: boolean = false;\n  @State() kba_method: '' | 'pin' | 'identity' = '';\n  @State() kba_pin: string = '';\n\n  @State() nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;\n  @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n  @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      const fullName = formatFullName(this.templateRole);\n      const nameComponents = fullName.split(' ');\n      const firstName = this.templateRole.first_name || nameComponents.shift() || '';\n      const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';\n      this.first_name = firstName;\n      this.last_name = lastName;\n\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      this.kba_method = this.templateRole.kba_method || '';\n      this.kba_pin = this.templateRole.kba_pin || '';\n      this.showKba = !!this.kba_method;\n      // TODO: Allow template roles to have zip codes predefined?\n    }\n  }\n\n  handleFirstNameChange(e: any) {\n    this.first_name = e.target.value;\n    this.searchContacts?.emit({query: this.first_name});\n  }\n\n  handleLastNameChange(e: any) {\n    this.last_name = e.target.value;\n    this.searchContacts?.emit({query: this.last_name});\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.exit?.emit();\n  }\n\n  handleSubmit(e: any) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n      kba_method: this.kba_method,\n      kba_pin: this.kba_pin,\n      address: this.address,\n      zip: this.zip,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n    e.stopPropagation();\n\n    this.first_name = suggestion.first_name;\n    this.last_name = suggestion.last_name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n  // and show a duplicate autocomplete picker on top of our own.\n  render() {\n    // TODO: Re-activate this one SMS is re-enabled\n    // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) || isValidPhone(this.phone));\n    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n    const hasKbaRequirements =\n      !this.kba_method ||\n      (this.kba_method === 'pin' && this.kba_pin) ||\n      this.kba_method === 'identity';\n      // TODO: For discussion\n      // (this.kba_method === 'identity' && this.address && this.zip)\n    const canSubmit = hasBasics && hasKbaRequirements;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor={this.nameFieldId}>Name:</label>\n          <div class=\"names-row\">\n            <input\n              id={this.firstNameFieldId}\n              name={this.firstNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.first_name}\n              placeholder=\"First...\"\n              onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n              onInput={e => this.handleFirstNameChange(e)}\n            />\n            <input\n              id={this.lastNameFieldId}\n              name={this.lastNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.last_name}\n              placeholder=\"Last...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleLastNameChange(e)}\n            />\n          </div>\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions\n                .filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))\n                .map(suggestion => (\n                  <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                    {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n                    <div class=\"details\">\n                      <div class=\"name\">{formatFullName(suggestion)}</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={this.emailFieldId}>Email:</label>\n          <input\n            id={this.emailFieldId}\n            name={this.emailFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.email}\n            placeholder=\"Email address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => (this.email = e.target.value)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor={this.phoneFieldId}>Phone:</label>\n          <input\n            id={this.phoneFieldId}\n            name={this.phoneFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.phone}\n            placeholder=\"Phone (SMS)...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => {\n              this.phone = convertToE164(e.target.value);\n            }}\n          />\n        </div>\n\n        {this.showKba && (\n          <Fragment>\n            <div class=\"kba-row\">\n              <label>KBA:</label>\n              <verdocs-select-input\n                value={this.kba_method}\n                onInput={(e: any) => {\n                  this.kba_method = e.target.value;\n                  this.zip = '';\n                  this.address = '';\n                  this.kba_pin = '';\n                }}\n                options={[\n                  {label: 'None', value: ''},\n                  {label: 'PIN Code', value: 'pin'},\n                  {label: 'Full Verification', value: 'identity'},\n                ]}\n              />\n              <div style={{flex: '1'}}></div>\n              <verdocs-help-icon text=\"Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature.\" />\n            </div>\n\n            {this.kba_method === 'pin' && (\n              <div class=\"row pin-code\">\n                <input\n                  id=\"verdocs-pin-code\"\n                  name=\"verdocs-pin-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.kba_pin}\n                  placeholder=\"PIN Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.kba_pin = e.target.value)}\n                />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row address\">\n                <input\n                  id=\"verdocs-address\"\n                  name=\"verdocs-address\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.address}\n                  placeholder=\"Address...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.address = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current street address. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row zip-code\">\n                <input\n                  id=\"verdocs-zip-code\"\n                  name=\"verdocs-zip-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.zip}\n                  placeholder=\"Zip Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.zip = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current zip code. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n          </Fragment>\n        )}\n\n        {this.showMessage && (\n          <div class=\"row message\">\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=\"blocked\"\n              value={this.message}\n              placeholder=\"Message shown in invitation...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={(e: any) => (this.message = e.target.value)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={kbaIcon}\n            size=\"small\"\n            active={this.showKba}\n            onToggle={e => {\n              this.showKba = e.detail.active;\n              if (!e.detail.active) {\n                this.kba_pin = '';\n                this.kba_method = '';\n                this.zip = '';\n              }\n              this.showSuggestions = false;\n            }}\n          />\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\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\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-a443bd3a.js","mappings":"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","names":[],"sources":["src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  display: block;\n  border: 1px solid #ebebeb;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n  form {\n    gap: 12px;\n    width: 300px;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n    background-color: $verdocs-grey-3;\n\n    .row {\n      gap: 8px;\n      display: flex;\n      position: relative;\n      flex-direction: row;\n      align-items: center;\n\n      &.message {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n    }\n\n    .names-row {\n      gap: 8px;\n      display: flex;\n      flex-direction: row;\n\n      > input {\n        font-size: 14px;\n        width: 83px;\n      }\n    }\n\n    .kba-row {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      verdocs-select-input {\n        margin: 0;\n      }\n    }\n\n    .pin-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 0;\n        width: 133px;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .address {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .zip-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    label {\n      display: flex;\n      flex: 0 0 80px;\n      font-size: 13px;\n      font-weight: 500;\n      color: $verdocs-bg-4;\n    }\n\n    .row.message label {\n      flex: 0;\n    }\n\n    .row.message input {\n      width: 100%;\n    }\n\n    input {\n      flex: 1;\n      padding: 6px;\n      font-size: 14px;\n      border-radius: 3px;\n      background: #00000005;\n      border: 1px solid $border-color-extralight;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 1000000;\n      max-height: 225px;\n      overflow-y: scroll;\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          width: 32px;\n          height: 32px;\n        }\n\n        .avatar {\n          width: 32px;\n          height: 32px;\n          flex: 0 0 32px;\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: 6px;\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 {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {formatFullName, IProfile, IRecipient, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {convertToE164} from '../../../utils/utils';\n\nconst messageIcon =\n  '<svg focusable=\"false\" 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\n// const delegateIcon =\n//   '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><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 kbaIcon =\n  '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z\" clip-rule=\"evenodd\" /></svg>';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nexport interface IContactSearchEvent {\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  first_name: string;\n  last_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n  kba_method: string;\n  kba_pin: string;\n  address: string;\n  zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/**\n * Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\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 fields 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 * ```ts\n * <verdocs-contact-picker\n *   templateRole={role}\n *   contactSuggestions={[]}\n *   onNext={e => console.log('Contact completed', e.detail)}\n *   />\n * ```\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: Partial<IRecipient> | 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: TPickerContact[] = [];\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 step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() first_name: string;\n  @State() last_name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() zip: string;\n  @State() address: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() showKba: boolean = false;\n  @State() kba_method: '' | 'pin' | 'identity' = '';\n  @State() kba_pin: string = '';\n\n  @State() nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;\n  @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n  @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      const fullName = formatFullName(this.templateRole);\n      const nameComponents = fullName.split(' ');\n      const firstName = this.templateRole.first_name || nameComponents.shift() || '';\n      const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';\n      this.first_name = firstName;\n      this.last_name = lastName;\n\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      this.kba_method = this.templateRole.kba_method || '';\n      this.kba_pin = this.templateRole.kba_pin || '';\n      this.showKba = !!this.kba_method;\n      // TODO: Allow template roles to have zip codes predefined?\n    }\n  }\n\n  handleFirstNameChange(e: any) {\n    this.first_name = e.target.value;\n    this.searchContacts?.emit({query: this.first_name});\n  }\n\n  handleLastNameChange(e: any) {\n    this.last_name = e.target.value;\n    this.searchContacts?.emit({query: this.last_name});\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.exit?.emit();\n  }\n\n  handleSubmit(e: any) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n      kba_method: this.kba_method,\n      kba_pin: this.kba_pin,\n      address: this.address,\n      zip: this.zip,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n    e.stopPropagation();\n\n    this.first_name = suggestion.first_name;\n    this.last_name = suggestion.last_name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n  // and show a duplicate autocomplete picker on top of our own.\n  render() {\n    // TODO: Re-activate this one SMS is re-enabled\n    // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) || isValidPhone(this.phone));\n    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n    const hasKbaRequirements =\n      !this.kba_method ||\n      (this.kba_method === 'pin' && this.kba_pin) ||\n      this.kba_method === 'identity';\n      // TODO: For discussion\n      // (this.kba_method === 'identity' && this.address && this.zip)\n    const canSubmit = hasBasics && hasKbaRequirements;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor={this.nameFieldId}>Name:</label>\n          <div class=\"names-row\">\n            <input\n              id={this.firstNameFieldId}\n              name={this.firstNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.first_name}\n              placeholder=\"First...\"\n              onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n              onInput={e => this.handleFirstNameChange(e)}\n            />\n            <input\n              id={this.lastNameFieldId}\n              name={this.lastNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.last_name}\n              placeholder=\"Last...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleLastNameChange(e)}\n            />\n          </div>\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions\n                .filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))\n                .map(suggestion => (\n                  <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                    {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n                    <div class=\"details\">\n                      <div class=\"name\">{formatFullName(suggestion)}</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={this.emailFieldId}>Email:</label>\n          <input\n            id={this.emailFieldId}\n            name={this.emailFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.email}\n            placeholder=\"Email address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => (this.email = e.target.value)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor={this.phoneFieldId}>Phone:</label>\n          <input\n            id={this.phoneFieldId}\n            name={this.phoneFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.phone}\n            placeholder=\"Phone (SMS)...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => {\n              this.phone = convertToE164(e.target.value);\n            }}\n          />\n        </div>\n\n        {this.showKba && (\n          <Fragment>\n            <div class=\"kba-row\">\n              <label>Recipient Verification:</label>\n              <verdocs-select-input\n                value={this.kba_method}\n                onInput={(e: any) => {\n                  this.kba_method = e.target.value;\n                  this.zip = '';\n                  this.address = '';\n                  this.kba_pin = '';\n                }}\n                options={[\n                  {label: 'None', value: ''},\n                  {label: 'Passcode', value: 'pin'},\n                  // TODO: SMS feature flag and entitlement\n                  {label: 'Knowledge-Based (KBA)', value: 'identity'},\n                ]}\n              />\n              <div style={{flex: '1'}}></div>\n              <verdocs-help-icon text=\"Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature.\" />\n            </div>\n\n            {this.kba_method === 'pin' && (\n              <div class=\"row pin-code\">\n                <input\n                  id=\"verdocs-pin-code\"\n                  name=\"verdocs-pin-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.kba_pin}\n                  placeholder=\"PIN Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.kba_pin = e.target.value)}\n                />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row address\">\n                <input\n                  id=\"verdocs-address\"\n                  name=\"verdocs-address\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.address}\n                  placeholder=\"Address...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.address = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current street address. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row zip-code\">\n                <input\n                  id=\"verdocs-zip-code\"\n                  name=\"verdocs-zip-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.zip}\n                  placeholder=\"Zip Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.zip = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current zip code. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n          </Fragment>\n        )}\n\n        {this.showMessage && (\n          <div class=\"row message\">\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=\"blocked\"\n              value={this.message}\n              placeholder=\"Message shown in invitation...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={(e: any) => (this.message = e.target.value)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={kbaIcon}\n            size=\"small\"\n            active={this.showKba}\n            onToggle={e => {\n              this.showKba = e.detail.active;\n              if (!e.detail.active) {\n                this.kba_pin = '';\n                this.kba_method = '';\n                this.zip = '';\n              }\n              this.showSuggestions = false;\n            }}\n          />\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\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\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-build.js

@@ -2,42 +2,44 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { VerdocsEndpoint, getTemplate } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-d4be87ef.js';
-import { d as defineCustomElement$F } from './p-0e332769.js';
-import { d as defineCustomElement$E } from './p-070bebd7.js';
-import { d as defineCustomElement$D } from './p-3201d529.js';
-import { d as defineCustomElement$C } from './p-84ae0283.js';
-import { d as defineCustomElement$B } from './p-27548ebd.js';
-import { d as defineCustomElement$A } from './p-7bd7baa6.js';
-import { d as defineCustomElement$z } from './p-c5045788.js';
-import { d as defineCustomElement$y } from './p-1d4829fb.js';
-import { d as defineCustomElement$x } from './p-8c965486.js';
-import { d as defineCustomElement$w } from './p-c422d9a0.js';
-import { d as defineCustomElement$v } from './p-143a763f.js';
-import { d as defineCustomElement$u } from './p-99128b47.js';
-import { d as defineCustomElement$t } from './p-813ed998.js';
-import { d as defineCustomElement$s } from './p-b5e479db.js';
-import { d as defineCustomElement$r } from './p-c4310332.js';
-import { d as defineCustomElement$q } from './p-22da6d14.js';
-import { d as defineCustomElement$p } from './p-7f32e087.js';
-import { d as defineCustomElement$o } from './p-9c0b30f8.js';
-import { d as defineCustomElement$n } from './p-1ae5d7e0.js';
-import { d as defineCustomElement$m } from './p-be261487.js';
-import { d as defineCustomElement$l } from './p-b7d080eb.js';
-import { d as defineCustomElement$k } from './p-6719b0d7.js';
-import { d as defineCustomElement$j } from './p-d54466ed.js';
-import { d as defineCustomElement$i } from './p-a2f6d2c6.js';
-import { d as defineCustomElement$h } from './p-62743fd3.js';
-import { d as defineCustomElement$g } from './p-449f2b47.js';
-import { d as defineCustomElement$f } from './p-cce871bf.js';
-import { d as defineCustomElement$e } from './p-9cfd8022.js';
-import { d as defineCustomElement$d } from './p-4dd750e9.js';
-import { d as defineCustomElement$c } from './p-16b073b8.js';
-import { d as defineCustomElement$b } from './p-e39c327c.js';
-import { d as defineCustomElement$a } from './p-550377ba.js';
-import { d as defineCustomElement$9 } from './p-f238b25b.js';
-import { d as defineCustomElement$8 } from './p-631808d5.js';
-import { d as defineCustomElement$7 } from './p-ac7694c0.js';
-import { d as defineCustomElement$6 } from './p-cecfbe2f.js';
+import { d as defineCustomElement$H } from './p-0e332769.js';
+import { d as defineCustomElement$G } from './p-070bebd7.js';
+import { d as defineCustomElement$F } from './p-3201d529.js';
+import { d as defineCustomElement$E } from './p-84ae0283.js';
+import { d as defineCustomElement$D } from './p-a443bd3a.js';
+import { d as defineCustomElement$C } from './p-7bd7baa6.js';
+import { d as defineCustomElement$B } from './p-c5045788.js';
+import { d as defineCustomElement$A } from './p-1d4829fb.js';
+import { d as defineCustomElement$z } from './p-8c965486.js';
+import { d as defineCustomElement$y } from './p-c422d9a0.js';
+import { d as defineCustomElement$x } from './p-143a763f.js';
+import { d as defineCustomElement$w } from './p-99128b47.js';
+import { d as defineCustomElement$v } from './p-813ed998.js';
+import { d as defineCustomElement$u } from './p-b5e479db.js';
+import { d as defineCustomElement$t } from './p-c4310332.js';
+import { d as defineCustomElement$s } from './p-22da6d14.js';
+import { d as defineCustomElement$r } from './p-7f32e087.js';
+import { d as defineCustomElement$q } from './p-9c0b30f8.js';
+import { d as defineCustomElement$p } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$o } from './p-be261487.js';
+import { d as defineCustomElement$n } from './p-b7d080eb.js';
+import { d as defineCustomElement$m } from './p-6719b0d7.js';
+import { d as defineCustomElement$l } from './p-d54466ed.js';
+import { d as defineCustomElement$k } from './p-a2f6d2c6.js';
+import { d as defineCustomElement$j } from './p-62743fd3.js';
+import { d as defineCustomElement$i } from './p-a1ba64de.js';
+import { d as defineCustomElement$h } from './p-cce871bf.js';
+import { d as defineCustomElement$g } from './p-9cfd8022.js';
+import { d as defineCustomElement$f } from './p-38e1fed8.js';
+import { d as defineCustomElement$e } from './p-4dd750e9.js';
+import { d as defineCustomElement$d } from './p-16b073b8.js';
+import { d as defineCustomElement$c } from './p-e39c327c.js';
+import { d as defineCustomElement$b } from './p-550377ba.js';
+import { d as defineCustomElement$a } from './p-f238b25b.js';
+import { d as defineCustomElement$9 } from './p-631808d5.js';
+import { d as defineCustomElement$8 } from './p-ac7694c0.js';
+import { d as defineCustomElement$7 } from './p-cecfbe2f.js';
+import { d as defineCustomElement$6 } from './p-7ad22da6.js';
 import { d as defineCustomElement$5 } from './p-325b3828.js';
 import { d as defineCustomElement$4 } from './p-c00770e6.js';
 import { d as defineCustomElement$3 } from './p-4d3b9ee9.js';
@@ -158,7 +160,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && h("verdocs-template-settings", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -180,7 +182,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-menu-panel", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
+    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-menu-panel", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-switch", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-settings", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-build":
             if (!customElements.get(tagName)) {
@@ -189,180 +191,190 @@ function defineCustomElement$1() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$H();
             }
             break;
         case "verdocs-button-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$G();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$F();
             }
             break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$E();
             }
             break;
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$D();
             }
             break;
         case "verdocs-field-attachment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$C();
             }
             break;
         case "verdocs-field-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$B();
             }
             break;
         case "verdocs-field-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$A();
             }
             break;
         case "verdocs-field-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$z();
             }
             break;
         case "verdocs-field-initial":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$y();
             }
             break;
         case "verdocs-field-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$x();
             }
             break;
         case "verdocs-field-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$w();
             }
             break;
         case "verdocs-field-textarea":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$v();
             }
             break;
         case "verdocs-field-textbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
             }
             break;
         case "verdocs-field-timestamp":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$t();
             }
             break;
         case "verdocs-file-chooser":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$s();
             }
             break;
         case "verdocs-help-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$r();
             }
             break;
         case "verdocs-initial-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "verdocs-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "verdocs-menu-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "verdocs-ok-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "verdocs-portal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "verdocs-preview":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "verdocs-progress-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "verdocs-select-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "verdocs-send":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "verdocs-signature-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "verdocs-spinner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
+            }
+            break;
+        case "verdocs-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
             }
             break;
         case "verdocs-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "verdocs-template-attachments":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "verdocs-template-build-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "verdocs-template-document-page":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "verdocs-template-field-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "verdocs-template-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-template-role-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-template-roles":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-template-settings":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

@@ -1 +1 @@
-{"file":"verdocs-build.js","mappings":"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","names":["VerdocsBuild"],"sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipient, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build templateId={templateId} step=\"preview\" onSend={(detail) => {\n *   console.log('Sent envelope from template', detail);\n * }} />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\n\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 template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipient[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\n      Store.subscribe(\n        'templates',\n        this.templateId,\n        () => getTemplate(this.endpoint, this.templateId),\n        false,\n        (template: ITemplate) => {\n          this.template = template;\n          this.loading = false;\n        },\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && (\n            <div style={{flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px'}}>\n              <verdocs-template-name\n                templateId={this.templateId}\n                endpoint={this.endpoint}\n                style={{backgroundColor: '#ffffff', padding: '20px'}}\n                onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n              />\n              <verdocs-template-reminders\n                templateId={this.templateId}\n                endpoint={this.endpoint}\n                style={{backgroundColor: '#ffffff', padding: '20px'}}\n                onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n              />\n              <verdocs-template-visibility\n                templateId={this.templateId}\n                endpoint={this.endpoint}\n                style={{backgroundColor: '#ffffff', padding: '20px'}}\n                onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n              />\n            </div>\n          )}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-build.js","mappings":"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","names":["VerdocsBuild"],"sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipient, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build templateId={templateId} step=\"preview\" onSend={(detail) => {\n *   console.log('Sent envelope from template', detail);\n * }} />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\n\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 template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipient[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\n      Store.subscribe(\n        'templates',\n        this.templateId,\n        () => getTemplate(this.endpoint, this.templateId),\n        false,\n        (template: ITemplate) => {\n          this.template = template;\n          this.loading = false;\n        },\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && <verdocs-template-settings templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-contact-picker.js

@@ -1,4 +1,4 @@
-import { V as VerdocsContactPicker$1, d as defineCustomElement$1 } from './p-27548ebd.js';
+import { V as VerdocsContactPicker$1, d as defineCustomElement$1 } from './p-a443bd3a.js';
 
 const VerdocsContactPicker = VerdocsContactPicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-envelope-sidebar.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$7 } from './p-619747d7.js';
 import { d as defineCustomElement$6 } from './p-7f32e087.js';
 import { d as defineCustomElement$5 } from './p-b7d080eb.js';
 import { d as defineCustomElement$4 } from './p-6719b0d7.js';
-import { d as defineCustomElement$3 } from './p-f4e068a9.js';
+import { d as defineCustomElement$3 } from './p-38e1fed8.js';
 import { d as defineCustomElement$2 } from './p-325b3828.js';
 import { f as format } from './p-12bab948.js';
 

package/dist/components/verdocs-send.js

@@ -1,4 +1,4 @@
-import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-449f2b47.js';
+import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-a1ba64de.js';
 
 const VerdocsSend = VerdocsSend$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-switch.js

@@ -1,4 +1,4 @@
-import { V as VerdocsSwitch$1, d as defineCustomElement$1 } from './p-f4e068a9.js';
+import { V as VerdocsSwitch$1, d as defineCustomElement$1 } from './p-38e1fed8.js';
 
 const VerdocsSwitch = VerdocsSwitch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-template-settings.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateSettings extends Components.VerdocsTemplateSettings, HTMLElement {}
+export const VerdocsTemplateSettings: {
+    prototype: VerdocsTemplateSettings;
+    new (): VerdocsTemplateSettings;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-settings.js

@@ -0,0 +1,8 @@
+import { V as VerdocsTemplateSettings$1, d as defineCustomElement$1 } from './p-7ad22da6.js';
+
+const VerdocsTemplateSettings = VerdocsTemplateSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateSettings, defineCustomElement };
+
+//# sourceMappingURL=verdocs-template-settings.js.map