@verdocs/web-sdk 6.13.2 → 6.13.3

package/dist/components/p-lCn8WPSe.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["updateScrollFade","body","wrap","parentElement","scrollable","scrollHeight","clientHeight","atEnd","scrollTop","classList","toggle","verdocsContactPickerCss","addrBookIcon","lockIcon","VerdocsContactPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","endpoint","VerdocsEndpoint","getDefault","templateRole","contactSuggestions","showCancel","showSuggestions","showMessage","delegator","name_locked","auth_methods","passcode","firstNameFieldId","Math","random","toString","substring","lastNameFieldId","emailFieldId","phoneFieldId","activeEntitlements","authMethodsLoading","componentWillLoad","loadSession","fullName","formatFullName","nameComponents","split","firstName","first_name","shift","lastName","last_name","join","email","phone","message","getActiveEntitlements","catch","e","console","warn","log","componentDidRender","el","querySelector","suggestionsEl","namesRowEl","style","top","offsetTop","offsetHeight","handleDocumentClick","contains","target","handleFirstNameChange","value","_a","searchContacts","emit","query","handleLastNameChange","handleCancel","stopPropagation","exit","handleSubmit","next","address","zip","handleSelectSuggestion","suggestion","toggleAuthMethod","method","includes","filter","selected","setSigningOption","option","renderPill","label","onClick","opts","h","type","class","pill","locked","disabled","title","innerHTML","render","hasBasics","isValidEmail","visibleSuggestions","toLowerCase","hasAuthRequirements","every","canSubmit","hasSMSAuth","sms_auth","verificationOptions","kba_auth","id_auth","signingOption","onSubmit","preventDefault","autocomplete","onScroll","ref","htmlFor","id","name","onFocus","setTimeout","length","onInput","autoComplete","placeholder","convertToE164","size","mode","map","undefined","role","key","picture","alt","src","variant"],"sources":["src/utils/ScrollFade.ts","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":["/**\n * Toggle `scrollable` and `at-end` on the wrapper of a scrolling body so a CSS fade can show\n * only while there is more content below the fold.\n */\nexport function updateScrollFade(body: HTMLElement | null | undefined) {\n  const wrap = body?.parentElement;\n  if (!body || !wrap) {\n    return;\n  }\n\n  const scrollable = body.scrollHeight > body.clientHeight + 1;\n  const atEnd = body.scrollTop + body.clientHeight >= body.scrollHeight - 1;\n  wrap.classList.toggle('scrollable', scrollable);\n  wrap.classList.toggle('at-end', atEnd);\n}\n","@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  --picker-ink: var(--verdocs-body-color, #111827);\n  --picker-ink-2: #374151;\n  --picker-muted: #6b7280;\n  --picker-faint: #9ca3af;\n  --picker-control-border: #d1d5db;\n  --picker-accent: var(--verdocs-link-color, #{$secondary-color});\n  --picker-accent-tint: #f4f5fc;\n  --picker-accent-tint-2: #e6e7f8;\n\n  display: block;\n  font-size: 14px;\n  color: var(--picker-ink);\n  font-family: $verdocs-primary-font;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  form {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  // Fields scroll above a pinned Done button when the host constrains the picker's height; with\n  // no constraint the body simply grows and the fade never shows.\n  .form-body-wrap {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .form-body {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  .scroll-fade {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 36px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease-out;\n    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n  }\n\n  .scrollable:not(.at-end) > .scroll-fade {\n    opacity: 1;\n  }\n\n  .row.names {\n    display: flex;\n    column-gap: 8px;\n    position: relative;\n\n    .field {\n      flex: 1;\n      min-width: 0;\n    }\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n    margin: 0 0 10px 0;\n\n    label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n\n      .optional {\n        color: var(--picker-muted);\n        font-weight: 400;\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    font-size: 13px;\n    font-family: inherit;\n    color: var(--picker-ink);\n    background: #ffffff;\n    border: 1px solid var(--picker-control-border);\n    border-radius: 6px;\n    outline: none;\n\n    &:focus {\n      border-color: var(--picker-accent);\n      box-shadow: 0 0 0 2px var(--picker-accent-tint-2);\n    }\n\n    &::placeholder {\n      color: var(--picker-faint);\n      opacity: 1;\n    }\n  }\n\n  input {\n    height: 34px;\n    padding: 0 10px;\n  }\n\n  textarea {\n    height: 56px;\n    padding: 8px 10px;\n    resize: vertical;\n  }\n\n  .group {\n    margin: 2px 0 12px 0;\n\n    .group-label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n      margin: 0 0 6px 0;\n    }\n  }\n\n  .pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n\n  .pill {\n    all: unset;\n    height: 26px;\n    padding: 0 9px;\n    display: inline-flex;\n    align-items: center;\n    column-gap: 4px;\n    cursor: pointer;\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    white-space: nowrap;\n    border-radius: 999px;\n    color: var(--picker-ink-2);\n    border: 1px solid var(--picker-control-border);\n\n    &:focus-visible {\n      outline: 2px solid var(--picker-accent);\n      outline-offset: 2px;\n    }\n\n    &.selected {\n      color: var(--picker-accent);\n      border-color: var(--picker-accent);\n      background: var(--picker-accent-tint);\n    }\n\n    &.locked {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .pill-icon,\n    .pill-icon svg {\n      width: 12px;\n      height: 12px;\n      display: block;\n    }\n  }\n\n  .passcode {\n    display: flex;\n    align-items: center;\n    column-gap: 8px;\n    margin-top: 8px;\n\n    input {\n      flex: 0 0 120px;\n      width: 120px;\n      height: 30px;\n    }\n\n    .passcode-hint {\n      flex: 1;\n      min-width: 0;\n      font-size: 11px;\n      line-height: 1.35;\n      color: var(--picker-muted);\n      align-self: center;\n    }\n  }\n\n  .buttons {\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid #e5e7eb;\n    flex: none;\n    display: flex;\n    column-gap: 10px;\n\n    verdocs-button:last-child {\n      flex: 1;\n    }\n\n    verdocs-button:last-child button {\n      width: 100%;\n    }\n  }\n\n  .suggestions {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 20;\n    max-height: 225px;\n    overflow-y: auto;\n    background: #ffffff;\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);\n\n    .suggestion {\n      display: flex;\n      padding: 6px 12px;\n      align-items: center;\n      flex-direction: row;\n      cursor: pointer;\n\n      svg {\n        width: 28px;\n        height: 28px;\n      }\n\n      .avatar {\n        width: 28px;\n        height: 28px;\n        flex: 0 0 28px;\n        margin-right: 8px;\n        border-radius: 100%;\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n      }\n\n      .name {\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--picker-ink);\n      }\n\n      .destination {\n        font-size: 12px;\n        color: var(--picker-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &:hover {\n        background: var(--picker-accent-tint);\n      }\n    }\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, Element, h, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {convertToE164} from '../../../utils/utils';\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\nconst lockIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></svg>`;\n\ntype TSigningOption = 'none' | 'delegator' | 'name_locked';\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  name_locked: boolean;\n  auth_methods: TRecipientAuthMethod[];\n  passcode: 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  @Element() el: HTMLElement;\n\n  private namesRowEl: HTMLElement;\n  private suggestionsEl: HTMLElement;\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 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   * Whether to show a Cancel button beside Done.\n   */\n  @Prop() showCancel = true;\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() name_locked: boolean = false;\n  @State() auth_methods: TRecipientAuthMethod[] = [];\n  @State() passcode: string = '';\n\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  @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n  @State() authMethodsLoading: boolean = true;\n\n  async componentWillLoad() {\n    this.endpoint.loadSession();\n\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      // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n      this.delegator = this.templateRole.delegator || false;\n      this.name_locked = this.delegator ? false : this.templateRole.name_locked || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n      this.auth_methods = this.templateRole.auth_methods || [];\n      this.passcode = this.templateRole.passcode || '';\n    }\n\n    // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n    // call fails or we stay loading forever.\n    this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n      console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n      return {} as Partial<Record<TEntitlement, IEntitlement>>;\n    });\n\n    this.authMethodsLoading = false;\n    console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n  }\n\n  // Make sure the suggestion list doesn't break the scroll region\n  componentDidRender() {\n    const body = this.el.querySelector('.form-body') as HTMLElement | null;\n    updateScrollFade(body);\n    if (this.suggestionsEl && this.namesRowEl && body) {\n      this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;\n    }\n  }\n\n  @Listen('click', {target: 'document'})\n  handleDocumentClick(e: MouseEvent) {\n    if (this.showSuggestions && !this.el.contains(e.target as Node)) {\n      this.showSuggestions = false;\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      name_locked: this.name_locked,\n      auth_methods: this.auth_methods,\n      passcode: this.passcode,\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  toggleAuthMethod(method: TRecipientAuthMethod) {\n    if (this.auth_methods.includes(method)) {\n      this.auth_methods = this.auth_methods.filter(selected => selected !== method);\n    } else {\n      this.auth_methods = [...this.auth_methods, method];\n    }\n  }\n\n  // TODO: Decide whether we want to keep these mutually-exclusive\n  setSigningOption(option: TSigningOption) {\n    this.delegator = option === 'delegator';\n    this.name_locked = option === 'name_locked';\n  }\n\n  renderPill(label: string, selected: boolean, onClick: () => void, opts: {locked?: boolean; title?: string} = {}) {\n    return (\n      <button\n        type=\"button\"\n        class={{pill: true, selected, locked: !!opts.locked}}\n        aria-pressed={selected ? 'true' : 'false'}\n        disabled={opts.locked && !selected}\n        title={opts.title}\n        onClick={onClick}\n      >\n        {opts.locked && <span class=\"pill-icon\" innerHTML={lockIcon} />}\n        {label}\n      </button>\n    );\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    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n\n    // First name is the first focused field so it's our quicksearch matching target.\n    const visibleSuggestions = (this.contactSuggestions || []).filter(\n      suggestion => !this.first_name || suggestion.first_name?.toLowerCase().includes(this.first_name.toLowerCase()),\n    );\n\n    const hasAuthRequirements = this.auth_methods.every(method => {\n      switch (method) {\n        case 'passcode':\n          return !!this.passcode;\n        case 'kba':\n          return !!this.first_name && !!this.last_name;\n        case 'email':\n          return !!this.email;\n        case 'sms':\n          return !!this.phone;\n        default:\n          return true;\n      }\n    });\n\n    const canSubmit = hasBasics && hasAuthRequirements;\n    const hasSMSAuth = !!this.activeEntitlements.sms_auth;\n\n    // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.\n    const verificationOptions: {label: string; value: TRecipientAuthMethod; locked?: boolean}[] = [\n      {label: 'Email OTP', value: 'email'},\n      {label: 'Passcode', value: 'passcode'},\n      {label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth},\n      {label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth},\n      {label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth},\n    ];\n\n    const signingOption: TSigningOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';\n\n    return (\n      <form onSubmit={e => e.preventDefault()} autocomplete=\"off\">\n        <div class=\"form-body-wrap\">\n          <div\n            class=\"form-body\"\n            onScroll={(e: any) => {\n              updateScrollFade(e.target);\n              this.showSuggestions = false;\n            }}\n          >\n            <div class=\"row names\" ref={el => (this.namesRowEl = el)}>\n              <div class=\"field\">\n                <label htmlFor={this.firstNameFieldId}>First name</label>\n                <input\n                  id={this.firstNameFieldId}\n                  name={this.firstNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.first_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleFirstNameChange(e)}\n                />\n              </div>\n              <div class=\"field\">\n                <label htmlFor={this.lastNameFieldId}>Last name</label>\n                <input\n                  id={this.lastNameFieldId}\n                  name={this.lastNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.last_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleLastNameChange(e)}\n                />\n              </div>\n            </div>\n\n            <div class=\"field\">\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                aria-autocomplete=\"none\"\n                value={this.email}\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.email = e.target.value)}\n              />\n            </div>\n\n            {hasSMSAuth && (\n              <div class=\"field\">\n                <label htmlFor={this.phoneFieldId}>\n                  Phone <span class=\"optional\">(optional)</span>\n                </label>\n                <input\n                  id={this.phoneFieldId}\n                  name={this.phoneFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autoComplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.phone}\n                  placeholder=\"+1 (555) 000-0000\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => {\n                    this.phone = convertToE164(e.target.value);\n                  }}\n                />\n              </div>\n            )}\n\n            <div class=\"group\">\n              <div class=\"group-label\">Verification</div>\n              {this.authMethodsLoading ? (\n                <verdocs-spinner size={10} mode=\"dark\" />\n              ) : (\n                <div class=\"pills\">\n                  {verificationOptions.map(option =>\n                    this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {\n                      locked: option.locked,\n                      title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,\n                    }),\n                  )}\n                </div>\n              )}\n\n              {this.auth_methods.includes('passcode') && (\n                <div class=\"passcode\">\n                  <input\n                    id=\"verdocs-passcode\"\n                    name=\"verdocs-passcode\"\n                    type=\"text\"\n                    data-lpignore=\"true\"\n                    autocomplete=\"blocked\"\n                    aria-autocomplete=\"none\"\n                    aria-label=\"Passcode\"\n                    value={this.passcode}\n                    placeholder=\"4-8 digits\"\n                    onFocus={() => (this.showSuggestions = false)}\n                    onInput={(e: any) => (this.passcode = e.target.value)}\n                  />\n                  <span class=\"passcode-hint\">PIN or passcode shared separately with the recipient ahead of time</span>\n                </div>\n              )}\n            </div>\n\n            <div class=\"group\">\n              <div class=\"group-label\">Signing options</div>\n              <div class=\"pills\">\n                {this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none'))}\n                {this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator'))}\n                {this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked'))}\n              </div>\n            </div>\n\n            <div class=\"field\">\n              <label htmlFor=\"verdocs-contact-picker-message\">\n                Message <span class=\"optional\">(optional)</span>\n              </label>\n              <textarea\n                id=\"verdocs-contact-picker-message\"\n                name=\"verdocs-contact-picker-message\"\n                data-lpignore=\"true\"\n                autocomplete=\"blocked\"\n                placeholder=\"Add a message to the invitation\"\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.message = e.target.value)}\n              >\n                {this.message}\n              </textarea>\n            </div>\n          </div>\n          <div class=\"scroll-fade\" />\n          {this.showSuggestions && visibleSuggestions.length > 0 && (\n            <div class=\"suggestions\" role=\"listbox\" ref={el => (this.suggestionsEl = el)}>\n              {visibleSuggestions.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=\"buttons\">\n          {this.showCancel && <verdocs-button label=\"Cancel\" variant=\"text\" size=\"small\" onClick={e => this.handleCancel(e)} />}\n          <verdocs-button label=\"Done\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/verdocs-build.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as o,d as r,t as i}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as d,getTemplate as a}from"@verdocs/js-sdk";import{S as l}from"./p-C1sRVZWv.js";import{S as c}from"./p-C7hFgM52.js";import{d as n}from"./p-Bb5V9TQx.js";import{d as m}from"./p-DGNIsXfr.js";import{d as p}from"./p-C-v22G3g.js";import{d as f}from"./p-ByrpRZ3E.js";import{d as v}from"./p-C90lxyUX.js";import{d as h}from"./p-BKLlc2r0.js";import{d as u}from"./p-1FjgijEi.js";import{d as b}from"./p-D0MFs2Dv.js";import{d as x}from"./p-9kEZy9MP.js";import{d as k}from"./p-B1AE2j97.js";import{d as w}from"./p-ek0LNMtb.js";import{d as E}from"./p-CQzPkAVQ.js";import{d as g}from"./p-B4tpmyon.js";import{d as j}from"./p-CFacV7mg.js";import{d as y}from"./p-CEcG_ay-.js";import{d as I}from"./p-BSX4GfGg.js";import{d as C}from"./p-C8yiLtCJ.js";import{d as B}from"./p-DHzSlpJw.js";import{d as D}from"./p-DqzFuSNN.js";import{d as U}from"./p-DsSqGIBJ.js";import{d as S}from"./p-5FU3bYQ3.js";import{d as T}from"./p-DhOuB4nS.js";import{d as L}from"./p-D-X-Zcsr.js";import{d as N}from"./p-CdnjpaJt.js";import{d as G}from"./p-Bodw4NVB.js";import{d as R}from"./p-Blr31TcJ.js";import{d as F}from"./p-DreV6Npp.js";import{d as V}from"./p-Lo1dCgyv.js";import{d as z}from"./p-DFbeKrpm.js";import{d as J}from"./p-BhG0HGg6.js";import{d as M}from"./p-Bxvw_LqR.js";import{d as P}from"./p-DRP4Xxiu.js";import{d as Q}from"./p-DeAwyTxI.js";import{d as X}from"./p-CnD-TaPJ.js";import{d as Z}from"./p-PfdIkMoz.js";import{d as A}from"./p-B-ul_Soj.js";import{d as q}from"./p-DM3wePVp.js";const W=()=>`verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{display:block;width:500px;max-width:95%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}`;const Y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.cancel=t(this,"cancel");this.sdkError=t(this,"sdkError");this.stepChanged=t(this,"stepChanged");this.send=t(this,"send");this.templateUpdated=t(this,"templateUpdated");this.templateCreated=t(this,"templateCreated");this.rolesUpdated=t(this,"rolesUpdated");this.templateListenerId=null;this.endpoint=d.getDefault();this.templateId=null;this.step="preview";this.loading=true;this.template=null}onTemplateIdChanged(e,s){if(!s&&e&&this.step==="attachments"){this.step="preview"}this.loadTemplate(e).catch((e=>console.log("Unknown Error",e)))}onStepChanged(){this.loadTemplate(this.templateId).catch((e=>console.log("Unknown Error",e)))}async componentWillLoad(){var e,s,t,o,r,i;try{this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return}if(!this.templateId){console.log(`[BUILD] No template ID, activating upload mode`);this.step="attachments";this.loading=false;return}try{this.loadTemplate(this.templateId).catch((e=>console.log("[BUILD] Unable to load template",e)))}catch(o){console.log("[BUILD] Error loading template",o);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new l(o.message,(s=o.response)===null||s===void 0?void 0:s.status,(t=o.response)===null||t===void 0?void 0:t.data))}}catch(e){console.log("[BUILD] Error with builder session",e);(o=this.sdkError)===null||o===void 0?void 0:o.emit(new l(e.message,(r=e.response)===null||r===void 0?void 0:r.status,(i=e.response)===null||i===void 0?void 0:i.data))}}async loadTemplate(e){if(e){c.subscribe("templates",this.templateId,(()=>a(this.endpoint,this.templateId)),false,(e=>{this.template=e;this.loading=false}))}}disconnectedCallback(){console.log("[BUILD] Disconnected");this.unlistenToTemplate()}unlistenToTemplate(){if(this.templateListenerId){c.store.delListener(this.templateListenerId);this.templateListenerId=null}}handleCancel(){var e;this.step="preview";(e=this.cancel)===null||e===void 0?void 0:e.emit()}async handleTemplateCreated(e){var s;await this.loadTemplate(e);this.templateId=e;this.step="roles";(s=this.stepChanged)===null||s===void 0?void 0:s.emit("roles")}async handleRolesUpdated(e){var s;console.log("[BUILD] Roloes updated",e);(s=this.templateUpdated)===null||s===void 0?void 0:s.emit(e.detail)}async handleTemplateUpdated(e){var s;console.log("[BUILD] Template updated",e);(s=this.templateUpdated)===null||s===void 0?void 0:s.emit(e.detail)}handleAttachmentsNext(){var e;this.step="roles";(e=this.stepChanged)===null||e===void 0?void 0:e.emit("roles")}handleRolesNext(){var e;this.step="fields";(e=this.stepChanged)===null||e===void 0?void 0:e.emit("fields")}handleStepChanged(e){var s;this.step=e;(s=this.stepChanged)===null||s===void 0?void 0:s.emit(e)}render(){if(this.loading){return o(r,{class:"loading"},o("verdocs-loader",null))}if(!this.endpoint.session){return o(r,null,o("verdocs-component-error",{message:"You must be authenticated to use this module."}))}return o(r,null,o("div",{class:"content"},o("verdocs-template-build-tabs",{endpoint:this.endpoint,templateId:this.templateId,step:this.step,onSdkError:e=>{var s;return(s=this.sdkError)===null||s===void 0?void 0:s.emit(e.detail)},onStepChanged:e=>this.handleStepChanged(e.detail)}),this.step==="attachments"&&o("verdocs-template-attachments",{templateId:this.templateId,endpoint:this.endpoint,onExit:()=>this.handleCancel(),onNext:()=>this.handleAttachmentsNext(),onTemplateUpdated:e=>this.handleTemplateUpdated(e)}),this.step==="roles"&&o("verdocs-template-roles",{templateId:this.templateId,endpoint:this.endpoint,onExit:()=>this.handleCancel(),onNext:()=>this.handleRolesNext(),onRolesUpdated:e=>this.handleRolesUpdated(e)}),this.step==="fields"&&o("verdocs-template-fields",{templateId:this.templateId,endpoint:this.endpoint,onTemplateUpdated:e=>this.handleTemplateUpdated(e)}),this.step==="preview"&&o("div",{class:"preview-container"},o("div",{class:"preview-send-wrapper"},o("verdocs-send",{templateId:this.templateId,endpoint:this.endpoint,onSend:e=>{var s;return(s=this.send)===null||s===void 0?void 0:s.emit(e.detail)},style:{width:"100%"}})),o("div",{class:"preview-preview-wrapper"},o("verdocs-preview",{templateId:this.templateId,endpoint:this.endpoint,style:{display:"flex",flex:"1",maxWidth:"1000px"}})))))}get el(){return this}static get watchers(){return{templateId:[{onTemplateIdChanged:0}],step:[{onStepChanged:0}]}}static get style(){return W()}},[0,"verdocs-build",{endpoint:[16],templateId:[1537,"template-id"],step:[1537],loading:[32],template:[32]},undefined,{templateId:[{onTemplateIdChanged:0}],step:[{onStepChanged:0}]}]);function _(){if(typeof customElements==="undefined"){return}const e=["verdocs-build","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-contact-picker","verdocs-dialog","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-flag","verdocs-help-icon","verdocs-loader","verdocs-menu-panel","verdocs-ok-dialog","verdocs-portal","verdocs-preview","verdocs-progress-bar","verdocs-select-input","verdocs-send","verdocs-spinner","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-toolbar-icon","verdocs-upload-dialog"];e.forEach((e=>{switch(e){case"verdocs-build":if(!customElements.get(i(e))){customElements.define(i(e),Y)}break;case"verdocs-button":if(!customElements.get(i(e))){n()}break;case"verdocs-checkbox":if(!customElements.get(i(e))){m()}break;case"verdocs-component-error":if(!customElements.get(i(e))){p()}break;case"verdocs-contact-picker":if(!customElements.get(i(e))){f()}break;case"verdocs-dialog":if(!customElements.get(i(e))){v()}break;case"verdocs-field-attachment":if(!customElements.get(i(e))){h()}break;case"verdocs-field-checkbox":if(!customElements.get(i(e))){u()}break;case"verdocs-field-date":if(!customElements.get(i(e))){b()}break;case"verdocs-field-dropdown":if(!customElements.get(i(e))){x()}break;case"verdocs-field-initial":if(!customElements.get(i(e))){k()}break;case"verdocs-field-radio":if(!customElements.get(i(e))){w()}break;case"verdocs-field-signature":if(!customElements.get(i(e))){E()}break;case"verdocs-field-textarea":if(!customElements.get(i(e))){g()}break;case"verdocs-field-textbox":if(!customElements.get(i(e))){j()}break;case"verdocs-field-timestamp":if(!customElements.get(i(e))){y()}break;case"verdocs-file-chooser":if(!customElements.get(i(e))){I()}break;case"verdocs-flag":if(!customElements.get(i(e))){C()}break;case"verdocs-help-icon":if(!customElements.get(i(e))){B()}break;case"verdocs-loader":if(!customElements.get(i(e))){D()}break;case"verdocs-menu-panel":if(!customElements.get(i(e))){U()}break;case"verdocs-ok-dialog":if(!customElements.get(i(e))){S()}break;case"verdocs-portal":if(!customElements.get(i(e))){T()}break;case"verdocs-preview":if(!customElements.get(i(e))){L()}break;case"verdocs-progress-bar":if(!customElements.get(i(e))){N()}break;case"verdocs-select-input":if(!customElements.get(i(e))){G()}break;case"verdocs-send":if(!customElements.get(i(e))){R()}break;case"verdocs-spinner":if(!customElements.get(i(e))){F()}break;case"verdocs-template-attachments":if(!customElements.get(i(e))){V()}break;case"verdocs-template-build-tabs":if(!customElements.get(i(e))){z()}break;case"verdocs-template-document-page":if(!customElements.get(i(e))){J()}break;case"verdocs-template-field-properties":if(!customElements.get(i(e))){M()}break;case"verdocs-template-fields":if(!customElements.get(i(e))){P()}break;case"verdocs-template-role-properties":if(!customElements.get(i(e))){Q()}break;case"verdocs-template-roles":if(!customElements.get(i(e))){X()}break;case"verdocs-text-input":if(!customElements.get(i(e))){Z()}break;case"verdocs-toolbar-icon":if(!customElements.get(i(e))){A()}break;case"verdocs-upload-dialog":if(!customElements.get(i(e))){q()}break}}))}const H=Y;const K=_;export{H as VerdocsBuild,K as defineCustomElement};
+import{p as e,H as s,c as t,h as o,d as r,t as i}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as d,getTemplate as a}from"@verdocs/js-sdk";import{S as l}from"./p-C1sRVZWv.js";import{S as c}from"./p-C7hFgM52.js";import{d as n}from"./p-Bb5V9TQx.js";import{d as m}from"./p-DGNIsXfr.js";import{d as p}from"./p-C-v22G3g.js";import{d as f}from"./p-lCn8WPSe.js";import{d as v}from"./p-C90lxyUX.js";import{d as h}from"./p-BKLlc2r0.js";import{d as u}from"./p-1FjgijEi.js";import{d as b}from"./p-D0MFs2Dv.js";import{d as x}from"./p-9kEZy9MP.js";import{d as k}from"./p-B1AE2j97.js";import{d as w}from"./p-ek0LNMtb.js";import{d as E}from"./p-CQzPkAVQ.js";import{d as g}from"./p-B4tpmyon.js";import{d as j}from"./p-CFacV7mg.js";import{d as y}from"./p-CEcG_ay-.js";import{d as C}from"./p-BSX4GfGg.js";import{d as I}from"./p-C8yiLtCJ.js";import{d as D}from"./p-DHzSlpJw.js";import{d as B}from"./p-DqzFuSNN.js";import{d as U}from"./p-DsSqGIBJ.js";import{d as S}from"./p-5FU3bYQ3.js";import{d as L}from"./p-DhOuB4nS.js";import{d as T}from"./p-D-X-Zcsr.js";import{d as N}from"./p-CdnjpaJt.js";import{d as G}from"./p-Bodw4NVB.js";import{d as F}from"./p-K-sDaUxS.js";import{d as P}from"./p-DreV6Npp.js";import{d as R}from"./p-Lo1dCgyv.js";import{d as V}from"./p-DFbeKrpm.js";import{d as z}from"./p-BhG0HGg6.js";import{d as M}from"./p-Bxvw_LqR.js";import{d as J}from"./p-DRP4Xxiu.js";import{d as Q}from"./p-DeAwyTxI.js";import{d as X}from"./p-CnD-TaPJ.js";import{d as A}from"./p-PfdIkMoz.js";import{d as W}from"./p-B-ul_Soj.js";import{d as Z}from"./p-DM3wePVp.js";const q=()=>`verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{display:block;width:500px;max-width:95%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}`;const K=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.cancel=t(this,"cancel");this.sdkError=t(this,"sdkError");this.stepChanged=t(this,"stepChanged");this.send=t(this,"send");this.templateUpdated=t(this,"templateUpdated");this.templateCreated=t(this,"templateCreated");this.rolesUpdated=t(this,"rolesUpdated");this.templateListenerId=null;this.endpoint=d.getDefault();this.templateId=null;this.step="preview";this.loading=true;this.template=null}onTemplateIdChanged(e,s){if(!s&&e&&this.step==="attachments"){this.step="preview"}this.loadTemplate(e).catch((e=>console.log("Unknown Error",e)))}onStepChanged(){this.loadTemplate(this.templateId).catch((e=>console.log("Unknown Error",e)))}async componentWillLoad(){var e,s,t,o,r,i;try{this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return}if(!this.templateId){console.log(`[BUILD] No template ID, activating upload mode`);this.step="attachments";this.loading=false;return}try{this.loadTemplate(this.templateId).catch((e=>console.log("[BUILD] Unable to load template",e)))}catch(o){console.log("[BUILD] Error loading template",o);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new l(o.message,(s=o.response)===null||s===void 0?void 0:s.status,(t=o.response)===null||t===void 0?void 0:t.data))}}catch(e){console.log("[BUILD] Error with builder session",e);(o=this.sdkError)===null||o===void 0?void 0:o.emit(new l(e.message,(r=e.response)===null||r===void 0?void 0:r.status,(i=e.response)===null||i===void 0?void 0:i.data))}}async loadTemplate(e){if(e){c.subscribe("templates",this.templateId,(()=>a(this.endpoint,this.templateId)),false,(e=>{this.template=e;this.loading=false}))}}disconnectedCallback(){console.log("[BUILD] Disconnected");this.unlistenToTemplate()}unlistenToTemplate(){if(this.templateListenerId){c.store.delListener(this.templateListenerId);this.templateListenerId=null}}handleCancel(){var e;this.step="preview";(e=this.cancel)===null||e===void 0?void 0:e.emit()}async handleTemplateCreated(e){var s;await this.loadTemplate(e);this.templateId=e;this.step="roles";(s=this.stepChanged)===null||s===void 0?void 0:s.emit("roles")}async handleRolesUpdated(e){var s;console.log("[BUILD] Roloes updated",e);(s=this.templateUpdated)===null||s===void 0?void 0:s.emit(e.detail)}async handleTemplateUpdated(e){var s;console.log("[BUILD] Template updated",e);(s=this.templateUpdated)===null||s===void 0?void 0:s.emit(e.detail)}handleAttachmentsNext(){var e;this.step="roles";(e=this.stepChanged)===null||e===void 0?void 0:e.emit("roles")}handleRolesNext(){var e;this.step="fields";(e=this.stepChanged)===null||e===void 0?void 0:e.emit("fields")}handleStepChanged(e){var s;this.step=e;(s=this.stepChanged)===null||s===void 0?void 0:s.emit(e)}render(){if(this.loading){return o(r,{class:"loading"},o("verdocs-loader",null))}if(!this.endpoint.session){return o(r,null,o("verdocs-component-error",{message:"You must be authenticated to use this module."}))}return o(r,null,o("div",{class:"content"},o("verdocs-template-build-tabs",{endpoint:this.endpoint,templateId:this.templateId,step:this.step,onSdkError:e=>{var s;return(s=this.sdkError)===null||s===void 0?void 0:s.emit(e.detail)},onStepChanged:e=>this.handleStepChanged(e.detail)}),this.step==="attachments"&&o("verdocs-template-attachments",{templateId:this.templateId,endpoint:this.endpoint,onExit:()=>this.handleCancel(),onNext:()=>this.handleAttachmentsNext(),onTemplateUpdated:e=>this.handleTemplateUpdated(e)}),this.step==="roles"&&o("verdocs-template-roles",{templateId:this.templateId,endpoint:this.endpoint,onExit:()=>this.handleCancel(),onNext:()=>this.handleRolesNext(),onRolesUpdated:e=>this.handleRolesUpdated(e)}),this.step==="fields"&&o("verdocs-template-fields",{templateId:this.templateId,endpoint:this.endpoint,onTemplateUpdated:e=>this.handleTemplateUpdated(e)}),this.step==="preview"&&o("div",{class:"preview-container"},o("div",{class:"preview-send-wrapper"},o("verdocs-send",{templateId:this.templateId,endpoint:this.endpoint,onSend:e=>{var s;return(s=this.send)===null||s===void 0?void 0:s.emit(e.detail)},style:{width:"100%"}})),o("div",{class:"preview-preview-wrapper"},o("verdocs-preview",{templateId:this.templateId,endpoint:this.endpoint,style:{display:"flex",flex:"1",maxWidth:"1000px"}})))))}get el(){return this}static get watchers(){return{templateId:[{onTemplateIdChanged:0}],step:[{onStepChanged:0}]}}static get style(){return q()}},[0,"verdocs-build",{endpoint:[16],templateId:[1537,"template-id"],step:[1537],loading:[32],template:[32]},undefined,{templateId:[{onTemplateIdChanged:0}],step:[{onStepChanged:0}]}]);function Y(){if(typeof customElements==="undefined"){return}const e=["verdocs-build","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-contact-picker","verdocs-dialog","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-flag","verdocs-help-icon","verdocs-loader","verdocs-menu-panel","verdocs-ok-dialog","verdocs-portal","verdocs-preview","verdocs-progress-bar","verdocs-select-input","verdocs-send","verdocs-spinner","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-toolbar-icon","verdocs-upload-dialog"];e.forEach((e=>{switch(e){case"verdocs-build":if(!customElements.get(i(e))){customElements.define(i(e),K)}break;case"verdocs-button":if(!customElements.get(i(e))){n()}break;case"verdocs-checkbox":if(!customElements.get(i(e))){m()}break;case"verdocs-component-error":if(!customElements.get(i(e))){p()}break;case"verdocs-contact-picker":if(!customElements.get(i(e))){f()}break;case"verdocs-dialog":if(!customElements.get(i(e))){v()}break;case"verdocs-field-attachment":if(!customElements.get(i(e))){h()}break;case"verdocs-field-checkbox":if(!customElements.get(i(e))){u()}break;case"verdocs-field-date":if(!customElements.get(i(e))){b()}break;case"verdocs-field-dropdown":if(!customElements.get(i(e))){x()}break;case"verdocs-field-initial":if(!customElements.get(i(e))){k()}break;case"verdocs-field-radio":if(!customElements.get(i(e))){w()}break;case"verdocs-field-signature":if(!customElements.get(i(e))){E()}break;case"verdocs-field-textarea":if(!customElements.get(i(e))){g()}break;case"verdocs-field-textbox":if(!customElements.get(i(e))){j()}break;case"verdocs-field-timestamp":if(!customElements.get(i(e))){y()}break;case"verdocs-file-chooser":if(!customElements.get(i(e))){C()}break;case"verdocs-flag":if(!customElements.get(i(e))){I()}break;case"verdocs-help-icon":if(!customElements.get(i(e))){D()}break;case"verdocs-loader":if(!customElements.get(i(e))){B()}break;case"verdocs-menu-panel":if(!customElements.get(i(e))){U()}break;case"verdocs-ok-dialog":if(!customElements.get(i(e))){S()}break;case"verdocs-portal":if(!customElements.get(i(e))){L()}break;case"verdocs-preview":if(!customElements.get(i(e))){T()}break;case"verdocs-progress-bar":if(!customElements.get(i(e))){N()}break;case"verdocs-select-input":if(!customElements.get(i(e))){G()}break;case"verdocs-send":if(!customElements.get(i(e))){F()}break;case"verdocs-spinner":if(!customElements.get(i(e))){P()}break;case"verdocs-template-attachments":if(!customElements.get(i(e))){R()}break;case"verdocs-template-build-tabs":if(!customElements.get(i(e))){V()}break;case"verdocs-template-document-page":if(!customElements.get(i(e))){z()}break;case"verdocs-template-field-properties":if(!customElements.get(i(e))){M()}break;case"verdocs-template-fields":if(!customElements.get(i(e))){J()}break;case"verdocs-template-role-properties":if(!customElements.get(i(e))){Q()}break;case"verdocs-template-roles":if(!customElements.get(i(e))){X()}break;case"verdocs-text-input":if(!customElements.get(i(e))){A()}break;case"verdocs-toolbar-icon":if(!customElements.get(i(e))){W()}break;case"verdocs-upload-dialog":if(!customElements.get(i(e))){Z()}break}}))}const _=K;const H=Y;export{_ as VerdocsBuild,H as defineCustomElement};
 //# sourceMappingURL=verdocs-build.js.map

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

