@verdocs/web-sdk 6.10.7 → 6.13.0

package/dist/verdocs-web-sdk/p-301f0247.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["verdocsContactPickerCss","addrBookIcon","lockIcon","VerdocsContactPicker","constructor","hostRef","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","body","el","querySelector","updateScrollFade","suggestionsEl","namesRowEl","style","top","offsetTop","offsetHeight","scrollTop","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","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","toLowerCase","key","picture","alt","src","variant"],"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"],"mappings":"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","ignoreList":[]}