@@ -1,2 +1,2 @@
-import{V as o,d as s}from"./p-ByrpRZ3E.js";const p=o;const r=s;export{p as VerdocsContactPicker,r as defineCustomElement};
+import{V as o,d as s}from"./p-lCn8WPSe.js";const t=o;const n=s;export{t as VerdocsContactPicker,n as defineCustomElement};
 //# sourceMappingURL=verdocs-contact-picker.js.map

package/dist/components/verdocs-send.js

@@ -1,2 +1,2 @@
-import{V as o,d as s}from"./p-Blr31TcJ.js";const r=o;const t=s;export{r as VerdocsSend,t as defineCustomElement};
+import{V as s,d as o}from"./p-K-sDaUxS.js";const t=s;const a=o;export{t as VerdocsSend,a as defineCustomElement};
 //# sourceMappingURL=verdocs-send.js.map

package/dist/esm/verdocs-contact-picker.entry.js

@@ -148,6 +148,8 @@ const VerdocsContactPicker = class {
     // and show a duplicate autocomplete picker on top of our own.
     render() {
         const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);
+        // First name is the first focused field so it's our quicksearch matching target.
+        const visibleSuggestions = (this.contactSuggestions || []).filter(suggestion => { var _a; return !this.first_name || ((_a = suggestion.first_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.first_name.toLowerCase())); });
         const hasAuthRequirements = this.auth_methods.every(method => {
             switch (method) {
                 case 'passcode':
@@ -193,9 +195,7 @@ const VerdocsContactPicker = class {
             } }))), h("div", { class: "group" }, h("div", { class: "group-label" }, "Verification"), this.authMethodsLoading ? (h("verdocs-spinner", { size: 10, mode: "dark" })) : (h("div", { class: "pills" }, verificationOptions.map(option => this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {
             locked: option.locked,
             title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,
-        })))), this.auth_methods.includes('passcode') && (h("div", { class: "passcode" }, h("input", { id: "verdocs-passcode", name: "verdocs-passcode", type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", "aria-label": "Passcode", value: this.passcode, placeholder: "4-8 digits", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) }), h("span", { class: "passcode-hint" }, "PIN or passcode shared separately with the recipient ahead of time")))), h("div", { class: "group" }, h("div", { class: "group-label" }, "Signing options"), h("div", { class: "pills" }, this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none')), this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator')), this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked')))), h("div", { class: "field" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message ", h("span", { class: "optional" }, "(optional)")), h("textarea", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Add a message to the invitation", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message))), h("div", { class: "scroll-fade" }), this.showSuggestions && (h("div", { class: "suggestions", role: "listbox", ref: el => (this.suggestionsEl = el) }, this.contactSuggestions
-            .filter(suggestion => { var _a; return !this.first_name || ((_a = suggestion.first_name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.first_name.toLowerCase())); })
-            .map(suggestion => {
+        })))), this.auth_methods.includes('passcode') && (h("div", { class: "passcode" }, h("input", { id: "verdocs-passcode", name: "verdocs-passcode", type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", "aria-label": "Passcode", value: this.passcode, placeholder: "4-8 digits", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) }), h("span", { class: "passcode-hint" }, "PIN or passcode shared separately with the recipient ahead of time")))), h("div", { class: "group" }, h("div", { class: "group-label" }, "Signing options"), h("div", { class: "pills" }, this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none')), this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator')), this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked')))), h("div", { class: "field" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message ", h("span", { class: "optional" }, "(optional)")), h("textarea", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Add a message to the invitation", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message))), h("div", { class: "scroll-fade" }), this.showSuggestions && visibleSuggestions.length > 0 && (h("div", { class: "suggestions", role: "listbox", ref: el => (this.suggestionsEl = el) }, visibleSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : h("div", { class: "avatar", innerHTML: addrBookIcon }), h("div", { class: "details" }, h("div", { class: "name" }, formatFullName(suggestion)), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
         })))), h("div", { class: "buttons" }, this.showCancel && h("verdocs-button", { label: "Cancel", variant: "text", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Done", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));

package/dist/esm/verdocs-contact-picker.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-contact-picker.entry.js","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  --picker-ink: var(--verdocs-body-color, #111827);\n  --picker-ink-2: #374151;\n  --picker-muted: #6b7280;\n  --picker-faint: #9ca3af;\n  --picker-control-border: #d1d5db;\n  --picker-accent: var(--verdocs-link-color, #{$secondary-color});\n  --picker-accent-tint: #f4f5fc;\n  --picker-accent-tint-2: #e6e7f8;\n\n  display: block;\n  font-size: 14px;\n  color: var(--picker-ink);\n  font-family: $verdocs-primary-font;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  form {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  // Fields scroll above a pinned Done button when the host constrains the picker's height; with\n  // no constraint the body simply grows and the fade never shows.\n  .form-body-wrap {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .form-body {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  .scroll-fade {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 36px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease-out;\n    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n  }\n\n  .scrollable:not(.at-end) > .scroll-fade {\n    opacity: 1;\n  }\n\n  .row.names {\n    display: flex;\n    column-gap: 8px;\n    position: relative;\n\n    .field {\n      flex: 1;\n      min-width: 0;\n    }\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n    margin: 0 0 10px 0;\n\n    label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n\n      .optional {\n        color: var(--picker-muted);\n        font-weight: 400;\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    font-size: 13px;\n    font-family: inherit;\n    color: var(--picker-ink);\n    background: #ffffff;\n    border: 1px solid var(--picker-control-border);\n    border-radius: 6px;\n    outline: none;\n\n    &:focus {\n      border-color: var(--picker-accent);\n      box-shadow: 0 0 0 2px var(--picker-accent-tint-2);\n    }\n\n    &::placeholder {\n      color: var(--picker-faint);\n      opacity: 1;\n    }\n  }\n\n  input {\n    height: 34px;\n    padding: 0 10px;\n  }\n\n  textarea {\n    height: 56px;\n    padding: 8px 10px;\n    resize: vertical;\n  }\n\n  .group {\n    margin: 2px 0 12px 0;\n\n    .group-label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n      margin: 0 0 6px 0;\n    }\n  }\n\n  .pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n\n  .pill {\n    all: unset;\n    height: 26px;\n    padding: 0 9px;\n    display: inline-flex;\n    align-items: center;\n    column-gap: 4px;\n    cursor: pointer;\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    white-space: nowrap;\n    border-radius: 999px;\n    color: var(--picker-ink-2);\n    border: 1px solid var(--picker-control-border);\n\n    &:focus-visible {\n      outline: 2px solid var(--picker-accent);\n      outline-offset: 2px;\n    }\n\n    &.selected {\n      color: var(--picker-accent);\n      border-color: var(--picker-accent);\n      background: var(--picker-accent-tint);\n    }\n\n    &.locked {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .pill-icon,\n    .pill-icon svg {\n      width: 12px;\n      height: 12px;\n      display: block;\n    }\n  }\n\n  .passcode {\n    display: flex;\n    align-items: center;\n    column-gap: 8px;\n    margin-top: 8px;\n\n    input {\n      flex: 0 0 120px;\n      width: 120px;\n      height: 30px;\n    }\n\n    .passcode-hint {\n      flex: 1;\n      min-width: 0;\n      font-size: 11px;\n      line-height: 1.35;\n      color: var(--picker-muted);\n      align-self: center;\n    }\n  }\n\n  .buttons {\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid #e5e7eb;\n    flex: none;\n    display: flex;\n    column-gap: 10px;\n\n    verdocs-button:last-child {\n      flex: 1;\n    }\n\n    verdocs-button:last-child button {\n      width: 100%;\n    }\n  }\n\n  .suggestions {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 20;\n    max-height: 225px;\n    overflow-y: auto;\n    background: #ffffff;\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);\n\n    .suggestion {\n      display: flex;\n      padding: 6px 12px;\n      align-items: center;\n      flex-direction: row;\n      cursor: pointer;\n\n      svg {\n        width: 28px;\n        height: 28px;\n      }\n\n      .avatar {\n        width: 28px;\n        height: 28px;\n        flex: 0 0 28px;\n        margin-right: 8px;\n        border-radius: 100%;\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n      }\n\n      .name {\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--picker-ink);\n      }\n\n      .destination {\n        font-size: 12px;\n        color: var(--picker-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &:hover {\n        background: var(--picker-accent-tint);\n      }\n    }\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, Element, h, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {convertToE164} from '../../../utils/utils';\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\nconst lockIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></svg>`;\n\ntype TSigningOption = 'none' | 'delegator' | 'name_locked';\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  name_locked: boolean;\n  auth_methods: TRecipientAuthMethod[];\n  passcode: 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  @Element() el: HTMLElement;\n\n  private namesRowEl: HTMLElement;\n  private suggestionsEl: HTMLElement;\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 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   * Whether to show a Cancel button beside Done.\n   */\n  @Prop() showCancel = true;\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() name_locked: boolean = false;\n  @State() auth_methods: TRecipientAuthMethod[] = [];\n  @State() passcode: string = '';\n\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  @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n  @State() authMethodsLoading: boolean = true;\n\n  async componentWillLoad() {\n    this.endpoint.loadSession();\n\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      // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n      this.delegator = this.templateRole.delegator || false;\n      this.name_locked = this.delegator ? false : this.templateRole.name_locked || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n      this.auth_methods = this.templateRole.auth_methods || [];\n      this.passcode = this.templateRole.passcode || '';\n    }\n\n    // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n    // call fails or we stay loading forever.\n    this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n      console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n      return {} as Partial<Record<TEntitlement, IEntitlement>>;\n    });\n\n    this.authMethodsLoading = false;\n    console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n  }\n\n  // Make sure the suggestion list doesn't break the scroll region\n  componentDidRender() {\n    const body = this.el.querySelector('.form-body') as HTMLElement | null;\n    updateScrollFade(body);\n    if (this.suggestionsEl && this.namesRowEl && body) {\n      this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;\n    }\n  }\n\n  @Listen('click', {target: 'document'})\n  handleDocumentClick(e: MouseEvent) {\n    if (this.showSuggestions && !this.el.contains(e.target as Node)) {\n      this.showSuggestions = false;\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      name_locked: this.name_locked,\n      auth_methods: this.auth_methods,\n      passcode: this.passcode,\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  toggleAuthMethod(method: TRecipientAuthMethod) {\n    if (this.auth_methods.includes(method)) {\n      this.auth_methods = this.auth_methods.filter(selected => selected !== method);\n    } else {\n      this.auth_methods = [...this.auth_methods, method];\n    }\n  }\n\n  // TODO: Decide whether we want to keep these mutually-exclusive\n  setSigningOption(option: TSigningOption) {\n    this.delegator = option === 'delegator';\n    this.name_locked = option === 'name_locked';\n  }\n\n  renderPill(label: string, selected: boolean, onClick: () => void, opts: {locked?: boolean; title?: string} = {}) {\n    return (\n      <button\n        type=\"button\"\n        class={{pill: true, selected, locked: !!opts.locked}}\n        aria-pressed={selected ? 'true' : 'false'}\n        disabled={opts.locked && !selected}\n        title={opts.title}\n        onClick={onClick}\n      >\n        {opts.locked && <span class=\"pill-icon\" innerHTML={lockIcon} />}\n        {label}\n      </button>\n    );\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    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n\n    const hasAuthRequirements = this.auth_methods.every(method => {\n      switch (method) {\n        case 'passcode':\n          return !!this.passcode;\n        case 'kba':\n          return !!this.first_name && !!this.last_name;\n        case 'email':\n          return !!this.email;\n        case 'sms':\n          return !!this.phone;\n        default:\n          return true;\n      }\n    });\n\n    const canSubmit = hasBasics && hasAuthRequirements;\n    const hasSMSAuth = !!this.activeEntitlements.sms_auth;\n\n    // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.\n    const verificationOptions: {label: string; value: TRecipientAuthMethod; locked?: boolean}[] = [\n      {label: 'Email OTP', value: 'email'},\n      {label: 'Passcode', value: 'passcode'},\n      {label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth},\n      {label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth},\n      {label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth},\n    ];\n\n    const signingOption: TSigningOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';\n\n    return (\n      <form onSubmit={e => e.preventDefault()} autocomplete=\"off\">\n        <div class=\"form-body-wrap\">\n          <div\n            class=\"form-body\"\n            onScroll={(e: any) => {\n              updateScrollFade(e.target);\n              this.showSuggestions = false;\n            }}\n          >\n            <div class=\"row names\" ref={el => (this.namesRowEl = el)}>\n              <div class=\"field\">\n                <label htmlFor={this.firstNameFieldId}>First name</label>\n                <input\n                  id={this.firstNameFieldId}\n                  name={this.firstNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.first_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleFirstNameChange(e)}\n                />\n              </div>\n              <div class=\"field\">\n                <label htmlFor={this.lastNameFieldId}>Last name</label>\n                <input\n                  id={this.lastNameFieldId}\n                  name={this.lastNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.last_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleLastNameChange(e)}\n                />\n              </div>\n            </div>\n\n            <div class=\"field\">\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                aria-autocomplete=\"none\"\n                value={this.email}\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.email = e.target.value)}\n              />\n            </div>\n\n            {hasSMSAuth && (\n              <div class=\"field\">\n                <label htmlFor={this.phoneFieldId}>\n                  Phone <span class=\"optional\">(optional)</span>\n                </label>\n                <input\n                  id={this.phoneFieldId}\n                  name={this.phoneFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autoComplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.phone}\n                  placeholder=\"+1 (555) 000-0000\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => {\n                    this.phone = convertToE164(e.target.value);\n                  }}\n                />\n              </div>\n            )}\n\n            <div class=\"group\">\n              <div class=\"group-label\">Verification</div>\n              {this.authMethodsLoading ? (\n                <verdocs-spinner size={10} mode=\"dark\" />\n              ) : (\n                <div class=\"pills\">\n                  {verificationOptions.map(option =>\n                    this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {\n                      locked: option.locked,\n                      title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,\n                    }),\n                  )}\n                </div>\n              )}\n\n              {this.auth_methods.includes('passcode') && (\n                <div class=\"passcode\">\n                  <input\n                    id=\"verdocs-passcode\"\n                    name=\"verdocs-passcode\"\n                    type=\"text\"\n                    data-lpignore=\"true\"\n                    autocomplete=\"blocked\"\n                    aria-autocomplete=\"none\"\n                    aria-label=\"Passcode\"\n                    value={this.passcode}\n                    placeholder=\"4-8 digits\"\n                    onFocus={() => (this.showSuggestions = false)}\n                    onInput={(e: any) => (this.passcode = e.target.value)}\n                  />\n                  <span class=\"passcode-hint\">PIN or passcode shared separately with the recipient ahead of time</span>\n                </div>\n              )}\n            </div>\n\n            <div class=\"group\">\n              <div class=\"group-label\">Signing options</div>\n              <div class=\"pills\">\n                {this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none'))}\n                {this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator'))}\n                {this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked'))}\n              </div>\n            </div>\n\n            <div class=\"field\">\n              <label htmlFor=\"verdocs-contact-picker-message\">\n                Message <span class=\"optional\">(optional)</span>\n              </label>\n              <textarea\n                id=\"verdocs-contact-picker-message\"\n                name=\"verdocs-contact-picker-message\"\n                data-lpignore=\"true\"\n                autocomplete=\"blocked\"\n                placeholder=\"Add a message to the invitation\"\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.message = e.target.value)}\n              >\n                {this.message}\n              </textarea>\n            </div>\n          </div>\n          <div class=\"scroll-fade\" />\n          {this.showSuggestions && (\n            <div class=\"suggestions\" role=\"listbox\" ref={el => (this.suggestionsEl = el)}>\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=\"buttons\">\n          {this.showCancel && <verdocs-button label=\"Cancel\" variant=\"text\" size=\"small\" onClick={e => this.handleCancel(e)} />}\n          <verdocs-button label=\"Done\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"verdocs-contact-picker.entry.js","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  --picker-ink: var(--verdocs-body-color, #111827);\n  --picker-ink-2: #374151;\n  --picker-muted: #6b7280;\n  --picker-faint: #9ca3af;\n  --picker-control-border: #d1d5db;\n  --picker-accent: var(--verdocs-link-color, #{$secondary-color});\n  --picker-accent-tint: #f4f5fc;\n  --picker-accent-tint-2: #e6e7f8;\n\n  display: block;\n  font-size: 14px;\n  color: var(--picker-ink);\n  font-family: $verdocs-primary-font;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  form {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  // Fields scroll above a pinned Done button when the host constrains the picker's height; with\n  // no constraint the body simply grows and the fade never shows.\n  .form-body-wrap {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .form-body {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  .scroll-fade {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 36px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease-out;\n    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n  }\n\n  .scrollable:not(.at-end) > .scroll-fade {\n    opacity: 1;\n  }\n\n  .row.names {\n    display: flex;\n    column-gap: 8px;\n    position: relative;\n\n    .field {\n      flex: 1;\n      min-width: 0;\n    }\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n    margin: 0 0 10px 0;\n\n    label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n\n      .optional {\n        color: var(--picker-muted);\n        font-weight: 400;\n      }\n    }\n  }\n\n  input,\n  textarea {\n    width: 100%;\n    font-size: 13px;\n    font-family: inherit;\n    color: var(--picker-ink);\n    background: #ffffff;\n    border: 1px solid var(--picker-control-border);\n    border-radius: 6px;\n    outline: none;\n\n    &:focus {\n      border-color: var(--picker-accent);\n      box-shadow: 0 0 0 2px var(--picker-accent-tint-2);\n    }\n\n    &::placeholder {\n      color: var(--picker-faint);\n      opacity: 1;\n    }\n  }\n\n  input {\n    height: 34px;\n    padding: 0 10px;\n  }\n\n  textarea {\n    height: 56px;\n    padding: 8px 10px;\n    resize: vertical;\n  }\n\n  .group {\n    margin: 2px 0 12px 0;\n\n    .group-label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--picker-ink-2);\n      margin: 0 0 6px 0;\n    }\n  }\n\n  .pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n\n  .pill {\n    all: unset;\n    height: 26px;\n    padding: 0 9px;\n    display: inline-flex;\n    align-items: center;\n    column-gap: 4px;\n    cursor: pointer;\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    white-space: nowrap;\n    border-radius: 999px;\n    color: var(--picker-ink-2);\n    border: 1px solid var(--picker-control-border);\n\n    &:focus-visible {\n      outline: 2px solid var(--picker-accent);\n      outline-offset: 2px;\n    }\n\n    &.selected {\n      color: var(--picker-accent);\n      border-color: var(--picker-accent);\n      background: var(--picker-accent-tint);\n    }\n\n    &.locked {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .pill-icon,\n    .pill-icon svg {\n      width: 12px;\n      height: 12px;\n      display: block;\n    }\n  }\n\n  .passcode {\n    display: flex;\n    align-items: center;\n    column-gap: 8px;\n    margin-top: 8px;\n\n    input {\n      flex: 0 0 120px;\n      width: 120px;\n      height: 30px;\n    }\n\n    .passcode-hint {\n      flex: 1;\n      min-width: 0;\n      font-size: 11px;\n      line-height: 1.35;\n      color: var(--picker-muted);\n      align-self: center;\n    }\n  }\n\n  .buttons {\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid #e5e7eb;\n    flex: none;\n    display: flex;\n    column-gap: 10px;\n\n    verdocs-button:last-child {\n      flex: 1;\n    }\n\n    verdocs-button:last-child button {\n      width: 100%;\n    }\n  }\n\n  .suggestions {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 20;\n    max-height: 225px;\n    overflow-y: auto;\n    background: #ffffff;\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);\n\n    .suggestion {\n      display: flex;\n      padding: 6px 12px;\n      align-items: center;\n      flex-direction: row;\n      cursor: pointer;\n\n      svg {\n        width: 28px;\n        height: 28px;\n      }\n\n      .avatar {\n        width: 28px;\n        height: 28px;\n        flex: 0 0 28px;\n        margin-right: 8px;\n        border-radius: 100%;\n      }\n\n      .details {\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n      }\n\n      .name {\n        font-size: 13px;\n        font-weight: 500;\n        color: var(--picker-ink);\n      }\n\n      .destination {\n        font-size: 12px;\n        color: var(--picker-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &:hover {\n        background: var(--picker-accent-tint);\n      }\n    }\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, Element, h, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';\nimport {formatFullName, getActiveEntitlements, IEntitlement, IProfile, IRecipient, isValidEmail, TEntitlement, TRecipientAuthMethod, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {convertToE164} from '../../../utils/utils';\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\nconst lockIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></svg>`;\n\ntype TSigningOption = 'none' | 'delegator' | 'name_locked';\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  name_locked: boolean;\n  auth_methods: TRecipientAuthMethod[];\n  passcode: 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  @Element() el: HTMLElement;\n\n  private namesRowEl: HTMLElement;\n  private suggestionsEl: HTMLElement;\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 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   * Whether to show a Cancel button beside Done.\n   */\n  @Prop() showCancel = true;\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() name_locked: boolean = false;\n  @State() auth_methods: TRecipientAuthMethod[] = [];\n  @State() passcode: string = '';\n\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  @State() activeEntitlements: Partial<Record<TEntitlement, IEntitlement>> = {};\n  @State() authMethodsLoading: boolean = true;\n\n  async componentWillLoad() {\n    this.endpoint.loadSession();\n\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      // delegator and name_locked are mutually exclusive; delegator takes precedence if both are somehow set\n      this.delegator = this.templateRole.delegator || false;\n      this.name_locked = this.delegator ? false : this.templateRole.name_locked || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n      this.auth_methods = this.templateRole.auth_methods || [];\n      this.passcode = this.templateRole.passcode || '';\n    }\n\n    // Entitlements only gate optional methods like KBA. We need error handling here in case the getActiveEntitlements\n    // call fails or we stay loading forever.\n    this.activeEntitlements = await getActiveEntitlements(this.endpoint).catch(e => {\n      console.warn('[CONTACT PICKER] Unable to load entitlements, continuing with base auth methods only', e);\n      return {} as Partial<Record<TEntitlement, IEntitlement>>;\n    });\n\n    this.authMethodsLoading = false;\n    console.log('[CONTACT PICKER] Loaded entitlements', this.activeEntitlements);\n  }\n\n  // Make sure the suggestion list doesn't break the scroll region\n  componentDidRender() {\n    const body = this.el.querySelector('.form-body') as HTMLElement | null;\n    updateScrollFade(body);\n    if (this.suggestionsEl && this.namesRowEl && body) {\n      this.suggestionsEl.style.top = `${this.namesRowEl.offsetTop + this.namesRowEl.offsetHeight - body.scrollTop + 4}px`;\n    }\n  }\n\n  @Listen('click', {target: 'document'})\n  handleDocumentClick(e: MouseEvent) {\n    if (this.showSuggestions && !this.el.contains(e.target as Node)) {\n      this.showSuggestions = false;\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      name_locked: this.name_locked,\n      auth_methods: this.auth_methods,\n      passcode: this.passcode,\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  toggleAuthMethod(method: TRecipientAuthMethod) {\n    if (this.auth_methods.includes(method)) {\n      this.auth_methods = this.auth_methods.filter(selected => selected !== method);\n    } else {\n      this.auth_methods = [...this.auth_methods, method];\n    }\n  }\n\n  // TODO: Decide whether we want to keep these mutually-exclusive\n  setSigningOption(option: TSigningOption) {\n    this.delegator = option === 'delegator';\n    this.name_locked = option === 'name_locked';\n  }\n\n  renderPill(label: string, selected: boolean, onClick: () => void, opts: {locked?: boolean; title?: string} = {}) {\n    return (\n      <button\n        type=\"button\"\n        class={{pill: true, selected, locked: !!opts.locked}}\n        aria-pressed={selected ? 'true' : 'false'}\n        disabled={opts.locked && !selected}\n        title={opts.title}\n        onClick={onClick}\n      >\n        {opts.locked && <span class=\"pill-icon\" innerHTML={lockIcon} />}\n        {label}\n      </button>\n    );\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    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n\n    // First name is the first focused field so it's our quicksearch matching target.\n    const visibleSuggestions = (this.contactSuggestions || []).filter(\n      suggestion => !this.first_name || suggestion.first_name?.toLowerCase().includes(this.first_name.toLowerCase()),\n    );\n\n    const hasAuthRequirements = this.auth_methods.every(method => {\n      switch (method) {\n        case 'passcode':\n          return !!this.passcode;\n        case 'kba':\n          return !!this.first_name && !!this.last_name;\n        case 'email':\n          return !!this.email;\n        case 'sms':\n          return !!this.phone;\n        default:\n          return true;\n      }\n    });\n\n    const canSubmit = hasBasics && hasAuthRequirements;\n    const hasSMSAuth = !!this.activeEntitlements.sms_auth;\n\n    // TODO: We show non-entitled options disabled so folks know what's possible. We could alternatively hide them.\n    const verificationOptions: {label: string; value: TRecipientAuthMethod; locked?: boolean}[] = [\n      {label: 'Email OTP', value: 'email'},\n      {label: 'Passcode', value: 'passcode'},\n      {label: 'SMS OTP', value: 'sms', locked: !hasSMSAuth},\n      {label: 'KBA', value: 'kba', locked: !this.activeEntitlements.kba_auth},\n      {label: 'ID check', value: 'id', locked: !this.activeEntitlements.id_auth},\n    ];\n\n    const signingOption: TSigningOption = this.delegator ? 'delegator' : this.name_locked ? 'name_locked' : 'none';\n\n    return (\n      <form onSubmit={e => e.preventDefault()} autocomplete=\"off\">\n        <div class=\"form-body-wrap\">\n          <div\n            class=\"form-body\"\n            onScroll={(e: any) => {\n              updateScrollFade(e.target);\n              this.showSuggestions = false;\n            }}\n          >\n            <div class=\"row names\" ref={el => (this.namesRowEl = el)}>\n              <div class=\"field\">\n                <label htmlFor={this.firstNameFieldId}>First name</label>\n                <input\n                  id={this.firstNameFieldId}\n                  name={this.firstNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.first_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleFirstNameChange(e)}\n                />\n              </div>\n              <div class=\"field\">\n                <label htmlFor={this.lastNameFieldId}>Last name</label>\n                <input\n                  id={this.lastNameFieldId}\n                  name={this.lastNameFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.last_name}\n                  onFocus={() => {\n                    // Give the blur event a chance to hide it first if going between first/last\n                    setTimeout(() => {\n                      this.showSuggestions = this.contactSuggestions?.length > 0;\n                    }, 100);\n                  }}\n                  onInput={e => this.handleLastNameChange(e)}\n                />\n              </div>\n            </div>\n\n            <div class=\"field\">\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                aria-autocomplete=\"none\"\n                value={this.email}\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.email = e.target.value)}\n              />\n            </div>\n\n            {hasSMSAuth && (\n              <div class=\"field\">\n                <label htmlFor={this.phoneFieldId}>\n                  Phone <span class=\"optional\">(optional)</span>\n                </label>\n                <input\n                  id={this.phoneFieldId}\n                  name={this.phoneFieldId}\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autoComplete=\"blocked\"\n                  aria-autocomplete=\"none\"\n                  value={this.phone}\n                  placeholder=\"+1 (555) 000-0000\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => {\n                    this.phone = convertToE164(e.target.value);\n                  }}\n                />\n              </div>\n            )}\n\n            <div class=\"group\">\n              <div class=\"group-label\">Verification</div>\n              {this.authMethodsLoading ? (\n                <verdocs-spinner size={10} mode=\"dark\" />\n              ) : (\n                <div class=\"pills\">\n                  {verificationOptions.map(option =>\n                    this.renderPill(option.label, this.auth_methods.includes(option.value), () => this.toggleAuthMethod(option.value), {\n                      locked: option.locked,\n                      title: option.locked ? 'Please contact sales@verdocs.com to enable this feature.' : undefined,\n                    }),\n                  )}\n                </div>\n              )}\n\n              {this.auth_methods.includes('passcode') && (\n                <div class=\"passcode\">\n                  <input\n                    id=\"verdocs-passcode\"\n                    name=\"verdocs-passcode\"\n                    type=\"text\"\n                    data-lpignore=\"true\"\n                    autocomplete=\"blocked\"\n                    aria-autocomplete=\"none\"\n                    aria-label=\"Passcode\"\n                    value={this.passcode}\n                    placeholder=\"4-8 digits\"\n                    onFocus={() => (this.showSuggestions = false)}\n                    onInput={(e: any) => (this.passcode = e.target.value)}\n                  />\n                  <span class=\"passcode-hint\">PIN or passcode shared separately with the recipient ahead of time</span>\n                </div>\n              )}\n            </div>\n\n            <div class=\"group\">\n              <div class=\"group-label\">Signing options</div>\n              <div class=\"pills\">\n                {this.renderPill('None', signingOption === 'none', () => this.setSigningOption('none'))}\n                {this.renderPill('May delegate', signingOption === 'delegator', () => this.setSigningOption('delegator'))}\n                {this.renderPill('Name locked', signingOption === 'name_locked', () => this.setSigningOption('name_locked'))}\n              </div>\n            </div>\n\n            <div class=\"field\">\n              <label htmlFor=\"verdocs-contact-picker-message\">\n                Message <span class=\"optional\">(optional)</span>\n              </label>\n              <textarea\n                id=\"verdocs-contact-picker-message\"\n                name=\"verdocs-contact-picker-message\"\n                data-lpignore=\"true\"\n                autocomplete=\"blocked\"\n                placeholder=\"Add a message to the invitation\"\n                onFocus={() => (this.showSuggestions = false)}\n                onInput={(e: any) => (this.message = e.target.value)}\n              >\n                {this.message}\n              </textarea>\n            </div>\n          </div>\n          <div class=\"scroll-fade\" />\n          {this.showSuggestions && visibleSuggestions.length > 0 && (\n            <div class=\"suggestions\" role=\"listbox\" ref={el => (this.suggestionsEl = el)}>\n              {visibleSuggestions.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=\"buttons\">\n          {this.showCancel && <verdocs-button label=\"Cancel\" variant=\"text\" size=\"small\" onClick={e => this.handleCancel(e)} />}\n          <verdocs-button label=\"Done\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/verdocs-preview_6.entry.js

@@ -126,7 +126,7 @@ VerdocsPreview.style = verdocsPreviewCss();
 const getRoleNames = (template) => ((template === null || template === void 0 ? void 0 : template.roles) || []).map(role => role.name);
 const getRoleIndex = (template, role_name) => Math.max(getRoleNames(template).findIndex(name => name === role_name), 0);
 
-const verdocsSendCss = () => `verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .sender-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-send .sender-field label{font-size:12px;font-weight:500;color:var(--send-ink-2)}verdocs-send .sender-field input{width:100%;height:36px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .sender-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .sender-field .field-error{font-size:12px;color:#cc0000}verdocs-send .notice{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:4px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-ink-2);background:var(--send-accent-tint);border:1px solid var(--send-accent-tint-2)}verdocs-send .notice>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-accent)}verdocs-send .notice>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;
+const verdocsSendCss = () => `verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;min-width:0;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;min-width:0;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.stacked{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1px;white-space:normal}verdocs-send .kv .value.stacked .line{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value.stacked small.line{font-size:12px}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .kv:has(.value.stacked){height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .sender-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-send .sender-field label{font-size:12px;font-weight:500;color:var(--send-ink-2)}verdocs-send .sender-field input{width:100%;height:36px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .sender-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .sender-field .field-error{font-size:12px;color:#cc0000}verdocs-send .notice{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:4px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-ink-2);background:var(--send-accent-tint);border:1px solid var(--send-accent-tint-2)}verdocs-send .notice>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-accent)}verdocs-send .notice>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;
 
 const chevronRightIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
 const chevronLeftIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
@@ -291,15 +291,11 @@ const VerdocsSend = class {
         this.senderName = '';
         this.senderEmail = '';
     }
-    // The sender_name defaults to the custom sender identity if configued/active, the brand
-    // next, and then the org name.
-    brandSenderName() {
-        var _a;
-        const brand = this.brandKey ? this.brands.find(b => b.key === this.brandKey) : this.getDefaultBrand();
-        return (brand === null || brand === void 0 ? void 0 : brand.email_display_name) || (brand === null || brand === void 0 ? void 0 : brand.email_sender_name) || ((_a = this.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
-    }
+    // sender_name and sender_email are the contact for recipient questions and the completion
+    // notice. They default to the signed-in user and are only sent when edited away from that.
+    // The From line of the invitation email is the brand's (then the org's) and is not set here.
     effectiveSenderName() {
-        return this.senderName || this.brandSenderName();
+        return this.senderName || this.senderDefaults.name;
     }
     effectiveSenderEmail() {
         return this.senderEmail || this.senderDefaults.email;
@@ -308,7 +304,7 @@ const VerdocsSend = class {
         const name = this.senderName.trim();
         const email = this.senderEmail.trim();
         return {
-            sender_name: name && name !== this.brandSenderName() ? name : undefined,
+            sender_name: name && name !== this.senderDefaults.name ? name : undefined,
             sender_email: email && email !== this.senderDefaults.email ? email : undefined,
         };
     }
@@ -589,7 +585,7 @@ const VerdocsSend = class {
         return (h("div", { class: "detail" }, this.renderDetailHeader('Sender'), this.renderDetailBody([
             h("div", { class: "sender-field" }, h("label", { htmlFor: `${this.containerId}-sender-name` }, "Name"), h("input", { id: `${this.containerId}-sender-name`, type: "text", value: this.effectiveSenderName(), disabled: this.sending, onInput: (e) => (this.senderName = e.target.value) })),
             h("div", { class: "sender-field" }, h("label", { htmlFor: `${this.containerId}-sender-email` }, "Email"), h("input", { id: `${this.containerId}-sender-email`, type: "email", value: this.effectiveSenderEmail(), disabled: this.sending, onInput: (e) => (this.senderEmail = e.target.value) }), !validEmail && h("div", { class: "field-error" }, "Enter a valid email address.")),
-            h("div", { class: "notice" }, h("span", { class: "icon", innerHTML: infoIcon }), h("div", null, "The name is what recipients see as the sender, for example \"Sentry <notifications@verdocs.com>\", and starts as your brand's name. The email is where status updates about this envelope are sent and what the certificate shows as the sender. Delivery from your own address needs a custom sender set up under Settings.")),
+            h("div", { class: "notice" }, h("span", { class: "icon", innerHTML: infoIcon }), h("div", null, "Specify where envelope-completed email notifications and \"Ask a Question\" submissions are delivered. To customize the \"From\" address for email notifications, please configure those in", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/brands`, target: "_blank", rel: "noopener" }, "Brands", h("span", { class: "icon", innerHTML: externalLinkIcon })), ' ', ".")),
         ]), this.renderDoneButton()));
     }
     renderNotificationsView() {
@@ -638,7 +634,7 @@ const VerdocsSend = class {
                 const optionLabels = this.getRecipientOptionLabels(completed);
                 return (h("button", { type: "button", class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, onClick: e => this.handleClickRole(e, role) }, h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), h("span", { class: "who" }, h("span", { class: "role-name" }, role.role_name), assigned ? (h("span", { class: "who-detail" }, formatFullName(completed), " \u00B7 ", completed.email)) : (h("span", { class: "who-detail configure" }, "Configure recipient")), optionLabels.length > 0 && (h("span", { class: "options" }, optionLabels.map(label => (h("span", { class: "pill" }, label)))))), h("span", { class: "chevron", innerHTML: chevronRightIcon })));
             }),
-        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('sender'), disabled: this.sending }, h("span", { class: "key" }, "Sender"), h("span", { class: "value" }, this.effectiveSenderName() || this.effectiveSenderEmail(), this.effectiveSenderName() && this.effectiveSenderEmail() ? h("small", null, " \u00B7 ", this.effectiveSenderEmail()) : null), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
+        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('sender'), disabled: this.sending }, h("span", { class: "key" }, "Sender"), h("span", { class: "value stacked" }, h("span", { class: "line" }, this.effectiveSenderName() || this.effectiveSenderEmail()), this.effectiveSenderName() && this.effectiveSenderEmail() ? h("small", { class: "line" }, this.effectiveSenderEmail()) : null), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {